0 环境
- 系统环境：win10
- 前端编辑器：vscode
- 依赖：axios
1 axios安装
1 方式1(命令操作)
// 安装axios(创建的vue项目的根目录)
npm install axios;
2 方式2(可视化界面操作)
❝「快捷方式(win+r)」 --> 「cmd」 --> 「输入vue ui」 --> 「自动会跳转8000端口(默认)」
❞
2 封装axios
❝可以配合全局拦截(请求拦截+响应拦截) 自行搜索
❞
1 新建http.js
2 curd封装
import axios from "axios";
import qs from "qs";
let baseURL = "http://127.0.0.1:8080/";
// let baseURL = "";
// const test = {} 替换 export default
export default {
post(url, data) {
return axios({
method: "post",
url: `${baseURL}${url}`,
data: qs.stringify(data),
timeout: 10000
});
},
put(url, data) {
return axios({
method: "put",
url: `${baseURL}${url}`,
data: qs.stringify(data),
timeout: 10000
});
},
delete(url, data) {
return axios({
method: "delete",
url: `${baseURL}${url}`,
// url,
data: qs.stringify(data),
timeout: 10000,
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
});
},
get(url, params) {
return axios({
method: "get",
url: `${baseURL}${url}`,
params: params, // get 请求时带的参数
timeout: 10000
});
}
}
3 引用
1 局部引用
- 页面引用
// 引入http.js
import http from '../utils/http'
abc(){
// 例如 md?articleId=1
var url = "后端路径";
// 参数
var params = {
id: id,
key: value
}
// 比如在方法中调用get
http.get(url, params).then(resp => {
内容
})
}
2 全局引用(main.js)
❝ ❞
- main.js
import api from '../utils/http' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上
- 具体页面方法
this.$api.get()
// 若是不行 在http.js 将export default 替换为 const test = {}
this.$api.test.get()
3 全局引用(store中配置)
❝只是为了学习一下store actions
❞
- store index.js
actions: {
get(_, params){
// var url = reqParams.url;
// var params = reqParams.params;
// console.log("url ==>",url);
console.log("params ==>",params);
return http.get(params.url, params.params);
},
async post(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return await http.post(url, params);
},
put(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return http.put(url, params);
},
delete(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return http.delete(url, params);
}
}
- 具体页面
demo(id){
var url = "test/adc/";
var params = {
id: id
}
var data = {
url: url,
params: params
}
this.$store.dispatch("get", data).then(resp => {
console.log("resp -->", resp);
})
}
