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/http.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>

??组件的调?：

• Import 导??组件

• compants注册?组件

• 注册的?组件当做标签来使?

?组件给?组件传参：

• ?组件?的?标签?写上要传递的数据 （：?组件的参数名字=?组件的参数名字）

• 在?组件?注册参数（pros）

• 使??组件传过来的参数

?组件给?组件传参：

• ?组件?先?特定的?法来把数据传递给?组件（ this.$emit("?法的名字"，要传递的数据) ）

• ?组件的?标签?来接收数据（@?组件的?法 = ?组件的?法）

• 在methods?接收传过来的val并赋值。

•  

Vue的封装

原文：https://www.cnblogs.com/Aurora-y/p/14035158.html