基于SpringBoot和Vue3的博客平台文章列表与分页功能怎么实现

今天小编给大家分享一下基于SpringBoot和Vue3的博客平台文章列表与分页功能怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

1. 后端Spring Boot实现

我们将使用Spring Boot作为后端框架，并使用MySQL作为数据库。

1.1 修改ArticleMapper接口

为了支持分页功能，我们需要修改ArticleMapper.java文件，添加一个新方法findPage，同时更新findAll方法为findPage方法。

@Mapperpublic interface ArticleMapper {    List<Article> findPage(@Param("offset") int offset, @Param("pageSize") int pageSize);    Article findById(Integer id);    void insert(Article article);    void update(Article article);    void delete(Integer id);    int count();}

1.2 修改ArticleService接口及实现

在ArticleService.java文件中，将findAll方法替换为findPage方法，同时添加一个新方法count。

public interface ArticleService {    List<Article> findPage(int offset, int pageSize);    Article findById(Integer id);    void create(Article article);    void update(Article article);    void delete(Integer id);    int count();}

接着，在ArticleServiceImpl.java文件中，修改对应的实现。

@Servicepublic class ArticleServiceImpl implements ArticleService {    @Autowired    private ArticleMapper articleMapper;     @Override    public List<Article> findPage(int offset, int pageSize) {        return articleMapper.findPage(offset, pageSize);    }     // ...其他方法不变}

1.3 修改ArticleController类

在ArticleController.java文件中，修改list方法，接收page和pageSize参数，并调用findPage和count方法获取分页数据。

@RestController@RequestMapping("/api/article")public class ArticleController {    @Autowired    private ArticleService articleService;     @GetMapping    public Result list(@RequestParam(required = false, defaultValue = "1") int page,                       @RequestParam(required = false, defaultValue = "10") int pageSize) {        int offset = (page - 1) * pageSize;        List<Article> articles = articleService.findPage(offset, pageSize);        int totalCount = articleService.count();        return Result.success("获取文章列表成功", new PageData<>(articles, totalCount, pageSize, page));    }     // ...其他方法不变}

2. 前端Vue3实现

2.1 修改文章列表页面组件

在ArticleList.vue组件中，修改fetchArticles方法，接收page和pageSize参数，并将数据显示在表格中。同时，添加<el-pagination>组件实现分页。

<template>  <div>    <el-table :data="articles">      <el-table-column prop="id" label="ID" width="80"></el-table-column>      <el-table-column prop="title" label="标题"></el-table-column>      <el-table-column label="操作" width="180">        <template v-slot="{ row }">          <el-button @click="editArticle(row.id)">编辑</el-button>          <el-button type="danger" @click="deleteArticle(row.id)">删除</el-button>        </template>      </el-table-column>    </el-table>    <el-pagination      @size-change="handleSizeChange"      @current-change="handleCurrentChange"      :current-page="page"      :page-sizes="[10, 20, 30, 40]"      :page-size="pageSize"      layout="total, sizes, prev, pager, next, jumper"      :total="total">    </el-pagination>  </div></template> <script>import { ref } from "vue";import axios from "axios"; export default {  setup() {    const articles = ref([]);    const total = ref(0);    const page = ref(1);    const pageSize = ref(10);     const fetchArticles = async (page, pageSize) => {      const response = await axios.get("/api/article", {        params: {          page: page,          pageSize: pageSize        }      });      articles.value = response.data.data.list;      total.value = response.data.data.total;    };     const handleSizeChange = (val) => {      pageSize.value = val;      fetchArticles(page.value, pageSize.value);    };     const handleCurrentChange = (val) => {      page.value = val;      fetchArticles(page.value, pageSize.value);    };     const editArticle = (id) => {      // 跳转到编辑页面    };     const deleteArticle = async (id) => {      await axios.delete(`/api/article/${id}`);      fetchArticles(page.value, pageSize.value);    };     fetchArticles(page.value, pageSize.value);     return { articles, total, page, pageSize, handleSizeChange, handleCurrentChange, editArticle, deleteArticle };  },};</script>

在这个修改后的ArticleList.vue组件中，我们添加了<el-pagination>组件以实现分页功能。当用户更改分页大小或当前页时，分别触发handleSizeChange和handleCurrentChange方法。这两个方法都会调用fetchArticles方法，根据当前页和分页大小重新获取文章列表数据。

以上就是“基于SpringBoot和Vue3的博客平台文章列表与分页功能怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。