系列文章 目录系统功能演示 - 基于SpringBoot和Vue的后端管理系统项目系列博客（一）Vue2 ElementUI的安装与集成 - 基于SpringBoot和Vue的后端管理系统项目系列博客（二）Vue2后端主框架搭建 - —基于SpringBoot和Vue的后端管理系统项目系列博客（3）SpringBoot前端初始框架搭建——基于SpringBoot和Vue的后端管理系统项目系列博客（4）SpringBoot与Mybatis集成——基于SpringBoot和Vue的后端管理系统项目系列博客（5）SpringBoot实现增删改查——基于SpringBoot和Vue的后端管理系统项目系列博客（6）SpringBoot实现分页查询——基于SpringBoot和Vue的后端管理系统项目系列博客（7） ）SpringBoot实现与Mybatis-Plus和SwaggerUI的集成——基于SpringBoot和Vue的后端管理系统项目系列博客（八）Vue增删改查的实现——基于SpringBoot和Vue的后端管理系统项目系列博客（九） SpringBoot实现代码生成器——基于SpringBoot和Vue的后端管理系统项目系列博客（10）Vue使用路由——基于SpringBoot和Vue的后端管理系统项目系列（11）SpringBoot和Vue实现导出和导入——基于后端管理系统项目系列关于SpringBoot与Vue博客（十二）SpringBoot与Vue实现用户登录注册及异常处理——基于SpringBoot与Vue的后端管理系统项目系列博客（十三）SpringBoot与Vue实现用户个人信息显示、存储与集成JWT——基于SpringBoot和Vue的后端管理系统项目系列博客（14）SpringBoot和Vue实现文件上传下载——基于SpringBoot和Vue的后端管理系统项目系列博客（15）SpringBoot和Vue集成ECharts——基于SpringBoot和Vue的后端管理系统项目系列博客(16)SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后端管理系统项目系列博客(17)SpringBoot实现1对1、1对多、多对多相关查询——基于SpringBoot和Vue的后端管理系统项目系列博客（18）用户前台页面设计与实现——基于SpringBoot和Vue的后端管理系统项目系列博客（19）SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后端管理系统项目系列博客（二十）SpringBoot与Vue集成Amap——基于SpringBoot和Vue的后端管理系统项目系列博客（二十一）SpringBoot与Vue集成视频播放组件——基于SpringBoot和Vue的后端管理系统项目系列博客（二十二） SpringBoot与Vue集成Markdown与多级注释 - 基于SpringBoot与Vue的后端管理系统项目系列博客（二十三） 项目资源下载 GitHub下载地址 Gitee下载地址 项目MySql数据库文件
文章目录
前言
明天博客的主要内容包括：在Vue中安装Axios、使用Axios代替Fetch获取前端数据、配置多条件模糊分页查询、添加搜索框内容重置功能、实现添加新用户的功能、实现编辑用户的功能，实现删除用户的功能。 ，实现批量删除用户等功能。 可见明天的内容会更多，废话不多说，开始明天的学习吧！
1.Vue安装axios。 在上一课中，我们已经将所有Mybatis替换为Mybatis-Plus。 整体代码看起来比较简单但是效率比较高，能够成功获取到数据。 所以现在数据还在后台服务器中。 为了将数据传输到后端服务器进行显示，所以Vue需要安装axios。 首先进入后端项目目录，在该目录下打开cmd
然后输入npmiaxios -S
2、使用axios代替Fetch获取前端数据。 在此目录下新建utils文件夹，然后在该文件夹下新建request.js。
然后在request.js中输入以下内容
import axios from 'axios'
const request = axios.create({
baseURL: '/api',
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
在main.js中输入以下代码引入request.js
将HomeView.vue上原来的load()函数修改为以下内容
再看后端内容，发现前端数据已经传输到后端了。
3、配置多条件模糊分页查询。 首先html5 后台管理系统，在 HomeView.vue 中配置电子邮件名称和地址。
将 HomeView.vue 中的电子邮件和地址默认设置为空
或者在本页代码的load()函数中设置email和地址参数？
之后我们测试了多条件模糊分页查询，成功了。
4.添加搜索框内容重置功能。 首先，在 HomeView.vue 中添加“重置”按钮。
然后继续添加以下代码
然后我们测试了一下，发现这个功能成功实现了
5、实现新增用户功能，首先在HomeView.vue中添加以下代码
然后初始化参数
减少新按钮的点击麻烦
设置此点击风暴
看了一下后台，新界面已经成功出现了。
由于我们要将数据保存到数据库中，所以我们添加点击风暴来存储新用户
编译这个点击风暴并保存新用户
然后去后端测试一下，插入一个新用户，发现保存成功了。
然后查看数据库发现新用户已经成功插入了。
为了方便前面的操作html5 后台管理系统，可以使用baseURL来替换各个请求头。 首先，将请求头参数传递给request.js中的baseURL。
然后删除原来的请求头
最后测试了一下，发现数据还是可以正常传输的。
6.实现编辑用户功能，为“添加”按钮添加点击干扰
编辑此点击风暴代码，并记得在更改后重新加载它。
然后我们去后端测试一下，可以成功实现更改用户信息的功能。
7、实现删除用户功能，对“删除”按钮添加点击扰动，并添加删除判断功能
编辑此点击风暴代码，并记得在更改后重新加载它。
之后我们就去后台测试了一下。 删除判断弹窗的功能已经实现。
之后我们继续删除用户“e”，发现也被删除了。
8、要实现批量删除用户的功能，首先添加选择栏，添加功能，才能完成批量删除用户的功能。
初始化参数
编辑功能以获取用户数据
在UserController.java中添加批量删除用户的功能
减少“批量删除”按钮的新点击
编辑此函数以展平用户 ID 数据
然后我们发送请求
新增批量删除确认弹窗
之后我们到后端测试并批量删除用户“d”和“c”。 我们发现已经成功批量删除了，于是我们就完成了批量删除功能。
总结
至此，我们明天的内容就结束了。 可以看到明天的内容会更多，难度也会更大。 增删改查是我们Web项目的基础，所以这是必须完成的。 上一篇博文将为大家带来SpringBoot实现代码生成器的内容。 今天见！
