Vue + Element UI 前端篇（三）：工具模块封装

Vue + Element UI 实现权限管理系统 前端篇（三）：工具模块封装 

封装 axios 模块

封装背景

使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。

封装要点

  • 统一 url 配置
  • 统一 api 请求
  • request (请求) 拦截器，例如：带上token等，设置请求头
  • response (响应) 拦截器，例如：统一错误处理，页面重定向等
  • 根据需要，结合 Vuex 做全局的 loading 动画，或者错误处理
  • 将 axios 封装成 Vue 插件使用

文件结构

在 src 目录下，新建一个 http 文件夹，用来存放 http 交互 api 代码。

config.js：axios 默认配置，包含基础路径等信息。
axios.js：二次封装 axios 模块，包含拦截器等信息。
interface.js ：请求接口汇总模块，聚合模块 API。
index.js：将 axios 封装成插件，按插件方式引入。

config.js

复制代码

export default {method: 'get',// 基础url前缀baseURL: 'http://localhost:8080/',// 请求头信息headers: {'Content-Type': 'application/json;charset=UTF-8'},// 参数data: {},// 设置超时时间timeout: 10000,// 携带凭证withCredentials: true,// 返回数据类型responseType: 'json'
}

复制代码

axios.js

复制代码

import axios from 'axios';
import config from './config';
import qs from 'qs';
import Cookies from "js-cookie";
import router from '@/router'// 使用vuex做全局loading时使用
// import store from '@/store'export default function $axios(options) {return new Promise((resolve, reject) => {const instance = axios.create({baseURL: config.baseURL,headers: {},transformResponse: [function (data) {}]})// request 拦截器instance.interceptors.request.use(config => {let token = Cookies.get('token')// 1. 请求开始的时候可以结合 vuex 开启全屏 loading 动画// console.log(store.state.loading)// console.log('准备发送请求...')// 2. 带上tokenif (token) {config.headers.accessToken = token} else {// 重定向到登录页面router.push('/login')}// 3. 根据请求方法，序列化传来的参数，根据后端需求是否序列化if (config.method === 'post') {if (config.data.__proto__ === FormData.prototype|| config.url.endsWith('path')|| config.url.endsWith('mark')|| config.url.endsWith('patchs')) {} else {config.data = qs.stringify(config.data)}}return config},error => {// 请求错误时console.log('request:', error)// 1. 判断请求超时if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {console.log('timeout请求超时')// return service.request(originalRequest);// 再重复请求一次}// 2. 需要重定向到错误页面const errorInfo = error.responseconsole.log(errorInfo)if (errorInfo) {error = errorInfo.data  // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.rejectconst errorStatus = errorInfo.status; // 404 403 500 ...router.push({path: `/error/${errorStatus}`})}return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息})// response 拦截器instance.interceptors.response.use(response => {let data;// IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)if (response.data == undefined) {data = JSON.parse(response.request.responseText)} else {data = response.data}// 根据返回的code值来做不同的处理switch (data.rc) {case 1:console.log(data.desc)break;case 0:store.commit('changeState')// console.log('登录成功')default:}// 若不是正确的返回code，且已经登录，就抛出错误// const err = new Error(data.desc)// err.data = data// err.response = response// throw errreturn data},err => {if (err && err.response) {switch (err.response.status) {case 400:err.message = '请求错误'breakcase 401:err.message = '未授权，请登录'breakcase 403:err.message = '拒绝访问'breakcase 404:err.message = `请求地址出错: ${err.response.config.url}`breakcase 408:err.message = '请求超时'breakcase 500:err.message = '服务器内部错误'breakcase 501:err.message = '服务未实现'breakcase 502:err.message = '网关错误'breakcase 503:err.message = '服务不可用'breakcase 504:err.message = '网关超时'breakcase 505:err.message = 'HTTP版本不受支持'breakdefault:}}console.error(err)return Promise.reject(err) // 返回接口返回的错误信息})// 请求处理instance(options).then(res => {resolve(res)return false}).catch(error => {reject(error)})})
}

复制代码

interface.js

复制代码

import axios from './axios'/* * 将所有接口统一起来便于维护* 如果项目很大可以将 url 独立成文件，接口分成不同的模块*/// 单独导出
export const login = () => {return axios({url: '/login',method: 'get'})
}export const getUser = () => {return axios({url: '/user',method: 'get'})
}export const getMenu = data => {return axios({url: '/menu',method: 'post',data})
}// 默认全部导出
export default {login,getUser,getMenu
}

