src文件下创建http文件夹创建index.js和request.js
index.js:
import axios from 'axios'
/* 创建一个axios实例化对象instance */
var instance = axios.create({
/* 基础路径 */
baseURL: 'https://************************/v1/',
/* 设置超时时间 */
timeout: 3000
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token
// 如果存在，则统一在http请求的header都加上token，
// 这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
localStorage.token && (config.headers.Authorization = localStorage.token)
return config
},
error => {
return Promise.error(error)
})
// 响应拦截器
axios.interceptors.response.use(response => {
return response
}, error => {
return error
})
/* 参数methdos默认值是get，path表示具体路径，post需要给data传参默认值是空对象，
get请求需要给params传参默认值是空对象 */
export const httpServe = (path, params = {}, method = 'get', data = {}) => {
return new Promise((resolve, reject) => {
instance({
url: path,
params,
method,
data
})
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
/*这种调用的写法 必须要按照顺序 */
/* get请求的调用方法 */
/* httpServe('users',{name:'zhangsan'}) */
/* post请求的调用方法 */
/* httpServe('login',{},'post',{username:'admin',password:'123123'}) */
request.js:
import {httpServe} from '@/http/index.js'
/* 登录 */
export const loginPost = (path,data)=> httpServe(path,{},'post',data);
/* 左侧菜单列表 */
export const menusGet = (path,params)=> httpServe(path,params);
/* 用户列表 */
export const usersGet = (path,params)=> httpServe(path,params);
/* 添加用户 */
export const addusersPost = (path,data)=> httpServe(path,{},'post',data);
修改之前LoginView.vue:
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
/* el-form组件的validate方法 在回调函数中
如果valid为true 则表示表单校验通过
为false则表示不通过 */
if (valid) {
loginPost('login',{
username:this.ruleForm.username,
password:this.ruleForm.password
})
.then(res=>{
let {data,meta} = res.data;
if(meta.status==200){
this.$message.success(meta.msg);
/* 当登录成功 把用户名和token存入本地缓存中方便后续使用 */
localStorage.username = data.username;
localStorage.token = data.token;
/* 登录成功后，过一秒跳转首页 */
setTimeout(()=>{
this.$router.push({name:'index'})
},1000)
}else{
/* 用户名密码不正确的时候出现警告 */
this.$message.warning(meta.msg);
}
})
.catch(err=>{
console.log(err)
})
} else {
this.$message.error('您输入的有误');
}
});
},
修改之前IndexView.vue:
methods: {
getNavList: function () {
menusGet("menus")
.then((res) => {
let { data, meta } = res.data;
/* 数据获取成功 */
if (meta.status == 200) {
this.navList = data;
/* 动态添加路由菜单 */
/* 因为第一个路由是默认，所以我们从第二个路由开始动态添加 */
/* slice不会改变原数据 而splice会 */
localStorage.arrRoute = JSON.stringify(this.navList.slice(1));
/* 使用minixs中的添加动态路由的公共方法 */
this.createRouteFn();
} else {
/* 防止数据获取失败，给出相应的后台提示 */
this.$message.error(meta.msg);
}
})
.catch((err) => {
console.log(err);
});
},
},
修改之前UsersView.vue:
getTableDate() {
usersGet("users", {
/* 当前页 */
pagenum: this.currentPage,
/* 一页展示多少条 */
pagesize: this.pagesize,
})
.then((res) => {
let { data, meta } = res.data;
/* 当状态为200表示数据获取成功 */
if (meta.status == 200) {
/* 把数据给到tableData数组中 */
this.tableData = data.users;
/* 把数据中总条数给到total */
this.total = data.total;
} else {
/* 如果获取数据有误，给出相应提示 */
this.$message.error(meta.msg);
}
})
.catch((err) => {
this.$message.error(err);
});
},