12-项目第五阶段-分页/10-尚硅谷-书城项目-分页条的抽取

现在呢，我们已经把前台这个分页的数据啊，初步的做了一个展示，基本上它分页其实也都有了是吧，也都有了，没啥太大的问题，你要跳到具体的哪一页，你看也可以跳。啊，也可以跳，但是我们在实现这个前台分页的过程当中，我们发现一个什么问题。我不知道大家有没有留意，就是这个前台的分页条和后台的这个分页条，大家想想是不是除了这个请求地址。除了这个请求地址不同之外，其他的完全一致啊。对吧？哎，其他的完全一致，那么既然如果说大家去想想啊，如果说他们完全一致，除了请求地址不同，那么我们可以干嘛，我们可以把这个请求地址啊抽取出来，也变成为分页当中的一个属性。能理解吗？然后呢，再把这个分页条也进行一下抽取，那么以后啊，只需要对他们进行引入包含就可以用了，那这里面又分成两步啊，一步就是什么东西大家看。

大家看一下哈，这个请求地址里面。分页的地址是完全一致的。咱们可以先在这里抽取出这个分页条的请求地址来。啊，大家注意看一下哈，我在这里写上。URL，咱们说这是什么？这是呃，分页条的请求地址，因为他们是一样的。因为他们是一样的啊，我给它生成get set方法。重新生成这个粗string。好，那么怎么样去使用啊，大家注意看一下哈，那么我们后面页面当中的所有的请求地址。

大家注意，我们不在这个写了。我们使用这个URL。这个变量来输出，替代掉。输出替代掉，那么这时候大家注意看着哈，我们怎么改啊。嗯，我从这里开始改。在这个地方啊，到这里来看，包含这个action等于配置也都是一样的，我们把这个。CTRL加CTRL加R。哎，我们要把它替换成什么东西，替换成为request，我复制一下，免得写错了。替换成为这一段，这个是什么东西呢？是URL。统一的替换掉，因为它就是那个请求地址嘛，好别着急啊。来，我们先。

走一下咱们替换啊。替换替换替换。好就都替换了，还有吗？这里还有吗？啊，还有是吧，还有就给你替换了，替换了还有没有没有了，都替换过来了，大家注意替换的时候，除了首页这个后台的也替换一下。你打开还是一下。选中这一段。CTRL加R，然后呢，给它替换一下，替换替换替换替换，你看这地址是不是一模一样。地址一模一样是吧，好，那么替换之后这个时候怎么办呢？大家看啊，在我们的这个。色当中啊，咱们在这边。设置一下这个请求地址，配置点set URL，首先这个是后台的RL啊，后台地址是many book one和action等于配置这是后台的，那么前台的呢？

这里也设置一下，前台的是这里把它换成C就可以了，那么大家想想哈，我们在这里已经设置了请求地址以后页面当中就可以使用，不管你是前台还是后台。呃，我们先回到首页，先测试这个首页的走。哎呀，又有啥问题，咱们来看一下，重新部署一下吧。哎，他说URL那放就是没有重新部署，重新部署一下就好了。好，重新复出了。那么我们再来刷新一下。稍等大家看现在就可以输出了，你看这个地址是不是依然可以用啊，前台这个可以用了，那后台这个呢，稍微看一下走走走走走是不是也可以用。

诶也可以用，那首先大家注意看这么做的好处是什么，第一我们抽取这个这个请求地址之后吧，后面如果说我们要改页面中的这个所有分页条当中的请求地址呢。我们改起来就简单了，大家看一下对吧，改起来就简单了，我们只需要改一处，就是代码当中这个URL变量就行。前台也一样，这是它的一个好处啊，啊，另一个是大家注意，咱们现在知道这个前台和后台。大家看一下它的分页条数完全一样啊，当他们俩都把这个改成一个变量之后，你就会发现他们几乎完全一致了。咱们刚刚前面拷贝这个分页条的时候，是不是只是改了这个请求地址，现在请求地址变成了这个变量之后，他们就完全一样了，那我们可以干嘛，我们就可以把这段东西它抽取出来。

在这里面。叫做page。是吧，分页条。咱们把这单拿掉，这里面你就可以把那个分页条的内容都拿过来，比如说我从这里啊分页条的开始。分页条的结束呢？我找找啊，分页条的结束就这一段，我剪切一下，然后就放到这里面来，这就是整个分页条啊，那么我们只需要在首页这个地方静态包含就行了。啊，斜杠page下的common下的page是吧。咱们说静态包含分页条，大家看就包含了，那么后台呢，后台也是一样，你只需要在这个地方。T，换掉这个分页条的内容就好了。

你看替换掉，替换掉以后大家看一下哈，分页条就完全一致了，完全一致了以后不同的模块大家注意，我们只需要修改这个URL地址就行，只需要修改这个URL地址就行，它就完全可以通用了，好我们再重新部署一下啊。稍等。哎，这个部署好了，来我们听一下。呃，我们先测一下首页，返回商城，这地址不对，我们改改吧，用到一个改一个啊。在menu里面这个地方点个点给它去掉。来，我们重新刷新一下。看这个改过来没有。改过来了啊，大家看一下首页这个轴走走走走是不是都可以用，没问题啊，然后后台的呢，也是点点点点点就都可以了，那么这样子呢，以后啊，咱们这个分页条的代码只需要维护一份就可以了，这样子维护起来也很简单，那么再有其他的模块想要做分页的时候，那也变得非常简单。

对吧，只需要把这个分页条引入就可以了啊就可以了，好。