57 - 尚硅谷-RBAC权限实战-角色维护 - 分配许可信息.avi原创

许可维护啊，我们功能做完了啊，树形结构的节点的增删改查我们都演示过了啊，那么除了查询可能会稍微复杂一些，增加、修改、删除相对来说跟以前的用户它差的不是很多啊，那好了，做完以后啊，我们就往下来做了，那么接下来我们就要把角色和许可之间的关系给他维护好了，我们这里有一个绿色的按钮，当我点击之后，就等同于给这个角色来分配许可分配权限，所以点击之后它会跳转到一个分配的页面。那么进到这个页面以后，我要勾选我们树形结构前面的复选框，我勾选之后点击按钮，它等同于把我们选择的节点数据增加到关系表当中，那如果我取消，那就意味着我要把这个数据给它从关系表中删除，那这就是我们想要维护的关系的数据啊。那好，接下来我们先把页面准备好，然后来实现我们相应的功能。

首先我先找到我们角色的页面。把那个角色的页面咱们先找到来角色我们有一个index啊，然后呢，接下来我们去找到我们的页面啊，那么这里我们会有一个按钮，这个按钮呢，在这个位置，我点击之后，我要进行跳转，所以on click，它等于我们写上叫go，我们的分配的页面啊，咱们这么写就可以了啊，那你给谁分配啊，你得告诉我，所以肉点ID啊，好把这个我们拷贝。拷贝以后，我们放到我们的这个位置啊，来放到这个位置，嗯，咱们叫function，诶这么写啊，然后给它一个ID，然后呢，我们window.location.ef然后APP pass。

斜杠啊，我们叫角色，然后我们分配啊，我们要跳转到分配页面，然后你把ID给我传过来啊，你对哪一个角色来分配，你得告诉我，所以我们接下来在我们角色的控制器当中。我们要跳转页面了啊，所以拷贝拷贝以后我们放到这里，然后给它改改名字。好了啊，然后这个我们也改名字就可以了，可是那你的这个ID啊，我们得把它显示出来啊，所以那这个ID我想想咱们暂时先不用，咱们先不考虑吧，咱们往后传就行了，咱们先跳过去，而这个我们的跳转呢，它是一个树形结构，所以啊跟咱们之前的那个许可的页面是比较像的，所以我们这里拷贝，拷贝以后改个名。

好了，然后把它拖过来就可以了啊行，那拖过来以后，那这个时候我们要考虑的事情呢，就是把这个数据的一些是属性给它去掉，首先我们这里就不需要增加这些按钮什么的了，所以这些东西我们就不要了啊，并且呢，把一些我们的之前讲解的内容呢删掉啊，让我们的页面变得简洁一些，这个我们也不要了啊，把它去掉，嗯，都不要了。好啊，然后我们这里就没有增删改查的操作了，我们是分配啊，那这些方法我们就都不存在了啊好，然后呢，我再确认一下图标没问题，这些也基本差不多，行，我们试一试啊，先跳转页面，咱们再说别的啊，嗯，然后呢，我来确认一下啊，那么把这个给它停掉，嗯，好。然后重新启动服务器。好了，启动完了以后，那接下来我们就来试一试，那首先我们就刷新，刷新以后我现在要点击我们的绿色按钮了，点点完以后大家可以看到已经跳转到了我们的分配页面，但是你跳转过来以后啊，它没有对应的按钮，并且前面也没复选框，那不行，所以我们看看如何能够增加复选框呢？在我们的文档当中，其中它这边就有一个说明，就是加复选框，怎么讲在setting里面增加一个属性就够了，叫启用复选框，所以拷贝拷贝之后呢，那么我们接下来咱们就在这个位置给它写上那个setting。

在这个位置啊，给他写上一个逗号，诶好，那么写完以后，那这个时候我们刷新一下就可以了啊，诶直接刷新。诶没问题，我们复选框就出来了，然后呢，还有就是那个按钮啊，这个按钮我们直接来参考一下，来点击检查，点击检查以后就是我们的这个按钮，所以啊，我们来拷贝，拷贝之后我们放到我们塑形结构的上面即可啊放过来，然后呢，我们刷新一下，看一看实际的效果刷新。

大家可以看到现在基本上就差不多了啊好了，那现在基本上差不多了以后，那接下来我们要做什么事情呢？我们需要的是勾选复选框，然后点击按钮向后台来发送数据。那也就意味着我先勾选，但是勾选的时候大家有没有发现我们这个复选框的状态好像有点变化，什么变化呢？你会发现我们这里有的是没有被选中的空白，还有的呢，是选中了写个勾，可是这也选中了也加个勾，但是他们的背景颜色不一样，一个是灰色，一个是白色，那它们有什么区别呢？给大家解释一下，我们这表述的呢，这个白色是完全选中的意思，就意味着它如果有子节点的话，它全部选中，那如果他要没有子节点呢？诶也就是说它的子节点没有完全选中，那么它就是灰色背景的，所以我们在当前的。

