67-尚硅谷-硅谷通用权限项目-用户管理模块-用户分配角色前端

各位同学大家好，刚才呢，咱们完成了用户分配角色接口的开发，分别实现了两个接口，第一个获取用户的角色数据，第二个给用户分配角色，那下面呢，咱们开始整合前端，把前端功能我们最终进行实现，首先后端我先重启一下，然后咱们开始怎么前端，这个前端我就直接复制了，然后把里边内容给大家详细说一下，那咱们看一下啊，首先第一部分咱们把两个接口在JS文件中先进行定义，那咱来到肉点JS里边定义两个接口。我们直接复制过来，首先第一个获取用户的角色信息。然后第二个为用户分配角色路径，跟我路径应该是一样的，各位自己写的时候特别检查一下路径，不要写错，这是我们的第一步操作。

然后这步之后，我们的第二部分在页面中加上一个角分配角色的按钮，那下面我把按钮加到页面中，在例子点vuee中，注意啊，是用户的例子，Vuee中咱们给它加上，我就加到这个。就是我们之前的这个位置。咱之前有一个。里边啊，我们找一下。应该是在列表的下边有一个叫删除，我就加到删除的后面，我们加上一个叫分配角色里边把这个肉给它串进去，这是我们的第二部分。然后咱们再看第三部分，第三部分呢，咱们分配角色，让他也来个弹框，最后把弹框加到咱的英文中去，那我来加下。我就放到这个位置加个弹框，弹框里边进行角色的分配。

弹框加上之后呢，我们继续往下来写，下面呢就是写我们的JS代码，首先第一个把角色的A片在页面中先进行引入，因为咱们要调里面的方法进行实现，咱们改一下，我们这个叫肉点J，然后之后呢，加上几个初始值，这部分直接拿过来。然后咱们看一下里边这些值。首先第一个值就是刚才那个弹框，第二个是所有角色列表，第三个是用户角色ID，包括下面是复选框相关的一些属性，现在我们就加上了，然后加上之后，最后我们写上里边的方法。这个方法我从里边复制。

咱们直接拿到methods里边来。然后我们看一下这个方法，首先第一个方法就是显示角色，包括所有角色，另外就是用户已经分配角色，然后下面就是复选框相关内容，最后就是分配角色，咱们在没有里边封装两个数据，一个用户ID，一个角色ID，最后调方法进行分配。所以说以上前端部分我们就完成整合，各位从里边直接分也可以了，因为咱们之前的角色用户都写过前端，咱现在重点放到我们的后端进实现。那这些呢，都整合之后，咱们最后把这个效果试一下，就看一下用户分配角色的功能最终的实现，那咱们来看一下这个功能，首先为了咱们看着方便，我先把这个用户角色关系表中数据，咱们现在给它删掉，为了咱们一会儿看到更明确。

目前里边有这么多数据，我现在都删掉了，然后删掉之后我们来进行测试，首先来到我们的用户列表页面，咱们以第一个为例，我点击这个按钮，就是角色分发按钮，那大家看啊，比如现在我选择咱就以一个为例，选择普通管理员，然后点保存。大家看提示，我们是不是成功了，咱们看表里面数据，大家看数据是不是加进来了，这个是用户ID，这个是角色ID，咱们加的是普通管理员。所以咱们这么看是成功的，那咱们再看一下啊，比如现在我点击这个分配，大家看问题就出来了，正常应该怎么样，是不是复选框应该是默认选中的，它默认选中是不是应该是这个值，但是目前这个没有，但是它却能添加，所以咱们把这问题解决一下。

也就是说我点击分配按钮，应该是让他之前已经分配角色，默认是选中的，但是目前他没有选中，那咱看一下为什么这个问题，咱把这问题来解决一下。那怎么解决呢？咱们这么来做，我们先看一下前端，咱们找到啊，大家看这个方法是显示咱们那个数据，因为咱们一点应该是调用这个方法进行显示，包括咱们往上看啊，刚才咱们有一个按钮，这个按钮。掉瘦呃散肉，所以在这个方法中我们进行显示，那我在里边这个位置，我就直接做个输出，咱们做一个调试。conso.log。然后把这个所有的角色咱们做一个输出。

