12-项目第五阶段-分页/09-尚硅谷-书城项目-前台分页的初步实现

接着呢，呃，咱们来看一下前台。这个。数据的展示啊，大家看一下呃，前台这个数据的展示，咱们后台那个已经做完了啊，那么前台这个地方。大家注意，人家一上来这里是不是也要显示一下分页的数据啊，对吧？啊，那我们把这个事情稍微整理一下。就比如说这个是什么。这个现在是什么呢？Web目录下的indp。大家看一下啊，它现在是web目录下的in JP就是哪个呀，大家看这个首页，你现在的这个首页啊，它其实就是哪的。看见了吗？就是这个目录下的index.jp。对吧？哎，为啥呀，因为你现在的这个访问地址是什么，是不是IP地址端口号加工程零没有路径名，那没有路径名的情况下，它默认就是访问index。

啊来，因为HTTP冒号双斜线IP地址端口号。工程路径是吧，斜杠或者是他IP地址端口号，哎，跟上这个in带点JP，那么他们这两个地址啊，这两个地址其实都是在访问他。都是在访问他。那问题就来了，大家想想啊，你一进来进入到这个index页面，你这里又需要什么，需要查询好的分页数据啊，然后使用GSTL标签库遍历输出到页面上，那现在问题又来了，你哪来的数据啊？

你这个查询好的分页数据从哪来的，你这个GDP又不能查。对吧，那怎么办呢？那这个问题就来了，这个就没有数据。哎，那这时候怎么处理，我们来想一想，我们以前说过什么东西呢？当你来到一个GP，大家注意要某些数据得不到的时候怎么办，让他先去访过一个，对吧，那咱们前台呢，也会有一个。咱们管的C。Client程序大家注意看一下哈，我们可以在这里面准备一个方法，让它去处理分页。好。然后处理分页。

好了啊，也就是说我们不要直接访问这个GDP，而是直接访问了他。直接访问的它，但是大家想想啊，如果是直接访问的它的话，那个地址是什么？大家看这个地址，地址是APP冒号双斜线IIP地址端口号，工程路径下面的client下的不可问号，Action等于配置。对吧，是这样一个地址，那就更奇怪了，为什么？因为基本上我们就没有见过哪个网站的首页是这么样一个格式，都是这样子的，都是跟着这个IP地址端口号啊，或者最多架构工程路径就完了。对吧，就是要共同路径就完了，哎，我们很少会后面跟一大堆。那这就更不合适了。是吧，呃，那么这个请求地址啊，大家注意看，现在还不不行，你现在还不能让他直接显示的去访问这个。

什么东西呢？那怎么办呢？你只能访问它啊，那这就很绕了。这就很绕了，来，我们给大家想个办法，怎么做呢？注意看一下哈。我们现在啊，变个魔术，变什么魔术呢，我们在这个。这边。Web目录下，咱们说web目录下page目录下有一个client目录的index.jp，大家请看一下哈。我们现在web pages下。看到吧，配置下有个climb录，咱们看一下，现在其实还没有的，我们稍微说明一下，现在这里面没有climb，咱们给他准备一个。然后这个club里面干什么事情呢？大家请看一下。准备一个in带点JP，然后这个in单点JP呢，跟这边干的事情一模一样，那么如果是一模一样的话，我把这个复制到这里面来就行了。

是吧，这里面来就行了，好了，那么这个呢，也是需要分页的数据啊，然后使用GSTL标签库遍历输出，那这边这个呢，他就不干这个事情了，那我们让他干啥，大家注意看啊，Web这个首页的数据，我们只是他干一些事情，就是请求转发到什么东西呢。哎，来看client book程序，咱不让它转发过来，也就是说你访问它没问题，我让你反问啊，但是我在这边啊，或者我换个色子是吧，就给你访问到这里面来，好，那么访到这边来的话，这边干嘛。查询的分页数据啊是吧，呃，然后呢，他再转发过来。

他的转化到这里面来。好，大家想想整个过程用户访问的是不是这个地址，解决这个问题了，而如果整个代码跑下来，他跳给他，他才能够转发给他，那么这边看到的数据最终是不是还是首页的这个数据啊。这能理解吧，诶这好像可行是吧，咱们可以先按照这样的一个思路来试试看。啊，试试看，好这个web下的index有了，咱们先准备一个前台的book策略程序。我们在这边在web里面去new一个类啊，就叫做。Book that，那么它记成base serve that，好，这里面呢干嘛呢，它也有个方法，是不是也是配置方法呀，也是做分页的，那怎么办？我们把后台这个分页其实拿过来。

