SSMP整合案例(14) 将界面查询改为分页查询

这篇具有很好参考价值的文章主要介绍了SSMP整合案例(14) 将界面查询改为分页查询。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前面几篇文章过后 我们的项目基本环境就算搭好了
但是 我们下面的分页显然就是个摆设
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
这里 我们就先将查询的方法改成分页的

我们 java项目之前做了这个分页的函数
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
那么 我们vue项目 直接在 src下的 api 下的bookApi.js中加上对应的函数

export function getPage(params){
    return request({
        url:`/books/page`,
        method:'get',
        params:params,
    })
}

因为 我们的分页方法上面单独挂了 @GetMapping(“/page”) 多声明了一节路径 所以 我们这里是/books/page

然后 我们来到App.vue组件
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
可以看到 我们的声明周期中调用的是 getAll 函数 是查询全部的函数 而我们的data中其实之前就写好了分页的参数了
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
首先 我们在 App.vue中引入我们刚刚写的getPage
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言

然后 我们在这个组件中单独写一个getPages函数

getPage(data).then(res => {
  if(res.state == 200) {
     this.total = res.data.total;
     this.bookList = res.data.records;
   }else{
     this.$message.error(res.message);
   }
 })

然后 在 mounted中调用它
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
运行代码
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
可以看到 我们下面分页的效果也出来了

那么 我们之前调用的 查询全局的代码都要改一改 其实就两个地方 一个是 App组件中传给bookFill的getAll
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
还有一个就是删除成功之后的getAll
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
这里 我们都换成getPages
好在用的地方不多 比较好换

但是 我们会发现 现在点击 第二页是没有反应的
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
因为我们并没有编写切换当前页的一个逻辑
我们将分页组件的代码改成这样

<el-pagination
   background
  :page-size="page.pageSize"
  :page-count="page.pageCount"
  layout="sizes, prev, pager, next"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :total="total">
</el-pagination>

首先 我们改了一下layout
最明显的变化就是 最开始的sizes 可以调整每页展示条数
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
然后 size-change 当用户切换每页展示条数时触发的方法 current-change 当用户切换当前页时 触发的函数

我们可以在methods中编写这两个对应的函数

handleSizeChange(value) {
 this.page.pageCount = 1;
  this.page.pageSize = value;
  this.getPages();
},
handleCurrentChange(value) {
  this.page.pageCount = value;
  this.getPages();
},

SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
当用户切换当前页 我们直接 改变当前页的this.page.pageCount 然后重新调用查询即可
然后 当用户切换当前页展示多少条 时 先将当前页变回第一页 在开发中我建议 只要查询条件改变都将当前页变为第一页 可以规避非常多问题 因为条件不一样 查出来的数据总页数会有不同
例如 你当前在第五页 条件改了 但他这个条件只能查到四页数据 然后你当前页发的5 自然就会出问题
好 然后我们运行代码

可以看到 我们点击第二页显然没什么问题
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言
然后 我们将每页展示的条数调成20
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言

可以看到我们的分页也是及时的做出了处理
SSMP整合案例(14) 将界面查询改为分页查询,javascript,前端,开发语言文章来源地址https://www.toymoban.com/news/detail-535244.html