输出之后呢，我再把这个分配的角色ID，咱们也做个输出，咱们看一下这两个值分别都是什么，通过它我们来做一个调试。那咱们来看一下啊，首先我在里边，咱们打开F12。打开之后现在注意啊，我点击这个按钮。各位看啊，目前是不是输出了，大家看输出什么，首先第一个这个位置。它里边有一个就是二，这个二呢，其实就是我们刚才分配这个角色ID，然后再来看这里边是什么，是不是所有的角色信息，包括你看里边啊有很多，比如有这个一。这里边有这个二等等，也就说我们现在其实如果说我们写的底层点是怎么做，拿着咱们已经选择ID到这里边进行比较，看跟哪个ID一样，如果跟哪个一样，那把哪个复选框是不是进行选中，但是现在咱用了element UI中的组件，把这过程已经封装了，咱们只需要值就可以了，但是大家看啊，它为什么没有选中呢？大家看问题啊，我们仔细看各位看啊这个值。

是不是一个二是一个数字，然后你看这个值是个什么，是不是一个字符串，就是两个类型它不太一样，所以最终它里边出了问题，所以咱们问题应该是在我们的接口中有问题，就是这两个值的类型不一样，一个是字符串，一个是数字。那咱们啊，最后我们来到接口中，咱们来检查一下，看到底是哪里问题，我们来看一下啊。首先大家看啊，在这个里边呢，我们先看一下这个叫ASVO，你看啊，里边有两个值，一个用坏地一个角色的这个列表，他们都是浪类型，当然咱们看一下，就是我们这个实体类中它这个ID。

角色也是浪类型，这么看应该没有错，当然各位注意啊。咱们之前那个就是用户和角色的是一类，咱们找一下用户和角色。找到这里。就是啊，往下看啊，用户就在这里，大家看啊，这两个的ID都是什么，是不是都是字符串啊，其实最开始也是了，但后面咱或者几位那个扎va处理那个位数问题是不是改成了string，所以目前问题在这里，咱们这里边是了，这位置又是这个就是。缀，所以咱们问题就出来了，那怎么做，要么都改成死缀，要么都改成了，但是改成了会有一个位数的问题，所以咱们都改成string就可以了，其实改成浪也可以，咱把这行打开，让它做一个自动增长就可以了，但是咱们都改成缀，所以现在我来改一下，首先这两个值。

改成。然后下面这个也改成词缀，另外里边还有这么一个实体类，就是用户角色关系是一类，咱们也都改成字符串。然后改完之后，里边这边应该改一下，改成这个string。咱们再检查一下，看这位置也需要改一下。所以大家看啊，现在我们就改完了，都改成了统一的类型，都是字符串，最后我把它启动，我们最终再试一下，看一下最后的结果，用户分配角色，看数据能不能正常显。

等它启动咱们测试一下。现在已经启动了，然后咱们来到这里边，我现在刷新。首先我点击test大家看啊，很明确，这个普通管理员是不是就选中了，然后咱们看这里边这二是字符串，再看所有角色这个值是不是也是字符串，目前类型是不是就一样了，这就对了。比如说咱再试一个啊，我现在点它，我来分配角色，我多分配几个，分配三个点保存，现在成功看表里面数据也加进去了，然后咱们现在再点击分配，你看啊，这个是不是他能做到回血，比如现在我们重新分配点保存，那咱们刚才说过它是怎么做的，把之前的删掉，是不是加新的，然后你看之前的三个数据都删掉了，又加入了新的内容。

所以大家看啊。以上我们就完成了用户管理模块中的用户分配这个功能，包括接口，包括前端。注意刚才我们的这个问题，你要让类型保持一致，要么都是浪，要么都是字符串。所以咱们到这里啊，把用户管理模块的功能就都完成了。