4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/25-尚硅谷-云尚办公系统-角色管理前端-列表（上）.mp4原创

下面呢，我们开始实现角色管理相关功能的前端，首先我们先做第一部分角色列表功能，那这个功能怎么做？我在图里边把实现步骤给各位先写一下，然后再按照步骤一步一步进行实现，我在里边做一下啊。首先第一步我们做什么呢？大家想一下，咱们做这功能是不是叫角色管理模块，所以它的做法就是，那我现在在页面中是不是要加上一个路由啊，这就是第一部分写一下添加。角色管理的路由。那路由怎么加呢？我们刚才分析过啊，大家看一下，在我们这个框架里边有一个文件root中的JS，我们在这里加上一个路由就可以了，这是我们要做的第一部分，就是添加路由，这咱们一会儿进行实现。然后这个做完之后，我们的第二部分，我们要做什么事情呢？给大家写一下，就是第二步。

我把这个啊写的详细点，路由呢，我们家的位置是在这个地方。Router中的in的宅子里边添加上路由，把这个写的详细点啊，为了咱们更方便，一会儿编写这个之后，我们到第二步操作做什么，咱们在这个API文件夹里边创建一个JS文件。然后在文件中定义我们这个。接口的信息，包括你的路径，包括提交方式，包括参数等内容，这是第二部分，那咱们来看一下啊，就这里边该怎么去写。大家看现在呢，一个叫A片，我在里边呢，一会我们个JS跟这个users类，咱们把相关的接口的信息在里面定义，包括你的径，提交方式和参数等内容，这是我们的第二步。然后这个之后写一下啊，咱们的第三操作怎么做呢？那我们就是在这个文件夹中，这个文件夹叫S里边创建我们的页面。

写到这里啊，在waves文件夹里边创建页面，然后我们在这个页面中做什么？引入你定义接口的JS文件，然后咱们调用接口，通过这个Excel实现我们具体的这个功能，这就是我们的第三步，就类似于我们这里边写到的，比如说你看里边有很多的view这个文件，然后在文件中咱就引入刚才那个接口JS文件，最终用发送X请求完成最终功能。所以以上就是咱们一个基本过程，那下面呢，按照这个过程，咱们把功能具体做个实现，那咱来写一下啊。首先第一步咱们找到这里边的route中的int JS，然后把这个打开，打开之后呢，大家看啊，我先把其他的先关掉啊，咱把这个打开，打开之后我们看到这里边有很多内容，首先它引入了这个啊，包括路由，包括布局等内容，然后在下面部分看这里边，这就是相关的路由部分，在路由里边大家看啊，它本身有这个example。

啊，包括等等，就是它自带的路由，那咱可以参考它加上我们的路由，那我就加到这个位置，加上我们这个角色管理路由，这个路由呢，我就从课件中直接复制了，各位写的时候把这个直接复制可以了，这个没必要写一遍啊，因为它是按照这个固定的格式进行操作，或者说你参考这个格式改成你的效果都是可以的，我就从课件中直接复制过来。然后咱们看一下啊，这个什么意思。首先啊，第一部分。这什么是不是路径啊，啊，就是最终啊，什么叫路径，就是最终在这个位置，比如我点这个是不是这个东西，就是他这个路径，这路径分成层级，比如你看我现在啊，一会咱会演示这个是我们的第一层径，叫system，然后里面有个children，这是第二层，最终它的径就是杠system啊，这会看到啊，然后之后第二个用到当前这个布局之后里一些相关的信息，包括图标啊，这是我们用于显示，然后下面是它的第二层，在丘认里边这位置你看啊，是一个这数组，如果说咱加个逗号，可以再加上其他的这个部分，这个就叫角色管理。

啊，这就完成，然后在节奏管理中有你的路径，这是有它的名字啊，包括这个艾斯温是它的图标，然后大家看这个位置。这是什么？Comment什么意思？是不是叫组件port，是不是引入，就表示你点击路由之后，它要显示哪个页面中的内容，这里加上就是你页面的路径，这页面咱没有写到这单一会儿进行创建啊，所以这是我们加上的路由部分，把这个我们就加上。

