30 - 尚硅谷-RBAC权限实战-用户维护 - 异步分页查询.avi原创

分页查询我们已经做完了啊，但是呢，其实啊，咱们现在做的这种分页查询呢，在实际的工作当中用的已经没有那么多了。为什么呢？因为在实际的工作当中啊，我们的数据量是比较多的，那么你的数据量比较多，那就意味着在我们查询的过程当中，我们的这一块的代码的执行，执行时间就可能比较长。那么他们比较长的话，那我跳转页面的时间就会往后推，那么你跳转页面的时间往后推，那你的页面展示时间也会往后推，那么也就意味着我的用户点击菜单之后，可能页面半天就出不来，为什么他的后台正在查询？所以啊，这种方式我们结果是对的，但是一旦数据量多的话，对用户的体验是非常不好的，所以我们在实际的工作当中，我们一般不会这么来做。

因为这种方式我们称之为叫同步分页，就是说一个做完了才做另外一件事情，它必须数据查询完了才能渲染数据，这个不是很好，所以在这种情况下呀，我们要把程序改善一下，改成什么呢？我们叫异步分页。也就意味着当我点击菜单之后啊，我先不查询，我先把页面渲染出来，但是没有数据没关系，我异步查询，然后再局部刷新页面就可以了。所以我们接下来啊，准备把我们的分页查询，咱们做一个改善，那既然是改善呢，咱们还是把以前的给它备份一下啊，别到时候出了问题不好回复了啊，所以给他备份一下，好，那我现在呢，准备把这一块我们改一下，为什么要改一下呢？是因为我们在点击菜单的时候，我们不再是跳转页面了，所以我们来看一看我们的程序打开，打开以后，那我这里给他写个一。

啊，写个一啊，也就意味着我现在就是要跳转页面而不再分页查询，所以呢，我写上public，然后string，我们叫index好，然后呢，我直接写上啊index，我什么都不做了，我直接跳转页面，然后request mapping，然后直接写上叫index好了，我们就这么写就可以了，那你这么写了以后，由于你没有查询数据，那我页面中就不可能有数据，那所以这个就不可能出现了啊。好，那他不出现的话，那么我们之前的循环便利啊，这些内容其实也就都没有了，所以把它们全去掉，不要了啊，然后我下面的这些地方它其实也就没有了，把它全去掉，所以大家可以看到我们现在的页面就变得简单了，然后呢，我们面这个翻页其实我们也暂时用不上了啊，呃，暂时咱们就不用了啊，把它去掉，嗯。

好了行，那我现在把这个页面我们准备好了以后，现在我们来试一试，来重新启动服务器，来我点一下。好了，服务器已经重启完了，那我现在呢就可以来看一看了，我后退后退啊，把这个呢，我们写上叫做man回车，回车以后我点击用户维护的菜单点一下，点完以后你会发现现在什么都没有，那是因为我点击过来以后只是跳转页面，并没有查询任何的数据，这是对的，那接下来我可就该查询数据了，但我们查询这个时候应该是异步查询，所以我们采用阿贾克斯来进行查询，那我现在在这个位置我就写上。咱们叫做function，我定一个方法叫page query分页查询。

那么写完之后，那你要告诉我查第几页，所以page number，好，写完之后那肯定啊，你第一回进来，刚刚进来的话肯定是查第一页啊，所以我写个一就可以了啊，在页面内容加载完成以后，我们来执行这段代码，那么查询的是第一页，那你查的是第一页的话，那现在我就要发送异步的请求来查询了，所以Dollar点阿贾克斯，咱们之前用过，那么所以这里直接来写大括号，它是个接对象，然后type等于post。还有URL，记住我们以后的所有路径，我们前面都加上pass，保证路径不会出现错误。来，接下来我们写上，咱们叫做，我给它起个名字叫page query，叫分页查询。

