146-尚硅谷-尚医通-后台系统-用户管理-用户列表前端整合

下面呢，我们来整合用户列表的前端部分，咱们开始进行整合，第一个各位要注意啊，咱们目前开发的是咱们的用户后台的管理系统，所以说咱们需要来到这个管理系统的模块中，你别放到我们之前的用户系统中，咱现在换了一个系统，是咱们的后台管理系统，所以咱们来到这里边，在后台管理系统中，首先第一部分咱们要做吧，我们就在API中呢，把咱刚才写的接口在里边先定出来。那我下面把它定一下，首先我先建一个文件，这个文件我起名就叫user info.js，然后在user info.js里边定义它那个新闻方法，那这个方法我就从课件中直接给大家复制过来，就是里边的这个方法。然后各位看啊，首先第一部分我们定了一个固定值叫API user，因为咱们刚才的路径里边，我们看一下我们的路径就叫me user，下面呢加上咱的方法，方法里边传入当前页每个技入数，然后后面传入你的这个条件对象，它的提交方式咱用的是get提交，所以这是我们的第一部分，先定义义里边操作的方法，在里边我给它加上一个注释。

好给加一下啊，这个方法我们做的就是。用户。列表的方法。这个我们就定出来了。然后定义之后我们继续往下来做，不知道各位同学是否记得啊，咱们当时讲过，我们开发这个就是后台管理系统中首先做的第一部分，咱在里边是不是要先加个路由哦，而咱现在我们用的是一个新的模块，所以咱们也需要加一个用户管理呢路由部分，那路由加到哪里呢？大家看啊，在里边有个文件夹叫URUR中有一个音带点JS，所以在在里边加上一个路由，路由加的方式你可以参考之前的，把它复制改成你的新的路由就可以了，我这个在课点中给大家已经写好了，那我现在把这路由给各位就直接复制过来，咱就来添加上这么一个路由，也就是里边的这个结构。

我把它就放到咱这个路由的这个这个位置，然后大家看一下啊，在这里边我们起名叫杠user，然后里边这个叫用户管理，第一个部分叫用户列表，这咱就加进去了，然后加完之后呢，在这里边呢，就是我们需要在这过程中呢，写上它对应的页面，咱的页面都是放到我们的views，所以我现在在views里边我们就建这么一个结构，建一个user，然后建个user侧info，在user info中创建一个list的这么一个页面，然后在list中写上咱们的句子列表内容，那我现在把这结构我们先创建出来。

咱们来到views里边，我先建个文件夹，叫user。然后user里边呢，再来建固件夹，我们叫user info，在user info中咱们来创建我们那个具体这个页面，页面我就叫list.e跟咱们刚才写这给它对应上，这样的话，咱们现在把这结构我们应该给它完成了，各位知道里边的这么一个特点。然后创建之后，咱们下面在页面中就来写上咱们的具体内容，那现在我来写一下这个页面中的部分来看一下啊，刚才我们创建的是在这个位置。那这个页面呢？咱们来到例子，唯有一种页面中，无外乎那就是写上你的页面部分，然后下面调用咱们接入中的方法，把这个做显示就可以了，我现在把这个代码给各位拿过来，然后咱们详细看一下里面这个结构。

这个啊，我先复制过来，然后咱们看一下啊，首先在这个结构中，它里边的第一部分就是咱们要显示这个页面部分，然后显示页面部分中，首先在上面的这个地方是咱们查询的表单部分，也就是我们做那个条件查询部分，里边写了一个yellow form，然后yellow form中有这么几个值，第一部分就是显示咱们那个名称，根据名称咱做模查询，然后第二部分有一个时间啊，那这个我把格式稍微调整一下。这是咱们的。时间部分，然后他有开始时间，还有这个。结束时间，所以里边有这个值啊，当然你可以加上更多条件，我就以它为例，因为过程都是一样的，然后最后我们有一个查询的按钮，包括一个清空的按钮，这是我们写的条件查询部分，然后除了这个之外，下面有一个叫EL table，在yellow table中，那就是我们的具体显示的内容部分，就是在这里yellow table。

