目录

一、Forum 分页功能

二、Vue分页组件——el-pagination

三、mybatis分页——selectPage

---

前言：本篇博客主要讲解论坛部分中的分页功能

一、Forum 分页功能

在论坛功能中，用户发表的说说数量会越来越多，导致在前端界面会展示越来越多，也就是说card越来越多。

为了方便阅读，提高数据库查询以及页面渲染的速度，我采用了分页方式进行渲染。

界面如下所示：

目前每页展示四条，现在共10条，所以有三页。 

二、Vue分页组件——el-pagination

分页组件为<el-pagination/>，用法如下：

    <el-pagination
        v-model:currentPage="currentPage"
        :page-size="pageSize"
        :disabled="disabled"
        :background="background"
        layout="total, prev, pager, next"
        :total="totalpage"
        @size-change="handleSizeChange"
        @current-change="load"
        style="padding-top: 20px"
    />

初始绑定的数据为：

    return {
      formatTooltip,
      goto_write,
      search:'',
      currentPage:1,
      pageSize:4,
      totalpage:0,
      forumlist:[],
    };

 渲染方法为：

    load(){
      request.get("/forum/page",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search
        }
      }).then(res =>{
        this.forumlist=res.data.records
        this.totalpage=res.data.total
      })
    },

渲染方法将<el-card>中所需的forumlist数据进行绑定

    <el-space direction="vertical" style="text-align: left">
      <el-card v-for="(forum,i) in forumlist" :key="i" class="box-card" style="width: 1200px;background-color: #99a9bf" shadow="hover">
        <template #header>
          <div class="card-header">
            <span style="font-weight:bold">{
   { forum.title }}</span>
          </div>
        </template>
        <div class="text item">
          {
   { forum.content }}
        </div>
        <div class="text item" style="margin-top: 20px">
          {
   { forum.username }}
        </div>
        <div class="text item" style="text-align: right">
          {
   { forum.time }}
        </div>
      </el-card>
    </el-space>

 

三、mybatis分页——selectPage

在后端代码的编写中，首先编写了实体类Forum.java

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("forum")
public class Forum {
    @TableId(type = IdType.AUTO)
    private Integer forumid;
    private String title;
    private String content;
    private Integer username;
    private String time;
    private Integer state;
}

ForumController.java 

import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.sducsrp.csrp.common.Result;
import com.sducsrp.csrp.entity.Forum;
import com.sducsrp.csrp.mapper.ForumMapper;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

@RestController
@RequestMapping("/forum")
public class ForumController {

    @Resource
    ForumMapper forumMapper;

    @GetMapping("/page")
    public Result findpage(@RequestParam(defaultValue = "1") Integer pageNum,
                           @RequestParam(defaultValue = "5")  Integer pageSize,
                           @RequestParam(defaultValue = "")  String search){
        Page<Forum> forumPage=forumMapper.selectPage(new Page<>(pageNum,pageSize), Wrappers.<Forum>lambdaQuery().like(Forum::getForumid,search));
        return Result.success(forumPage);
    }
}

 其中，最重要的代码为：

    @GetMapping("/page")
    public Result findpage(@RequestParam(defaultValue = "1") Integer pageNum,
                           @RequestParam(defaultValue = "5")  Integer pageSize,
                           @RequestParam(defaultValue = "")  String search){
        Page<Forum> forumPage=forumMapper.selectPage(new Page<>(pageNum,pageSize), Wrappers.<Forum>lambdaQuery().like(Forum::getForumid,search));
        return Result.success(forumPage);
    }

这是mybatis的分页功能函数，兼具查询功能

参数分别问查询页数、页面大小、以及查询内容。