这节对上节的代码进行修改 进行数据分页显示
为了让页面不刷新请求返回的是同一套数据 我们首先对mock生成的数据进行改造
上节课的代码每次刷新页面会生成随机的50条数据（分页显示看着不明显）所以这节课先让其在不刷新页面的情况下返回同一套数据
看下代码
为了点击分页时看数据明显一些
修改代码如下 并加入了图书行号一个字段
image.png
模板页面
image.png
运行效果
image.png
一共50条数据 下面实现下一页显示10条数据
我们在实际开发时 取第二页 第三页等内容时 会通过参数的方式去请求 不会赤裸裸的一个url后面没有参数
以get请求为例
一般会写入如下
http:mybook.list.com/list?page=n&pageSize=m
image.png
上一节我们的图书列表api地址为下面这个不带参数的
image.png
如果想分页传入参数像下面一样 mock就拦截不了请求了 因为api地址不一样了
image.png
改成带页码的之后mock就拦截不了 同时运行页面
也出现如下
image.png
图书列表不见了
那么如何拦截带参数的地址呢
mock官方给出解决如下
拦截的地址第一个参数可以写成一个正则表达式的方式 这时他会进行匹配 如果匹配到也可以拦截 代码如下
image.png
再次运行 可以发现图书列表出现了（mock进行了拦截）
image.png
下面看下如何获取参数 可以通过第三个参数获取当前url 然后通过拼接分割字符串的方式获取参数 第三个参数除了可以写要获取的data数据外 还可以写入一个剪头函数 里面有个options参数 可以获取到当前url信息
代码如下
image.png
运行结果
image.png
控制台出现了options对象信息 包含当前请求的url地址
得到url后 对其进行字符串切割（等方法获取参数）
下面写个方法 获取url后面的参数
image.png
获取参数
image.png
因为bookData(生成了)一共有50条数据 所以需要过滤下数据
所以需要写个函数过滤下bookData 获取从页码开始的到页尺寸的部分即可
image.png
运行结果
image.png
只显示了1页 是因为我们过滤了图书数据 booklist.length只有10条数据 所以是1页
一般分页 后台都会返回总条数listsize如下
image.png
这时前台请求就需要计算这个长度了
修改如下
image.png
对listsize重新赋值
运行出现如下
image.png
显示了5页
但是点击没有实现分页
因为我们请求的时候写成了第一页
image.png
下面改成动态的
由于我们上节课讲过 点击每一页改变currentPage的值
所以改成如下
image.png
运行效果
image.png
点击后还是没有进行分页
是因为我们之前说过的一个问题 改变了vue实例data里面的数据 视图会发生重新渲染（re-render） 我们需要在重新渲染之前执行beforeUpdate函数
这就需要我们学习一个新的生命周期函数 beforeUpdate()
这个函数在重新渲染组件之前执行
所以我们需要在里面再次获取图书实例
image.png
运行效果
image.png
可以看见进行分页了
全部代码
js
image.png
image.png
image.png
模板页面
image.png
image.png
image.png
image.png
网友评论