页面中它的复选框有三种状态，哪三种？未选中状态，完全选中状态，未完全选中状态三种状态啊，那好了，那我点击分配许可的时候，我就要知道我到底有没有选择过，那如果有我选了多少个。啊，你要是零那没有意义啊，我得判断一下，所以我们找到按钮给它增加点击时间。咱们就叫做什么呢？叫on c吧，嗯，好，咱们要执行我们的分配啊，好行，把这个拷贝啊，我们要行分配了啊拷贝拷贝以后我就放到我们下面这个位置function啊，我们要执行分配了，那你执行分配的时候，你首先你要把那个选择的数据给我取到，那这个我们该怎么呢？我们文档当中有说明。

我们要想获取选中的元素，那么它这里面是有查询的操作的，其中就有一个方法叫get checked note，所以啊，把这个咱们原封不动拷贝过来就可以了啊，好，拿过来，拿过来以后这里面也有一个叫tree object，这个咱们讲过，所以咱们直接从上面的代码里把它拷贝过来可以了啊。好，那这个呢，我们写上叫promis tree啊，这是我们那个容器的名称，然后通过它来得到我们的节点，那这个节点它是个S，表示的是负数，可是到底它的长度是多少呢？我们再来看一看，我们写上叫if啊，如果它的节点S，它的点我们的size啊，那么我们这个size呢，我们诶process，我们叫长度应该是我们的零啊，零，如果你的长度是零，那其实你是没有分配的必要的，为什么呢？你都没选中嘛啊所以在这种情况下，我们应该怎么办呢？我们应该提示一下，请选择需要分配的。

许可信息啊，或叫权限信息，所以我们这里提示一下，嗯。来把这个呢，我们拷贝啊来嗯。行，然后呢，我们接着呢，来这儿写啊，好给它写上，嗯，我们上面的layer是有的，那我们这里就写上啊，请选择，嗯，来请选择需要。需要分配的许可信息啊，好了，行了，写完之后，那么我们else，那么你else的话，说明它不是零，那么它就有值，那有值的话我就把这个数据提交就行了，所以啊，这就跟我们之前学的差不多了，所以Dollar符点阿贾克斯，然后我们写上大括号type r等于post，然后再来URL，嗯，等于。

APP pass，然后斜杠叫叫肉啊，咱们叫肉，然后呢叫执行分配好，然后接下来我们要传数据，那这个数据我们怎么传呢？之前呢，我们给大家讲过那个分配角色，分配角色呀，我们采用的是表单，然后呢，把它自动的序列化来封装的数据，但是我们这里啊，它可能没有表单，为什么你看着是复选框，但是它是复选框吗？我们来确认一下，点击右键检查。

你会发现我们这里并不是一个复选框，而是一种样式它模拟的复选框，所以在这种情况下，你直接想拿我们的那个复选框来组合成数据提交已经做不到了，那我们该怎么办？那其实我们搞明白它的原理就行了，来，我们打开啊，我们的j query文档，我们表单当中有一个方法叫序列化，我们打开，打开以后你会发现它的这个地方是把表格元素的内容生成一个字符串。而这个字符串就是名词对，那也就意味着我们不用它，我们自己形成名字对儿，其实也是可以的。那我们怎么来形成名词，对呢，大家看我们就这么写D啊，咱们等于等于什么呢？咱们会有一个叫做肉ID，这个row ID我们其实是可以直接得到的，我们写上叫per。点ID，这样的话，你把上一个页面的ID我就过来了，过来了以后，然后我要拼接字符串的，怎么拼接呢？我们有多少个节点，我们就拼接一下，所以我们写上叫dollar.it啊，把每个节点给它来啊，操作一下咱们叫node s，然后function，嗯。

好了，写完以后，那么我们的I是我们的索引，然后每个节点我们放到这儿，它就是那个阶省对象，所以在这里呢，我们就可以拼接了，叫D，咱们叫加等，等于什么呢？首先等于你的名称，你的名称不就是那个叫promis ID吗？啊，然后我们加个S吧，或者是我我想想嗯，加个S也可以啊，它等于等于什么呢？加上叫node.id。但是你要记住多个数据之间应该有个符号连接起来，所以我们这么来写啊，这么写就可以了，好，你这么写完以后，那我们的数据就准备好了，我们这里就不加什么loading了，我们直接发送，然后成功返回结果就可以啊。

好，Function啊，然后在我们这里给它写上我们叫做啊，那我们同样要判断一下是成功还是失败，好我们写上要嗯，好，然后呢，我们else，诶，好啊，其实啊，我们这里呢，就是告诉你成功还是失败就可以了啊好，我们写上，那这个呢，我们就写上叫做。嗯。写上啊，咱们叫做分配许可信息失败啊，咱们写上失败就行了啊，然后我们再来拷贝，拷贝以后放到上面，我们告诉他成功了。嗯，咱们写上啊，咱们叫成功。好，那然后呢，我们这把这个图标我们去一下啊好了，行，那我现在我们这个写完之后啊，那我就把这个方法给它来实现一下，所以在我们这里呢，我们要执行分配了，那我就在这写了public。

