68-尚硅谷-硅谷通用权限项目-菜单管理模块-需求分析

各位同学大家好，在前面内容中呢，咱们已经完成了两个功能模块，我在这里边给大家写一下，第一个模块就是角色管理，第二个模块是用户管理，那咱们讲到这里，用户管理。角色管理。咱们之前已经完成了，然后这两模块中他们之间有这么一个关系，给大家写一下，首先各位注意，就是一个用户可以有很多的角色，然后一个角色中可以包含很多的用户，这是我们之前做到的，咱们分别实现了用户和角色的增删改查操作，另外在用户里边实现了给用户分配角色，那这个之后呢，咱们今天来完成第三个模块，这个模块叫做菜单管理，那什么叫菜单？给各位同学来解释一下，首先我们先做一个基本的介绍，然后咱们开始实现里边的具体功能。

首先大家想一下我们这个过程啊，就是比如说我现在有一个用户，这个用户呢叫张三丰，然后这个张三丰他是不是要属于某个角色，比如说张三丰的角色是我们的系统管理员，那各位注意啊，张三丰是这个角色，而这个角色可以操作咱系统中的很多的菜单，比如说张三丰能操作这个用户管理。可以操作角色管理，可以操作菜单管理，另外可以操作其他的部分，这些就叫菜单，而菜单里边呢，有它的具体功能，比如说用户管理中有添加。有修改，有删除，到其他的模块中，跟他都类似，这个就叫菜单，所以咱们现在做的就是在这个模块中来维护菜单，分别实现主要是以下几个功能，给各位做个介绍。

首先第一个那就是菜单的添加功能，包括修改，包括删除以及列表功能。另外还一个功能，跟之前一样，咱们要为用户分配菜单。举个具体例子，比如说我现在系统管理员具有用户管理的操作权限，具有角色管理操作权限，那这个时候因为张三属于系统管理员，所以张三也就具有了用户和角色两个模块的操作权限。以上就是他们之间的一个关系，用户管理、角色管理和菜单管理。这个过程呢，给大家再来说一遍。我现在有很多的菜单，比如说我们有用户管理、决策管理、菜单管理，然后用户管理中有具体的具体功能，添加、修改、删除等，那这个时候呢，咱们有系统管理员，系统管理员有不同菜单的操作权限，比如说现在系统管理员能操作用户管理和角色管理两个菜单，这个时候张三丰属于系统管理员，张三丰就能操作这两个菜单模块。

以上是它们之间的一个关系，这各位把它要清楚。把这个之间的关系说完之后呢，下面咱们具体写一下在菜单管理中我们要完成哪些功能，给各位写到这里。首先第一个功能咱要完成，就是菜单的这个列表功能，这是第一个，而列表功能怎么做呢？大家看我这个图里边，我这里边有一张效果图，大家看这里等于我给它做成一个，大家看啊，这是什么结构，是不是一种树形结构？在系统管理下有用户管理，用户管理中有添加、修改、删除、分配角色等部分。所以第一部分我们做一个菜单列表的显示，我们用这种树形结构进行显示，这就是第一个，比如咱们具体介绍该怎么做，然后这个之后我们的第二功能实现菜单的添加功能，包括第三个菜单的修改功能，以及第四个那就是菜单的删除功能，就是最基本的增删改善操作，然后这四个之后，咱们最后一个在做的功能，什么功能大家应该能猜到啊，跟之前用户一样，咱给用户会分配角色，那这个功能就是给角色来分配这个菜单，就是角色对哪个菜单有操作的权限，所以以上是咱们要完成的这个五个功能，增删改查，还有给角色分配菜单，以上是我们功能的介绍。

那介绍之后呢，下面我们继续往下来看，下面咱们做什么呢？因为咱们这过程中，咱们肯定要在前端创建路由，然后在里面做到，所以首先第一部分咱把这个路由先做个创建，一会儿咱再写接口，然后路由我就从课件中直接复制一下，咱就复制这个部分。

我把这个拿过来，然后放到我前端的文件中，咱们找到root中的index JS，我们放到用户管理的下边。直接复制，然后这里边有这个页面，咱们把页面也做个创建。我这里写一下这个页面，这里特别说明啊，大家看啊，我一保存这里是报错了，各位记住啊，如果以后你看到这个错误叫dependence not found，就是依赖找不到，那大部分时候因为咱的路径写错了，或者说你页面没有创建，所以咱们下面把页面做个创建，我根据它的路径在system里边建个文件夹，System menu就是菜单。

然后里边建个页面，点vuee，咱把它做一个创建。所以以上我们就完成了这个路由的创建，这个就可以了，可以之后咱们来看一下这个具体的这个效果是怎么样，我们到里边来看一下。咱们打开页面大家看啊，这里还有一个错误，应该还有一个页面没有创建，这是咱们后面做那个叫角色授权，就是给用户分配菜单，这个页面确实没有，咱们把页面也做创建，我们叫赛author.we那我放到system肉里边。这个咱们做个创建。然后现在应该可以了，那大家看了一遍啊，各位看，现在在我的路由里边多了一个什么菜单管理，我们点菜单管理会进入到页面中进行显示，所以现在路由我们就完成创建，这是我们做到的，然后创建之后我们再继续来看啊，因为这个过程中呢，里边有一个表的结构，这个表结构咱之前分析过，有用户角色菜单，然后他们之间是多对多的关系，咱现在重点看这个菜单这个表。

