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前后端分离项目中实现编辑用户功能

需求

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

给编辑按钮添加单击事件

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第1张图片

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第2张图片

editUser方法

此方法中干的事情:

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第3张图片

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

editUser方法的内容,如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第4张图片

SpringBoot后端接收selectuserbyid请求的方法

selectUserById方法干的事情:

调用动态代理接口

查询用户

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

如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第5张图片

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

如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第6张图片

启动类扫描动态代理接口,如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第7张图片

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

如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第8张图片

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

效果,如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第9张图片

代码,如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第10张图片

editForm对象

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第11张图片

UserList.vue组件中的updateUser方法

updateUser方法干的事情:

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

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

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

updateUser方法的内容如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第12张图片

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第13张图片

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

如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第14张图片

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第15张图片

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

如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第16张图片

getUserList方法

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第17张图片

UserList.vue组件中的分页数据

如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第18张图片

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

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第19张图片

SpringBoot后端中的getUserList方法,如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第20张图片

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

如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第21张图片

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第22张图片

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

如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第23张图片

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

存储用户信息的表格,如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第24张图片

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第25张图片

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第26张图片

测试

首先进入首页,如下图:

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第27张图片

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第28张图片

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第29张图片

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

SpringBoot+Vue前后端分离项目中实现编辑用户功能_第30张图片

你可能感兴趣的:(SpringBoot+Vue前后端分离项目中实现编辑用户功能)