4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/29-尚硅谷-云尚办公系统-角色管理前端-修改.mp4原创

各位同学大家好，下面呢，我们继续来实现角色的修改功能，那咱们直接完成修完功能，那咱看怎么来做啊，首先我们在这个页面中的每条记录后面大家看到了，是不是有一个修改按钮，我们想实验的效果就是当我点击修改按钮，让它也是弹个框。然后在弹里边显示要修改的内容，咱们改完内容之后点确定去改数据库中的数据，这就是我们要做的修改那种，点弹框进行数据回显，最终改那种，最终实现数据库中数据的修改，那咱们最终进行实现，首先我们还是在JS文件中把两个接口进行定义，因为定义的过程跟之前都类似，我把这个咱们就复制一下，用它快速改一下。那咱来到文件中，我们来写一下啊。首先第一个接口，那就是根据ID查询，咱们用于数据的显示，那咱对照接口，我们来看一下我们这个接口的名字找到啊在这里就是get，用的是get提交入ID给大家看就是，然后之后呢，还有第二个接口，那就是修改到接口。

咱们看一下啊，修改接口，我们起个名字update，白里边传入这个对象，咱们加上接口的路径，我们叫update，注意用的是put提交request body给它改一下啊，Put提交request body用Jason传递，所以现在这一部分我们就完成。完成之后呢，我们继续往下来做，咱们下面怎么做呢？我们来到这个页面中，大家看到啊，在每条记录后面，咱们是不是有一个修改按钮，就这个，然后修改按钮中呢，我这位置入这个，咱们有一个叫E啊这个方法，最后在下面就方法里按钮据D查数据在里面进行显示，就来做这个事情，那我这里边写下啊。

我写到下面method这个里边。这位置。先加个注释啊，点击修改。弹出框。根据ID查询进行数据的显示，在里边进行实现，咱们啊快速写下啊。E中传入ID。首先我们先弹出一个框。然后弹框，写法跟刚才一样，这点dialo。它的值等于处。第二个根据ID进行查行显示，那们一个方法来一下方法给个名字，我们就要这个。

Data。ID啊，根据ID查询，然后下面我们写一下这个方法，咱就调啊，当然你也可以不单独写方法，在里面直接写也一样，咱给他再来一个方法。这个方法根据ID进行。查询，那咱们写一下啊，调用API里边，刚才我定义的这个方法就是get白地。传入ID值，加上Z方法，然后加上这个response箭头函数，通过response得到我们最终的数据，把数据我们做一个值，就这个啊，给它复制进去，因为咱们页面中写的这个V-model双向绑定，它可以进行数据灰显，所现在啊，咱们把第一部分就完成了。

完成之后我们来看一下这个效果怎么样啊，看他到底是长什么样的，如果刚才说了一遍，各位没有理解要做成什么样，现在咱们可以看一下，比如现在我点第一个总经理manager点按钮。大家看是不是这个样子，进行数据回显显之后呢，我可以改里面的值，点确定，做到最终修改，那咱们来写这个内容。咱们看这个怎么做啊，因为点修改是在里面做的，它还是调这个在里边，咱刚才做了判断，如果它里边没有ID，咱们做的就是添加。有ID是不是修改当前因为咱是查出的数据里边肯定是有ID，所以做修改操作，修改里边我们来调一下它的方法。咱们最后调用啊a update ID。

然后入我们这个对象，就是这次点这个。肉啊，传过来，再加上这个Z，表示成功。我们加上一个response函数，然后成功之后跟添加应该是类似的，我把这个复制咱改一下啊，成功之后第一个提示操作成功，第二个关闭弹框，第三个刷新页面。以上咱这过程就最终完成了，啊是咱们讲这个结构。我把这个保存一下啊，然后最终做个测试。刷新页面，点击修改按钮，弹个框，比如说我现在啊，总经理咱们来个at，然后点确定。大家看是不是成功，然后这边就是总经理at硅谷，咱们就真正完成修改。所以以上啊，角色的修改功能，我们就最终完成。