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

各位同学大家好，刚才呢，咱们已经完成了为角色分配菜单权限的接口，实现了两个接口，一个是获取显示数据，一个是最终实现分配。那下面呢，我们按照课件中的过程快速把前端进行整合，那咱们看一下第一部分，在路由里边咱们添上一个路由，就是把这个路由放到路由页面中去，我这里边就会添加。咱们来到路由页面root中的in s，我们看到这个我已经提前加过了，然后这个什么意思呢？给大家说明啊，各位来看，首先看这行。这什么意思？Hide是不是隐藏啊，也就是说啊，我加的是一个隐藏路由，然后咱们让它跳转到这个页面，那为什么用隐藏路由，为了实现页面跳转，因为角色权限它里边只是在我们的按钮中，我们做这个功能，它并不需要做真正显示，所以咱们加了一个隐藏路由，目的是为了实现一个页面跳转，这是第一个，然后第二个按照它建页面。

这个页面我已经创建好了，叫这个页面，这是我们的，就是第一步键键页面。然后创建之后呢，我们的下一步操作，咱们在这个角色的这个列表页面中添加上一个分配权限的按钮，那咱们来找到啊，注意啊是角色列表历史VE。我们找到位置应该是在这里。你看啊，有修改删除，咱在删除后面加一个叫做分配权限。这个我们就完成了按钮添加。按钮添加之后呢，在里边一个方法叫受赛O，那它实现就是页面的跳转。咱们在方法中创建一下这个方法，我在里边写一下。找到MY里边这个位置。我们实现这个页面的跳转。

把这个咱给它完善出来，我们加上一个注释。就是跳转进行分配菜单权限，然后怎么跳转大家看啊，首先我们看第一部分叫router push什么意思，就是通过路由跳转，后面加上刚才我们写的那个路径，也就是这个路径，通过它实现这么一个跳转啊，这个啊是我们做的，就是里边的这个路径，你看system叫aside also。通过它我们能跳转到一个新的页面进行显示，然后传入当前的角色ID，包括你的角色名称等信息，这是我们写的这部分，然后写完之后下面呢，我们在API这个里边定义咱们刚才的两个接口，把这个我们在里面定义，我们就在menu点里边完成定义。找到menu。我们写到最后。

加个逗号，然后定义，定义之后按照我之前提到的，咱们检查一下这个路径，看路径写的是否正确，就是路径不要写错，第一个就是查看，咱们来看啊，叫to在肉外地用盖体雕。我们来看到路径应该一致，然后第二个叫动和s post提交，并且用筷子body。就是里边的这个结构应该都是正确的，所以现在接口咱们就完成了定义这个路径一定要检查对，然后之后呢，那就是在我们刚才那个分配权限的页面中进行显示，这个代码咱就直接拿过来，然后把里面一些结构或者一些名字路径咱最终改一下。咱们先复制，然后咱们看啊改什么地方，第一个我这个引入的JS文件，我们的名字叫menu。这个做个修改，然后改完之后大家看啊，这里边有一些初始值，然后之后呢，我们在里面调了一个叫fe date的方法，就是完成这么一个显示，就是调用我们刚才接口中的方法进行显示啊，包括下面有一些其他部分，比如你做这个保存，最终这个分配的权限等等。

这部分啊，应该我们就完成了。以上就是前端的一个快速的整合，各位按照我的课件把这个能整出来就可以了，重点还是把后端接口好去写一下。然后这个之后呢，最后再来。进行最终的测试，我把服务先重启一下，然后咱们完成测试，咱们等它启动起来，最终测试一下。服务器已经正常启动了，然后咱们测试，首先我来到这个角色管理中，咱们点开角色管理中点开之后，比如说现在我新加一个角色，为了咱们操作方便，这个就叫test的测试。

确定点完添加之后，我点这个分配按钮，大家看啊，第一次我肯定是什么都没有，它就显示这个菜单的列表，比如现在我选择第一个啊，当然可以选择更多，我就以这个为例，选择之后我们点保存，大家看是不是分配成功，分配成功之后就是现在我再来点。各位看什么效果，这个是不是之前选中的就会默认选中，咱可以继续再进行其他分配，所以以上我们就完成这个功能，为角色分配菜单权限，也就是到这里咱们把这个菜单管理模块中的相关功能我们就最终完成了。