52-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色修改

大家好，刚才呢咱们完成了角色添加功能，下面呢我们实现角色修改功能，咱们看它的具体实现，首先我们的第一部分在API里边的肉点JS里边把修改接口先进行定义，修改接口有两个接口，这各位应该很清楚，第一个接口就是根据ID查询的接口，第二个就是修改的这个接口，那咱们先写第一个根据ID查询的接口，在里边我们做一个定义，我在这个位置写下第一个，我给这个方法起个名字，这个名字咱们就叫做get肉ID里边传入ID下面加上接口的路径，这个路径我到里边找一下。Find肉摆ID传入ID，它是一个post提交。咱们讲到这里。

这里边是POS提交，所以这个是第一个接口，根据ID查询，然后咱们再写第二个接口，就是修改，我写个名字就叫update，然后里边加上我们这个结构，把这个快速写下，首先它的路径我们找到就update。在这里，然后修改的话肯定也要传过对象，下面第二部分咱们看POS提交，并且用的是快的包底，咱们刚才刚讲过啊，快的body就是Jason传递啊，这里怎么写，咱刚说过用的是date属性加上一个肉表示，通过JC进行传义，所以以上咱们就完成了修改，两个接口定义，一个根据ID查询，一个是最终的修改，这个做到这里，然后下面我们来到页面中进行最终的调用。

在页面中怎么做呢？大家想一下啊，第一部分咱们点修改按钮怎么做，是不是要弹够框了，并且弹框里边要显示你的这些信息，然后咱们显示信息之后我可以修改，再进行修改，这是我们做的事情，所以咱们先做第一步，就咱说的数据会写，咱们看一下啊，先来到页面中找到修改按钮，在上面这个位置就是这里。在修改中呢，我们传入ID，那咱们下面写下这个方法，就是ED这个方法。第一个方法。修改进行数据线E方法。方法中传入ID，那咱们来做一下啊，它的做法很简单，首先我们在这过程中肯定要弹够框。

This次点这个叫dialo visible等于触这个就是弹框，弹框之后调用接口中的方法，刚才这方法咱们刚写过，Get肉ID传入ID值，点上这个Z加上response箭头函数，通过response得到我们最终这个数据，就是点date，然后这数据我们做一个赋值，This点上system肉，现在把这个就完成了。也就说这个方法做的事情是什么呢？当我点击修改按钮，它就弹个框，然后咱们根据点内行的ID查数据库，把最终结果在我们的页面中进行显示，因为它这里边system肉上面有个VGA model，它是双向绑定，最终它就能进行数据会显，这就是修改的第一步。

操作，那咱们试一下这个效果啊，大家看啊，比如现在我点第一个。注意这里边是不是就显示了，咱们再试一个是不是可以显示，我再试一个是不是都可以，所以以上修改的第一步完成了，根据ID查询数据，把内容在页面中进行，数据会显。数据回显之后，下面咱做第二步操作，就先这里边的值咱们是不能修改。修改之后我点确定要改咱们数据库中内容，那咱们写这个确定，咱们刚才说过啊，确定调的是这个方法，他能做添加，能做修改，添加就是判断里边没有ID，修改就是有ID，所以咱们到这里边最终写这个修改，这个操作咱们直接调一下啊，API里面那个修改方法就叫update。

在里边传入参数system，然后点上Z，加上response建头函数，这样的话完成修改，修改之后做什么跟添加基本上是一样的，我就把这个咱就直接复制了，因为跟它差不多，咱们看啊，第一部改提示修改成功，第二步关闭弹框，第三步刷新页面。以上就是修改这个方法的实现，所以咱们把修改就最终完成了。总之各位同学记住啊，修改是两步，第一步根据ID查询进行数据回显，第二步改数据，最终修改数据库中的最终内容，就是两步先查询再修改，现在完成，完成之后呢，最后咱们把功能做一个最终的测试，看一下最终结果，咱就以第一个为例。

大家看啊，第一步修改，进行数据回显，回显之后在里边我们改一下值，为了方便我都加上一个上硅谷。然后角色编号我也加上一个，比如再来一个叫at硅谷，现在注意啊，就是最后的时刻了，咱们点确定，大家看提示我们修改成功，我们看里边数据是不是都完成了修改，所以以上就是咱们做到的角色的修改功能的实现。