然后大家看在yellow table中，首先我们这个结构中是把这个例子要做个便利，然后下面显示它的相关的内容，比如说第一个显示他的编号，然后包括他的手机号，包括这个昵称、姓名、状态、认证状态、时间等等信息，这个我们在里边给他一会儿都进行显示。然后除了这个之外，最后我们加上一个就是分页条的部分，显示它的分页的内容，所以这是关于我们对于这么一个基本的说明，现在这个页面咱们就放到这里了。所以大家按照里边的过程，把这能给它快速整合出来就可以了，然后这个我们做到之后呢，最后做的肯定是做那个调用接口部分，那咱看啊，在调用接口中，首先咱先把这JS文件给他先引入进来，就刚才在API中定义这个user侧info，然后给它引入。

API中的右侧音符，然后影之后第一部分咱通过date先定义它的变量和它的初始值，大家看啊，里边外乎就是这么几个值嘛，今天咱都用过了啊，就这些。然后第二部分呢，在create里边，当咱们第一次进入页面，咱肯定要调方法得到数据，这些方法我叫FA date，我这里边把这个FA date是写到了我这个method里边，做了这么一个定义啊，就是里边的。这么一个结构里面做定义，然后大家看啊，里边的这个方法叫fech。Date在里边，首先我们传入当前页，然后在当前页中咱们调用接口得到我们的数据，数据最终得到之后赋值给这个例子，包括把它的总页数分给这total，以及咱们最终就完成这个加载。

所以这个啊是一个调用过程，然后下面有那个就是页码数的一个变化，当页码数变化之后，我们再调用其他用的方法，然后进行实现。包括这里边还有一个重置的方法，这个在里边我们应该都写出来了，所以这样的话呢，咱们现在把这个前端部分给它就快速整出来了，当咱们一访问，那我们在前端页面中就可以把这个用户列表在里边进行显示，所以这是一个快速的整个过程，那这个整合之后呢，下面咱就把服务器启动，然后最终我们来做一个测试。那现在我把它启动一下啊。我们先把它打开。打开之后n PM run DV把它做启动，包括咱们的接口部分，因为刚才改的那种，我把这接口给它，也是就这个service user重新启动一下，咱们等它先行起来，启动成功之后做最终的测试。

现在服务器已经完成了启动，那咱们下面呢，我们来测试一下，我们来到前端页面，首先我们登录，登录之后呢，点击里边这个路由中的用户管理，是咱们刚才加的，在用户管理中有一个用户列表，现在我们一点大家看到这里边它告诉我们报出了一个500的错误，就是目前出现了异常，那咱看什么问题啊，看他是哪里有问题，咱来排查一下啊，首先我们来到接口中，咱发现接口user侧里边没有异常。然后咱再来看，我们看一下网关里边，大家发现在网关中是不是出现了异常啊，大家看什么异常啊，看他什么问题。

各位看到他说是GWT里边有了问题，那咱看什么错误啊？我们找一下，在这里边的提示信息中，找到咱的代码中，我们看到之前网关里边我们写过一个叫author global filter，再看这里边，他说在这个位置暴露错，就是咱们得到这个token中有问题。那问题是什么呢？给各位说一下啊，因为咱们之前啊，在咱这个管理员用的系统中，咱并没有生成token，我们是直接写了一个字符串，让它有登录可以了，所以它这里边这位置要做一个校验，做这个就是是否token有效，那咱给他改造一下啊，让他能登进去，当然你可以把管理员系统中也加上to开，只是目前咱没有这个必要，咱直接登录就可以了，那怎么做呢？我们看一下啊，这里边它是因为得到用户ID中报的错，而用ID得到里边应该是这行代码，它出现了问题，那我们给它改个位置啊，怎么改呢？比如说给它放到这里。

各位不知道是不是能看懂啊，什么意思？当你路径中包含这么一个路径，他才去得到，因为咱们路径中叫我的in右侧，所以这应该不执行，现在应该能让它跳转过去，所以咱们现在把这代码改造一下，然后我把这个网关服务再重启一下，给他试一下啊，当然你可以在后台里边给他生成图片，我这里边没有生成，直接让他先能登录进去。后续咱再做完善，现在把这代码改了位置，当时这个路径才取到咱设的密，所以这个不执行应该是不会报错，现在启用之后我们再来试一下啊，到这里边现在我们刷新。各位看到数据是不是显示出来了，目前我们这里边应该只有两个用户，目前的两个用户就有完成显示，所以现在咱就完成了用户列表功能的这么一个实现，包括它的接口，包括它的前端，各位按照过程把这能给他做到，包括刚才遇到这个小问题能给他快速找到，然后给他能够解决出来。