系列文章目录
- 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客(一)
- Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客(二)
- Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客(三)
- SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客(四)
- SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客(五)
- SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客(六)
- SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客(七)
- SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客(八)
- Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客(九)
- SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客(十)
- Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客(十一)
- SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客(十二)
- SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客(十三)
- SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客(十四)
- SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客(十五)
- SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客(十六)
- SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客(十七)
- SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客(十八)
- 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客(十九)
- SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客(二十)
- SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客(二十一)
- SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客(二十二)
- SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客(二十三)
项目资源下载
文章目录
前言
今天博客的主要内容包括:Vue安装Axios、使用Axios代替Fetch获取后端数据、配置多条件模糊分页查询、加入搜索框内容重置功能、实现新增用户功能、实现编辑用户功能、实现删除用户功能、实现批量删除用户功能等内容。可以看到今天的内容比较多,那就不多废话,下面就开始今天的学习!
一、Vue安装Axios
- 在上一节课我们已经将Mybatis全部替换为Mybatis-Plus了,整体代码看起来更简洁而且更高效,并且可以成功获取到数据,那么现在数据还在后台服务器,为了将数据传输到前端服务器进行展示,所以Vue需要安装Axios。首先,进入前端项目目录,在此目录下打开cmd
- 然后输入npm i axios -S
二、使用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()函数,修改为如下内容
- 再来看前端内容,发现后端数据已经传入前端了
三、配置多条件模糊分页查询
- 首先在HomeView.vue中给邮箱和地址配置名称
- 在HomeView.vue中设置email和address默认为空
- 还是在此页代码中的load()函数内对email和address赋值
- 然后我们测试一下多条件模糊分页查询已经成功
四、加入搜索框内容重置功能
- 首先在HomeView.vue中加入“重置“按钮
- 再继续加入如下代码
- 然后我们测试一下,发现此功能成功实现
五、实现新增用户功能
- 首先在HomeView.vue中加入如下代码
- 然后初始化参数
- 给新增按钮增加一个点击事件
- 设置此点击事件
- 然后看一下前端,已经成功出现新增界面了
- 因为我们要把数据保存到数据库中,所以我们添加一个点击事件,目的是存储新增用户
- 编写此点击事件,存储新增用户
- 然后去前端测试一下,插入一个新用户,发现保存成功
- 然后去数据库中查看,发现已经成功插入这个新用户了
- 为了后面操作方便,可以使用baseURL代替每次请求头,首先将请求头赋值给request.js中的baseURL
- 然后删除原来的请求头
- 最后测试一下,发现数据依旧可以正常传输
六、实现编辑用户功能
- 给“新增“按钮添加点击事件
- 编辑此点击事件代码,还要记得修改之后要重新load一下
- 然后我们来到前端测试一下,可以成功实现修改用户信息的功能
七、实现删除用户功能
- 给“删除“按钮添加点击事件,并加入删除判断功能
- 编辑此点击事件代码,还要记得修改之后要重新load一下
- 然后我们来到前端测试一下,删除判断弹窗功能已经实现了
- 然后我们继续删除“e”这个用户,发现也已经删除了
八、实现批量删除用户功能
- 首先加入选择列,并加入函数,目的是完成批量删除功能
- 初始化参数
- 编辑函数获取用户数据
- 在UserController.java中加入批量删除用户的函数
- 在“批量删除“按钮增加新的点击事件
- 编辑此函数将用户id数据进行扁平化处理
- 然后我们发送请求
- 加入批量删除确认弹窗
- 然后我们去前端测试一下,批量删除用户“d“和用户“c”,我们发现已经成功批量删除了,所以我们完成了批量删除的功能
总结
到目前为止我们今天的内容也结束了,可以看到今天的内容较多,也比较难,但是增删改查是我们Web项目的基础,所以这是必须要完成的内容。下篇博文将给大家带来SpringBoot实现代码生成器的内容,我们明天见!