44-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色列表（定义接口）

各位同学大家好，下面呢，咱们继续来开发角色列表前端功能，刚才我们完成了第一步添加角色管理的路由，第二步创建路由对应的页面，下面我们进入到第三步，第三步呢来创建JS文件定义接口的信息，那下面我们开始进行创建。咱们来到框架中的API目录中，在里边为了我们后面操作方便，咱们建文件夹，叫肉代表角色，然后角色文件夹中建个文件肉点JS在里边把接口信息作为定义，这个定义呢，我们可以参考它里边已有的这个定义方式，把这一段内容我直接复制过来，然后咱们改成我们的效果。那怎么做，咱们看一下啊，第一行内容是引入一个JS文件，在YouTube里边有一个叫request.js，就是它这里边是封装了X，或者说阿贾克斯启用对象，咱们后面肯定都是发送阿贾克斯请求，然后下面是写你的接口信息写法，你可以这么做。另外还有一种写法，咱之前也讲过，咱们换一种写法，我们用这个exportt defportult。

然后在里边加上方法的名称，那咱们来写一下我们的第一个方法是角色管理的列表，那我写个方法，我就叫get配置list的。把方法进行创建，然后创建之后第一部分我们做列表的时候呢，咱们来到接口中，在这里接口中有三个参数，所以咱们的方法中也写上三个参数，第一个当前页，第二个每页记录数，第三个条件对象，我起个名字就叫search OBD，当然你可以叫别的名字，然后写完之后把这个结构直接复制过来。

然后咱们改成我们的效果，大家看到啊，第一个内容URL，它代表我们那个接口的路径，我加个注释，然后接口路径我们从后端直接复制过来，建议各位同学这个路径直接复制，不要手写，很容易写错，所以咱们直接拿过来。路径，然后路径后面呢，在方法上面有这两个值，一个当前页，一个每元技术数，就是路径做拼接，那我们写下加上配置。加上这个第二个提交方式，我加个注释。提交方式呢，我们接口中用的是get提交，所以这里写的是get，还有最后一个就是我们提交的其他参数。这个参数注意啊，我们用一个固定属性名字叫para，后面加上你的参数的名字search OBD，以上就是完成的接口信息定义，定义之后别忘记这段内容，咱给他就直接删掉。

所以现在把这部分我们就完成了，各位参考已有的table或者users，把这个信息给它完成修改，现在完成完成之后呢，这里边特别强调一点啊，就是大家看这个位置，我们这么写肯定是没有错的，肯定是对的，但是咱可以把它写的就是更优化一点，什么意思呢？各位注意啊，我接口里边类上边路径是不是都是固定的呀，咱们不管是做增加、修改、删除还是其他功能，路径在类上边都是一样的，如果说我这么写的话，那后面咱们再写方法，每部分是不是都写相同内容了，所以咱把它可以做一个抽取，这是第一个咱做优化，然后第二个大家看这里这么写肯定没有错，但是这么写啊，第一个很不方便，第二个还很容易写错，比如说你写的时候啊，有时候可能。

可你忘记写个斜杠，那最终路径肯定就不对了，所以咱把它还可以再做优化，那怎么做？给各位介绍一个内容，这个内容是什么呢？大家看我课件里面啊，里边有一个介绍就是它。叫什么ES6，给各位自个说明，然后咱们通过实际例子用ES6给它做一个改造，那E6是什么呢？它的全称叫ecmascript6.0，简称E6，是Java中的一套标准，是在2015年发布的一套新的标准，所以大家按照这套标准来编写我们的Java代码，那怎么做给各位啊，做一个简单的事例演示，然后咱们改一下这个过程咱们演示一下啊，我就在这位置呢，建一个HT文件，咱们就叫零一.html。

把代码生成出来，然后加上一段Java代码，我先加上一个标签，Script。标签加上之后给各位说明啊，这里边该怎么去做。首先介绍第一个啊，咱们之前讲的Java里边定义变量用的关键字是不是这个Y，比如说啊，我加个S1里边加上一个值，我们就叫这个A，这是定义变量，这里强调啊，在这个ES6里边，它定义这个变量有一种新的写法，用的是light，咱们叫S2，比如说我们加个值叫B，这是E6的写法。就是定义变量，另外啊，在颜三六里边呢，还能定义的常量，我给大家也来做个演示，定义常量，它用的关键字这个constant，我们叫S3等于这个值咱们叫C，这两个就是S6中的蟹霸。

这各位给他了解一下啊，注意一个是light，一个是constant常量，就表示呢，这个值不能修改，这是我们提到的，然后这个写的过程中呢，咱继续往下来做，在ES6里边有这么一个东西，它的名字叫做模板字符串，什么意思呢？就是这个符号。比如说咱们这个反引号，然后在里边你能够用表达式取到你的变量或者常量中的值，具体怎么来理解，咱们直接看个例子，比如说我现在来一个light，咱们叫ST，然后等于我们这个值，这个值比如说我现在我这里边啊，我想做件事情，我想把S1 S2 S33个值做一个字符串的拼接，那咱怎么做呢？是不是要把它们三个值取出来呀，怎么取，通过模板字符串给取一下，那给大家写一下啊，我们的做法加上这个反引号，然后怎么做用表达式。

咱们加上里边那个变量或者常量名称，比如说我现在加个S1，那就表示把S1的值取到，咱为了明确啊，我加个拼接，比如说里边我加上这么一个就是。井号啊，为了咱们看着方便，然后现在我再做一个编写，用反引号加上这个表达式里边咱们加上一个S2或者S三都可以，我就加个S3了，现在就是把S1。S3的纸从里面取出来，然后最终做个拼接，最后咱做个输出啊效果试一下。

Str现在就完成了，咱们测试一下啊，看一下最后结果是怎么样的。到里边我们来最后执行，然后咱们打开F12。大家看啊，我先刷新一下，你看值是A，井号C，它就表示用这个模板字符串可以取到你的变量或者说唱量中的值，这是我们的一个用法，就是ES6中的定义变量，定义常量，或者说模板字符串，把这个各位知道，然后这个知识点咱们说完之后呢，下面就可以把它做改造，那怎么改造给各位来快速编写一下。首先第一部分咱们定义这么一个常量，因为这个值是不固定的，所以我把它放到一个常量中，我们进行定义，这里边给大家写下。

咱们加上一个叫，我就叫API。等于这个值就是它，这时候我们做一个定义，然后定义之后呢，下面怎么做呢？那就这里边咱需要给它改一下，改成模板字符串的写法。咱们看啊，怎么来改这行呢，我先给它注掉，然后咱再下面给它写下，首先第一个注意啊，这个位置呢，咱加上一个反引号。然后在里边通过表达式来取一下里面这个值啊，咱就给它具体取一下。加上表达式，然后我们加上这个名字，A片内幕。大家看现在这么写，把这路径是不是取到了，然后取到之后呢，在它的后面有我们那个就是当前页和每月居住数，因为他们是两个变量，咱们同时用表达式取下。

当前页还有每页的计数数，所以现在用这种结构，咱就取到常量和变量中的值，比刚才应该更加的方便，这个我们就完成改造，然后这行我就给它去掉了。以上呢，咱们就完成了第三步，在API目录中创建JS文件定义角色管理的接口。