java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > SpringBoot  Vue  ElementUI  el-table 分页

SpringBoot + Vue + ElementUI 实现 el-table 分页功能(详细步骤)

作者:繁依Fanyi

本文详细介绍了使用SpringBoot和Vue.js结合ElementUI实现分页功能的数据表格,从后端分页逻辑到前端展示和状态管理,全面解析如何高效处理大量数据,提升用户体验与系统性能,感兴趣的朋友跟随小编一起看看吧

引言

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

分页概述

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

分页的关键点

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

项目结构

首先,我们需要创建一个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,用于表示表格中的数据。

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
}

代码讲解:

创建仓库接口

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

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> {
}

代码讲解:

创建服务类

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

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 {
    @Autowired
    private UserRepository userRepository;
    public Page<User> getUsers(int page, int size) {
        return userRepository.findAll(PageRequest.of(page, size));
    }
}

代码讲解:

创建控制器

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

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 {
    @Autowired
    private UserService userService;
    @GetMapping("/users")
    public Page<User> getUsers(@RequestParam int page, @RequestParam int size) {
        return userService.getUsers(page, size);
    }
}

代码讲解:

数据初始化

为了方便测试,可以在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>

代码讲解:

修改 main.js

main.js中引入ElementUI。

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');

代码讲解:

配置代理

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

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中实现分页功能。从后端的分页逻辑实现,到前端的分页展示和状态管理,都进行了详细的介绍。在实际项目中,分页功能可以根据需求进行扩展和优化,例如添加搜索和排序功能,进一步提升用户体验。

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

进一步优化

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

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

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

到此这篇关于SpringBoot + Vue + ElementUI 实现 el-table 分页功能详解的文章就介绍到这了,更多相关SpringBoot Vue ElementUI el-table 分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文