Vue的封装

封装的意义提到代码的可读性提⾼代码的可维护性减少代码的书写封装// src/api/http.jsimport axios from 'axios'axios.defaults.baseURL = "http://127.0.0.1:8000/"// axios.defaults.baseURL = "http://172.16.240.175/:8000/"//全局设置⽹络超时axios.def

白辰丶

3989人浏览 · 2020-11-25 21:14:52

白辰丶 · 2020-11-25 21:14:52 发布

封装的意义

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

封装

// 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)
})
},
}

跨域请求

浏览器的同源策略：⾮同源的⻚⾯之间，⽆法获取数据
同源⼀般只⼀下三个东⻄相同：
协议相同
域名相同
端⼝相同
同源策略的⽬的：是为了保证⽤户信息的安全，防⽌恶意的⽹站窃取数据。
同源策略的解决办法：
jsonp
CORS
代理解决跨域

vue组件间通信

1. ⽗组件

<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>

2.⼦组件

<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并赋值。

send_fu(){
console.log(this.data)
this.$emit("change_fu",this.data)
}
}
}
</script>

正常实现的vue代码

子vue：

<template>
  <div>
      <h3>你好美</h3>
      <p>{{title}}</p>
      <button @click="change_fu">给父组件变</button>    
      
  </div>
</template>

<script>
export default {
    props:['title'],    //子类给父类传参
    data() { 
        return {
         data:'这是给父组件的黄金'   
        }
    },
    methods: {
        change_fu(){ 
        this.$emit('zifunc',this.data)     //zifunc是设置在父类共享的方法，数据赋值给父类
    }
    },
}
</script>

<style>

</style>

父类vue：

<template>
  <div>
      <MyZi :title="title" @zifunc='get_zi'></MyZi>      
      <!-- 展示子类的所有信息，@zifunc为子类this.$emit('zifunc',this.data) 传过来的函数，
      点击get_zi将title1的值赋值给子组件的data -->
      <h3>你好帅</h3>
      {{title1}}      
  </div>
</template>

<script>
import MyZi from '../components/zi'      //导入子vue的所有信息
export default {
    components:{
        MyZi          //定义名称
    },
    data() {
        return {
            title:'你害怕大雨吗？',
            title1:'没钱'
        }
    }, 
    methods: {
        get_zi(value){    //vvalue相当于子类传过来的参数data
            this.title1=value   //点击子类传过来的方法将value赋值给title1
        }
    },
}
</script>

<style>

</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^