58-尚硅谷-硅谷通用权限项目-用户管理模块-用户列表前端（上）

各位同学大家好，刚才呢，咱们完成了用户的增删改查接口，通过swag测试功能，最终都实现了想要的效果，那下面呢，我们开始整个前端，前端实现用户管理的增删卡功能，那下面我们开始做一下，首先第一步咱们肯定是添加路由，这个路由呢，之前我们做角色管理中已经加过了，那咱们快速看一下，看路由的地方，我们找到里面这个地方，各位应该记得啊，Routeor中有一个inex.JS，然后在里边加上用户管理的路由，点用户管理咱们到这个页面system user中的list.voe这是我们之前写到的，所以现在这部分已经完成了，点击用户管理，通过路由跳转到用户管理的页面。然后这个之后呢，我们的第二部分，咱们来到API的文件夹中，在里边我们建个JS文件定义接口，最终页面中再做调用。

那下面我们开始做定义。首先在里边呢，我们建一个JS文件，这之前已经创建过了，然后创建之后在里边加上我们相关的内容，那这个结构我复制一下，然后里边具体东西咱们来写一下。我把这个先做个复制，首先第一步引入request JS文件，然后第二部分加上咱们接口的路径，我们写上一个常量的固定值，因为类上面名字都是固定的，那我现在把这个路径咱们复制过来。这是我们的这个部分，然后写完之后，咱们下面做的就是在里边来定义我们的接口，那咱们一个一个进行定义，我这里给各位再来写一下，我这里特别说明咱们的第一个功能，用户角色管理两个模块，咱们的前端后端给各位都从零去写一遍，然后后面模块咱们重点都放到后端接口中，前端咱们直接从课件中复制给大家详细会讲一遍，重点咱放到后端中，但是这个功能咱们前端后端还是从零都来写一遍，那下面呢，在里边咱们把接口进行定义，首先第一个用户列表接口，那咱们写一下，这个接口呢，参考之前的角色列表，因为跟它差不多，用它咱们快速改一下，我这里写下。

Get配置list，传入当前页每页记录数，然后在里边加上路径，路径我们到里边找一下，就是当前页每页记录数。get提交三个参数，咱们看这个应该都正确，然后最终我们用timemo把参数传递，这就是第一个接口，然后咱们再写第二个接口，第二个接口呢，写一个添加的接口。

那我在里边写一下。添加，我们起个名字叫save，然后save里边呢，加入一个对象，因为这个咱做的是用户管理，所以咱们加上一个角user，加上对象之后结构我从里面复制，咱们把里边内容写一下。咱们找一下啊，添加接口叫save，用post提交保底。这里改成post，因为它是request body，咱之前说过加上一个叫date，这里边加上user，这是我们的第二个接口定义就是添加。添加之后我们写第三个就是修改，首先根据ID查询，我们把这个复制，咱们用它快速改一下，咱们起个名字就叫get user ID里边传入ID值，加上路径，我们看一下这个根据ID查询的路径，应该是这个get user后面纯ID是get提交。

我把这个复制，然后这个ID通过表达式取到这个值，它是get提交这一部分没有，咱们把它去掉。现在这个完成，完成之后下一个接口修改接口。修改接口呢，咱们参考添加快速实现，我们改个名字update，然后修改路径就叫update，就是这个也是POS提交。并且是快的包底传递，所以现在这个完成完成之后呢，我们还有最后一个接口，那就是什么，是不是删除接口，咱们写一下啊，最后这个删除。

咱们起个名字就叫木by ID。传入ID址，然后咱们看一下路径。瑞木ID是delete提交。加上ID，这里改成delete。注意不要写错，然后这样的话就完成了。所以各位看到啊，现在咱们在API里边的U4.js里边把增删改查接口，我们就完成了定义，这各位能快速写出来，然后特别注意路径，包括这些值，这些名字不要写错，比如说你这些名字提交方式等等都要写正确，另外写的注意啊，我们写的时候有同学可能忘记写些这个斜杠，这些这些一定不要写错。

现在这个咱们就完成，完成之后呢，咱们看下一个操作，那我们就在页面最终进行实现，那页面怎么做，咱们来找到页面，来到例子点vuee中，页面里边呢IUI部分我就直接复制了，咱们重点写一下Java部分。就是我们的这个部分，那咱们先把element UI部分我们先复制过来。也就是这个地方，我把它直接就给复制。因为都是固定的结构，这一部分咱们大部分之前应该都写过，所以我现在把这部分咱们直接拿过来放到这里，一会儿我们再根据功能再对应进行查看，那这个复制之后，下面呢，咱们写这个Java部分，首先第一步先进行引入，咱们加上这个，然后给它起个名字，我们就叫A片。

From加上路径at API。加上里面那个叫做咱看一下啊，就是在这里啊，STEM里边的u.JS，现在把它进行引入，然后引入之后呢，里面有条红线，这咱需要等一会儿，因为它现在正在解析，需要等一会儿，等一会儿之后应该就没问题了，然后这个之后呢，在里边咱们还是把它的结构先写一下，首先第一个加上一个date。Date里边呢，加上定义它的初始值，然后里边的第二部分加上一个叫create，在页面渲染之前知晓。然后第三个加上一个叫做methods。在里边写上我们具体的方法实现，以上是我们写的这个页面中的结构，咱们现在把它就完成了，然后完成之后我们继续来看啊，在这里边我们来实现里边的具体的功能部分。

首先第一部分在date中我们先定一些初始值，这初始值呢，因为跟之前角色类似，所以这里边我就不再手敲了，我把这部分给各位直接咱们就复制过来。把它直接拿过来。这是我们的初始值，然后咱们看一下有哪些值，第一个就是例子loading，就咱之前说那个转的图标，第二个例子是咱的这个列表，然后total总记录数，配置当前页，Limit，每页显示这个记录数。另外有封装对象，然后大家注意这行叫create times，是不是时间有，但是时间我这里是不是一个数组，说一下这个是什么意思，给各位做个说明，咱们往上来找，大家看我们最上边的就是这个位置，看这里，因为咱们最终有个条件查询，条件查询中是不是一个时间，时间咱分成开始和接入时间，这位置我们用了一个日期时间的组件，就是这个yellow date，然后在组件里边，因为咱们有开始和接束时间，所以它的名字叫create times，注意啊，Create times是一种数组结构，数组中的第一个值，也就是下是零的值就是开始时间，下标是一的值就是结束时间，所以咱们这里边有一个叫create times，为了得到你的开始和结束时间，下面有一个就是咱说那个弹框的效果，然后还一个叫system user。

我课件中是这么做的，定了一个常量，然后把值复制，或者说咱可以直接写个空也是可以的，我就这么来做了。所以现在这部分我们就完成了初始值的定义，这个咱应该没用到，这个我就去掉了。

现在date完成，完成之后呢，下面呢，我们在里边来调咱的方法，因为第一部分做的肯定是列表方法，那我在里边写一下列表方法，咱们起个名字就叫fetch data。然后在里边做个调用，调用列表方法。这次点fetch，所以现在大家看啊，这个基本页面的结构我们就完成了，完成之后下面咱们先开始写列表，然后再来实现增加、修改、删除相应的功能。