0
0

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

⭐️⭐️⭐️ 作者：船长在船上
🚩🚩🚩 主页：来访地址船长在船上的博客
🔨🔨🔨 简介：CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。

🔔🔔🔔 感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主。如有疑问可以留言、评论，看到后会及时回复。

上一篇文章 ：

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

考试系统后台管理项目介绍：

技术选型：Vue2.0+Element-ui

项目功能介绍：

  • 账户信息模块：菜单权限、角色权限设置、角色权限分配、账号设置、公司分组
  • 考试管理模块：新增/编辑/删除考试试题、成绩查看、阅卷评分、成绩记录、成绩导出
  • 题库管理模块：批量导入考题、批量删除考题、编辑录入考题、新增/编辑/删除考试分类

本项目会耗时一周到两周来完成，最近要又要辛苦加班了，项目给的时间不多，程序员太不容易了，做完项目调休好好休息一下！

此时此刻，记录一下项目实现。

发布上一篇距离今天有4天了，博主一直开发、测试别的模块功能，今天更新关于项目非常重要的一步，那就是请求后端数据调用接口部分内容，对于api接口封装处理我整理一下，分享给大家，可参考使用。

api接口封装调用

  • 新建api/axiosFun.js

封装的方法分为了3个部分，登录、文件下载、公用的方法分开来写

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

1.导入封装好的接口方法 downloadExcel，loginreq，req

2.定义线上地址、测试地址、本地地址，当然也可以写成以下写法：

let url = process.env.VUE_APP_API

如果用这种写法的话，就要新建.env文件，要创建3种类型的文件（区分线上地址、测试地址、本地地址）

例如：

  • .env.development线上环境地址配置；.
  • env.test测试环境地址配置；
  • .env.development本地环境地址配置

本地环境地址配置：

NODE_ENV='development'
VUE_APP_FLAG = 'dev'

VUE_APP_API='http://192.168.2.00:9010'
VUE_APP_IMGAPI='http://36.134.22.00:8088'
VUE_APP_WEBSOCKET='ws://192.168.2.00:9010'

outputDir = dev

这种配置主要是为了项目打包可以很方便分开测试包，正式包；****后面会发布相应的文章介绍

3.注意接口使用的写法：get，post请求方式

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博客

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

👉👉👉 欢迎来访船长在船上的博客，文章持续更新；**项目功能持续迭代，项目开发测试完成会把完整代码上传码云，请及时收藏关注，方便查看。 **

标签： vue.js javascript 前端
本文转载自: https://blog.csdn.net/SmartJunTao/article/details/126737705
版权归原作者 船长在船上 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue考试系统后台管理项目-接口封装调用”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

大数据新视界 -- 大数据大厂之 Hive 数据导入：多源数据集成的策略与实战（上）（3/ 30）

华三防火墙开启web登录访问配置

PostgreSQL内核源码分析 逻辑复制基本流程，发布订阅创建背后的故事

MySQL系列之远程管理（安全）

自己服务器上搭建虚拟专用网络(超级详细图文并茂,从安装到连接，PS：本文章仅作学术交流使用)

Django测试工具项目常见问题解决方案

【idea技巧篇】idea的类注释和方法注释模版自定义设置

文章导航