python封装api给vue_vue的封装

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

//导⼊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组件间通信

父组件

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

}

}

}

子组件

export default {

name:"zi1",

props:["str"],

data() {

return {

data:{"name":"PP"}

}

},

methods:{

send_fu(){

console.log(this.data)

this.$emit("change_fu",this.data)

}

}

}

父子组件的调用

import导入子组件

compants这测子组件

注册的子组件当做标签来使用

子组件给父组件传参

父组件里的子标签里要写上要传递的数据(： 子组件的参数名字=父组件的参数名字 )

在子组件里注册参数(pros)

使用父组件传过来的参数

父组件给子组件传参

子组件里先用特定的方法来把数据传递给父组件(this.$emit(“方法的名字”，要传递的数据))

父组件的子标签里来接收数据(@子组件的方法 = 父组件的方法)

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