springboot+vue+mybatisplus项目实战-学生成绩管理系统14
  px8Y25gMnWbQ 2023年12月07日 28 0


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);
}
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月07日 0

暂无评论

推荐阅读
px8Y25gMnWbQ