config
constants.js
//定义的常量
//配置的,请求接口的前部基础路径
export const BASE_URL = process.env.VUE_APP_BASE_URL
//存用户的key名称
export const USER_INFO_KEY = 'access-user'
//存token的key名称
export const USER_TOKEN_KEY = 'access-token'
//存页签的key名称
export const USER_TABS_KEY = 'access-tabs'
//计算表格高度时减去的部分,即头部的高度
export const TOP_HEIGHT = 260;
menuList.js
//菜单左侧列表
const menuList = [
{
path: '/index', //路径
componentName:'Index', //组件名
menuName: '首页', // 菜单标题
iconName:'el-icon-s-home' // 图标
},
{
path: '/student/manage',
componentName: 'StudentManage',
menuName: '学生管理',
iconName:'el-icon-user-solid'
},
{
path: '/score/manage',
componentName: 'ScoreManage',
menuName: '成绩管理',
iconName:'el-icon-s-flag'
}
]
export default menuList
network
request.js
import axios from "axios"; //引入axios
import qs from 'qs'; //引入序列化
import {BASE_URL, USER_TOKEN_KEY} from '@/config/Constants' //引入常量
import {MessageBox,Message} from "element-ui"; //引入饿了么控件,部分,弹出框,提示框
import {clearAll, getItem} from "@/storage"; //引入本地化存储的方法
import Nprogress from 'nprogress' //引入进度条
//默认路径
axios.defaults.baseURL = BASE_URL; //将访问地址常量,赋值给axios的默认地址
axios.defaults.timeout = 1000 * 60 * 5; //单位毫秒
axios.defaults.headers["Content-Type"] = "application/json"; //http头部
//给axios实例添加请求、拦截器
function addInterceptor(Instance) {
//请求拦截器
Instance.interceptors.request.use(config=>{
//开启进度条
Nprogress.start();
//获取token,并且加入到请求头中
let token = getItem(USER_TOKEN_KEY);
if(token){
//将token加入请求头的
config.headers['Authorization'] = token;
}
//返回配置
return config;
},error => {
//请求失败时,弹出框
console.log("请求发送失败",error);
MessageBox.alert("请求发送失败","错误提示");
});
//响应拦截器
Instance.interceptors.response.use(result=>{
//关闭进度条
Nprogress.done();
//脱壳
let res = result.data;
//
if(res.ok){
//响应正常时,
return res;
} else {
//响应异常时
if(res.code && res.code === 520){
//权限不足,跳转登录页面
clearAll();
//被前置守卫拦截,跳转至登录页
window.location.reload();
}else {
//其他错误
Message.error(res.msg);
return Promise.reject(res.msg);
}
}
},error => {
//关闭进度条
Nprogress.done();
console.log("服务器响应失败",error);
//对错误统一的提示
Message.error("服务器响应失败");
return Promise.reject("服务器响应失败");
})
}
//用来发送get请求的axios实例
let getInstance = axios.create();
addInterceptor(getInstance);
//用来发送post请求的axios实例
let formPostInstance = axios.create({
method: 'post',
headers: {
//表单模式
"Content-Type": "application/x-www-form-urlencoded"
},
//id=1&name=abc&age=4
transformRequest: [function (data, headers) {
//console.log("data:",data);
//序列化 id=1&name=abc&age=4
return qs.stringify(data)
}]
});
addInterceptor(formPostInstance);
//用来发送post请求的axios实例
let appJsonPostInstance = axios.create({
method: 'post'
});
addInterceptor(appJsonPostInstance);
/**
* 格式
* { "url":"/abc",params:{id:1}} 或者 { url:"/abc?id=1"}
* @param config
* @returns {Promise<AxiosResponse<T>>}
*/
export function doGet(config) {
return getInstance(config);
}
/**
* 格式
* { "url":"/abc", data:{id:1}}
* @param config
* @returns {Promise<AxiosResponse<T>>}
*/
export function formPost(config) {
return formPostInstance(config);
}
/**
* 格式
* { "url":"/abc", data:{id:1}}
* @param config
* @returns {Promise<AxiosResponse<T>>}
*/
export function appJsonPost(config) {
return appJsonPostInstance(config);
}