复制代码

index.js

复制代码

// 导入所有接口
import apis from './interface'const install = Vue => {if (install.installed)return;install.installed = true;Object.defineProperties(Vue.prototype, {// 注意，此处挂载在 Vue 原型的 $api 对象上$api: {get() {return apis}}})
}export default install

复制代码

安装 js-cookie

上面 axios.js 中，会用到 Cookie 获取 token，所以需要把相关依赖安装一下。

执行以下命令，安装依赖包。

yarn add js-cookie

代码实例

1.引入插件

在 main.js 中以 vue 插件的形式引入 axios，这样在其他地方就可通过 this.$api 调用相关的接口了。

2.编写接口

在 interface.js 中添加 login 接口。

3.调用接口

在登录界面 Login.vue 中，添加一个登录按钮，点击处理函数通过 axios 调用 login 接口返回数据。

成功返回之后，将 token 放入 Cookie 并跳转到主页。

复制代码

<template><div class="page"><h2>Login Page</h2><el-button type="primary" @click="login()">登录</el-button></div>
</template><script>import mock from '@/mock/mock.js';import Cookies from "js-cookie";import router from '@/router'export default {name: 'Login',methods: {login() {this.$api.login().then(function(res) {alert(res.data.token)Cookies.set('token', res.data.token) // 放置token到Cookie router.push('/')  // 登录成功，跳转到主页}).catch(function(res) {alert(res);});}}}
</script>

复制代码

4.mock 接口

在 mock.js 中添加 login 接口进行拦截，返回一个 token。

启动测试

浏览器访问：http://localhost:8080/#/login，显示登录界面。

点击登录按钮，首先弹出框，显示返回的 token 信息。

点击确定关掉弹出框后，跳转到主页。点击用户、菜单按钮，接口调用正常。

封装 mock 模块

为了统一可以统一管理和集中控制数据模拟接口，我们对 mock 模块进行了封装，可以方便的定制模拟接口的统一开关和个体开关。

文件结构

在 mock 目录下新建一个 index.js ，创建 modules 目录并在里面创建三个模块 *.js 文件。

index.js：模拟接口模块聚合文件

login.js：登录相关的接口模拟

user.js：用户相关的接口模拟

menu.js：菜单相关的接口模拟

index.js

复制代码

import Mock from 'mockjs'
import * as login from './modules/login'
import * as user from './modules/user'
import * as menu from './modules/menu'// 1. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
// 2. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
fnCreate(login, true)
fnCreate(user, true)
fnCreate(menu, true)/*** 创建mock模拟数据* @param {*} mod 模块* @param {*} isOpen 是否开启?*/
function fnCreate (mod, isOpen = true) {if (isOpen) {for (var key in mod) {((res) => {if (res.isOpen !== false) {Mock.mock(new RegExp(res.url), res.type, (opts) => {opts['data'] = opts.body ? JSON.parse(opts.body) : nulldelete opts.bodyconsole.log('\n')console.log('%cmock拦截, 请求: ', 'color:blue', opts)console.log('%cmock拦截, 响应: ', 'color:blue', res.data)return res.data})}})(mod[key]() || {})}}
}

复制代码

login.js

复制代码

// 登录接口
export function login () {return {// isOpen: false,url: 'http://localhost:8080/login',type: 'get',data: {'msg': 'success','code': 0,'data': {'token': '4344323121398'// 其他数据}}}
}

复制代码

user.js

复制代码

// 获取用户信息
export function getUser () {return {// isOpen: false,url: 'http://localhost:8080/user',type: 'get',data: {'msg': 'success','code': 0,'data': {'id': '@increment', 'name': '@name', // 随机生成姓名'email': '@email', // 随机生成姓名'age|10-20': 12// 其他数据}}}
}

复制代码

menu.js

复制代码

// 获取菜单信息
export function getMenu () {return {// isOpen: false,url: 'http://localhost:8080/menu',type: 'get',data: {'msg': 'success','code': 0,'data': {'id': '@increment', 'name': 'menu', // 随机生成姓名'order|10-20': 12// 其他数据}}}
}

复制代码

修改引入

Login.vue

Home.vue

启动测试

浏览器访问：http://localhost:8080/#/，按照先前流程走一遍，没有问题。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/70713.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

浅谈Spring

浅谈Spring

Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器&#xff08;框架&#xff09;。 一、什么是IOC&#xff1f; IoC Inversion of Control 翻译成中⽂是“控制反转”的意思&#xff0c;也就是说 Spring 是⼀个“控制反转”的容器。 1.1控制反转推导 这个控制反转怎…
阅读更多...
c语言逻辑思维

c语言逻辑思维

c语言逻辑思维 1.如何问问题? 有甲、乙两人&#xff0c;其中&#xff0c;甲只说假话&#xff0c;而不说真话;乙则是只说真话&#xff0c;不说假话。但是&#xff0c;他们两个人在回答别人的问题时&#xff0c;只通过点头与摇头来表示&#xff0c;不讲话。有一天&#xff0c;一…
阅读更多...
Unity中Shader的时间_Time

Unity中Shader的时间_Time

文章目录 前言一、_Time.xyzw分别代表什么二、_Time怎么使用 前言 Unity中Shader的时间_Time 一、_Time.xyzw分别代表什么 _Time.y 代表当前时间 二、_Time怎么使用 在需要使用的地方直接 * _Time.y 或 x / z / w 测试代码&#xff1a; Shader "MyShader/P0_9_5&qu…
阅读更多...
Kali Linux渗透测试技术介绍【文末送书】

Kali Linux渗透测试技术介绍【文末送书】

文章目录 写在前面一、什么是Kali Linux二、渗透测试基础概述和方法论三、好书推荐1. 书籍简介2. 读者对象3. 随书资源 写作末尾 写在前面 对于企业网络安全建设工作的质量保障&#xff0c;业界普遍遵循PDCA&#xff08;计划&#xff08;Plan&#xff09;、实施&#xff08;Do…
阅读更多...
【网络爬虫笔记】爬虫Robots协议语法详解

【网络爬虫笔记】爬虫Robots协议语法详解

Robots协议是指一个被称为Robots Exclusion Protocol的协议。该协议的主要功能是向网络蜘蛛、机器人等搜索引擎爬虫提供一个标准的访问控制机制&#xff0c;告诉它们哪些页面可以被抓取&#xff0c;哪些页面不可以被抓取。本文将进行爬虫Robots协议语法详解&#xff0c;同时提供…
阅读更多...
管理学国际化与领导力视角

管理学国际化与领导力视角

随着全球化的进程不断加速&#xff0c;管理学的国际化已经成为一个不可忽视的趋势。在这个多元化和全球化的时代&#xff0c;管理者需要具备跨文化的领导力&#xff0c;以适应不同国家和地区的商业环境&#xff0c;并有效地管理全球团队。本文将从管理学国际化和领导力的角度探…
阅读更多...
Java # Java容器

Java # Java容器

Java容器的分类 List ArrayList 源码 public static vooid main(String[] args){ArrayList<String> list new ArrayList<>();list.add("hello");list.add(1, "hello");list.remove("hello"); } list.add("hello"); …
阅读更多...
Python代码雨

Python代码雨

系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.csdn.net/article/details/1295031234漂浮爱心https://want…
阅读更多...
InnoDB全文索引是如何实现的？

InnoDB全文索引是如何实现的？

分析&回答 全文索引的底层实现为倒排索引。 为什么叫倒排索引&#xff08;反向索引&#xff09; 当表上存在全文索引时&#xff0c;就会隐式的建立一个名为FTS_DOC_ID的列&#xff0c;并在其上创建一个唯一索引&#xff0c;用于标识分词出现的记录行。你也可以显式的创建…
阅读更多...
LeetCode刷题笔记【26】：贪心算法专题-4（柠檬水找零、根据身高重建队列、用最少数量的箭引爆气球）

LeetCode刷题笔记【26】：贪心算法专题-4（柠檬水找零、根据身高重建队列、用最少数量的箭引爆气球）

文章目录 前置知识860.柠檬水找零题目描述解题思路代码 406.根据身高重建队列题目描述解题思路代码 452. 用最少数量的箭引爆气球题目描述踩坑-进行模拟正确思路的贪心 总结 前置知识 参考前文 参考文章&#xff1a; LeetCode刷题笔记【23】&#xff1a;贪心算法专题-1&#x…
阅读更多...
2023年05月 C/C++（八级）真题解析#中国电子学会#全国青少年软件编程等级考试

2023年05月 C/C++（八级）真题解析#中国电子学会#全国青少年软件编程等级考试

C/C编程&#xff08;1~8级&#xff09;全部真题・点这里 第1题&#xff1a;道路 N个以 1 … N 标号的城市通过单向的道路相连:。每条道路包含两个参数&#xff1a;道路的长度和需要为该路付的通行费&#xff08;以金币的数目来表示&#xff09; Bob and Alice 过去住在城市 1.在…
阅读更多...
百度云智大会：科技与创新的交汇点

百度云智大会：科技与创新的交汇点

​ 这次的百度云智大会&#xff0c;可谓是亮点云集—— 发布了包含42个大模型、41个数据集、10个精选应用范式的全新升级千帆大模型平台2.0&#xff0c;发布首个大模型生态伙伴计划&#xff0c;而且也预告了文心大模型4.0的发布&#xff0c;大模型服务的成绩单也非常秀&#x…
阅读更多...
ABAP BP维护客户cl_md_bp_maintain=＞maintain

ABAP BP维护客户cl_md_bp_maintain=＞maintain

ps_head结构如下 下面是封装好的form示例 *&---------------------------------------------------------------------* *& Form frm_modify_customer *&---------------------------------------------------------------------* *& text *&--------…
阅读更多...
TypeScript类型守卫

TypeScript类型守卫

概念 在语句的块级作用域【if语句内或条目运算符表达式内】缩小变量类型的一种类型推断的行为。 类型守卫可以帮助我们在块级作用域中获得更为需要的精确变量类型&#xff0c;从而减少不必要的类型断言。 类型判断&#xff1a;typeof实例判断&#xff1a;instanceof字面量相等…
阅读更多...
2023-08-31 LeetCode每日一题（一个图中连通三元组的最小度数）

2023-08-31 LeetCode每日一题（一个图中连通三元组的最小度数）

2023-08-31每日一题 一、题目编号 1761. 一个图中连通三元组的最小度数二、题目链接 点击跳转到题目位置 三、题目描述 给你一个无向图&#xff0c;整数 n 表示图中节点的数目&#xff0c;edges 数组表示图中的边&#xff0c;其中 edges[i] [ui, vi] &#xff0c;表示 ui…
阅读更多...
Python入门学习14（面向对象）

Python入门学习14（面向对象）

一、内置方法 二、封装 1. 封装的概念是指&#xff1f; 将现实世界事物在类中描述为属性和方法&#xff0c;即为封装。 2. 什么是私有成员&#xff1f;为什么需要私有成员&#xff1f; 现实事物有部分属性和行为是不公开对使用者开放的。同样在类中描述属性和方法的时…
阅读更多...
如何分库分表？

如何分库分表？

分析&回答 分库&#xff1f;分表&#xff1f;还是既分库又分表&#xff1f; 如果需要分表&#xff0c;那么分多少张表合适&#xff1f; 由于所有的技术都是为业务服务的&#xff0c;那么&#xff0c;我们就先从数据方面回顾下业务背景。 如果每天产生 8w 笔交易单&#…
阅读更多...
SCRUM敏捷产品负责人（CSPO）认证培训课程

SCRUM敏捷产品负责人（CSPO）认证培训课程

课程简介 Scrum是目前运用最为广泛的敏捷开发方法&#xff0c;是一个轻量级的项目管理和产品研发管理框架。产品负责人是Scrum的三个角色之一&#xff0c;产品负责人在Scrum产品开发当中扮演舵手的角色&#xff0c;他决定产品的愿景、路线图以及投资回报&#xff0c;他需要回答…
阅读更多...
学单片机有前途吗?

学单片机有前途吗?

学单片机有前途吗? 个人认为学习任何一门技术都比不学的强&#xff0c;针对学单片机有前途吗?那么比较对象当然就是在整个IT行业做对比。因此我们可以从职业前景、钱景、这几方面综合考量。 学单片机有前途吗?我觉得重要的一点就是是否适合职业生涯发展&#xff0c;总说程序…
阅读更多...
C++内存管理（2）new、delete详解

C++内存管理（2）new、delete详解

目录 new operator&#xff08;new操作&#xff09; new类对象时加不加括号的差别 new工作任务 delete工作任务 new和delete 堆区空间操作&#xff08;对比malloc和free&#xff09; new和delete操作基本类型的空间 new和delete操作基本类型的数组 new和delete操作类的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023