day03【后台】管理员维护/01-尚硅谷-尚筹网-管理员维护-分页导航条-准备工作

来，我们。前天坐到哪儿了呢，这个。这个分页哈，其实我们已经把后端都已经写好了。来，我们看一下。哎，我们这是请求呢，发过来，找这个handle的方法发过来keyword page number page size这三个值，这三个请求参数我们都给了它默认值。然后呢，把这些数据可以传给service。Service里边呢，开启分页调，我们提前写好的一个方法去执行这个查询，诶。然后就返回这个配置音符啊，这是我们后端已经写好了。然后呢，我们在页面上呢，已经这个测试过了啊，它这个翻页啊，配置配拍12345也都OK了。下边要考虑的一个事儿就是我们在页面上呢，我们要显示一个页码。

打开我们这个页面哈，我们现在有一个页码，但是这个页码是假的。这个是假的，哎，这是这个，因为我们现在吧，咱们用的是这个boop哈。这个它是用这样的方式一组ul加Li呢，它是给我们实现的这一套东西吧，它是有视觉效果。有视觉效果，但是呢，他没办法给我们动态的去算这些值。这个它这个功能它没有提供，所以说呢，我们不光要这个视觉效果，我们还希望这个值能够动态的算出来。所以说我们得借助于一个小工具啊，那我们自己算也行，但是这个就比较麻烦。哎，用别人的工具的话呢，就比较省事一点。这工具呢，就是这个配置内啊，它是把这个zip包解压以后是它啊。

嗯。哎，所以说呢，这个下一步呢。在页面。上我们使用。实现页码二。页码的导航条。嗯，那么这个首先第一步哈，咱们看看咱们可以有什么参考的。这个自由包解压出来以后，这有一个DEMO。这就是一个例子。最后呢，就是这么一个效果啊，这是上一页，因为现在在第一页，上一页这个地方不能用，这是下一页，哎，上一页就能用了。然后呢，1234。哎，四到八之间呢，就省略了，这个省略呢，也是动动态的。也是动态的啊，当你调到后边的时候，这一部分是省略的，之所以用它来帮我们算，就是我们自己懒得去算这个。

哪些地方是，诶到什么时候省略，到什么时候不省略啊，这个东西我们就不算这个，他就给我们算用他的这个，用用他给我们做好的这些。那么我们想参考它呢，把这个代码写出来哈，咱们就查看网页源代码，它的代码在这儿。你不要不需要仔细看这个这个代码呢，我们基本上参考他这个要重新写一遍啊，重新写一遍，一边写一边大家听我的解释，你不要看他这个啊，你不不需要看他这个，我们首先呢，咱们先把这个环境导进来。这个环境呢，我们看啊。首先看这它需要一个CSS文件。这个page加CSS。需要解query啊，这是解query的库，这个呢是我们page的库啊，就是说这个时候我们需要这三个j query我们已经有了，那么页面上呢，就是导page的CSS和page的GS。那么页面上写之前，我们得先把这个文件拿到我们的这个项目里边。

哎，看看我们这儿有没有啊。这是这。然后这是有的。这里边儿呢，你看它的版本是1.2哈，看看它这个版本。是不是1.2。哎，也是版本也一样啊，这就OK了。所以说呢，这个就是这个GS文件是有，那么我们把这个CSS文件给拿过来。在篱笆下边。哎，配点CS啊，CTRLC。要这俩。我们标记一下是哪一个工程里边的哪两个文件。诶，这是一个。这是一个。先把他俩先拷进来。

哎，这个时候其实是首先哈，第一步我们得先去导入。这个。嗯，去加入这个的环境。哎，然后在有需要的页面上。去加入。嗯。再进行引入。啊，把这两个东西给引入进来。我们是哪个页面需要呢，需要。那么就在这个include这个后边，因为这个include里边有我们的j query。哎，杰瑞是在这里边的，那么我们为了在杰RY的后边，就在这个include这个语句的这个后边去写。

啊，所以说这个先可以是先引入一下。I。这个我们是在杰瑞这个目录下边。哎，因为包括贝斯标签也在这里边。然后在query配置，点JS。啊，当然这个在此之前我们把这个力呃这个呃，CSS也拿过来，CTRLC。这个路径我们得改一下，我们是CSS。的目录下边。拿过来复制一下保险哈。把这两个给引入进来。Control seeker。我们把这个也复制过来了。这里边儿呢，注意先后顺序。

这个先后顺序呢，是page要在。The query。到后面啊。这块在后面把这个引入进来以后，咱们就可以看他的这个代码啊，然后一点点去写。这个代码呢，我们说那当然这一大块都是GS代码。那么GS代码GS都是对呃HT或者说我们所谓的这个do呢进行操作的。所以说呢，我们在看GS代码之前，咱们先看看HTL的代码需要做哪些个准备。HTML代码所需的准备。需要什么准备哈，看看。嗯。就看这个GS代码里边哈，它真正用到的呢。这个不算哈，这个其实我们一会儿是有代替的，它会用到一个这东西。

号page。IID选择器肯定是有这么一个ID，这个在哪呢？这个在这ID是配。需要有这么一个标签，在这个div的标签里边。给我们动态的生成。这个各个页码的按钮。啊，它会给我们动态的去生成。所以说呢，我们也把这个东西，我们也拿到我们页面里边，CTRLC拿到我们页面里边，这个该放哪呢。就代替这个页面上原来的这个页码，原来的页码是这个URL这一部分啊，去代替它。诶，为了让大家去能够你们在页面上也方便去找哈，我把这个T这个整个我们拿过来。CTRLC。嗯。哎，使用要求的div。标签去替换。

诶，去替换原有的这个页码。部分。那么这个原来的。是这个哈。我这儿给你写上，这是这个旧的代码。旧的干嘛？然后呢？过来这边新的代码。哎，我们把这个div复制一下。然后呢？这个ul这。去掉。哎，这是我们新的代码。CTRLC。

新的代码替换的呢，就是这一部分是我们后来后替换的。骑代码。好嘞，做这样一个替换啊，这些是属于要被替换的。嗯，这些是要被替换的。好嘞。然后把这个再给它缩进回去。跟提包的放到同同呃，平齐。哎，这是H毛呢，先先做这个准备。那别的呢，其实就不用了啊，因为啥呢，这是个标题。啊，这个我们拿过来了，这个呢，就是。他说分页初始化完成后，这里的内容会被替换，就是这些呢，相当这个下边这个div里边东西，相当于我们数据库里边的数据。把数据库里边的数据他给查出来，分页的结果在这显示，所以这一部分呢，相当于我们的，相当于我们的主体数据，T包地里边的，就是c four里边的这部分啊，相当于是这一部分，所以这部分我们就不用拿回来了，我们只拿八标签呢，只是拿这一个就行了，诶我们做好这些准备工作，下一步我们就可以来看看这些，这个GS怎么写。