好了，那么写完之后我要传数据了，那我的数据呢？还是页码和每页显示的数据条数。这个时候他就不会说没有了，所以date啊，我们来介绍咱们叫page number啊，来，那这个page number其实就是我们的page number，还有一个我们叫page size啊，那这个呢，我们因为数据量比较小啊，所以我们也给个二就可以了啊，然后我们要发出请求了，但是呀，你后台的数据万一比较多，你时间长怎么办？没关系，我们之前不是讲过一个叫做弹成组件吗？这个弹成组件我们可以来用一下，增加一个loading的效果，咱们之前在我们的登录页面我们用到过，所以我们把这个layer咱们拷贝一下，拷贝完成以后在我们这边给它增加上，同样我们在这里最好也增加我们的路径APP pass。

好了，写完之后，那我现在呢，我在这边我就可以写上了，咱们叫before send啊，发送之前我怎么怎么做，OK，那我到底该怎么做呢？我们一块儿来看一看，来在我们这里，我们当时我们就是增加了一个loading啊，来拷贝，拷贝之后我们来放到这边，我们当时为了讲这个，我们还给它增加了一个变量，咱们讲了一个是我们全局变量和局部变量的问题啊，不知道同学们还有没有印象。好，给它放到这里吧，嗯。然后我们有了loading之后，我们写上success，当你得到了结果的时候，我不管你的结果是对还是错，只要你有了结果，我都应该把这个loading给它去掉。

所以我们把它close掉。拷贝，拷贝之后我们放到这里。诶，好了，接下来那你的结果可能是对的，可能是错的呀，所以我们if。然后点success，这个表述的是成功，然后else，它表述的是失败，那你成功怎么做，你失败怎么做，我们都给它描述出来，那么成功咱们一会儿再说，那失败，那我现在就得提示一下了，所以来我们写上叫做用户信息分页查询失败。分页查询失败啊，把这个给它写清楚就可以了，那你成功该怎么办呀？由于你的页面中没有任何的数据，那所以说当你查询成功，其实就应该局部刷新了啊，局部刷新我们的页面数据，说的简单点就是把页面的内容给它补充完整啊，所以啊，既然你要把页面的内容补充完整，我们这里分两部分，哪两部分呢？同学们看，一个是我用户的表格信息，一行一行的数据，还有一个就是我们的页码。

那么我们的这个地方，我要增加一个ID，它表述的是我们U的date啊，是我们用户的数据，这个我们倒不用增加，因为它有一个样式，我们也可以找到它，所以我们现在要把这两部分的内容呢，给它局部刷新，所以拷贝，拷贝之后在我们下面的这个位置，我们要准备做操作了，Dollar符，然后写上井号，这是我们的ID选择器，我要往里面添加内容，叫append。啊，追加或者你也可以不追加干嘛呢？我们可以直接把里面的内容覆盖掉，这是也是可以的啊，我们这么写也没有问题，好，这是第一个，还有一个就是刚才的那个叫做class样式，那就类选择器了，所以点我要加个点后面加上我们的类的名称叫拷贝，拷贝之后我们放到这个位置，我们同样要往里面加东西，第2HTML，诶，好了，那我们这么写了以后，只要后台的数据没问题，我们这就可以添加数据，那好我事先先准备一下吧，啊一个是我们的，嗯，咱们叫table的内容。

啊，Table的内容，OK，咱们这么写，还有一个是我们分页的内容啊，把它写上，嗯，可以了，写完之后我们表格的内容我们就放到这个位置。好，然后呢，我们分页的内容呢，我们就放到这个位置就可以了啊。行了，那么我们大概的这个思路就有了，只要结果没问题，我们就可以想办法来做这个事儿了，啊，那这个时候就剩下我们配query该如何完成了，所以我们接下来我们要在我们程序当中给它补充完整了来。

