51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

查看: 421|回复: 0

[原创] 大神带你玩测开,开发Web平台之图书下架

[复制链接]

该用户从未签到

发表于 2022-11-1 16:27:43 | 显示全部楼层 |阅读模式
在前几篇文章中,我们主要讲了开发Web平台之环境准备登录认证用户信息管理接口文档图书信息  但是细心的同学会发现,我们的数据前端没有分页,因此本篇文章我们先实现分页操作,再实

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

  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 ... agination/index.vue



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















本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

x
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2024-3-29 07:18 , Processed in 0.069443 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表