SpringBoot + Vue + ElementUI 实现 el-table 分页功能详解

news/2024/9/18 21:01:10/ 标签: python, 算法, java, 开发语言, 人工智能

引言

在现代Web应用程序开发中，前后端分离架构越来越受欢迎。这种架构使得前端和后端开发可以并行进行，提高了开发效率。本文将详细讲解如何使用SpringBoot作为后端，Vue.js和ElementUI作为前端，实现一个带分页功能的数据表格（el-table）。分页功能在处理大量数据时必不可少，可以有效提升用户体验和系统性能。

分页概述

分页（Pagination）是Web应用程序中常见的需求，特别是在需要显示大量数据时。分页的目的是将数据分成多个页面，每次只显示一部分数据，从而避免加载和显示全部数据带来的性能问题。分页通常涉及以下几个概念：

  • 当前页（Current Page）：用户当前正在查看的页面。
  • 每页条数（Page Size）：每页显示的数据条数。
  • 总条数（Total Items）：数据的总条数。
  • 总页数（Total Pages）：总数据条数除以每页条数得到的总页数。

分页的关键点

在实现分页功能时，有几个关键点需要注意：

  1. 后端实现分页逻辑：后端需要提供分页接口，根据请求参数返回对应页的数据和总条数。
  2. 前端展示分页数据：前端需要展示分页数据，并提供分页控件让用户切换页面。
  3. 分页状态管理：前端需要管理分页状态，如当前页、每页条数等，并在状态变化时更新数据。

项目结构

首先，我们需要创建一个SpringBoot项目和一个Vue项目。假设你已经熟悉这两个框架的基本用法，下面是项目的基本结构：

SpringBoot项目结构
src
├── main
│   ├── java
│   │   └── com.example.demo
│   │       ├── controller
│   │       ├── entity
│   │       ├── repository
│   │       ├── service
│   │       └── DemoApplication.java
│   └── resources
│       ├── application.properties
│       └── data.sql
Vue项目结构
src
├── assets
├── components
├── views
│   └── TableView.vue
├── App.vue
└── main.js

后端实现

创建实体类

首先，在SpringBoot项目中创建一个实体类User，用于表示表格中的数据。

java">package com.example.demo.entity;import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;@Entity
public class User {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String name;private String email;// Getters and Setters
}

代码讲解：

  • @Entity：表示该类是一个JPA实体。
  • @Id：指定该字段为实体的主键。
  • @GeneratedValue(strategy = GenerationType.IDENTITY)：主键自增策略。
  • Long id：主键ID。
  • String name和String email：用户的姓名和邮箱。
创建仓库接口

接下来，创建一个JPA仓库接口UserRepository，用于与数据库交互。

java">package com.example.demo.repository;import com.example.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

代码讲解：

  • @Repository：表示该接口是一个Spring Data JPA仓库。
  • JpaRepository<User, Long>：继承自JpaRepository，提供了常用的数据库操作方法，如增删改查。
创建服务类

在服务类中编写分页查询的逻辑。这里我们使用Spring Data JPA提供的分页功能。

java">package com.example.demo.service;import com.example.demo.entity.User;
import com.example.demo.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;@Service
public class UserService {@Autowiredprivate UserRepository userRepository;public Page<User> getUsers(int page, int size) {return userRepository.findAll(PageRequest.of(page, size));}
}

代码讲解：

  • @Service：表示该类是一个服务类。
  • UserRepository userRepository：注入UserRepository实例。
  • getUsers(int page, int size)：分页查询用户数据，返回一个Page对象。
创建控制器

最后，创建一个控制器UserController，提供分页查询的API。

java">package com.example.demo.controller;import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;@RestController
public class UserController {@Autowiredprivate UserService userService;@GetMapping("/users")public Page<User> getUsers(@RequestParam int page, @RequestParam int size) {return userService.getUsers(page, size);}
}

代码讲解：

  • @RestController：表示该类是一个RESTful控制器。
  • UserService userService：注入UserService实例。
  • @GetMapping("/users")：映射GET请求到/users路径。
  • @RequestParam int page, @RequestParam int size：从请求参数中获取分页信息。
  • getUsers(int page, int size)：调用UserService的getUsers方法获取分页数据。
数据初始化

为了方便测试，可以在data.sql文件中初始化一些数据。

