15.用户列表添加、更新及删除功能的实现

一、添加

1.el-button按钮

2.绑定点击事件以及添加对话框

 3.选择角色

3.1、获取角色列表

3.2、roleList进行v-for遍历创建下拉列表

 3、确定按钮

确定按钮绑定事件,注意:要进行强行校验,要不然会是这样的一个效果就是我们一点击添加用户之后我们也不输入内容就直接点击确定,我们默认失去焦点这一块的校验不会触发。所以我们在点击确定的时候用validate方法强行的触发一遍这个校验。

 4、对话框消失

点击确定按钮的时候将对话框消失,朝后端发起post请求。注意:发完了post请求,后端添加数据成功之后还要重新再获取一遍我们这个getList方法,让我们的列表重新的再获取一遍最新的,这样的当前页面才会发生改变,也就是不用自己手动的刷新页面就能获取最新数据。

4.1、前端

 4.2、后端

 

在测试Apifox,测试接口是否成功。

 

 

为防止上一次填写的信息还在,我们再进行个赋空。

二、更新

1.前端

密码为什么没有显示呢?

因为我们当时并没有把密码从后端返回回来。这也正常,我们不能一更新就可以看到用户的密码,所以我们就直接输入新的密码就可以了。

2.后端

 在测试Apifox,测试接口是否成功。

 

三、删除

1.前端

2.后端

猜你喜欢

转载自blog.csdn.net/m0_65436732/article/details/133489800