Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
6. SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
7. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
8. SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
9. Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
10. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
11. Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
12. SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
13. SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
14. SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
15. SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
16. SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
17. SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
18. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
19. 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
20. SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
21. SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
22. SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
23. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址
3. 项目MySql数据库文件

---

---

前言

  今天博客的主要内容包括：Vue安装Axios、使用Axios代替Fetch获取后端数据、配置多条件模糊分页查询、加入搜索框内容重置功能、实现新增用户功能、实现编辑用户功能、实现删除用户功能、实现批量删除用户功能等内容。可以看到今天的内容比较多，那就不多废话，下面就开始今天的学习！

---

一、Vue安装Axios

1. 在上一节课我们已经将Mybatis全部替换为Mybatis-Plus了，整体代码看起来更简洁而且更高效，并且可以成功获取到数据，那么现在数据还在后台服务器，为了将数据传输到前端服务器进行展示，所以Vue需要安装Axios。首先，进入前端项目目录，在此目录下打开cmd
   
2. 然后输入npm i axios -S
   

二、使用Axios代替Fetch获取后端数据

1. 在此目录下新建utils文件夹，然后在此文件夹下新建request.js
   
2. 然后在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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

3. 在main.js中输入如下代码引入request.js
   
4. 在HomeView.vue中将原来的load()函数，修改为如下内容
   
5. 再来看前端内容，发现后端数据已经传入前端了
   

三、配置多条件模糊分页查询

1. 首先在HomeView.vue中给邮箱和地址配置名称
   
2. 在HomeView.vue中设置email和address默认为空
   
3. 还是在此页代码中的load()函数内对email和address赋值
   
4. 然后我们测试一下多条件模糊分页查询已经成功
   

四、加入搜索框内容重置功能

1. 首先在HomeView.vue中加入“重置“按钮
   
2. 再继续加入如下代码
   
3. 然后我们测试一下，发现此功能成功实现
   

五、实现新增用户功能

1. 首先在HomeView.vue中加入如下代码
   
2. 然后初始化参数
   
3. 给新增按钮增加一个点击事件
   
4. 设置此点击事件
   
5. 然后看一下前端，已经成功出现新增界面了
   
6. 因为我们要把数据保存到数据库中，所以我们添加一个点击事件，目的是存储新增用户
   
7. 编写此点击事件，存储新增用户
   
8. 然后去前端测试一下，插入一个新用户，发现保存成功
   
9. 然后去数据库中查看，发现已经成功插入这个新用户了
   
10. 为了后面操作方便，可以使用baseURL代替每次请求头，首先将请求头赋值给request.js中的baseURL
    
11. 然后删除原来的请求头
    
12. 最后测试一下，发现数据依旧可以正常传输
    

六、实现编辑用户功能

1. 给“新增“按钮添加点击事件
   
2. 编辑此点击事件代码，还要记得修改之后要重新load一下
   
3. 然后我们来到前端测试一下，可以成功实现修改用户信息的功能
   
   

七、实现删除用户功能

1. 给“删除“按钮添加点击事件，并加入删除判断功能
   
2. 编辑此点击事件代码，还要记得修改之后要重新load一下
   
3. 然后我们来到前端测试一下，删除判断弹窗功能已经实现了
   
4. 然后我们继续删除“e”这个用户，发现也已经删除了
   

八、实现批量删除用户功能

1. 首先加入选择列，并加入函数，目的是完成批量删除功能
   
2. 初始化参数
   
3. 编辑函数获取用户数据
   
4. 在UserController.java中加入批量删除用户的函数
   
5. 在“批量删除“按钮增加新的点击事件
   
6. 编辑此函数将用户id数据进行扁平化处理
   
7. 然后我们发送请求
   
8. 加入批量删除确认弹窗
   
9. 然后我们去前端测试一下，批量删除用户“d“和用户“c”，我们发现已经成功批量删除了，所以我们完成了批量删除的功能
   

---

总结

  到目前为止我们今天的内容也结束了，可以看到今天的内容较多，也比较难，但是增删改查是我们Web项目的基础，所以这是必须要完成的内容。下篇博文将给大家带来SpringBoot实现代码生成器的内容，我们明天见！