Catalog

One 、Forum Paging function

Two 、Vue The paging component ——el-pagination

3、 ... and 、mybatis Pagination ——selectPage

---

Preface ： This blog mainly explains the paging function in the forum part

One 、Forum Paging function

In the forum function , Users will post more and more comments , As a result, more and more front-end interfaces will be displayed , in other words card More and more .

For ease of reading , Improve the speed of database query and page rendering , I used paging to render .

The interface is as follows ：

At present, four are displayed on each page , Now total 10 strip , So there are three pages . 

Two 、Vue The paging component ——el-pagination

The paging component is <el-pagination/>, Usage is as follows ：

    <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"
    />

The initial bound data is ：

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

  The rendering method is ：

    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
      })
    },

The rendering method will <el-card> What is needed in forumlist Data binding

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

 

3、 ... and 、mybatis Pagination ——selectPage

In the writing of back-end code , First, write the entity class 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);
    }
}

  among , The most important code is ：

    @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);
    }

This is a mybatis Paging function of , Both query function

Parameters respectively ask the number of query pages 、 Page size 、 And the query content .