呃，在我这个位置呢，我public，然后object，因为你是阿贾克斯操作，你不需要跳转页面，我们给一个object就可以了，咱们就叫好，写完以后在这里我们request。然后斜杠RY，然后再来加上response，因为我要返回结果嘛，嗯，好，那么这么写完以后，首先你肯定也得有参数吧，所以叫page number，还有叫page，我们这里不用考虑那个默认值的问题了，因为你是有了页面以后，你再来发送请求，这时候你是一定会传只的啊，之前是因为点击菜单你没传只，那现在你肯定传只的，我不用考虑那个默认的事儿了啊，所以那么接下来我们准备把程序给它完善一下，其实啊，程序我们之前都写过，那所以呢，这里直接拿过来用就行了，阿贾克斯我们都有个结果，等于new阿贾克斯，嗯，OK，然后返回。

诶，这就是我们想要的结果了啊，但是你这个结果是成功还是失败呢？我们得写上TRY，然后呢，写上catch，嗯，然后在这里呢，我们写上exception OK 1.a打印错误信息，然后我认为他失败了，点set success，给他个false，那如果你没有发生任何的异常，我认为成功了，Set success给他个就可以了啊好，那么我们中间的这个位置，那么其实就是分页查询。好了，那既然你是分页查询的话，那我就把之前的分页查询的代码全都给他拿过来就行了，所以我们原封不动拷贝。原封不动拷贝的时候啊，我直接就放到这个位置了，放过来以后，我们这里有个model，这个我们不需要，因为我们不跳转页面，也不必要传递数据，所以我们这个是不要的，把这个去掉啊，好，把这个我们也去掉，不要啊。

行了，那么我们都不要了，以后想想啊，这边。但是你不传放到model里面，可是你得把这些数据给页面中通过接证传回去呀，啊，你不放在请求范围里面，但是你得通过我们的响应传回去，那怎么办呢？诶，我们这儿不就是结果吗？你把我们的这些数据给它放到里面不也就行了吗？但是呀，你要为了传这些数据，你添加很多的数性感觉也不是很合适，所以呀，我们把所有跟分页相关的数据呢，我们封装一下，封装到一个专门的对象里面会更好一些，所以点击new，然后创建class，我们写上叫page，嗯，写完之后点击完成，那里面我就可以写了，我们叫我们叫list叫啊，这就是我们的users，诶，我们的数据，然后再来还有我们当前的页码，还有我们的总共的页码，啊，总共的页码以及我们总的。

数据条数，诶把这个都给它写上就可以了啊好写完以后，然后呢，我们增加我们的盖的方法即可，可是如果你要这么写的话，有点问题，因为你这个里面只能放U的类型，那就意味着你的分页对象当中的这个数据以后只能给用户来用，你要想做许可做角色，你可就用不了了，那这样的话，你的这个对象不具备通用性，不是很合适。那我怎么能够你的这个属性的类型不要固定是UR呢？我们可以采用泛型来约束一下，什么意思，我在这个配给的位置啊，我加上一个T，表述的是从外部把类型给我传过来，你传过来的时候，我这边它就是一个T了，那这样的话，你给我的是U，他就是U，你给我的是角色，他就是角色了。

所以啊，咱们这儿也别固定斜时，咱们叫dates，诶好了，所以在这种情况下，我们来把它增加set get方法啊，其实就是使用了一个泛型的约束好保存，保存好了之后，那我在这个位置呢，我就准备来了啊，我写上叫page，那你明确的告诉我是个咱们叫page，等于new咱们叫page啊，同样把那个给它放进来啊。好了，那你放进来以后，你得把词给它放进去啊，来我们点set我们的dates，那不就是前面的users吗？啊，还有我们总共的那个页码，Set总共的页码我们有啊，已经计算出来了，还有总的数据条数，总的数据条数在这儿呢，诶还有当前页码，诶当前页码点site page number给它写上就可以了。