INSERT INTO user (name, email) VALUES ('John Doe', 'john@example.com');
INSERT INTO user (name, email) VALUES ('Jane Doe', 'jane@example.com');
-- 添加更多数据

前端实现

安装依赖

首先，确保在Vue项目中安装了axios以便与后端进行通信。

npm install axios
创建 TableView 组件

在src/views/TableView.vue文件中创建表格组件。

<template><div><el-table :data="users" style="width: 100%"><el-table-column prop="id" label="ID"></el-table-column><el-table-column prop="name" label="Name"></el-table-column><el-table-column prop="email" label="Email"></el-table-column></el-table><el-pagination@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize"layout="total, prev, pager, next":total="totalUsers"></el-pagination></div>
</template><script>
import axios from 'axios';export default {data() {return {users: [],currentPage: 1,pageSize: 10,totalUsers: 0};},created() {this.fetchUsers();},methods: {fetchUsers() {axios.get(`/users`, {params: {page: this.currentPage - 1,size: this.pageSize}}).then(response => {this.users = response.data.content;this.totalUsers = response.data.totalElements;});},handleCurrentChange(page) {this.currentPage = page;this.fetchUsers();}}
};
</script><style scoped>
/* 添加样式以适应页面布局 */
</style>

代码讲解：

  • el-table：ElementUI的表格组件，用于展示数据。
  • el-table-column：表格列，定义每一列显示的数据字段。
  • el-pagination：ElementUI的分页组件，用于分页控制。
  • fetchUsers()：使用axios请求后端API获取分页数据，并更新users和totalUsers。
  • handleCurrentChange(page)：当分页控件的当前页改变时，更新currentPage并重新获取数据。
修改 main.js

在main.js中引入ElementUI。

javascript">import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false;
Vue.use(ElementUI);new Vue({router,render: h => h(App)
}).$mount('#app');

代码讲解：

  • import ElementUI from 'element-ui'：引入ElementUI库。
  • Vue.use(ElementUI)：注册ElementUI插件，使其在整个项目中可用。
配置代理

在开发环境中，我们需要配置代理以解决跨域问题。修改vue.config.js文件：

javascript">module.exports = {devServer: {proxy: {'/users': {target: 'http://localhost:8080',changeOrigin: true}}}
};

代码讲解：

  • proxy：配置代理，将对/users的请求转发到http://localhost:8080。

运行项目

完成以上步骤后，可以分别启动SpringBoot和Vue项目。在SpringBoot项目根目录下运行：

./mvnw spring-boot:run

在Vue项目根目录下运行：

npm run serve

访问http://localhost:8080，可以看到分页功能已经实现。

总结

通过本文的讲解，我们了解了如何在SpringBoot和Vue.js中实现分页功能。从后端的分页逻辑实现，到前端的分页展示和状态管理，都进行了详细的介绍。在实际项目中，分页功能可以根据需求进行扩展和优化，例如添加搜索和排序功能，进一步提升用户体验。

希望本文能帮助你更好地理解和实现分页功能。如果有任何问题或建议，欢迎讨论。

进一步优化

在实际项目中，你可能需要进一步优化分页功能，例如：

  1. 搜索功能：在分页的基础上添加搜索条件，使用户可以根据关键字进行搜索。
  2. 排序功能：允许用户点击表头进行排序。
  3. 缓存分页数据：在切换分页时缓存已经加载的数据，减少不必要的网络请求。
  4. 错误处理：处理网络请求错误，如超时或服务器错误，向用户显示友好的错误信息。

通过这些优化，可以使分页功能更加完善，提升用户体验。

希望本文能够帮助你在项目中实现高效的分页功能。如果有任何问题或建议，欢迎在评论区讨论。


http://www.ppmy.cn/news/1525509.html

相关文章

算法练习题16——leetcode73矩阵置零

算法练习题16——leetcode73矩阵置零

题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。 解题思路 我们需要找出矩阵中哪些位置有 0&#xff0c;然后将这些位置所在的行和列上的所有元素都设为 0。 可以分为以下几个步骤&#xff1a; 扫描矩阵&…
阅读更多...
基于less和scss 循环生成css

基于less和scss 循环生成css

效果 一、less代码 复制代码 item-count: 12; // 生成多少个 .item 类.item-loop(n) when (n > 0) {.icon{n} {background: url(../../assets/images/menu/icon{n}.png) no-repeat;background-size: 100% 100%;}.item-loop(n - 1);}.item-loop(item-count);二、scss代码 f…
阅读更多...
Autosar(Davinci) --- 创建一个S/R类型的port（下）

