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

下面呢，我们继续完成角色列表的前端实现，刚才呢，咱们把这个结构已经完成了，那下面呢，把这代码我们进行具体实现，咱们来具体写一下，首先第一个在date方法中，咱们定一些初始值，为了一会儿进行使用，那我在里边写一下，因为咱们做的是角色列表，那我写的第一个我们写一个list。这例什么意思呢？让他就代表我们这个角色的列表的数据，就是它一个数组，然后第二个因为咱有分页，所以我写一个配置，代表我们的当前页，咱们加上一个默认值是一，就是默认显示第页的数据，之后呢，我再写一个叫limit，就是每页显示多少条记录。这是我们写的几个初始值，然后除此之外我们有总记录数，我们加上一个叫total默认值加个零总记录数，除此之外咱们有这个条件的部分就是封装条件对象，我们起个名字就叫这个search OBD。

加上一个空的对象。代表。条件。对象。当然后面可能还有其他的初始值，后面需要我们再加入进去。目前主要需要这么几个角色列表，当前页，每页显示记住数、总记录数以及条件的分号对象。date部分我们就完成，完成之后在f date里边我们写上它的具体方法，咱们就调用接口进行实现，通过xcel发送X请求，最终得到我们的结果。那我们写一下啊，按照之前讲那个模块开发的过程，因为咱们把这个S已经引入了，在里有方法给他起个名字叫API，那咱们写一下啊，调用API中这个方法，它的名字叫get配置list，这个咱们最好复制一下，不要写错，然后里边传入三个参数，第一个参数就是当前页配置。

注意这个配置啊，是咱们当前的这个初始值配置，第二个每页记录数我们是limit，不要写错啊，第三个是条件对象测OBG写完之后我们加上一个Z。在里边呢，通过response。得到接口返回的数据，这是我们写的一个结构，然后写的时候各位注意啊，之前咱们演示X的时候，应该还有一个方法，不需写了，架封装咱们一啊。你找到这里边啊，是一个响应拦截器，当你接口反应数据进到这个拦截器中，咱们得到响体部分，下面做判断，如果反应状态码不是200怎么做，我们就给它弹出这个错误的提示，用IU进行显示，如果说它是200，把这个返回，所以这里边已经做这个处理，如果他失败会返回这个错误的信息，所以我们只需要写就可以了，然后在里边得到我们的具体内容，我们通过response.date。

加上里边的值，这个值是什么呢？咱们看一下接口里边啊，找到这个条件查询带分页位置。你看啊，我返回的是不是叫配置model，然后在配置model中呢，里边有这么几个值大家看啊，比如你看里边有这么一个。叫个。

如果说你看的不明确，你可以把输出，然后再往里边，我这里就写到一起了，最终做个值，这点等于date点，然后第二个有一个总记录数total，我们写一下啊，response.date点上一个叫total。咱们也看一下，在这里边呢，有一个方法。它叫get，就咱们写这个total，这样的话把数据我们就得到了，这是咱们写的这个结构，但是这么写的时候呢，大家发现啊，因为咱们做的是什么，是不是分页呀，所以在分页的时候呢，如果你这么做，应该只能查你的第一页的数据，没法做分页，咱们可能有第二页，第三页，或者说可能有第四页更多的这种页码数，所以咱怎么做，我给他加个参数，这名字我就叫这个current。

然后加上一个初始值等于一什么意思？比如说现在啊，如果说你传一个值，用你传这个值，如果你不传的话，默认值就是一，然后下面做个负值，这次点配置。等于current，这是我们写的一个结构，让他能做到分页，比如说我传第一页，那他就查第一页的数据，我传二就查第二页的数据，如果什么都不传，默认就查第一页的数据。所以现在这个基本结构我们就完成了。以上是咱们写的这个中的基本的代码就写到这里，然后写完之后呢，下面我们在这个最上面呢，通过I的UI把它的页面部分我们进行展现，IUI部分我就从课件中咱就直接复制了。那我们来找一下啊，首先第一部分咱们把这个复制。加上一个叫里边加个div，这是框架中一个固定的结构，做我们的决策列表，然后在div里边加上咱们的内容，咱们通过I的U一个组件叫table表格进行显示，那这部分我做一个复制啊，把这个表格部分咱们给他拿过来。

就这位置。然后咱们看一下啊，在表格里e table就是咱们。啊，这里边有表格，然后首先里边你看这个位置啊，咱看核心部分冒号date表示用到咱们那个集合，我刚才的名字是不是叫list，这是做了赋值，就是把它进行便利显示。然后之后，呃，这个咱暂时没用到啊，就是它加的是一个复选框，后面咱会写到，然后下面有它的序号，有它的角色名称，角色编码时间等等，包括有一些相关的操作按钮，所以现在。这一部分就完成了，完成之后呢，因为咱要做到分页，在me中有一个分页的组件，我把这个放到咱们的表格下边。

大家看一下啊，这个结构中，这是用分页，这个是当前页，这是总记录数，这是每页显示多少条记录，然后这里边是它样式，包括里边显示什么值，另外大家注意啊，这个部分。这个什么意思呢？它是一个事件，比如我现在在第一页的时候，我点击二，它是不是要显示第二页的数据，然后它会做件事情，把你当前选的页码数传到方法中来，咱们这个方法就是刚才我的这个方法，比如我传个二，那显示第二页的数据，我传个三，就显示第三页数据，这是我们用U进操作。除此之外，还有最后一部分就是条件部分，因为条件嘛，咱有一个表单部分，我把这个也拿过来了，这都是UI中做到的啊，放到最上面。

这个位置啊，大家看这里边写的是一个什么，是不是表单呀，我们根据角色名称做一个条件查询，通过V5中这个指令V-model双向绑定search OBD是在那个条件部分，然后最终调这个方法，我们进行条件查询。所以现在啊，这部分就完成了，各位写的时候呢，UI部分你就直接复制可以了，重点你把Java代码这部分好去写一下。以上就是条件分析查询角色的前端实现。然后这个之后，最后呢，咱们把效果测试一下，看一下目前什么样的结果啊，那我们来试一下这个效果啊，我在里边刷新呃，咱重新试啊，重新点一下。刷新，然后点击角色管理。大家看是不是有列表。然后在里边，比如说我输入一个角色名称啊，因为这里没有那么多，我就写一个叫角色点搜索。

是不是决策管理员如果说我什么都不输入，点搜索数据全部啊，但是因为我的数据很少，所以我给他为了明确给他改个值，为了咱能看到效果啊，我就把这个改成一，让每页显示一条记录，或者说你多加入几条数据都可以，我为了测试简单就这么来写的。然后大家看这是第一页是不是一，我点个二，是不是第二页，我再点一是不是第一页，包括你看这个位置是不是有页码数的变化，现在就可以了，而它里边给我们封装了一些功能，比如说大家看啊，我这里写个负一，然后回车。怎么样，是不是第一页我这里写个十，他肯定没有第十，因为最多就是两页回车，是不是到第二页，这就是条件分页查询，所以咱们现在把这个功能就最终完成了，各位把这给他要进不熟悉，基于我们这个VE他利的框架，然后最终实现出我们就是这个功能啊，当然咱们用的是这个经典版本。

使它的最小纪念版把列表实现，然后咱们一会儿按照同样的方式把它的删除、添加、修改以及批量删除，最终会进行实现。