但是细心的同学会发现,我们的数据前端没有分页,因此本篇文章我们先实现分页操作,再实现图书下架,也就是数据删除功能,总结一下我们的任务是:
1.豆瓣图书展示分页的前端实现
2.豆瓣图书展示分页的后端修改
3.豆瓣图书下架功能的后端实现
4.豆瓣图书下架功能的前端实现
5.前端页面自动刷新
豆瓣图书展示分页的前端实现
分页组件
这个分页组件在哪里呢?同样,你可以打开vue-element-admin项目的预览地址:在文章列表https://panjiachen.github.io/vue-element-admin/#/example/list可以看到,这里使用了分页。
让我们来看一下这个页面对应的源码,总共分为4步:
1.引入分页组件:importPaginationfrom'@/components/Pagination'。
2.使用components:{Pagination}注册分页组件。
3.在模板中使用分页组件标签,v-show:控制分页组件的显示,当数据量大于0的时候显示分页,没有数据的时候不显示,:total单向绑定分页组件的总数量,:page.sync单向绑定分页组件的页数,:limit.sync单向绑定分页组件的每页条数,@pagination绑定了一个监听事件,当切换页面的时候methods中的getList方法会执行。
4.在data中定义了分页需要的数据:total、listQuery。
创建分页组件
比较遗憾的是简化版项目vue-admin-template中并没有公共的分页组件,因此需要做两件事情:
1.在src/components目录下,创建Pagination/index.vue,分页组件的内容直接拷贝
https://gitee.com/panjiachen/vue-element-admin/blob/master/src/components/Pagination/index.vue
2.我们可以看到分页组件调用了scroll-to中的方法,因此需要在utils下创建scroll-to.js文件,里面的内容直接拷贝https://gitee.com/panjiachen/vue-element-admin/blob/master/src/utils/scroll-to.js
本文源自第六十八期《51测试天地》
《django+vue:手把手教你开发web平台(六)—图书下架》一文
查看更多精彩内容,请点击下载:
版权声明:本文出自《51测试天地》第六十八期。51Testing软件测试网及相关内容提供者拥有51testing.com内容的全部版权,未经明确的书面许可,任何人或单位不得对本网站内容复制、转载或进行镜像,否则将追究法律责任。