所以我们的这个分页对象就准备好了啊，咱们写上叫分页对象，那你把这个分页对象你直接传给页面不就完事儿了吗？所以我们这里啊，就不用分别传了，我们一次性的传，所以点点完之后我写上叫叫object，我们就叫date，你回的就是个数据，这个数据是什么类型不确定啊，可能是分页的，还有可能是别的对象呢，这都有可能啊，所以增加我们的side盖的方法。好，点击OK，点击完成以后在我这个位置就好办了，我写上咱们叫点site date，然后我们的user page给它放进来，那这样的话呢，其实我们只要不发生任何的错误，一返回我们页面就一定能够接收到我们的数据，那也就意味着我们这里拿到的其实就是它的那个分页对象叫u page，它等于点date。

因为你的这个其实是这个对象转换成的那个Jason对象，那么里面的date其实就是我们这里的date，那么它就是封装了我的分页对象，那你的分页对象有了以后，那我们要想用的是那个用户的集合呀，所以U是等于u page点它里面会有个叫dates啊，因为分页对象当中它有一个叫dates啊这个属性，这个属性恰恰是你查询的那个结果，结果就叫用户的集合啊。好了，那现在这个有了以后，我们开始要循环便利了，因为每一个我们的用户就是一行数据，所以啊，把这个呢，我们来，我们放到前面去啊。

好了，那我现在的循环便利了，便利的就是它，所以我们来，我们写上Dollar符，然后点it，这个it方法呢，是我们的循环方法，我要对某一个集合来循环，循环的时候会有一个回调方法，这个回调方法其实就是我循环体的方法，只不过它有两个参数，一个是当前的，所以还有一个是循环的时候的那个临时的对象，我们就叫U就可以了。那么每一次循环其实就是一行数据，那我就需要把这个表格的内容给它添加上，所以啊，我们来确认一下我们该如何来做，首先我们这边来，我们看一看，我们找一下咱们之前吧，咱们之前的这个位置，大家可以看到我们循环的时候，其实我们是对TR循环，那我现在循环其实也是要把TR循环，因为一个用户就是一个TR，一个用户就是个TR，所以我们原封不动拷贝。

拷贝之后我们放到这个位置啊，放过来，放过来以后，那我现在要把这些标签性的内容要拼接到这个字符串当中，那我该如何来做呢？如果我一个一个拼接它会稍微显得有点麻烦，所以呢，我们采用列编辑，Out shift a列编辑，我们可以呢多列同时做操作，所以我写上叫table。然后它的内容，然后加等，然后引号，那这样的话其实就等于多行呢，我同时操作了，然后呢，我们后面也可以来做操作，但是有点太长了，就不方便这样吧，我们简单一点，我们直接加上引号这个分号结尾就可以了啊，那么这里呢，我们复制一下啊，咱们复制一下嗯，好给它加上啊，好加上以后放到这边，那这样的话，我们拼串的工作其实就已经完成了啊，可以了。

行，那这个拼完了以后，但结果不对呀，为什么？因为你这里写的不太对，所以怎么办，我要把它改一下，这个时候他应该得到的是我当前索引啊，它是我当前索引加一，因为我们这里就没有计数器的概念了，是索引加一，而这个呢，它是什么？它是我们的登录的账号，所以把它去掉，我们写上啊，来加上咱们叫u.log in account，这个U就是我们每一次循环的那个临时的变量啊好，然后把这个拿过来。加上U点我们的user name，还有下面的这个位置，我们再来写上它，嗯。再加上有点email，诶，你这么写就可以了啊，好了，那这个写完了以后，只是我们的那个表格的数据有了，但是你页码当中的数据还没有呢，我们这里还要做操作啊，所以接下来我们看看我们该如何来做呢，来。

我们之前我们的页码的操作，咱们可以来看一看，打开，打开以后往下来看，我们这里的页码其实也有判断，当配number大于一，当number小于总页码的时候，他们都有操作在里面，那现在我们来试一试啊来。那所以啊，我们这里写上来叫if，叫当前页码，当前页码是什么？你当前就不是根据配件单位查询的吗？它不就是当前页码吗？所以我们的page number。我们写上，如果它大于一，那它大于一的话，就说明你现在其实是有上一页的，所以我们把这个他们拷贝过来啊，不对，拷贝这啊拷贝这里好上一页好了，那这个有了之后我就写上了，因为我们上面其实是有个字符串的，我写上。

