springboot+vue+mybatisplus项目实战-学生成绩管理系统14

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);
}