SpringBoot + Spring Cloud +Vue 管理系统前端搭建（三、工具模块封装）

最新推荐文章于 2024-04-01 16:06:28 发布

Java程序之猿

最新推荐文章于 2024-04-01 16:06:28 发布

阅读量2.7k

点赞数 13

分类专栏： spring boot VUE 文章标签： vue java

本文链接：https://blog.csdn.net/JavaLLU/article/details/117534789

版权

spring boot 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

VUE

12 篇文章 3 订阅

订阅专栏

封装axios模块

背景

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

要点

统一url配置。

统一api请求

request请求拦截

response拦截器

根据需求，结合vuex做全局的loading动画，或者错误处理

将axios封装成vue插件使用

文件结构

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

api.js、axios.js、config.js、index.js、modules目录

api.js

/*
* 接口统一集成模块
*/
import * as login from './modules/login'
import * as user from './modules/user'
import * as dept from './modules/dept'
import * as role from './modules/role'
import * as menu from './modules/menu'
import * as dict from './modules/dict'
import * as config from './modules/config'
import * as log from './modules/log'
import * as loginlog from './modules/loginlog'

// 默认全部导出
export default {
login,
user,
dept,
role,
menu,
dict,
config,
log,
loginlog
}

axios.js

1、这里导入类配置文件的信息（如baseURL、headers、withCredentials等设置）到axios对象

2、发送请求的时候获取token,如果token不存在，说明未登录，就重定向到系统登录，否则带token继续发送请求

3、如果有需要，可以在这里通过response响应拦截器对返回结果进行统一处理后再返回

import axios from 'axios';
import config from './config';
import Cookies from "js-cookie";
import router from '@/router'

export default function $axios(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: config.baseUrl,
headers: config.headers,
timeout: config.timeout,
withCredentials: config.withCredentials
})
// request 请求拦截器
instance.interceptors.request.use(
config => {
let token = Cookies.get('token')
// 发送请求时携带token
if (token) {
config.headers.token = token
} else {
// 重定向到登录页面
router.push('/login')
}
return config
},
error => {
// 请求发生错误时
console.log('request:', error)
// 判断请求超时
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('timeout请求超时')
}
// 需要重定向到错误页面
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 => {
return response.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)
})
})
}

config.js

import { baseUrl } from '@/utils/global'

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

index.js

这里把axios注册为Vue插件使用，并将api模块挂载在Vue原型的$api对象上，这样在能获取this引用的地方就可以通过“this.$api.子模块.方法” 的方式调用api了

// 导入所有接口
import api from './api'

const install = Vue => {
if (install.installed)
return;

install.installed = true;

Object.defineProperties(Vue.prototype, {
// 注意，此处挂载在 Vue 原型的 $api 对象上
$api: {
get() {
return api
}
}
})
}

export default install

modules

modules模块下子模块比较多，不方便全贴。这里就以用户管理模块为例。

import axios from '../axios'

* 用户管理模块

// 保存

export const save = (data) => {

return axios({

url: '/user/save',

method: 'post',

data

})

}

// 删除

export const batchDelete = (data) => {

return axios({

url: '/user/delete',

method: 'post',

data

})

}

// 分页查询

export const findPage = (data) => {

return axios({

url: '/user/findPage',

method: 'post',

data

})

}

// 查找用户的菜单权限标识集合

export const findPermissions = (params) => {

return axios({

url: '/user/findPermissions',

method: 'get',

params

})

}

global.js

上面我们配置文件中引入了global.js,我们把一些全局的配置、常量和方法放到此文件中。