到了这里,关于SSMP整合案例(14) 将界面查询改为分页查询的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SSMP整合案例(2) Spring Boot整合Lombok简化实体类开发

    好啊 接着我们上文SSMP整合案例(1) 构建 Spring Boot Vue MySql项目环境 我们继续 接下来 我们要在java项目中 建立出数据库表对应的实体类 我们还是先看看自己上文中 创建的这个 book表 其中四个字段 主键id 数字枚举类型的type 字符串类型name 字符串类型 description 我们打开idea 找到上

    2024年02月09日
    浏览(47)
  • SSMP整合综合案例【SpringBoot的基本增删改查】

    实体类开发————使用Lombok快速制作实体类 Dao开发————整合MyBatisPlus,制作数据层测试 Service开发————基于MyBatisPlus进行增量开发,制作业务层测试类 Controller开发————基于Restful开发,使用PostMan测试接口功能 Controller开发————前后端开发协议制作 页面开发

    2024年02月09日
    浏览(42)
  • SSMP整合案例(3) 创建数据层并在测试类中运行数据库增删查改操作

    上文 SSMP整合案例(2) Spring Boot整合Lombok简化实体类开发我们已经开发完了实体类 我们就可以做数据层了 目前来讲 数据层技术 使用了最大的自然是 MyBatis 但其实MyBatis-Plus在国内很多中小企业还是使用的挺多的 这次 我们主要是通过MyBatis-Plus和Druid来做这件事情 这两个工具的坐

    2024年02月09日
    浏览(42)
  • java springboot整合MyBatis实现分页查询以及带条件的分页查询

    之前的文章 java springboot整合MyBatis做数据库查询操作操作了springboot整合MyBatis,然后简单做了个按id查询的操作 那么 我们按上文搭建起的环境继续 我们直接在staffDao接口中声明一个分页函数 这里 我们直接在 sql语句中写limit 分页逻辑 参数是方法接收的 这个函数接收两个参数

    2024年02月10日
    浏览(46)
  • SpringBoot整合ElasticSearch实现分页查询

    本文使用SpringBoot整合ElasticSearch实现分页查询 还是继续使用spring-boot-starter-data-elasticsearch来实现分页查询操作 数据准备 使用ElasticsearchRestTemplate来实现 程序结果 使用ElasticsearchOperations来实现 程序结果 本文记录了SpringBoot整合ElasticSearch来实现分页查询的两种方式

    2024年01月25日
    浏览(52)
  • Springboot整合Elasticsearch新版分页查询

    其它插入、删除、简单查询都可以通过Repository调用方法查询。 Elasticsearch现在的新版本已经弃用了ElasticsearchTemplate类,Repository里原来的search方法也已经弃用了。下面是使用ElasticsearchRestTemplate类实现的分页查询 代码

    2024年02月11日
    浏览(37)
  • SpringBoot 整合ElasticSearch实现模糊查询,批量CRUD,排序,分页,高亮

    准备一个空的SpringBoot项目 写入依赖 注意你的SpringBoot和你的es版本,一定要对应,如果不知道的可以查看这篇文章:https://blog.csdn.net/u014641168/article/details/130386872 我的版本是2.2.6,所以用的ES版本是 6.8.12,安装es请看这篇文章:https://blog.csdn.net/u014641168/article/details/130622430 查看

    2024年02月08日
    浏览(53)
  • SpringBoot整合Elasticsearch实现分页条件查询及注意事项

    项目环境: springboot 2.3.7.RELEASE es 6.8.3 这里需要注意es中日期格式,ES默认是不支持yyyy-MM-dd HH:mm:ss格式的,需要通过 @Field(type = FieldType.Date, format = DateFormat.custom,pattern = \\\"yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_second\\\") 来指定日期格式。 直接看业务层实现分页条件查询: 范围查询: es en

    2023年04月16日
    浏览(50)
  • 若依整合Easy-Es实现文章列表分页查询

    Easy-Es(简称EE)是一款基于ElasticSearch(简称Es)官方提供的RestHighLevelClient打造的ORM开发框架,在 RestHighLevelClient 的基础上,只做增强不做改变,为简化开发、提高效率而生,您如果有用过Mybatis-Plus(简称MP),那么您基本可以零学习成本直接上手EE,EE是MP的Es平替版,在有些方面甚至比M

    2024年01月16日
    浏览(43)
  • java 整合ES实现文档增删改查(多条件分页查询)

    本文采用ES版本为8.7.1 由于只存储文章,仅用固定索引即可,索引用kibanna直接生成,省略索引部分的增删查步骤 抓取返回信息是因为版本问题无法解析ES返回的正确信息,实际操作成功但是会报错 我这边只需要单索引操作,有需求的可以让前端传过来

    2024年02月13日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包