Autosar(Davinci) --- 创建一个S/R类型的port（下）

前言： 前面章节我们讲解了S/R类型的Port如何创建，这一章节，我们着重讲一下生成的代码，以及我们如何添加代码让这些门与灯之间的关系产生连接。 一、CtSaDoor.c 在【Rte.c】的【IO_TASK】中我们可以看到，反复的判断Rte_Ev_Cyclic_IO_Task_0_200ms这个条件是否成立，当200…
阅读更多...
系统架构设计师【真题论文】: 论企业集成平台的技术与应用（包括解题思路和经典范文）

系统架构设计师【真题论文】: 论企业集成平台的技术与应用（包括解题思路和经典范文）

更多内容请见： 备考系统架构设计师-核心总结索引 文章目录 真题题目（2015年试题4）解题思路精品范文赏析摘要正文总结真题题目（2015年试题4） 题目：论企业集成平台的技术与应用 企业集成平台是一个支持复杂信息环境下信息系统开发、集成和协同运行的软件支撑环境。它基于各…
阅读更多...
IOS Siri和快捷指令打开app

IOS Siri和快捷指令打开app

使用场景 需要Siri打开应用或者在自定义快捷指令打开应用&#xff0c;并携带内容进入应用。 1.创建Intents文件 1.1 依次点开File->New->File 1.2 搜索intent关键字找到 SiriKit Intent Definition File文件 1.3 找到刚才创建的Intent文件&#xff0c;点击然后New Inte…
阅读更多...
服务器与个人计算机之间的区别

服务器与个人计算机之间的区别

服务器和个人计算机作为人们日常生活中经常会用到的计算机系统&#xff0c;在功能与用途方面还是有着明显的区别的&#xff0c;今天小编就主要来为大家介绍一下服务器与个人计算机之间的区别有哪些&#xff1f; 个人计算机相对于服务器来说&#xff0c;更加注重与用户的体验感和…
阅读更多...
C++11第四弹：包装器

C++11第四弹：包装器

&#x1f308;个人主页&#xff1a; 南桥几晴秋 &#x1f308;C专栏&#xff1a; 南桥谈C &#x1f308;C语言专栏&#xff1a; C语言学习系列 &#x1f308;Linux学习专栏&#xff1a; 南桥谈Linux &#x1f308;数据结构学习专栏&#xff1a; 数据结构杂谈 &#x1f308;数据…
阅读更多...
企业数字化转型建设方案（数据中台、业务中台、AI中台）（可编辑的188页WORD）

企业数字化转型建设方案（数据中台、业务中台、AI中台）（可编辑的188页WORD）

引言&#xff1a;企业数字化转型是一个复杂而长期的过程&#xff0c;其核心在于通过数据中台、业务中台和AI中台的建设&#xff0c;推动企业实现全面的数字化升级。 方案介绍&#xff1a;企业数字化转型建设方案中的数据中台是企业数字化转型的核心基础设施&#xff0c;负责数…
阅读更多...
MATLAB基础语法知识

MATLAB基础语法知识

环境的配置等等就不写了&#xff0c;网上还是有很多资源可以找&#xff0c;而且正版的要付费&#xff0c;我也是看的网上的搞定的。 一&#xff0c;初识MATLAB 1.1 MATLAB的优势 不需要过多了解各种数值计算方法的具体细节和计算公式&#xff0c;也不需要繁琐的底层编程。可…
阅读更多...
安卓链接正常显示，ios#符被转义%23导致链接访问404

安卓链接正常显示，ios#符被转义%23导致链接访问404

原因分析&#xff1a; url中含有特殊字符 中文未编码 都有可能导致URL转换失败&#xff0c;所以需要对url编码处理 如下&#xff1a; guard let allowUrl webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时&a…
阅读更多...
华为23年笔试题

华为23年笔试题

消息传输 题目描述 在给定的 m x n (1 < m, n < 1000) 网格地图 grid 中&#xff0c;分布着一些信号塔&#xff0c;用于区域间通信。 每个单元格可以有以下三种状态&#xff1a; 值 0 代表空地&#xff0c;无法传递信号&#xff1b; 值 1 代表信号塔 A&#xff0c;…
阅读更多...
Iceberg与SparkSQL查询操作整合