然后加上之后把它保存下。保存之后我们继续往下来做啊，当然各位注意啊，我这一保存，你发现这里边是不是出错了，出了一个什么A种什么意思呢？他就说啊，这个没有发什么，没有发现说这个list没有告诉你，说你可以用NM进行操作，但这个解决不了，为什么出错，很简单，因为现在我提到啊，这是一个页面，这页面咱们还没有创建，所以它出错，后来他不出错，我把页面先进行创建。怎么创建，我们写一下啊，在views里边，首先你这么来看，就是这前面部分都是你的文件夹，最后一个是页面的名称，那按照它创业啊，当然你可以改成别的名字，我就按照我这个来写了第一个文件夹system。

写到里边第二个system。也加进去。啊，为了看得更明确啊，里边我再加加一个文件夹。比如叫OK，咱看的明确啊。然后在system里加一个，这个名字叫list。它页面的后缀名或者类型都是wave类型，所以现在就完成了，然后这个就可以解决，所以咱们完成的第一步添加由路由之后，我们再做第二步操作，第二步做什么？因为最终我们是接口，所以咱们第二步在A文件夹中，我来建个S件，把我们的接口里边进行定义啊，那这个来一下啊，我们我在里边按照这个啊。咱们建个文件夹叫system。

啊，为了看再来文件夹，然后在system里边一个JS system JS。这个打麦拿过来。点JS创建之后，在JS里边把我们写到角色相关的接口，在里面定义就是我们的增删改接口怎么定义，我们参考那个user给大家写一下啊，咱之前讲过那个模块化开发中提到过。大家看啊。这什么意思，应该记得吧，Is default就是啊，表示这方法可以背用，咱可以加上default里边统一写各个方法，然后这是引入文件，那我们参考它来写一下，第一步引入这个中的的这个文件，因为它里面封装那个sales这个相关的这个内容啊，咱之前看到过，再看一遍啊。就是这个。

就是它啊这里做了封装，然后之后呢，在下面我们做个定义，我们加上一个tult。然后在里边加上你相关的这个接口，咱们先写第一个接口角色的列表，具体说是这个条件分页查询。那我们写一下啊，首先咱们对它呢，就是起一个名字，这名字随便起啊，我就为了各位看的明确，跟课件中就保持一致了，叫get配置list啊，但是你可以叫别的加上一个。方法，然后方法里面怎么写，注意这个特点啊，咱们找到对应的接口，就是条件分析查询，你看一下啊，接口中有几个参数定义的时候就写几个参数，我接口中是不是三个参数，所以在里边我就加上三个参数，第一个咱就叫这个current了，当前页第二个limit技数，第三个我就叫这个。

呃，色OBG。就叫这个名字啊，就是咱们为了我们操作方便啊，当然你可以叫别的名字啊，看你的习惯啊。呃，少一个单少一个字母啊，现在就可以了，跟课件中我就尽量保持一致，然后之后呢，在下面我们来做一个定义，怎么定义呢？参考右侧S里面这个结构，因为它是封装好的，用的框架，把这个过来咱们改一下啊。大家看什么意思啊，首先表执行里那个方法第一部分加上你请求径，这个径咱们从里边复制一下啊，推荐各位也都直接复制这个路径就不要手写了，很容易写错，你把它复制。这个路径这个是类上别再加上方法上，我方法上就直接加上这个当前页和每些技术数啊，把这个给它拿过来，就是里边的这么一个路径，但是这么写肯定不对啊，但要怎么做呢？因为这两个值它是通过路径传递，咱们有多种写法，第一种写法你可以做一个字符串拼接，但是咱们用一种啊，咱们之前讲过一种写法。

不知各位是否记得啊，我这里写一下大家是否记得这个写法。这叫什么？有印象吗？这叫什么？是不是叫模板字符串，然后在里边呢？我们通过表达式来取一下你这个变量或者常量中的值，第一个当前页。第二个每页记住数limit，现在把这就写过来了啊，这是我们的写法，然后之后再来看它的提交方式是get提交这里改一下，改成这个get，然后最后有他这个其他参数，其他参数这里边叫色OBG啊说一下这个该怎么去写啊，就这个参数在前中怎么写，我们目前就写一个对象传递。