把后台这个分页拿过来，让他直接用就行了。啊，因为他们做的是一模一样。这个。他这里还需要什么呀，需要book service是吧，咱们给他创建一个。Service好，会创业出来了，但这个请求地址啊，转换地址要改改改到哪是client下的index。好啊，那么我们这里打印去换一会儿看看控制台诶。我们说经过了前台的book程序啊，或者是加上这个climb吧，我给他手动的加上这个C好。

好，现在呢，我们给这个前台的配置个访问地址。啊，我们把这个稍微复制一下。改不改过就行了啊，那现在这个呢，就是。这个。我们复制一下，OK这就好了，那么大家看着哈，那么我们这个web，你看web下的index这里面啥都不干。记住啊，这里面啥都不干，只干请求转发。给他删掉。哎，这里面诶。减号。我改改啊，诶，这输入法怎么换不过来了啊，接着P冒号for what好了，跳转的路径是哪里啊，大家看一下是这个前台的。

不可设的程序，并且咱们还要告诉人家处理的方法是哪个呀，是配置好废置，我们说只负责请求转发好，那么在这个book呃里面咱们去想想啊，这里我也打印了一会，经过它这里是不是也转发到。下的indexa，我们现在就看看。它是不是可以跟我们这个图所示的一样，访问这个地址，看到这个页面感觉好像。就是首页一样啊，就首页一样好了，那这个写完之后啊，咱们要重新部署一次。啊，重新部署一次。好，中间部署成功。

来咱们就访问这个地址啊，刷新。诶，他说这个找不到是吧，我们看这地址对不对啊pages c下的in DX点接P啊，这地址没啥问题啊。看看吧。Pages下下的in de截P啊，地址其实没啥问题的，咱们再重新部署一次吧。我看有什么错误没有。啊，这个不是这个空指针异常是什么，大家看是不是经过这个class啊。啊，没啥问题，咱们再来重新部署一次。我们也来检查这个地址，看对不对，Page看看啊page啊C。IDXJP。GSP没啥问题啊，没啥问题，好了，咱们这个重新部署啊，也成功了，咱们再来看看效果。

在桥上回车。诶怎么出不来呢，我重新启动一下。重启动一下啊。稍等。啊，咱们稍等一下。好了，启动。喝了，诶就是出不来是吧，那好吧，出不来的话，咱们就一个个错误先给他看一下，看有没有什么错误需要处理的，首先大家注意看现在这个错误是什么，是number for me，是now。这个异常是哪来的呀，大家看这个地方。是web us里面抛出的异常。哪里？是这里，这里为什么会抛异常呢？大家来看一下哈，这里是哪调用的呀？走是这个地方调用的，在做分页的时候，这里需要什么？需要page number和page size。

啊，那其实什么呢？其实其实咱们在这个地方是没有发的，它用的是默认值，大家想想哈，我们在请求转发拿。呃，Index来这边在这里咱们是不是没有发page number呀，咱们是没有发的啊，没有发这个东西的，那么它其实是得到一个now。所以这个错误是不是正常的，你要是不想看到这个错误呢，你可以把它注掉啊，你可以把它注掉啊。好，那么来咱们重新部署一下，咱们可以把这里能看得见的错误一个个排掉啊。看看到底是哪里出问题。重新部署好了吗？呃，部署好了，咱们清一下啊。来，咱们再来敲一下。

找件是不是出来了啊，诶，难道还真的跟这个错误有关吗？啊，咱们给它去掉了，大家其实看一下哈，咱们是不是只是做掉这一行啊，这只是打印错误信息啊，应该是不影响的，嗯，不影响好了，刚刚应该是缓存的原因好了。那现在呢，大家注意看一下哈，它经过了这个前台的client book下列程序是不是可以看到这个首页的数据了，是吧，没错吧，好了，那么在这个首页这个地方，大家想想，咱们是不是只要输出我们在这里哪呢？前台查到这个分页的数据就好了。好，我们看到这里输出一下。怎么输出呢？咱们找到下面大家看啊，首页中间这个地方就用来做病历的，我们首先得知道这一块便历是哪些内容，先找到这个便利的个体，呃，我们把这个client下的index哪个。先关了啊，这东西有点多，是这个class index是它，嗯，先都关了吧，再重新打开一下，免得乱就是它啊，大家注意看。