咱们叫page啊，我们的内容加等诶好写完以后把它放过来就可以了，上一页，但是这个on click我们就不能这么写了，为什么？因为onli我们要真正的翻页，那么不再是走这个方法了，而是走的是它，因为它不就是分页查询吗？你只要改变页码不就完了吗？所以啊，我们的这个方法的名称应该是page query，诶我们应该这么写，那这个地方也不对，因为我是当前的那个page number减一，所以呢，我们把这个给它来写上括号，咱们叫page number减一就可以了啊好，那这个有了之后，那么我们再来拷贝吧，拷贝一下我们要判断一下的是那个。下一页，那么page number，它如果小于总页码，总页码在哪？你分页对象都拿到了，你总页码难道还不知道吗？当然知道了点，我们叫总共的页码啊，那么总共的页码的这个位置我们就可以写上叫下一页啊，咱们叫下一页好写完之后，那你下一页的话，那你这个地方我们应该怎么办呢？我们应该加一了，所以是当前页嘛，我们要加一好了，写完以后，那就是我们中间的每一个页码了，所以我们要循环变历，我们从什么时候开始循环变历呢？来，我们写上I等于一，然后I咱们小于等于它的总页码U配点总共的页码I加加写完之后，那么好吧，来吧，我们写上它，诶等于加等诶把这个拿过来就可以了啊好，那我现在呢，就把咱们这个呢。

风不动，我们拷贝。拷贝以后，那我就放到这个位置就可以了啊，嗯，只不过呢，这里应该是配corry啊，咱们的corry，嗯，好，那么里面这个其实就是当前循环的那个I的值，所以啊，把这个呢来写上啊，我们写上I就可以了，那么同样这个地方也是那个I，嗯，好，咱们写着啊。

好，写上了以后，那接下来我们这还缺少一个，就是你当前那个页码的样式，那个active我们该如何来加，其实呀，我们写上叫if，如果你当前的I它等于page number，那就说明你当前的页就是这一页了，所以else啊，那么如果你不是的话，那没说的你的这个地方应该是给他来啊。我们来看一看啊，咱们这个地方给它来，我们给他来啊。嗯，我看一看，把这个来，嗯，给它挪过来吧，嗯。啊，给它来啊，剪切一下放到这里啊。

好啊，那我们现在这个地方给它来啊，来放过来，好，放过来以后如果你相等的话，我们应该增加一个样式，这个样式呢，我们写上叫class等于。啊好行了，那我现在把这个稍微的给他改善了一下，写完了对不对，我们不知道，咱们现在来验证一下啊来。

呃，把这个给他停了。停了以后给它来启动一下。好，那我现在呢，刷新刷新以后来大家看一下，你会发现没有任何的问题，我们现在这边已经出来了，出来了以后我们的一，我们的二，那这都是没问题的，可是呀，我们现在有一个地方就是那个样式它不对，那我来确认一下是哪个环节出错了啊。呃，咱们这里呢，是有一个叫S，我这个地方写错了吗？我确认一下啊，咱们这里我看看。哦，咱们写错了，应该是在我们Li的这个位置增加active，所以呢，我的位置加错了啊，应该是它的前面这一块增加我们的样式啊好，那我现在呢刷新，诶对了，正好呢，当前页是不需要点击的，所以我们这是可以省略掉的啊好，咱们再来刷新。

刷新以后大家可以看到现在我们这个就对了，而且我们这种方式要比之前好，就好在即使你数据条数多，我们的用户也能够马上看到页面，而且增加一个loading效果，对于用户的体验效果来讲是非常好的啊好，那我开始翻一页了，第二页点没问题，上一页下一页，诶，这都没问题，所以我们把当前的分页就改成了异步分页。