/**

* 全局常量、方法封装模块

* 通过原型挂载到Vue属性

* 通过 this.Global 调用

// 后台管理系统服务器地址

// export const baseUrl = 'http://139.196.87.48:8001'

export const baseUrl = 'http://localhost:8001'

// 系统数据备份还原服务器地址

// export const backupBaseUrl = 'http://139.196.87.48:8002'

export const backupBaseUrl = 'http://localhost:8002'

export default {

baseUrl,

backupBaseUrl

}

main.js

修改main.js，导入api模块，并通过vue.use(api)语句进行使用注册，这样就可以通过“this.$api.子模块.子方法”的方式来调用后台接口了，

引入global模块，并通过配置
Vue.prototype.global = global

语句进行挂载，这样就可以通过this.global.xx 来获取全局配置了

import Vue from 'vue'
import App from './App'
import router from './router'
import api from './http'
import global from '@/utils/global'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI) // 引入Element
Vue.use(api) // 引入API模块

Vue.prototype.global = global // 挂载全局配置模块

new Vue({
el: '#app',
router,
render: h => h(App)
})

安装js-cookie

在上面的axios.js中会用到cookie获取token，所以需要把相关依赖安装一下。执行以下命令安装

npm add js-cookie

测试

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

返回成功后，弹出提示，显示token信息，然后将token放入cookie并跳转主页。

Login.Vue

<template>
<div class="page">
<h2>Login Page</h2>
<el-button type="primary" @click="login()">登录</el-button>
</div>
</template>

mock接口

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

import Mock from 'mockjs'

Mock.mock('http://localhost:8080/user', {

'name': '@name', // 随机生成姓名

'name': '@email', // 随机生成邮箱

'age|1-12': 7, // 年龄1-12之间

})

Mock.mock('http://localhost:8001/login', {

'token': 'dsfagda5312adf1a56', //令牌

})

Mock.mock('http://localhost:8080/menu', {

'id': '@increment', // id自增

'name': 'menu', // 名称为menu

'order|1-10': 6, // 排序1-10之间

})

配置完我们就可以启动项目在浏览器进行测试

在浏览访问：http://localhost:8080/#/Login

点击登录

点击确定，跳转到主页面

封装mock模块

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

目录结构如下：

一、在mock目录下新建index.js,新建子目录modules并在目录里面创建接口*.js。

在index.js中统一引入所有接口并通过mock进行数据模拟。

index.js

import Mock from 'mockjs'

import { baseUrl } from '@/utils/global'

import * as login from './modules/login'

import * as user from './modules/user'

import * as role from './modules/role'

import * as dept from './modules/dept'

import * as menu from './modules/menu'

import * as dict from './modules/dict'

import * as config from './modules/config'

import * as log from './modules/log'

import * as loginlog from './modules/loginlog'

// 1. 开启/关闭[所有模块]拦截, 通过调[openMock参数]设置.

// 2. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.

// 3. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.

let openMock = true

// let openMock = false

fnCreate(login, openMock)

fnCreate(user, openMock)

fnCreate(role, openMock)

fnCreate(dept, openMock)

fnCreate(menu, openMock)

fnCreate(dict, openMock)

fnCreate(config, openMock)

fnCreate(log, openMock)

fnCreate(loginlog, openMock)

/**

* 创建mock模拟数据

* @param {*} mod 模块

* @param {*} isOpen 是否开启?

function fnCreate (mod, isOpen = true) {

if (isOpen) {

for (var key in mod) {

((res) => {

if (res.isOpen !== false) {

let url = baseUrl

if(!url.endsWith("/")) {

url = url + "/"

}

url = url + res.url

Mock.mock(new RegExp(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]() || {})

}

二、modules下接口比较多，代码不方便粘贴，我们以用户管理模块为例,有需要的请私信博主

user.js

* 用户管理模块

// 保存

export function save() {

return {

url: 'user/save',

type: 'post',

data: {

"code": 200,

"msg": null,

"data": 1

}

// 批量删除

export function batchDelete() {

return {

url: 'user/delete',

type: 'post',

data: {

"code": 200,

"msg": null,

"data": 1

}

// 分页查询

export function findPage(params) {

let findPageData = {

"code": 200,

"msg": null,

"data": {}

}

let pageNum = 1

let pageSize = 8

if(params !== null) {

// pageNum = params.pageNum

}

if(params !== null) {

// pageSize = params.pageSize

}

let content = this.getContent(pageNum, pageSize)

findPageData.data.pageNum = pageNum

findPageData.data.pageSize = pageSize

findPageData.data.totalSize = 50

findPageData.data.content = content

return {

url: 'user/findPage',

type: 'post',

data: findPageData

}

export function getContent(pageNum, pageSize) {

let content = []

for(let i=0; i<pageSize; i++) {

let obj = {}

let index = ((pageNum - 1) * pageSize) + i + 1

obj.id = index

obj.name = 'mango' + index

obj.password = '9ec9750e709431dad22365cabc5c625482e574c74adaebba7dd02f1129e4ce1d'

obj.salt = 'YzcmCZNvbXocrsz9dm8e'

obj.email = 'mango' + index +'@qq.com'

obj.mobile = '18688982323'

obj.status = 1

obj.deptId = 12

obj.deptName = '技术部'

obj.status = 1

if(i % 2 === 0) {

obj.deptId = 13

obj.deptName = '市场部'

}

obj.createBy= 'admin'

obj.createTime= '2018-08-14 11:11:11'

obj.createBy= 'admin'

obj.createTime= '2018-09-14 12:12:12'

content.push(obj)

}

return content

}

// 查找用户的菜单权限标识集合

export function findPermissions() {

let permsData = {

"code": 200,

"msg": null,

"data": [

null,

"sys:user:view",

"sys:menu:delete",

"sys:dept:edit",

"sys:dict:edit",

"sys:dict:delete",

"sys:menu:add",

"sys:user:add",

"sys:log:view",

"sys:dept:delete",

"sys:role:edit",

"sys:role:view",

"sys:dict:view",

"sys:user:edit",

"sys:user:delete",

"sys:dept:view",

"sys:dept:add",

"sys:role:delete",

"sys:menu:view",

"sys:menu:edit",

"sys:dict:add",

"sys:role:add"

]

}

return {

url: 'user/findPermissions',

type: 'get',

data: permsData

}

三、然后我们修改一下登录界面，包括导入语句和返回数据格式的获取，修改后代码如下：

login.vue

<h2>Login Page</h2>

<el-button type="primary" @click="login()">登录</el-button>

</div>

</template>

import mock from '@/mock/index.js'

import Cookies from "js-cookie"

import router from '@/router'

export default {

name: 'Login',

methods: {

this.$api.login.login().then(function(res) {

　　　　　alert(JSON.stringify(res.data))

Cookies.set('token', res.token) // 放置token到Cookie

router.push('/') // 登录成功，跳转到主页

}).catch(function(res) {

alert(res);

});

}

</script>

四、修改主界面，替换导入mock文件语句，修改后代码如下：

home.vue

<el-button type="primary" @click="testAxios()">测试Axios调用</el-button>

<el-button type="primary" @click="getUser()">获取用户信息</el-button>

<el-button type="primary" @click="getMenu()">获取菜单信息</el-button>

</div>

</template>

import axios from 'axios'

import mock from '@/mock/index.js'

export default {

name: 'Home',

methods: {

testAxios() {

axios.get('http://localhost:8080').then(res => { alert(res.data) })

getUser() {

axios.get('http://localhost:8080/user').then(res => { alert(JSON.stringify(res.data)) })

getMenu() {

axios.get('http://localhost:8080/menu').then(res => { alert(JSON.stringify(res.data)) })

}

</script>

到此，我们就完成了模块封装，下面我们进行测试

启动项目后，在浏览器访问http://localhost:8080/#/login

可以看到我们登录按钮

点击登录可以看到我们接口中设置的返回数据

然后跳转到主页面

到此axios和mock就都封装好了

看完记得点赞哦！

Java程序之猿

关注

13
点赞
踩
55

收藏

觉得还不错? 一键收藏
11
评论
SpringBoot + Spring Cloud +Vue 管理系统前端搭建（三、工具模块封装）

封装背景使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会yin'q
复制链接

扫一扫

专栏目录