SpringBoot+Vue前后端分离项目中实现编辑用户功能

文章目录

• SpringBoot+Vue前后端分离项目中实现编辑用户功能
• 需求
• 给编辑按钮添加单击事件
• editUser方法
• SpringBoot后端接收selectuserbyid请求的方法
• UserDao动态代理接口中的selectUserById方法
• UserDao.xml映射文件中的sql语句
• 编辑用户对话框的效果和代码
• editForm对象
• UserList.vue组件中的updateUser方法
• SpringBoot后端接收updateuser请求的方法editUser
• UserDao动态代理接口中的updateUser方法
• UserDao.xml映射文件中对应的sql语句
• getUserList方法
• UserList.vue组件中的分页数据
• SpringBoot后端控制器中接收pageuser请求的方法getUserList
• 动态代理接口UserDao中的getAllUser方法
• UserDao.xml映射文件中的sql语句
• updateUser方法中执行完getUserList方法之后，会把查询到的分页数据重新渲染到UserList.vue组件显示用户信息的表格中
• 测试

SpringBoot+Vue前后端分离项目中实现编辑用户功能

需求

点击编辑按钮之后，跳出一个编辑用户的对话框，这个对话框中默认显示要编辑的用户的所有信息，然后你可以重新编辑，编辑完成之后，会重新显示本页数据。

给编辑按钮添加单击事件

editUser方法

此方法中干的事情：

1.向后端发送一个请求，查询要编辑的用户的信息，然后把要编辑的用户的相关信息，存储到UserList.vue组件的editForm对象中，此对象的相关信息如下图：

2.更改编辑用户对话框的是否可见属性值为true

editUser方法的内容，如下图：

< 20000 a id="SpringBootselectuserbyid_33">SpringBoot后端接收selectuserbyid请求的方法

selectUserById方法干的事情：

调用动态代理接口

查询用户

把查询到的用户转换成json字符串返回给前端

如下图：

UserDao动态代理接口中的selectUserById方法

如下图：

启动类扫描动态代理接口，如下图：

UserDao.xml映射文件中的sql语句

如下图：

编辑用户对话框的效果和代码

效果，如下图：

代码，如下图：

editForm对象

UserList.vue组件中的editForm对象用于存储编辑用户的相关信息，如下图：

UserList.vue组件中的updateUser方法

updateUser方法干的事情：

1.向SpringBoot后端发送一个更新用户的请求，并把已经编辑好的用户信息封装到editForm对象里面，传递给后端

2.把编辑用户对话框的显示状态设置为false

3.重新调用getUserList方法，得到一个新的userList集合，重新渲染到用户表格中

updateUser方法的内容如下图：

SpringBoot后端接收updateuser请求的方法editUser

UserDao动态代理接口中的updateUser方法

如下图：

在配置类中扫描动态代理接口，如下图：

UserDao.xml映射文件中对应的sql语句

如下图：

getUserList方法

getUserList方法，用来为userList和total数据赋值，如下图：

UserList.vue组件中的分页数据

如下图：

SpringBoot后端控制器中接收pageuser请求的方法getUserList

因为后端需要接收前端传递来的Page这个json对象，所以要在后端写一个与之对应的Page实体类，这样方便接收前端传递来的参数，Page实体类如下图：

SpringBoot后端中的getUserList方法，如下图：

动态代理接口UserDao中的getAllUser方法

如下图：

UserDao.xml映射文件中的sql语句

如下图：

updateUser方法中执行完getUserList方法之后，会把查询到的分页数据重新渲染到UserList.vue组件显示用户信息的表格中

存储用户信息的表格，如下图：

getUserList方法执行之后，当前页面的数据，都会存储到userList集合中，如下图：

使用elment ui中的表格显示userList集合中的用户数据，如下图：

测试

首先进入首页，如下图：

接着点击第一条数据的编辑按钮图标，把用户名修改成飘雪，把密码修改成654321，如下图：

点击修改用户对话框中的编辑按钮，如下图：

查看数据库中的easyUser表中的数据是否成功更新，如下图：