VUE element UI 结合Spring Boot 的 Spring Data Jpa进行分页查询并且按id字段进行动态正序逆序排序

最新推荐文章于 2023-04-25 08:12:27 发布
最新推荐文章于 2023-04-25 08:12:27 发布
阅读量1.1k 收藏 8
点赞数 2
文章标签： java spring vue.js javascript 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37225921/article/details/108501590
版权
本文介绍了如何使用Vue Element UI组件库结合Spring Data JPA进行真实分页和动态排序。通过Spring Data JPA的分页查询功能，每次仅从数据库获取指定页数和排序后的数据，有效避免了全表查询带来的性能问题。前端Vue部分通过表格和分页组件实现交互，后端Spring Boot通过Controller和Repository实现分页和排序逻辑。提供了完整项目的GitHub链接，供读者参考和学习。
摘要由CSDN通过智能技术生成

这不仅仅是前端查出全部数据，然后做假分页和排序，而是结合SpringData Jpa 以及其封装的进行真分页以及排序后查询，每次只从数据库动态获取指定条数和指定页码的数据,解决了全表查询数据量太大的问题。

首先是前端Vue的部分

写一个table加pagination并且绑定必要的方法

<div class="elshowtablediv">
            <div>
                <el-table
                        class="eltable1"
                        :data="UsertableData"
                        :header-cell-style="{background:'#F2F9FF', 'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        @sort-change="changeUsertableSort"
                        style="width: 85vw"
                        border>
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="180"
                            :sortable="'custom'">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="usernumber"
                            label="账号">
                    </el-table-column>
                    <el-table-column
                            prop="password"
                            label="密码">
                    </el-table-column>
                    <el-table-column
                            prop="userrole"
                            label="身份类型">
                    </el-table-column>

                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button
                                    circle
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-edit"
                                    @click="handleEdit(scope.row)"></el-button>
                            <el-button
                                    circle
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
最低0.47元/天 解锁文章
Arthuryeah
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
vue table排序 （正序&倒序
FY18381366936的博客
11-05 4697
vue table排序 （正序&倒序 正序 (page - 1) * pageSize + scope.$index + 1 // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1 <el-table-column label="序号" width="50px" align="center"> <template slot-scope="scope"> {{ (queryParams.pageNum - 1) * quer
element UI 表格样式动态设置以及排序响应
weixin_38010398的博客
06-01 2762
1.根据表格的属性设置对应的样式 我想要根据某一个属性设置对应的颜色样式，所以在elementUI给的“带状态表格”基础上改成如下的 //html部分： <el-table-column prop="autoStatus" sortable @sortChange="tableRowClassName" label="Status"> <templ...
Vue+ElementUI+SpringBOOT实现多条件复杂查询
lovoo的博客
03-20 3422
data() {return {queryDates: [ ] , //保存日期信息key: null, //主表搜索queryField: null, //查询字段itemKey: null, //明细查询内容queryItemField: null, //明细查询字段payType: null, //支付方式 类型saleUser: null, //营业员selectField: null, //选择查询字段selectValue: null, //选择查询值。
Element UI设置列表时间倒序/正序排序展示
monicateacat的博客
04-25 4614
Element UI设置列表时间倒序/正序排序展示
Vue学习（v-for的使用以及普通数据排序、数组对象排序）
qq_40947819的博客
05-12 7029
v-for：循环渲染data的一组数据组，v-for指令需要以item in items形式的特殊语法 显示索引值 （item，index）in items 完整代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="...
spring boot + vue + element-ui全栈开发入门.zip
最新发布
05-09
通过将 Vue 和 Element UI 引入到 Spring Boot 项目中，开发者可以快速地构建出具有丰富交互功能的用户界面。结合 Spring Boot 的后端服务能力，可以轻松实现数据的增删改查（CRUD）操作，为用户提供高效、稳定且...
基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现权限管理系统，JAVA快速开发平台
06-16
总的来说，这个基于Spring Boot和Spring Cloud的后端，结合Vue.js和Element UI的前端，构成了一套完整的权限管理系统。这样的系统不仅在功能上满足了企业管理的需求，同时也展示了现代化的技术栈在开发效率和用户...
基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现.rar
06-29
鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展，企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、...
Spring boot+vue3+element plus实现后台管理系统
07-04
前后端分离项目，Spring boot作为后端，vue框架实现前端，后端整合swagger3测试工具，jwt实现验证码生成，awt生成图形验证码，整合邮箱验证，使用mybatis-generator自动生成实体类以及mapper，设置有拦截器验证登录...
基于Vue的Spring Boot Jpa后台管理系统设计源码
03-29
该项目是一个基于Spring Boot 2.1.0、Spring Boot Jpa、Spring Security、Redis的前后端分离后台管理系统，权限控制采用RBAC，菜单采用动态路由，适合用于个人学习和实践Vue和Spring Boot的开发技术。
Springboot data jpa 多字段排序问题
Serendipity_77的博客
12-15 3194
Springboot data jpa 多字段排序问题 对于正常排序，我们可以用如下方式： Sort sort = new Sort(Sort.Direction.DESC, "id"); 但是如果我们想根据多条字段排序呢？ 比如想根据第一个字段正序，结果再根据第二个字段倒序，结果再根据第三个字段倒序，我们应该怎么写呢？ 1.首先导包 import org.springframework.data.domain.Sort.Order;这个包下面的。 2.然后建立三个order 例： List<
JAVA中字符串反转
ai_0922的博客
05-24 335
JAVA中字符串反转 分析一下JAVA字符串反转应该怎么解决？ JAVA字符串反转目的就是倒序输出，怎样倒序呢？ 1、通过调用现有倒序方法 2、把字符串拆解，然后倒序输出 import lombok.extern.slf4j.Slf4j; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.boot.test.context.SpringBootTest; import org.spring
Spring Boot中JPA实现Sort排序的三种方式
HD243608836的博客
01-24 8813
引言： 在Spring Boot应用中，基于数据某个字段进行排序是一个非常常用的需求，这里将给出Sort的三种常用用法，基于分页的应用，大家可以各取所需，择机使用。 环境说明 Spring 4.2 Spring Boot 1.5.11 Java 8 前置说明 ECardEntity.java的定义： import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Table;
SpringBoot+VUE关联查询（查询所有、条件查询、分页查询）删除、添加功能，项目简单很详细！！
weixin_44704605的博客
10-25 4800
首先在数据库创建数据 CREATE DATABASE day1022try; USE day1022try; CREATE TABLE `emp` ( `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT '员工ID', `name` VARCHAR(50) DEFAULT NULL COMMENT '员工姓名', `password` VARCHAR(50) DEFAULT NULL COMMENT '密码', `age` INT(11) DEFAU
SpringBoot+Vue入门并实现前后端分离和数据库查询（入门笔记超详细）
热门推荐
weixin_46019681的博客
05-22 1万+
初学SpringBoot，很多地方都不懂，所以完成这个走了不少弯路，连夜写blog记录，生怕天一亮全忘干净了…… 前端：Vue（2 or 3），IDE是VS code 后端：Spring Boot，IDE是IDEA 数据库： MySQL 目前实现功能：前后端代码分离，显示数据库表的数据 步骤 1.【创建vue项目】 终端输入 vue ui 打开图形化界面，创建一个Vue项目，具体步骤如下图： 耐心等待。。。 创建完成后可以编译运行，并确认项目是否...
Vue脚手架 Element Ui Spring Boot 连接数据库通过级联选择器 实现组合条件查询（父子集合表不同，字段不同，label值，value值的正常显示，全是干货，）
qq_60614034的博客
03-06 1339
本篇主要讲解通过级联选择器，实现数据库数据的组合条件查询。先上图，符合你们心目中预期的功能在看下去。重点解决父子集合间，因为字段名不同，label值，value值无法正常显示的问题最后再来讲讲总体操作流程1.勾选级联选择器的楼栋单元数据，将楼栋id，单元id分别存入data中2.点击搜索按钮3.调用 搜索房屋功能，执行组合分页查询操作。4.将返回的房屋集合信息存入data中，显示到表格中。
Vue利用v-for语句+自定义排序函数实现data内数据按照age列自动排序
m0_37743842的博客
04-25 832
Vue基础知识之利用v-for语句+自定义排序函数实现data内数据按照age列自动排序 v-for.html文件 <!DOCTYPE html> <html lang="en"> <head> <title>v-for实例</title> <meta charset="UTF-8"> <m...
springboot+vue实现前后端分离实现查询功能
qq_56403451的博客
11-07 2124
springboot+vue实现前后端分离实现分页查询功能
elementUI+vue+mybatis-plus+springboot实现条件查询
qq_40222207的博客
04-06 2416
elementUI+vue+mybatis-plus+springboot实现条件查询功能需求前端部分后端部分测试部分 功能需求 根据选择的搜索条件不同，实现条件查询 基本效果如下图： 前端部分 参考elementUI官方组件库中的复合型输入框，实现基本的样式。 参考链接：input输入框 先上部分代码： vue部分： <el-input placeholder="请输入内容" v-mod...
spring boot + vue + element ui商城
11-06
Spring Boot是一款用于简化Spring应用程序开发的框架，它采用了约定优于配置的原则，可以快速构建独立的、基于Java的企业级应用程序。它集成了很多常用的技术和组件，支持快速开发、测试和部署。 Vue是一款用于构建用户界面的渐进式框架，通过使用组件化的方式来构建复杂的前端应用程序。它的设计理念是简单灵活，易于学习和使用。Vue使用了虚拟DOM技术，能够高效地处理大规模的数据操作和界面更新。 Element UI是一款基于Vue.js的桌面端组件库，提供了一套丰富的UI组件，可以快速构建美观的用户界面。Element UI的设计风格简洁大方，适用于各种不同的应用场景。它提供了大量的组件和功能，如表单验证、数据表格、弹窗等，满足了商城系统的各种需求。 结合Spring Boot、Vue和Element UI，我们可以构建一个功能完善的商城系统。Spring Boot作为后端框架，负责处理业务逻辑和数据处理，提供了接口供前端调用。Vue作为前端框架，负责展示用户界面和与后端接口进行交互。Element UI作为前端组件库，提供了丰富的UI组件，可以帮助我们构建漂亮的商城界面。 例如，我们可以使用Spring Boot来实现用户注册、登录、商品管理等功能，并提供相应的接口供前端调用。Vue可以负责展示用户界面，如商品列表、购物车、订单管理等，同时通过调用后端接口获取数据。Element UI可以用来构建漂亮的界面，并提供了很多常用的组件，如表单、弹窗、数据表格等，可以让用户有更好的体验。 总之，Spring Boot、Vue和Element UI的结合，可以帮助我们快速构建一个功能强大、用户友好的商城系统，提供完整的用户界面和后端功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值