目录
前言:本篇博客主要讲解论坛部分中的分页功能
一、writeup 分页功能
在writeup功能中,用户发表的writeup数量会越来越多,导致在前端界面会展示越来越多,也就是说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的分页功能函数,兼具查询功能
参数分别问查询页数、页面大小、以及查询内容。