Vue封装

最新推荐文章于 2024-07-04 18:18:28 发布

原创最新推荐文章于 2024-07-04 18:18:28 发布 · 置顶 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

本文围绕Vue展开，介绍了封装的意义，包括提高代码可读性、可维护性和减少代码书写。阐述了跨域请求，分析浏览器同源策略及解决办法，如jsonp、CORS和代理。还详细讲解了Vue组件间通信，涵盖父子组件调用、传参的具体实现方式。

封装的意义

提高代码的可读性
提高代码的可维护性
减少代码的书写

封装

// src/api/http.js

import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000/"
// axios.defaults.baseURL = "http://172.16.240.175/:8000/"

//全局设置⽹络超时
axios.defaults.timeout = 10000;

//设置请求头信息
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统⼀在http请求的header都加上token， 不⽤ 每次请求都⼿ 动添加了
    const token = localStorage.getItem("token")
    // console.log(token)
    if (token) {
      config.headers.Authorization = 'JWT ' + token
    }
    return config;
  },
  error => {
    return Promise.error(error);
  })
  
// 响应拦截器
axios.interceptors.response.use(
  // 请求成功
  // res => res.status === 200 ? Promise.resolve(res) :
  Promise.reject(res),
  res => {
    if (res) {
      //加上201的原因是因为：modelviewset的post请求添加成功后返回的状态码是201
      if (res.status === 200 || res.status === 201) {
        return Promise.resolve(res);
      }
    }
  },
  // 请求失败
  error => {
    if (error.response) {
      // 判断⼀下返回结果的status == 401？ ==401跳转登录⻚⾯。 ！=401passs
      // console.log(error.response)
      if (error.response.status === 401) {
        // 跳转不可以使⽤this.$router.push⽅法、
        // this.$router.push({path:'/login'})
        window.location.href = "http://127.0.0.1:8888/"
      } else {
        // errorHandle(response.status, response.data.message);
        return Promise.reject(error.response);
      }
      // 请求已发出，但是不在2xx的范围
    } else {
      // 处理断⽹的情况
      // eg:请求超时或断⽹时，更新state的network状态
      // network状态在app.vue中控制着⼀个全局的断⽹提示组件的显示隐藏
      // 关于断⽹组件中的刷新重新获取数据，会在断⽹组件中说明
      // store.commit('changeNetwork', false);
      return Promise.reject(error.response);
    }
  });
  
// 封装xiaos请求
// 封装get请求
export function axios_get(url, params) {
  return new Promise(
    (resolve, reject) => {
      axios.get(url, {
          params: params
        })
        .then(res => {
          console.log("封装信息的的res", res)
          resolve(res.data)
        }).catch(err => {
          reject(err.data)
        })
    }
  )
}

// 封装post请求
export function axios_post(url, data) {
  return new Promise(
    (resolve, reject) => {
      // console.log(data)
      axios.post(url, JSON.stringify(data))
        .then(res => {
          // console.log("封装信息的的res", res)
          resolve(res.data)
        }).catch(err => {
          reject(err.data)
        })
    }
  )
}

// 封装put请求
export function axios_put(url, data) {
  return new Promise(
    (resolve, reject) => {
      // console.log(data)
      axios.put(url, JSON.stringify(data))
        .then(res => {
          // console.log("封装信息的的res", res)
          resolve(res.data)
        }).catch(err => {
          reject(err.data)
        })
    }
  )
}

// 封装delete请求
export function axios_delete(url, data) {
  return new Promise(
    (resolve, reject) => {
      // console.log(data)
      axios.delete(url, {
          params: data
        })
        .then(res => {
          // console.log("封装信息的的res", res)
          resolve(res.data)
        }).catch(err => {


          reject(err.data)
        })
    }
  )
}
export default axios; //⼀定要导出函数

使用

// src/api/api.js

//将我们http.js中封装好的 get,post.put,delete 导过来
import { axios_get, axios_post, axios_delete, axios_put } from './http.js'
export const qn_token_get = p => axios_get("/oauth/qntoken/", p) // 获取七⽜云
token
export const section_add = p => axios_post("/course/section/", p) // 获取七⽜云
token

// src/components/qiniu.vue

<script>
//导⼊axios函数
import {qn_token_get,section_add} from './axios_api/api'

methods: {
	 changeFile(e){
		 // 获取⽂件
		 this.file = e.target.files[0];
	 },
	 gettoken(){
	 //直接使⽤导⼊的axios函数
		 qn_token_get().then(res=>{
			 return this.token = res.data.uptoken
			 console.log(this.token)
		 })
	 },
}
</script>

跨域请求

浏览器的同源策略： 非同源的页面之间，无法获取数据
同源一般指以下三个东西相同：

协议相同
域名相同
端口相同

**同源策略的目的：**是为了保证用户信息的安全，防止恶意的网站窃取数据。
同源策略的解决办法：

jsonp
CORS
代理解决跨域

vue组件间通信

父组件

<template>
	 <div>
		 <!-- 展示⼦组件的内容 -->
		 <!-- :后的时⼦组件⾥⾯接收的名字，=后⾯的是⽗组件的名字 -->
		 <!-- @后⾯的是⼦组件⾥定义的名字，=是⽗组件⾥获取参数的名字 -->
		 <zi :str="str" @change_fu="getzi" ></zi>
		 <button @click="change_zi()">修改⼦组件的数据</button>
		 {{data}}
		 <!-- {{str}} -->
	 </div>
</template>
<script>
import zi from './zi1'

export default {
	 name:"fu1.vue",
	 components:{zi},
	 data() {
		 return {
			 str:'',
			 data:{}
	 		}
	 },
	 methods:{
		 change_zi(){
		 	this.str = "⽼⼦让你，你就得⼲啥，谁让我是你爸爸"
	 	},
		 getzi(val){
		 console.log(val)
		 this.data = val
 		}
 	}
}
</script>

子组件

<template>
	 <div>
		 <li>
			 <ul>fghajkndlkajdakjd,⼤家上课⽅便那⽔库⾥，减法计算</ul>
			 {{str}}
			 <button @click="send_fu()">把数据传递给⽗组件</button>
		 </li>
	 </div>
</template>
<script>
export default {
	name:"zi1",
	props:["str"],
	data() {
		return {
			data:{"name":"PP"}
		}
	},
	methods:{
		send_fu(){
			console.log(this.data)
			this.$emit("change_fu",this.data)
		}
	}
}
</script>