51Testing软件测试论坛

标题: 大神带你玩测开，开发Web平台之图书下架 [打印本页]

作者: 草帽路飞UU 时间: 2022-11-1 16:27
标题: 大神带你玩测开，开发Web平台之图书下架
在前几篇文章中，我们主要讲了开发Web平台之环境准备、登录认证、用户信息管理、接口文档、图书信息。　　但是细心的同学会发现，我们的数据前端没有分页，因此本篇文章我们先实现分页操作，再实

现图书下架，也就是数据删除功能，总结一下我们的任务是：

　　1.豆瓣图书展示分页的前端实现

　　2.豆瓣图书展示分页的后端修改

　　3.豆瓣图书下架功能的后端实现

　　4.豆瓣图书下架功能的前端实现

　　5.前端页面自动刷新

　　豆瓣图书展示分页的前端实现

　　分页组件

　　这个分页组件在哪里呢？同样，你可以打开vue-element-admin项目的预览地址：在文章列表https://panjiachen.github.io/vue-element-admin/#/example/list可以看到，这里使用了分页。

[attach]144537[/attach]

让我们来看一下这个页面对应的源码，总共分为4步：

　　1.引入分页组件：importPaginationfrom'@/components/Pagination'。

　　2.使用components:{Pagination}注册分页组件。

　　3.在模板中使用分页组件标签，v-show：控制分页组件的显示，当数据量大于0的时候显示分页，没有数据的时候不显示，:total单向绑定分页组件的总数量，:page.sync单向绑定分页组件的页

数，:limit.sync单向绑定分页组件的每页条数，@pagination绑定了一个监听事件，当切换页面的时候methods中的getList方法会执行。

　　4.在data中定义了分页需要的数据：total、listQuery。

[attach]144538[/attach]

创建分页组件

　　比较遗憾的是简化版项目vue-admin-template中并没有公共的分页组件，因此需要做两件事情：

　　1.在src/components目录下，创建Pagination/index.vue，分页组件的内容直接拷贝

　　https://gitee.com/panjiachen/vue ... agination/index.vue

[attach]144539[/attach]

2.我们可以看到分页组件调用了scroll-to中的方法，因此需要在utils下创建scroll-to.js文件，里面的内容直接拷贝https://gitee.com/panjiachen/vue ... /utils/scroll-to.js

[attach]144540[/attach]

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)