43-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色列表（路由和页面）

各位同学大家好，咱们刚才呢完成了登录本地的改造，最终调用本地接口实现了登录功能，那下面呢，我们继续来完成其他功能，下面呢咱就开始实现角色管理的基本功能，分别把它的列表添加、修改、删除，还有批量删除的前端，我们最终做实现，那首先呢，我们先完成角色的列表功能，那这功能怎么做，我把步骤给各位写一下，然后咱们开始通过代码进行实现。那他怎么做，咱们来看一遍啊，首先里边的第一步操作，咱们先进行一个实现，第一步做什么呢？给各位说明，大家看我的页面中啊，因为咱要做的是一个叫做角色列表功能，那咱的功能是不是叫角色管理，所以第一部分在里边咱是不是要加上一个路由，这就是第一步，我写一下。添加角色管理的路由，这是第一步对咱们一会儿进行实现，把步骤给各位先做个分析。

这是第一步加路由。然后路由加上之后，我们下面写一下里边的第二步操作，第二步做什么呢？大家注意啊，当我点击某个路由，是不是要跳转到你的页面中去，所以第二部分我们做法就是创建路由对应的这个页面，咱们把这个做到，这是我们的第二部分操作，这咱一会儿进行实现，然后这个之后下面呢，进入到我们的第三步。第三步咱们做什么呢？因为最终呢我们要调接口，所以第三步咱就在这个API的目录下创建JS文件，定义我们角色管理的接口，包括它的列表添加、修改、删除等接口，这就是第三步。在API目录中建文件，创建接口，这是按照框架中的规范进行实现，然后这个之后呢，下面是我们的第四步，那大家想一下啊，第四步干什么？

做什么，咱是不是要在那个具体功能的页面里边。调用API中定义的方法，然后获取我们接口返回的数据，所以第四步我们要做一个接口的调用，最终把接口数据给它得到，这是咱的第四步。然后第四步做完之后，我们的第五步，也就是最后一步操作，我写下啊第五步。我们的做法就是把接口返回的数据咱们进行处理，如果你是列表，那咱们做一个显示，如果咱是别的，那我们做一些其他的处理，这个过程中咱们使用到一个技术，就刚才提到这个I的UI进行这么一个显示或者说其他处理，比如说你列表UI里面的表格可以做便历，或者做其他处理。

以上就是咱们开发角色列表一个基本的步骤，按照这五步操作，咱们把功能最终做个实现，包括咱们的其他功能里边也是遵循这个步骤进行实现，只是细节不一样，但是总体过程应该是基本一致的，所以以上是实现步骤的分析，那步骤分析之后，下面呢，咱就开始实现里边的具体功能。首先第一步我们先添加路由，那路由怎么做，给各位做个说明，现在啊，我们来看一下。这个我先给它拉到下面，咱们找到在我这个src里边有个文件夹叫root，在rootor中有个文件叫in JS，那单路由就是在这里边进行添加，或者说进行修改，这是咱的第一部分。

我把这个给各位截过来，然后为了一会儿写的方便，这图我稍微调整一下。把这个放在这里，所以做法就是在rootor里边的index里边，我们来创建一个路由，那怎么创建，咱们把文件打开看一下。大家看啊，这个文件里边呢，首先引入了view，引入了routeor路由，然后里边有它的相关的布局，咱往下看，下面这个位置就是具体的路由部分，那路由里边呢，有它自带的路由，大家看里边啊有example form等等，Example里边有table有，那咱可以参考它快速的修改，我就以example为例，咱做一个修改，那我现在啊，把这个路由咱给它再复制一份，然后用它我们改成我们的路由，下面咱做修改，然后咱看怎么来改啊。

首先第一部分就是路径，这路径呢，我就改成这个STEM，然后第二个是一个组件，就是咱的布局方式，什么叫布局方式呢？就是这个样子，是不是有一个。就是折叠的效果，第一层第二层，所以咱用layout，然后第三个是一个跳转的过程，我这里边加上system，这个加上叫list，这单一会解释什么意思啊，咱先写到这里，然后下有一个名称，这名称我就叫system。这是我们写的一个基本结构，然后写完之后往这里看啊，这位是什么意思呢？有个title title就表示你最终在这里边显示的名字是什么，那这个名字咱们写个中文就是。权限。管理，而咱目前做的一个叫角色管理的一个模块，那我现在把这个加上，就加上这个角色管理，这个我们做了一个说明啊，当然咱为了后面咱方便啊，这里边我还是改成这个叫系统管理，里边加一个决策管理啊，这里边我先叫系统管理。

