在开发过程中，分页功能是常见的需求之一。它可以帮助用户更高效地浏览大量数据。Vue框架凭借其易用性和灵活性，提供了多种方法来实现页面分页效果。本文将详细介绍如何在Vue中使用Element UI组件库实现分页展示，并配合后端Spring Boot + Mybatis Plus实现分页接口，从而轻松告别繁琐的操作。

一、前端实现分页展示

1.1 引入Element UI组件库

首先，需要在项目中引入Element UI组件库。以下是使用npm安装Element UI的命令：

npm i element-ui -S

1.2 使用Pagination组件

Element UI提供了Pagination分页组件，可以方便地实现分页效果。下面是一个简单的示例：

<template>
  <div>
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in currentPageData" :key="item.id">
        {{ item.content }}
      </li>
    </ul>
    <!-- 分页控件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataList.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      dataList: [], // 假设这是从后端获取的数据列表
    };
  },
  computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.dataList.slice(start, end);
    },
  },
  methods: {
    handleSizeChange(newSize) {
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
  },
};
</script>

1.3 计算属性与性能优化

在上面的代码中，我们使用了计算属性currentPageData来获取当前页的数据。这样做的好处是，当currentPage或pageSize发生变化时，计算属性会自动重新计算，从而提高性能。

二、后端实现分页接口

2.1 Spring Boot + Mybatis Plus

在后端，我们可以使用Spring Boot框架和Mybatis Plus来实现分页接口。以下是简单的实现步骤：

  1. 创建Spring Boot项目，并引入相关依赖。
<dependencies>
  <!-- Spring Boot 核心依赖 -->
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter</artifactId>
  </dependency>
  <!-- Mybatis Plus 依赖 -->
  <dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3.4</version>
  </dependency>
  <!-- MySQL 依赖 -->
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.25</version>
  </dependency>
</dependencies>
  1. 创建实体类和数据访问接口。
public class DataEntity {
  private Long id;
  private String content;
  // ... 省略其他属性和构造方法
}

@Mapper
public interface DataMapper extends BaseMapper<DataEntity> {
  // ... 省略其他方法
}
  1. 创建分页服务。
@Service
public class PaginationService {
  @Autowired
  private DataMapper dataMapper;

  public PageInfo<DataEntity> findPage(Integer page, Integer size) {
    Page<DataEntity> pageObj = new Page<>(page, size);
    return dataMapper.selectPage(pageObj, Wrappers.emptyWrapper()).getPages();
  }
}
  1. 创建控制器，并实现分页接口。
@RestController
@RequestMapping("/data")
public class DataController {
  @Autowired
  private PaginationService paginationService;

  @GetMapping("/list")
  public ResponseEntity<PageInfo<DataEntity>> list(@RequestParam Integer page,
                                                  @RequestParam Integer size) {
    PageInfo<DataEntity> pageInfo = paginationService.findPage(page, size);
    return ResponseEntity.ok(pageInfo);
  }
}

通过以上步骤，我们就可以在后端实现分页接口了。

三、总结

本文详细介绍了如何在Vue中使用Element UI组件库实现分页展示，并配合后端Spring Boot + Mybatis Plus实现分页接口。通过这种方式，可以轻松实现页面分页效果