所以我说一下它的写法啊，角这位置。就是如果说啊，你是普通的对象的参数传递的写法怎么做，你加上一个固定的名字叫。这个名，这个你冒这个参数，这个参数的名称啊，对象参数的名称这一个写法，然后再来写，如果说啊，你是使用这个Jason格式进行传递，也就是咱们后端加上那个叫request包。找一个啊，这个应该记，咱之前写是传递，如果你是这么写的，那这里边就不写，你加个date，再加上你那个对象参数名称，它就会以Jason格式传递，这是不同的写法，看你是怎么样的，咱目前不是Jason格式，是普通的，再以加上一个。

加上参数，名字叫search o BG。以上啊，把这个列表接口咱们就完成定义啊，它就是这么来做，所以各位就是这个格式，按照框架约定的规范，把这个做定义，这个咱就完成了，完成之后呢，我们再简单完善一下啊，大家注意，因为我这个接口里边类上边的路径。是不是都是一样的，不管你是增加修改删除这一部分都是固定的，所以咱可以给他就是抽取出来啊，怎么抽取呢，我写一下啊，我写到外点。加一个叫是E的写法，表示定一个量，或者说定一个固定值，就这值是不变的固定值，那我叫A片。等于我们的这个值就等于它现在做个定义，然后定义之后在这里边咱们还是用表达式把它取到，取这个叫API内，这样的话把它做了统一的抽取，因为后面接口中这部分都是固定的。

所以现在啊，咱们的第二部分就完成了创建这个接口定义。然后之后第三部分我们来到这个页面中，就刚才咱们的这个页面啊，路由里边，你看对应的这个页面。Wave这个页面咱们打开在这里。然后打开之后在里边加入具体内容，这个内容中呢，上面部分写的是咱们的页面显示，就是前端那个UY也填这个代码，咱们重写这Java代码，那怎么做我写一下啊，首先生成代码结，我们选这个Java v啊，这是它固定结构，然后在结构中写下它的步骤啊。第一步我们先引入定义接口的JS文件啊，引入，然后在里边呢，就编写我们那个的代码的结构啊，那怎么做写一下啊，第一个咱们先引入。

给它起个名字啊，这个名字呢，我跟课件中为了看着方便，它还是保持一致的，我就叫这个A片。啊，咱们叫这个名字被骗。然后加上from，加上路径，注意这个框架的写法啊，你加个杠，跟咱说那个点杠类似，加上路径啊，你看这路径啊，找到它是这个。API里边的。System里边的这个system.jsjs可以省略，所以现在这不就是引入了J文件，注意路径不要写错啊，杠类似于我们的点杠，取当前路径中的这个里面的内容啊，这个是它规定好的，这不要写错，然后这路径注意名字跟他保持一致，这个就完成了，完成之后在里边加上这个。

然后加上一个。啊，就是然后里面加内容，这是什么意思呢？定义你相关的这个变量，或者说初始值在date里边进行定义。就是初始值。这是第一部分，然后第二部分我们加个逗号，加上一个叫。这应该记得啊，咱们讲生命周期中提到过，他表示在页面渲染之前执行，比如说你数据显示之前先调接口得到数据，然后第三部分我们加上一个methods，里边写你的具体操作的方法。这是咱们一个基本的结构啊，这个就完成了，完成之后呢，我在方法里边先加一个方法，就是咱们说这个。

条件分页查询方法啊，咱写个方法，我到后面咱们测试方便，这个方法我跟里边就保持一致了啊，叫这个fe date。这个方法。然后这个方法我们在页面渲染前先执行，因为你不执行最终肯定没有数据啊，咱先有数据，最后才能显示。以上把这个页面的结构就完成了，所以要求各位啊，你自己写的时候呢，把这个Java代码这部分好好去写写，然后上面页面的部分你就直接复制可以了，因为它都是TM的部分啊，就是这些部分。就现在我们写了一构基本结构，然后结合完成之后，下面呢，我们在里边把这代码给他补充完整，最终实现出来这个角色的列表功能，那下面我们开始写这个具体代码。