这是咱们写的这个结构，然后写完之后大家往下看啊，下面是不是有个children准表示它的第二层的内容，那第二层里边咱来看啊，这个该写什么内容，各位注意，因为在系统管理中，咱的第一个应该叫这个角色管理，那角色管理我加个路径，就这个system肉加上它，然后名字我也叫这个名字。这里边加的是它的页面，这页面咱一会儿写，这里边加上一个中文，咱就叫角色管理这个添加，然后角色之后呢，后面我们应该是有一个用户，咱也给他先加上，后面咱们写到再继续做个实现。这里边我们叫用户管理，所以以上把这一部分我们就做了一个说明，然后这个写完之后，下面呢，咱们来看一下这个效果，大家看里边啊，效果就出来了，就这个效果。

然后效果里边第一层叫系统管理，第二层叫角色管理，用户管理，前面有图标，包括有它的内容，这个咱就做到了，然后做到之后呢，里面有个小细节，什么细节呢？大家看一下啊，比如说我现在点击角色管理，因为这功能还没有做啊，咱暴露错，咱没有做这个功能，大家看这里啊，你看这位置是不是一个路径。说一下这个路径啊，在井号后面有个路径，然后路径什么意思，咱这么来看，这是不是第一层。这是不是第二层，第一层system，第二层SYS肉，然后最终构成路径，你看这个是不是叫sys user，所以它路径是这么构成的，通过路径来进行页面跳转，另外各位看这个啊，比如说给它改一下。但改成它说一下这个什么意思啊，就是rerict什么，其实这行我可以去掉，但我加上说一下它的含义，比如我现在啊，我这么来做，直接输入system回车到哪里，是不是到user侧里边，我再重新试一下啊，直接输入system回车是不是到user，也就说你现在表示直接输入system，它会重定向到哪个路径中去，那我就到这个user，或者这行你也可以去掉，都可以，我就给它加上了以上就是路由的一个添加，咱们参考其他路由把这个快速做个修改可以了，然后其他路由呢，其实目前我们都可以去掉了，因为目前已经用不到了，咱目前做的就是系统管理中的角色管理，这部分我先给他都拿掉啊。

保留最基本的这么一个结构。然后咱们再来看，目前应该就是这个样子，系统管理。这个我们就完成了路由添加，然后路由加完之后，咱们下面呢，在里边来创建路由对应的页面，也就是说我现在点角色管理到个页面，点用户管理到个页面，咱来建页面，然后页面怎么做，在这行加上import，加上页面，页面中注意它的写法啊，加上一个叫艾特杠，跟咱们说那个点杠类似，只是框架中约定让咱们用这个艾特杠类似于那个点杠，就一个路径写法，然后这个页面它要求咱们放到views里边，视图里边，所以我们在里边建页面。

那我在里面创建，首先我建个文件夹叫system。然后在system里边我们来创建，再来个文件夹吧，叫这个system。这个为了咱们看的明确啊，我再建一个system user，然后在肉里边我来建一个文件叫list，注意是viewe类型，或者说wave类型文件，你看其他的都是wave类型文件，这里边我也建一个list.wave这个文件，现在文件创建，创建之后把路径改一下，注意不要改错啊。第一个角色管理叫system，肉里边的list，注意它的写法啊，最后一个是文件名称，前面都是文件夹，咱们是在这个位置。

然后下面一样啊，叫system user。这个吧，名字是list的，现在咱们把页面就做了创建，然后创建之后呢，在页面中啊，咱们加上一些内容，为了能测试这个内容呢，是框架约定的写法，加上to，加上div div里边呢，写上你的页面部分，那我直接做个复制，比如这是那个角色列表，咱们保存一下，然后这个是用户列表。

现在路由和页面我们就完成，完成之后做个测试啊，咱们刷新给他试一下，然后我们看啊，这里边报了一个错，咱看什么错误啊，是我哪里路径或者什么地方写的不对啊，那我们来看一下啊，改一下这个错误。大家看啊，错误呢，很明确，就这里边啊，少了一个一层的目录这个system，别的没有什么错误，那我们给它加上就可以了，加上之后我们再来试一下，看一下效果，大家注意啊，我点角色管理是不是到这个，我再点用户管理是不是到这页面，所以证明咱们这个路由和页面就完成了，然后它的框架中给咱做了封装，你看这位置是不是有那种显示，是它封装的这个效果，所以以上咱就完成了前端中的第一步和第二步创建路由，包括创建页面，这步我们先做到这里。