Iceberg与SparkSQL查询操作整合

前言 spark操作iceberg之前先要配置spark catalogs，详情参考Iceberg与Spark整合环境配置。 Iceberg使用Apache Spark的DataSourceV2 API来实现数据源和catalog。 使用SQL查询 查询的时候表要按照：catalog.数据库.表名的格式 SELECT * FROM prod.db.table; -- catalog: p…
阅读更多...
C++：线程库

C++：线程库

C&#xff1a;线程库 threadthreadthis_threadchrono 引用拷贝问题 mutexmutextimed_mutexrecursive_mutexlock_guardunique_lock atomicatomicCAS condition_variablecondition_variable thread 操作线程需要头文件<thread>&#xff0c;头文件包含线程相关操作&#xf…
阅读更多...
论文解读：利用大模型进行基于上下文的OCR校正

论文解读：利用大模型进行基于上下文的OCR校正

论文地址&#xff1a;https://arxiv.org/pdf/2408.17428 背景概述 研究问题&#xff1a;这篇文章要解决的问题是如何利用预训练的语言模型&#xff08;LMs&#xff09;来改进光学字符识别&#xff08;OCR&#xff09;的质量&#xff0c;特别是针对报纸和期刊等复杂布局的文档。…
阅读更多...
PPT数据可视化：Python-pptx让图表制作变得轻而易举

PPT数据可视化：Python-pptx让图表制作变得轻而易举

哈喽，大家好，我是木头左！ 安装和配置python-pptx 确保你的Python环境中已经安装了python-pptx库。如果没有，可以通过pip轻松安装： pip install python-pptx安装完成后，你就已经拥有了在PPT中创建图表所需的全部工具。 创建一个简单的柱状图 让从一个基础的例子开始：…
阅读更多...
存储课程学习笔记6_io接口练习（readv,writev, 借助本地socket实现进程间（sendmsg,recvmsg）通过共享内存数据交互）

存储课程学习笔记6_io接口练习（readv,writev, 借助本地socket实现进程间（sendmsg,recvmsg）通过共享内存数据交互）

已经对io_uring进行简单的练习&#xff0c;有必要对readv,writev,sendmsg,recvmsg进行练习。 这类接口是可以一次性操作不连续的内存进行操作&#xff0c;减少了系统调用次数&#xff0c;也提升了整个io读写性能。 核心主要关注函数对应的参数&#xff0c;主要是结构体struct…
阅读更多...
Jetpack Compose Side Effects in Details 副作用的详细信息

Jetpack Compose Side Effects in Details 副作用的详细信息

What is Side Effect’s? 副作用是什么&#xff1f; Side Effects is a change in the state of the application that occurs outside the scope of the composable function and is not related to the UI. In non-UI related state changes, our screen may recompose mor…
阅读更多...
linux安装redis、使用redis、用springboot连接redis

linux安装redis、使用redis、用springboot连接redis

安装redis 解压redis的tar包 tar -vsxf 包名 解压完之后进入解压过的tar包里 编译 make 安装和安装的位置 make PREFIX/opt/redis/redisserver install 成功后进入安装的位置 cd /opt/redis/redisserver/ 进入bin cd bin 找到redis-server&#xff0c;运行 ./redis-…
阅读更多...
保研 比赛 利器： 用AI比赛助手降维打击数学建模

保研 比赛 利器： 用AI比赛助手降维打击数学建模

数学建模作为一个热门但又具有挑战性的赛道&#xff0c;在保研、学分加分、简历增色等方面具有独特优势。近年来&#xff0c;随着AI技术的发展&#xff0c;特别是像GPT-4模型的应用&#xff0c;数学建模的比赛变得不再那么“艰深”。通过利用AI比赛助手&#xff0c;不仅可以大大…
阅读更多...
iPhone手机备忘录转移到Windows电脑上的方法

iPhone手机备忘录转移到Windows电脑上的方法

备忘录作为我们日常生活中常用的软件&#xff0c;帮助我们记录下重要事项、待办任务、灵感创意等&#xff0c;已成为许多人不可或缺的工具。然而&#xff0c;当我们需要在不同设备间转移备忘录内容时&#xff0c;常常会遇到一些困难。特别是从iPhone手机转移到Windows电脑上&am…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站