从这个div这个地方，它有个b list看见吗。哎，这里面就是一个便利的个体了，你可以在这里面稍微删一下，删点内容，看看这页面上有什么变化没有。是不是少点东西啊，大家记住啊，不要着急上来上一大块，你就一块一块的一个小整体小整体去删，然后测试一下对吧，没问题，那你再多删几个，再删掉这个库存啊，销量啊，再把这一块干掉。刷新一下。啊，然后再把这个刷掉，再删了，再刷新一下啊，然后大家再看一点点来哈，再把这个再把这个删掉。OK。

就相当一个图片是吧，那么这个图片呢，我们把这个也删掉。来。就好了，那咱们便利的时候是不是便利这个方块的呀，那方块是哪里跟哪里呢，一直往一点点来，不要着急删，删掉这里面的东西，一个一个来删掉，我们看看这个方块还在不在，你发现方块是不是还在啊，我们把这个你看啊DIB list删掉。来大家看一下是不是删掉一个了啊，也就是说咱们在遍历的时候，其实是遍历这个div list，那咱们就找到它去删就行了，哎，怎么找啊。怎么找，大家注意看我现在。你可以把它停在这里，停在这里之后再想想这是不是一个div啊，你可以做点标记是吧，那上面咱们说。开始或者说一一随便敲点内容，在它的结尾处也敲点内容啊，然后我们就知道这个div从哪到哪了，你看到吗？然后它删掉。

删掉好，这样呢就少了一个。对吧，咱们上到剩下一个就行啊。还是老方法，在这里面注意看，咱们随便加点内容。啊，下面呢，也是随便加点内容随便啊好找到这一段给它删掉就OK了是吧。好了，你看这删掉了，那么删掉之后呢，大家注意看，我们只需要对这个来进行遍历就好了，我们在这里C冒号for each。向下回撤。啊，敲一下回车，好，我们在这边给它包一下。OK，那么在这里呢，咱们加上这些参数啊，就是it。

咱们遍历的是什么？大家看一下，咱们遍历的是CLA里面的这个配置，它的it是数据，那么在这一边咱们来写一下request的点page.items one呢是book啊，你可以把它点开。点开之后，你把这内个内容改一下，输出一下叫做book.name书名，这里其实还有个输输的地址，嗯，book.image pass。作者。Book点。啊，然后呢，还有book点。Price价格，还有销量点，Sales库存，book.stock。咱们来刷新一下啊。来看这个数据是不是有了，但是只有两条，两条是因为啊，咱们前面为了做分页，呃，咱们把这个。

改成了多少啊，改成了二，把咱们改成四改了就行了，再重新部署一次。咱们这个经过前台这个也可以删了啊，测试没啥问题，可以把它删了。好，重新部署好了。咱们来看一下哈，刷新。这个四个吧，就出来了啊出来那么下面这个分页条呢，这个分页条咱们可以到后台去拷贝一下，哎，就可以跟它一模一样的来。哎，你看我都删了，这是不是还在啊，这缓存好严重啊，呃，来我们到后台。后台的这个。

Manage这个地方，Book manage最大化，那分页条是从哪开始的，从这个div开始的，咱们说。分页调的开水。是吧？哎，这是分页条的结束。好，咱把这一段呢，就复制过来好看一点。复制复制之后到咱们这个首页里面换掉，你看到吗？它这个分页，诶给它换一下啊，给它粘贴进来。哎，粘贴进来，好，那我们看看这个效果。咱们刷新一下好，这分页是不是也出来了，这分页就出来了，咱们可以点击看看能不能用啊，下一步诶，又跳到后台来了，那有什么问题啊，大家注意看，咱们现在拷贝的时候，这个分页条里的所有地址是不是还是跳到后台的那个地址，你只需要把这个地址统一改了就行了啊，这个分页条其实跟后台那个分页条一模一样，就只是什么请求地址不同改了，呃，这个改的话我们可以用搜索替换改改快点啊。

搜索替换怎么做？CTRL加R来吧，咱们要搜索的是什么？是这一段。哎，替换成哪一段呢？换成这个。啊，你可以一个个去替换是吧。就看见了。OK，就都替换过来了啊，都替换过来了。那么替换好了以后啊，咱们再刷新一下。注意啊，大家如果说点击到还是看到后台就缓存重新部署一下啊，诶这是不是可以了，你看前台的这个分页一下子就出来了。哎，就出来了，好。