这里边强调啊角色，一个角色可以操作多个菜单，一个菜单可以被多个角色进行操作，所以角色菜单之间是一个多对多的关系，这个过程呢，在表中一个体现，大家看。Service。这个menu啊，就是menu是菜单表，然后另外有角色表，还有一个角色菜单的关系表，那咱们先看一下这个菜单表中的结构，把这个表给大家做个介绍。因为这个表里边有个细节问题，咱们特别要说一下，那大家啊，看我这张图里边，里边有一个说明，首先在图里边呢，其实它主要是两个字段，一个ID，一个per ID这字段什么意思呢？大家注意啊，我们的菜单是不是有一个层级关系，比如说第一层是系统管理，第二层叫角色管理，然后在角色管理中有增加、修改、删除，他们是不是有层级关系，而层级关系我在表里边要进行表示，怎么表示？就是用ID加判断D进行表示。

那具体怎么做的，我在这里边给大家来画一下菜单的层级关系的表示方式，给大家来写一下怎么来表示。他的做法通过ID和parent ID他们之间的关系经表示，那这里边给大家写一下啊，这怎么做，咱们举一个具体的例子。比如说我现在我就画这么三条记录，通过三条记录给大家说明这关系到底该怎么进行表示，首先啊，咱们画第一个，第一个里边呢，我们写三个字段。

这里写一下啊，首先呃，我往下稍微画一点。首先它的第一个字段就是当前记录的ID值。这是第一个，第二个字段就是它那个part ID，我们叫ID，第三个就是它的名称。这时候我们写的三个字段，咱们以它为例，然后下面的跟它都一样，那咱们写一下啊，比如说我现在ID值咱们就写个一，然后PD写个零，这个name我们就叫系统管理。这是咱们写的第一部分，而这个怎么去理解ID和名称好理解，大家看啊，Part ID是不是等于零了？那什么意思写到这里。它等于零，表示它就是一个顶层的这个数据，就是它是最上层数据，它上面就没有东西了，再有那种都是它下层数据，这个叫派D等于零，然后这个之后我们再进行表示，比如现在啊，我想表示这么一关系。

在系统管理下边有这个叫用户管理，咱们还是写三个字段给大家表示一下，咱们看怎么来做。我画到这里。比如说现在啊，这个名字我们叫用户管理，用户管理的ID，咱为了跟之前区分，我就叫这个优优，那大家想一下啊，我怎么表示用户管理属于系统管理的下一层，这怎么做各位应该能想到啊，它的是几是不是一，这个一跟你的系统管理的ID是不是有一个关联的关系。所以它是这么一个表示的关系，这表示它的下层。

那比如说啊，我再画一个。咱们继续来画，比如说现在啊，在我的用户管理下边有一个添加操作，那咱们画到这里。这个就是用户的添加。咱就简称添加，那添加呢，咱为了区分我写个值，比如说啊，它的ID叫111，那大家根据刚才的一样，我们想表示添加是用户管理下边这个数据，那怎么做，它的PD是不是叫幺幺，然后幺幺跟这个值是不是有一个对应关系。所以大家看到啊，以上就是菜单层级关系的表示方式，咱们通过ID和判ID的对应关系而表示菜单的层级关系，所以各位把这个关系给大要记住，你要知道一张表中怎么表示层级关系，它就是这么一个过程。

我们实际开发中一般表示层级关系基本上都是这么来做，所以这个我们就说到这里。然后之后呢，我们继续来看啊，在我这个菜单表里边还有一些其他的字段，咱们也做一个介绍，咱们来看一下其他字段。首先我们看第一个字段，它叫type type什么意思呢？代表菜单类型，我们这里边分成三种，大家看这里啊，一代表目录，二代表就是一，零代表目录，一代表菜单，二代表按钮，就是不同，这个就是菜单类型。然后第二个叫pass，是对应你的前端路由中那个路径，还有一个叫com，就是对应那个页面，另外还有一个叫mi Ms，其实是一个简写啊，就是permission，它是对应菜单中那个功能确认标识，咱后面会用到。另外还有一个对应路由菜单的图标，也就是咱们这种意思，你看啊，前面是不是有图标就对应它。以上是咱们说这个菜单表中的相关字段介绍，大家重点掌握ID和part ID的对应关系，表示它们的层级关系。

那咱们啊，看一下这个表里面的具体数据，找到菜单表咱们打开，大家这么来看啊，各位来仔细看，首先第一个你看啊，系统管理perd是不是零，它就代表顶层，然后它的下边有这么几个用户角色菜单等，这是咱们看到这么一个表示。而咱页面最终我们就要做成这个效果。所以以上就是咱们针对菜单管理里边这个关系功能，包括表的介绍，下面呢，咱们先开始开发相关功能的接口，最终在整合前端。