60-尚硅谷-硅谷通用权限项目-用户管理模块-用户添加前端

各位同学大家好，刚才我们把用户列表已经完成了，那下面呢，咱开始实现用户管理中的其他功能，首先我们先完成添加功能，那添加怎么做呢？咱们做一个简单分析，我们的做法就是点击添加按钮，咱是不是要弹个框了，在弹框里面输入你的用户信息，点保存，最终数据加到数据库中，那下面咱们开始做这功能，首先找到添加的按钮，咱们往上来看，应该是在这个位置，就这里添加，然后里边一个方法叫A的，当我点添加调用A的方法，咱要弹过框，也就是让我这一段内容进行显示，把这值改成true就可以了，那咱们来写一下的方法。我写到这里。添加弹框的方法叫A的。

然后在A的里边呢，咱就弹个框，弹框的做法就是这次点dialo visible等于就会弹框，然后弹框之后咱们让这个对象的初始值等于空，因为它可能有之前的数据，所以现在第一部分我们就完成，完成之后咱们把效果看一下，大家看啊，我点添加是不是弹框，咱们输入内容点确定，最终加到数据库，那下面呢，我们找到确定的那部分，也就是弹框里边那个确定在这个地方我们看到啊，确定是不是这个。里边一个方法，Save update。那我们在下面写下这个方法就是添加的方法。当然这个方法大家也看到了，它的名字叫save or update，所以在后面修改，在里边也会实现添加或者修改方法，那咱们怎么来做呢？我把添加方法咱们写到下边，然后在里边我们做一个调用。

这位置我们写个添加，那咱们开始做个实现添加，怎么做呢？调用API中，咱们刚才定义的这个方法就叫。在里边传入咱们这个对象。加上一个方法，然后加上response箭头函数，这样的话就完成了添加，添加之后怎么做呢？这里写一下啊，第一个肯定是提示信息，然后第二个关闭弹框，第三个刷新页面。所以以上是咱们要实现的基本过程，那下面我们写一下啊，第一个提示信息，咱就提示操作成功，我把这段话直接拿过来。然后第二个关闭弹框，咱们让这个z.dialo这个visible值等于这个false就可以了，那我写一下啊，它的值等于false。

第三个刷新页面，咱们直接调这个fight的方法就可以了，所以以上添加方法咱们就完成了。完成之后呢，在里边啊，我再写一个修改方法，方便咱一会儿编写代码修改，咱们叫update，我先给他写到这里，一会儿实现，然后写完之后，最后各位都清楚，在里边咱就做判断了，怎么判断，大家想一下，如果说你做添加是不是应该没有ID址，做修改肯定有ID，所以在这里边判断一下。这次system user ID。如果说对象中没有ID址，那咱们就是添加掉这个C。

然后再加个else，如果说里边啊有I地址，那咱们调的就是修改，所以大家看啊，以上添加功能我们就完成了，这是我们写的前端的实现，最终咱们把效果试一下，看一下最后效果能不能做到。那咱们最终测试啊，咱们看过程，第一步点添加弹购框，然后在里边呢，输入相关的信息，第一个用户名，咱们输入一个我就叫at硅谷，第二个密码123456，第三个姓名上硅谷。第四个手机号我随便写一个，比如119 110，最后点确定，大家看提示我们成功，并且你看数据是不是也加进来了，然后咱们看数据库里边看这数据啊，大家看这套数据是不是也完成了添加，所以以上我们就完成了添加用户功能的实现。