然后object啊，然后我们放过来，执行分配，然后request maybe啊，执行分配，然后我们这边response body，嗯，好，接下来我们还是把架子给它搭起来，阿贾克斯等于new阿贾克斯啊，然后我们的放过来，接下来我们放到这，我们的TRY，然后呢，我们的catch，好，把这个放过来，我们的exception啊，E1.2啊，如果发生异常，你失败了，点success，给个如果你没发生异常的话，在我看来你就成功了，By true。

写完以后，你把页面中的数据给它得到，一个是我们的inr，我们叫做ID，还有一个是我们的封装好的那个宿主，我们写上叫in。好，我们写上数组叫promis ids啊，好，我再来确认一下是不是这样的。啊，叫promis ids，好，写完之后，那我现在把它们封装到map集合当中啊，好，Per map等于new哈希map，嗯。之后，那么我们就写上string object。嗯，好了，然后接下来往里面放内容了啊，我们pair map.put哎，我们就叫角色的ID啊，把它放过来角色的ID还有啊，咱们para map.put我们就是那个promiss的ids，给它放过来promis的ids啊好了，过来以后，那我现在就准备来增加关系表的数据，所以我们写上叫row啊，咱们叫row service.insert啊，咱们的row insert，我们的permis，好，把map给它过来就可以了啊，嗯。

好，写完之后我点击小泡，然后嗯，写完之后把给它补充完整，嗯点一下。好，那么点击完成以后，我们要调用那个roll door，然后呢，去insert就可以了啊好，然后把那个map给它放进去，然后点击小号咱们create，嗯，创建完成以后，那我的insert我要拷贝了，在我们的肉里面，我们要给它增加了来insert。

好，那写完以后啊，写上insert啊，我们叫中间的关系表叫啊，然后呢，括号啊，咱们的括号values，那么我们应该其实是这么写的，那么这里呢，就是两个字段，一个叫row ID，一个叫I，然后呢，我们下面这个底确定，所以我们这里应该循环便利，我们写上叫for it。那你就是把那个叫promis ids的拿过来，然后我们把每一个就当成promis ID，然后我们的分割符，哎，逗号就可以了，因为括号也是要循环的嘛，所以括号啊，写上我们这边叫row ID，还有一个叫promis ID就可以了啊好，那我们现在这个就算是写完了啊好。

呃，写完了以后呢，我们来看它对不对啊，我们来试一试。把服务器给它停掉。停掉以后，然后呢，我们把它重新启动好啊，现在呢，已经启动完了，那我现在呢，我们试一试，我们现在刷新。刷新以后，那我当前我们的数据已经出来了，那比方说呀，我们把这个给它勾上，你勾上了以后，我点击分配许可，我们关系表的数据它就会添加，所以我们来试一试啊，来点击分配点，点完以后说成功了，那么我们关系表的数据就有了，你看三条是没错的，因为我勾选了三个嘛，123有三个勾，这是对的啊。

可是呀，有一个问题，我现在如果再勾一个呢。大家想想数据库里面应该有几条数据了，是不是应该有四条啊，因为我勾选了四个吗？好，我点击分配点，点完以后大家看怎么了，你会发现我们刷新是四个吗？不是是七个，那这又是为什么呢？没错啊，是因为我们之前的数据依然存在，而我们当前是新增，他把你选择的节点全都保存到了后台，对吗？所以这就意味着你的数据是不是有重复的呀？那我该怎么办？我怎么知道哪些数据该加，哪些数据不该加呢？我怎么区分它呢？否则它重复了，那就不对了，这是冗余数据啊。那我该如何来处理呢？很简单，大家想想，我们最终这个角色所拥有的权限，是不是我们现在所勾选呢？

那就意味着你以前勾选的其实还有意义吗？没有意义，所以在这种情况下，我可以在增加数据之前，把它之前的数据我都不要了，这是可以的啊，所以大家看我们简单的来操作一下，就是把它之前的数据啊，我们全给它删掉啊，所以来我们写上S就行了，那你这么写完以后，我需要根据什么删呢？就根据角色的ID来删，而那个ID恰恰就在这个map里面，所以拷贝把它放过来就可以了啊好，然后我们点击create，嗯，那行了，把这个我们拷贝，拷贝之后放到我们这个位置啊，来我们的delete。啊，然后delete啊来delete from t_per我们叫条件，根据的就是ID，我们叫肉ID啊好了，那我现在把这个做完了，我们重新来试一试，我清空我们关系表的数据。

然后我们再来重新启动，看看我们现在的数据对还是不对。好，重新启动。好了，启动完了，那我接下来呢，我们就再来试一试刷新，刷新以后来我还跟刚才一样，我勾选的123，那我现在点击分配，OK，数据库里面有三条数据，这是没错的，那如果我再给他勾选一个呢，我们说了最终他的权限是四个。那好，我们再点分配也成功了，你看看数据库大家看啊，这是123我们刷新。你会发现123还在吗？没了4567了几个四个，这说明我们分配许可的功能已经做完了。