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

news2024/7/6 17:51:21

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. 带上token
        if (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.response
        console.log(errorInfo)
        if (errorInfo) {
          error = errorInfo.data  // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
          const 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 err

        return data
      },
      err => {
        if (err && err.response) {
          switch (err.response.status) {
            case 400:
              err.message = '请求错误'
              break
            case 401:
              err.message = '未授权，请登录'
              break
            case 403:
              err.message = '拒绝访问'
              break
            case 404:
              err.message = `请求地址出错: ${err.response.config.url}`
              break
            case 408:
              err.message = '请求超时'
              break
            case 500:
              err.message = '服务器内部错误'
              break
            case 501:
              err.message = '服务未实现'
              break
            case 502:
              err.message = '网关错误'
              break
            case 503:
              err.message = '服务不可用'
              break
            case 504:
              err.message = '网关超时'
              break
            case 505:
              err.message = 'HTTP版本不受支持'
              break
            default:
          }
        }
        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) : null
            delete opts.body
            console.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.coloradmin.cn/o/978041.html

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

相关文章

Vue + Element UI 前端篇（七）：功能组件封装

Vue + Element UI 前端篇（七）：功能组件封装

组件封装 为了避免组件代码的臃肿&#xff0c;这里对主要的功能部件进行封装&#xff0c;保证代码的模块化和简洁度。 组件结构 组件封装重构后&#xff0c;试图组件结构如下图所示 代码一览 Home组件被简化&#xff0c;包含导航、头部和主内容三个组件。 Home.vue <te…
阅读更多...
mysql表操作-约束删除、用户填加、授权和撤权

mysql表操作-约束删除、用户填加、授权和撤权

目录 一、表的约束删除 1.查看所有表的约束条件 2.删除主键 3.删除唯一键 4.删除check键值 5.删除check键值 6.删除not null键值并删除check键值 7.删除键外值 8.检查表的约束条件是否存在 二、设置数据库密码策略 1.查看数据库密码的策略 2.修改数据库密码的长度 …
阅读更多...
视频汇聚/视频云存储/视频监控管理平台EasyCVR安全检查的相关问题及解决方法2.0

视频汇聚/视频云存储/视频监控管理平台EasyCVR安全检查的相关问题及解决方法2.0

开源EasyDarwin视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多…
阅读更多...
Leetcode 1572.矩阵对角线元素之和

Leetcode 1572.矩阵对角线元素之和

给你一个正方形矩阵 mat&#xff0c;请你返回矩阵对角线元素的和。 请你返回在矩阵主对角线上的元素和副对角线上且不在主对角线上元素的和。 示例 1&#xff1a; 输入&#xff1a;mat [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;25 解释&#xff1a;对角线的和为&#xff…
阅读更多...
C#使用proto

C#使用proto

写多了go代码&#xff0c;被go mod tidy惯坏了&#xff0c;还以为全天下的都很好用呢&#xff0c;结果发现并不是这样。尤其是项目组的proto还是又封了个工具直接就能跑得&#xff0c;导致以为没那么复杂的事情变得复杂了起来。是有两套生成的规则&#xff0c;时间有点晚&#…
阅读更多...
【漏洞复现】网御ACM上网行为管理系统bottomframe.cgi接口存在SQL注入漏洞

【漏洞复现】网御ACM上网行为管理系统bottomframe.cgi接口存在SQL注入漏洞

漏洞描述 网御上网行为管理系统（简称Leadsec ACM）是网御为互联网接入用户在信息内容安全、网络应用管理、组织运营效率、网络资源利用、法律风险规避及网络投资回报等方面提供的全方位解决方案。网御上网行为管理系统存在SQL注入漏洞。 网御 ACM上网行为管理系统 bottomfram…
阅读更多...
docker快速安装-docker一键安装脚本

docker快速安装-docker一键安装脚本

1.下载/配置安装脚本 touch install-docker.sh #!/bin/bash #mail:ratelcloudqq.com #system:centos7 #integration: docker-latestclear echo "######################################################" echo "# Auto Install Docker …
阅读更多...
【ABAP】 如何实现点击不同按钮动态显示不同的选择屏幕？（附完整示例代码）

【ABAP】 如何实现点击不同按钮动态显示不同的选择屏幕？（附完整示例代码）

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;阿里云社区专家博主&#xff0c;华为云云享专家&#xff0c;腾讯云社区认证作者&#xff0c;CSDN SAP应用技术领域优质创作者。在学习工作中&#xff0c;我通常使用偏后端的开发语言ABAP&#xff0c;SQL进行任务的完成…
阅读更多...
Docker实战：docker compose 搭建Rocketmq

Docker实战：docker compose 搭建Rocketmq

1、配置文件准备 1.1、 新建目录&#xff1a;/home/docker/data/rocketmq/conf mkdir /home/docker/data/rocketmq/conf1.2、 在上面目录下新建文件broker.conf文件&#xff0c;内容如下 brokerClusterName DefaultCluster brokerName broker-a brokerId 0 deleteWhen 0…
阅读更多...
Linux命令之目录管理(详解)

Linux命令之目录管理(详解)

Linux命令之目录管理 创建目录删除目录显示目录目录的拷贝返回上层目录目录的移动 创建目录 创建目录用 mkdir命令 mk–>make dir–>direction 同样的mkdir有很多选项&#xff0c;你可以通过用man命令查这个mkdir命令来获得 mkdir [选项] 目录名创建多级目录 mkdir -r /…
阅读更多...
开源项目观察8月报

开源项目观察8月报

前言 总结8月份自己关注的一些项目/语言的新版本 大数据 hue 1月19: 4.11 https://docs.gethue.com/releases/release-notes-4.11.0/ 支持 iceberg 数据源 通过缓存 Livy session 中的信息来加速 SparkSQL&#xff0c;并适配 Spark UDF 支持 HPL/SQL: hive sql 的高级语法…
阅读更多...
React 状态管理 - Redux 入门

React 状态管理 - Redux 入门

目录 扩展学习资料 Redux基础 Redux动机 Redux核心概念 Redux的三个原则 Redux运转图 React & Redux的搭配使用 Redux API React-Redux API&#xff08;关联组件&#xff09; 从头创建一个工程 package.json /src/reducer/index.js /src/reducer/home/index.js…
阅读更多...
springboot配置统一返回结果类

springboot配置统一返回结果类

目录结构&#xff1a; Result类&#xff1a; package com.xxxx.common.result;import lombok.Data;Data public class Result<T> {//状态码private Integer code;//信息private String message;//数据private T data;//构造私有化private Result() { }//设置数据,返回对…
阅读更多...
如何分库分表？

如何分库分表？

分析&回答 分库&#xff1f;分表&#xff1f;还是既分库又分表&#xff1f; 如果需要分表&#xff0c;那么分多少张表合适&#xff1f; 由于所有的技术都是为业务服务的&#xff0c;那么&#xff0c;我们就先从数据方面回顾下业务背景。 如果每天产生 8w 笔交易单&#…
阅读更多...
RouterOS-配置PPPoEv4v6 Server

RouterOS-配置PPPoEv4v6 Server

1 接口 ether3 出接口 ether4 内网接口 2 出接口 出接口采用PPPoE拨号SLAAC获取前缀&#xff0c;手动配置后缀 2.1 选择出接口interface&#xff0c;配置PPPoE client模式 2.2 配置PPPoE client用户名和密码 2.3 从PPPoE client获取前缀地址池 2.4 给出接口选择前缀并配置…
阅读更多...
GIS：DataStore数据管理框架

GIS：DataStore数据管理框架

1.架构设计 OGC 规范对空间矢量数据的框架进行了设计&#xff0c;GeoTools 对其进行了实现。其中的 DataStore 可以近似理解成关系数据库中的个数据库实例&#xff0c;FeatureSource 可以近似理解成关系数据库中的一张表。 DataAccess 接口主要对空间要素类型的相关信息的构建…
阅读更多...
MySQL连接错误1045：完美解决指南

MySQL连接错误1045：完美解决指南

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
第五章 数据分析模型 题目学习（40%）

第五章 数据分析模型 题目学习（40%）

第一节 主成分的计算步骤&#xff1a;1、主成分建模&#xff0c;标准化处理。2、计算特征根、特征向量。3、选取主成分个数。 题目 选择B&#xff0c;依次递减。 相关系数和关联矩阵都做了标准化&#xff0c;做完标准化后方差就不会造成影响&#xff0c;所以选A。 A可以进行判断…
阅读更多...
JavaScript-----对象（创建对象、数组与字符串）

JavaScript-----对象（创建对象、数组与字符串）

目录 前言&#xff1a; 1. JavaScript创建对象 1.1 对象的创建 1.2 对象的调用 1.3 for-in循环语句 2.内置对象 2.1 Array&#xff08;数组&#xff09;对象 属性和方法 2.2 String&#xff08;字符串&#xff09;对象 属性和方法 2.3 Math对象 2.4 日期对象 前言&a…
阅读更多...
华为云API对话机器人CBS的魅力—实现简单的对话操作

华为云API对话机器人CBS的魅力—实现简单的对话操作

云服务、API、SDK&#xff0c;调试&#xff0c;查看&#xff0c;我都行 阅读短文您可以学习到&#xff1a;人工智能AI智能的问答管理、全面的对话管理、高效训练部署 1.IntelliJ IDEA 之API插件介绍 API插件支持 VS Code IDE、IntelliJ IDEA等平台、以及华为云自研 CodeArts …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023