一般来说我们都是直接写axios的请求，每个请求都要写，到时候的维护不方便，不如封装好，这样改动的话不至于一发动全身
我写了个两个js文件一个是http.js 一个是 api.js
http.js里面主要写了请求方法 api.js 里面主要是写的 请求的路由及方法
我写了一个增删改查的demo
看代码 http.js 文件里的
复制代码
import axios from ‘axios‘;
axios.defaults.baseURL="http://127.0.0.1:8000/";
axios.defaults.timeout=10000;
axios.defaults.headers.post[‘Content-Type‘] = ‘application/json‘;
axios.defaults.headers.put[‘Content-Type‘] = ‘application/json‘;
// export function get_axios(url,params){
// axios.get(url,{params:params})
// }
// 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,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,data)
.then(res=>{
console.log("封装信息的的res",res)
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
}
// DELETE
export function axios_delete(url,params){
return new Promise(
(resolve,reject)=>{
axios.delete(url,{params:params})
.then(res=>{
console.log("封装信息的的res",res)
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
}
复制代码
接下来是 api.js 的代码
import {axios_get,axios_post,axios_put,axios_delete} from ‘./http.js‘
export const send_get = p => axios_get("app02/books/",p) //增
export const send_post = p => axios_post("app02/books/",p) //删
export const send_put = p => axios_put("app02/books/",p) //改
export const send_delete = p => axios_delete("app02/books/",p) //查
放入写的前端页面吧虽然很难看，但是逻辑还算是清晰
XXX.vue
Vue
后台我用的是python中的Django框架
这是我的model.py
model.py
接下来是序列化
serializer.py
路由就不写了，太简单了直接吧views里面的代码放过来吧
Views.py