63-尚硅谷-硅谷通用权限项目-用户管理模块-更改用户状态前端

下面我们继续开发更改用户状态功能，刚才咱把接口已经完成了实现，那我现在把后端服务咱们重新启动一下，启动之后咱们开始编写前端的代码，等它启动，咱们现在来到前端，在前端里边的第一部分，咱们在优侧点GS里边把刚才接口先进行定义，这个接口就是。更改用户状态，那咱们把接口写一下，我在里边创建这个方法，然后这个方法起个名字就叫update，里边两参数，一个ID，一个状态值，下面加上方法，方法呢，咱们从里边把路径复制一下update thes。路径里边两个参数，一个是ID，一个是状态，然后方法呢，提交方式，我们用的是get提交，这里边改一下现在接口就完成了，完成之后呢，最后我们写一下前端的部这个页面部分，那页面怎么做，我们注意啊，首先大家看我的页面中啊，有个地方就是在我们的这个地方，大家看是不是这么一个效果，然后这个效果是什么呢？咱们打开那个U，在里边有一个叫Switch开关，大家看是不是就类似于这么一个效果，所以咱用它做实现，比如说现在啊，我里边是这个样子，表示正常，当时一个灰色，那就表示禁用或者说不可用，用这个进行实现，那咱们看这里怎么做的啊，首先第一部分呢，Yellow Switch加上一个VGA model，咱通过scope取到每行中的的。

值，如果它的值是一，那咱们就显示可用，如果不是一，就显示不可用，这里边报了一个红线，咱可以忽略，它不影响运行，咱只是为了做一个判断，就是说这个里边的每行中的C值等于一，那咱就显示可用，如果不是一，那就是不可用。然后最后有一个事件叫称指什么意思？当我一点击它就会触发事件，然后调用我们这个方法，在方法中咱进行实现，然后方法中呢，我就把这个行里边的数据传过去，通过这个数据能取到ID，能取到状态等值。

这注意啊，肉代表行，把每行的这个对象，这个数据都传过去，通过肉能得到ID，能得到状态的其他值，那最后我们来写一下这个方法。我们写到这里。更改用户状态。这个。CS。然后这个方法我在下面我们做个实现。

那咱看怎么做啊，首先我们第一部分先做个判断，判断什么呢？如果说啊，当前用户是可用的。那咱给他是不是要修改为就是禁用，反之跟他一样，如果当天禁用，那咱肯定改成是可用，那怎么做呢？我这里边给大家写下代码，因为咱有一个肉，通过肉里面这个叫CS，咱们做一个赋值，然后怎么赋值呢？强调啊，如果它的值是一，那把状态是不是改成零了，如果它是零，那咱就改成一，这里边你可以写个if I判断，当然我这里边为了方便给大家这么来写。Thes，如果它的值等于一，然后咱们就把它变成零，如果它是零，那我就变成一，把这个值最终在里边再做个负值，也就是说最终状态值跟当前值正好相反，咱用一个三元表达式加负直径实线给它写到一行。

这么写各位可能不是特别理解，我这里边再解释一下这种写法到底它是什么意思，给大家再说一下啊，这个写法确实比较特殊一点啊，首先我们的做法就是咱们通过肉取到每行中的C的值，也就是说啊，当前知识可用咱是改成不可用，当前值不可用咱是改成可用，就是跟当前值正好相反，所以用三元表达式，我们在里边做这么一个实现，就是通过它我们最终做到。包括把它值最终复制给这个肉点C，然后写完之后咱们调用API中的方法进行实现，API里边刚才我们写了这个方法。

Updates，然后里边传值肉点，ID肉点。加上这个点Z，然后加上response箭头函数，这样的话就可以了，然后可以之后最后咱肯定是提示操作成功，包括在刷新页面就可以了，那最后我们来看一下啊，我把最后这一部分直接复制一下，呃，咱们当前呢，应该没有弹框，这里边应该不需要关闭弹框，咱直接提示包括刷新页面就可以了。这部分给各位拿过来，所以说以上咱就把这个更改用户状态的前端我们就出来了，特别注意啊，这一行代码的这个含义，取到当前相反的值经负值，如果你是可用变成不可用，如果你是不可用，那变成可用。最终调方法进行实现，所以现在这个我们就做到了。

然后做到之后呢，最后咱来到页面中把效果咱改一下，大家注意啊，咱们先看一下数据里边。为了明确啊，这个数据呢，我先把刚才多余伽的先给它删掉，咱为了操作方便，这几个值我先都删掉。然后咱们重新来加一些数据。大家看啊，目前三条数据，然后咱们用这个试一下啊，或者说咱们先加一条新的数据，这个数据我就叫test。为了咱们测试方便，都叫太次的。点确定。这个肯定做个添加，然后现在我们是第一个啊，第一个是正常，我点按钮大家看是不是就是禁用了，第二个是禁用点按钮是不是正常，以此类推，所以咱们最终就完成了一个更改用户状态功能的实现。

以上咱就把这功能最终完成。