vue考试系统后台管理项目-接口封装调用

 api接口封装调用

目录

 api接口封装调用

新建api/axiosFun.js

1.引入axios，loading加载方法，MessageBox组件弹窗提示

2.登录请求方法封装 

3.其他通用公共方法封装

 4.下载文件excel方法封装

 5.方法导出

 新建api/userMG.js

组件中接口引入使用

---

• 新建api/axiosFun.js

1.引入axios，loading加载方法，MessageBox组件弹窗提示

import axios from 'axios';
import { showLoading, hideLoading } from '../utils/loading';
import {MessageBox} from 'element-ui';

2.登录请求方法封装 

// 登录请求方法
const loginreq = (method, url, params) => {
  return axios({
    method: method,
    url: url,
    headers: {
      'Content-Type': 'application/json',
    },
    withCredentials: true,
    data: params,

  }).then(res => {
    if(res.data.code===403 || res.data.code===401){
      localStorage.clear();
    }else{
      return res.data;
    }
  }).catch(error => {
    MessageBox.alert("登录失败，请检查网络！", "提示", {
      confirmButtonText: "确定",
      callback: () => {
        window.location.reload();
      }
    }).then(r => this.load(false));
  });
};

3.其他通用公共方法封装

// 通用公用方法
const req = (method, url, params) => {
  showLoading();
  return axios({
    method: method,
    url: url,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': JSON.parse(localStorage.getItem("userdata")).token
    },
    data: params,
  }).then(res => {
    hideLoading();
    if(res.data.code===403 || res.data.code===401){
      localStorage.clear();
    }else{
      return res.data;
    }
  }).catch(error => {
    hideLoading();
  });
};

 4.下载文件excel方法封装

const downloadExcel = (method, url, params) =>{
  return axios({
    method: method,
    url: url,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': JSON.parse(localStorage.getItem("userdata")).token
    },
    responseType: 'blob',
    data: params
  })
};

 5.方法导出

export {
  loginreq,
  req,
  downloadExcel
}

 完整代码：

import axios from 'axios';
import { showLoading, hideLoading } from '../utils/loading';
import {MessageBox} from 'element-ui';
// 登录请求方法
const loginreq = (method, url, params) => {
  return axios({
    method: method,
    url: url,
    headers: {
      'Content-Type': 'application/json',
    },
    withCredentials: true,
    data: params
  }).then(res => {
    if(res.data.code===403 || res.data.code===401){
      localStorage.clear();
    }else{
      return res.data;
    }
  }).catch(error => {
    MessageBox.alert("登录失败，请检查网络！", "提示", {
      confirmButtonText: "确定",
      callback: () => {
        window.location.reload();
      }
    }).then(r => this.load(false));
  });
};
// 通用公用方法
const req = (method, url, params) => {
  showLoading();
  return axios({
    method: method,
    url: url,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': JSON.parse(localStorage.getItem("userdata")).token
    },
    data: params,
  }).then(res => {
    hideLoading();
    if(res.data.code===403 || res.data.code===401){
      localStorage.clear();
    }else{
      return res.data;
    }
  }).catch(error => {
    hideLoading();
  });
};

const downloadExcel = (method, url, params) =>{
  return axios({
    method: method,
    url: url,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': JSON.parse(localStorage.getItem("userdata")).token
    },
    responseType: 'blob',
    data: params
  })
};

export {
  loginreq,
  req,
  downloadExcel
}

•  新建api/userMG.js

import axios from 'axios';
import {
  downloadExcel,
  loginreq,
  req
} from './axiosFun';

// let url = "http://xxxxxxxx" //线上地址
// let url = "http://xxxxxx" //测试地址
let url = "http://xxxxxxxxxx" //本地地址

export const baseUrl = url;

/**************登录接口*********************/
export const login = (params) => {
  return loginreq("post", url + "/sysUser/login", params)
};
//修改密码
export const updatePwd = (params) => {
  return req("post", url + "/sysUser/updatePwd", params)
};
// 获取用户菜单
export const menu = (id) => {
  return axios.get(url + "/sysMenu/menuTreeByUserId?id=" + id, {
    headers: {
      'Authorization': JSON.parse(localStorage.getItem("userdata")).token
    }
  }).then(res => res.data)
};
..................

• 组件中接口引入使用

1.登录接口调用：

引入login登录接口路径

import { login } from "../api/userMG";

 使用：

this.ruleForm是一个账号密码对象

login(this.ruleForm).then(res=>{
    if(res.code == 200){
       //信息获取
    }
})

2.列表数据获取

import {

  getUserNameList,//用户列表
} from "../../api/userMG";

getUserNameList({name:value}).then(res=>{
          if(res.code == 200){

          }
})

 3.get方式接口使用

获取菜单数据

import { menu } from "../api/userMG";

    // 获取菜单的数据
    menu(JSON.parse(localStorage.getItem("userdata")).id)
      .then(res => {
        // console.log(res, "获取菜单的数据");
        if (res.code == 200) {
          this.allmenu = res.data;
        } else {
          this.$message.error(res.msg);
          return false;
        }
    }).catch(err => {
        this.$message.error("菜单加载失败，请稍后再试！");
     });

 上一篇文章 ：

vue考试系统后台管理项目-登录、记住密码功能_船长在船上的博客-CSDN博客

项目功能持续迭代...........