So implementieren Sie die Springboot-Paging-Funktion

1. Die Rolle der Paging-Funktion

Die Paging-Funktion ist ein unverzichtbarer Bestandteil verschiedener Websites und Systeme (z. B. die Paginierung von Baidu-Suchergebnissen usw.). Wenn eine Seite eine große Datenmenge enthält, wird die Paging-Funktion berücksichtigt . Seine Funktionen sind: 5 unten.

(1) Reduzieren Sie den Verbrauch von Systemressourcen

(2) Verbessern Sie die Abfrageleistung der Datenbank

(3) Verbessern Sie die Zugriffsgeschwindigkeit der Seite

(4) Erfüllen Sie die Surfgewohnheiten des Benutzers

(5) Passen Sie das Layout der Seite an

2. Erstellen Sie eine Testdatenbank. Aufgrund der Notwendigkeit, die Paging-Funktion zu implementieren, sind mehr Daten erforderlich und erstellen Sie eine neue allgemeine Ergebnisklasse „Result“ im Paket. Der Code lautet wie folgt:

DROP TABLE IF EXISTS tb_user;

CREATE TABLE tb_user (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id',
    name varchar(100) NOT NULL DEFAULT '' COMMENT '登录名',
    password varchar(100) NOT NULL DEFAULT '' COMMENT '密码',
    PRIMARY KEY (id) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8;

insert into tb_user (id,name,password)
value (1,'C','123456'),
(2,'C++','123456'),
(3,'Java','123456'),
(4,'Python','123456'),
(5,'R','123456'),
(6,'C#','123456');

insert into tb_user (id,name,password) value (7,'test1','123456');
insert into tb_user (id,name,password) value (8,'test2','123456');
insert into tb_user (id,name,password) value (9,'test3','123456');
insert into tb_user (id,name,password) value (10,'test4','123456');
insert into tb_user (id,name,password) value (11,'test5','123456');
insert into tb_user (id,name,password) value (12,'test6','123456');
insert into tb_user (id,name,password) value (13,'test7','123456');
insert into tb_user (id,name,password) value (14,'test8','123456');
insert into tb_user (id,name,password) value (15,'test9','123456');
insert into tb_user (id,name,password) value (16,'test10','123456');
insert into tb_user (id,name,password) value (17,'test11','123456');
insert into tb_user (id,name,password) value (18,'test12','123456');
insert into tb_user (id,name,password) value (19,'test13','123456');
insert into tb_user (id,name,password) value (20,'test14','123456');
insert into tb_user (id,name,password) value (21,'test15','123456');
insert into tb_user (id,name,password) value (22,'test16','123456');
insert into tb_user (id,name,password) value (23,'test17','123456');
insert into tb_user (id,name,password) value (24,'test18','123456');
insert into tb_user (id,name,password) value (25,'test19','123456');
insert into tb_user (id,name,password) value (26,'test20','123456');
insert into tb_user (id,name,password) value (27,'test21','123456');
insert into tb_user (id,name,password) value (28,'test22','123456');
insert into tb_user (id,name,password) value (29,'test23','123456');
insert into tb_user (id,name,password) value (30,'test24','123456');
insert into tb_user (id,name,password) value (31,'test25','123456');
insert into tb_user (id,name,password) value (32,'test26','123456');
insert into tb_user (id,name,password) value (33,'test27','123456');
insert into tb_user (id,name,password) value (34,'test28','123456');
insert into tb_user (id,name,password) value (35,'test29','123456');
insert into tb_user (id,name,password) value (36,'test30','123456');
insert into tb_user (id,name,password) value (37,'test31','123456');
insert into tb_user (id,name,password) value (38,'test32','123456');
insert into tb_user (id,name,password) value (39,'test33','123456');
insert into tb_user (id,name,password) value (40,'test34','123456');
insert into tb_user (id,name,password) value (41,'test35','123456');
insert into tb_user (id,name,password) value (42,'test36','123456');
insert into tb_user (id,name,password) value (43,'test37','123456');
insert into tb_user (id,name,password) value (44,'test38','123456');
insert into tb_user (id,name,password) value (45,'test39','123456');
insert into tb_user (id,name,password) value (46,'test40','123456');
insert into tb_user (id,name,password) value (47,'test41','123456');
insert into tb_user (id,name,password) value (48,'test42','123456');
insert into tb_user (id,name,password) value (49,'test43','123456');
insert into tb_user (id,name,password) value (50,'test44','123456');
insert into tb_user (id,name,password) value (51,'test45','123456');

Die von der Backend-Schnittstelle zurückgegebenen Daten werden gemäß dem oben genannten Format gekapselt, einschließlich Geschäftscode, Rückgabeinformationen und tatsächlichen Datenergebnissen. Dieses Format wird von den Entwicklern selbst festgelegt und kann entsprechend angepasst werden, wenn es andere bessere Lösungen gibt.

Erstellen Sie eine neue allgemeine Ergebnisklasse PageResult im Util-Paket. Der Code lautet wie folgt:

package ltd.newbee.mall.entity;

public class User {
    private Integer id;
    private String name;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

4. Spezifische Implementierung des Paging-Funktionscodes

4.1 Datenschicht

Fügen Sie zwei neue Methoden hinzu: findUsers() und getTotalUser() in der UserDao-Schnittstelle der Code Wie unten gezeigt:

package ltd.newbee.mall.util;

import java.util.List;

/**
 * 分页工具类
 */
public class PageResult {
    //总记录数
    private int totalCount;
    //每页记录数
    private int pageSize;
    //总页数
    private int totalPage;
    //当前页数
    private int currPage;
    //列表数据
    private List<?> list;

    /**
     *
     * @param totalCount 总记录数
     * @param pageSize 每页记录数
     * @param currPage 当前页数
     * @param list 列表数据
     */
    public PageResult(int totalCount, int pageSize, int currPage, List<?> list) {
        this.totalCount = totalCount;
        this.pageSize = pageSize;
        this.currPage = currPage;
        this.list = list;
        this.totalPage = (int) Math.ceil((double) totalCount / pageSize);
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public int getCurrPage() {
        return currPage;
    }

    public void setCurrPage(int currPage) {
        this.currPage = currPage;
    }

    public List<?> getList() {
        return list;
    }

    public void setList(List<?> list) {
        this.list = list;
    }
}

Fügen Sie die Zuordnungsanweisungen dieser beiden Methoden in der UserMapper-Anzeige hinzu:

/**
     * 返回分页数据列表
     * 
     * @param pageUtil
     * @return
     */
    List<User> findUsers(PageQueryUtil pageUtil);

    /**
     * 返回数据总数
     * 
     * @param pageUtil
     * @return
     */
    int getTotalUser(PageQueryUtil pageUtil);

Fragen Sie zuerst die Datensammlung der aktuellen Seite basierend auf der aktuellen Seite und der Anzahl der Elemente ab pro Seite, rufen Sie dann die Anweisung select count (*) auf, um die Gesamtzahl der Daten zur Berechnung der Paging-Daten abzufragen, und kapseln Sie schließlich die erhaltenen Daten in ein PageResult-Objekt und kehren Sie zur Steuerungsschicht zurück.

4.3 Kontrollschicht

Erstellen Sie eine neue PageTestController-Klasse im Controller-Paket, die zum Verarbeiten von Paging-Anfragen und zum Zurückgeben von Abfrageergebnissen verwendet wird. Der Code lautet wie folgt:

<!--分页-->
    <!--查询用户列表-->
    <select id="findUsers" parameterType="Map" resultMap="UserResult">
        select id,name,password from tb_user
        order by id desc
        <if test="start!=null and limit!=null">
            limit #{start}.#{limit}
        </if>
    </select>
    <!--查询用户总数-->
    <select id="getTotalUser" parameterType="Map" resultType="int">
        select count(*) from tb_user
    </select>

Interaktionsprozess der Paging-Funktion: Das Front-End legt fest Erforderliche Seitenzahl und Anzahl der Elemente als Parameter An das Backend übertragen, berechnet das Backend nach Erhalt der Paging-Anfrage die Paging-Parameter, fragt mit dem Limit-Schlüsselwort von MySQL die entsprechenden Datensätze ab und gibt die Abfrageergebnisse nach der Kapselung an das Front-End zurück. Die Annotation @RestController wird in der Klasse TestUserControler verwendet, was der kombinierten Annotation @ResponseBody+@Controller entspricht.

5.jqGrid-Paging-Plug-in

jqGrid ist ein jQuery-Plug-in zur Anzeige von Rasterdaten. Durch die Verwendung von jqGrid können Entwickler problemlos die asynchrone Ajax-Kommunikation zwischen der Front-End-Seite und den Hintergrunddaten sowie Paging-Funktionen implementieren. Gleichzeitig ist jqGrid ein Open-Source-Paging-Plug-in, und der Quellcode befindet sich in der Phase iterativer Aktualisierungen. Download-Adresse: jqGrid Paging in den Front-End-Seitencode Die für das Plug-in erforderliche Quelldatei, der Code lautet wie folgt:

import ltd.newbee.mall.dao.UserDao;
import ltd.newbee.mall.entity.User;
import ltd.newbee.mall.util.PageResult;
import ltd.newbee.mall.util.PageQueryUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {

    @Autowired
    private UserDao userDao;

    public PageResult getUserPage(PageQueryUtil pageUtil){
        //当前页面中的数据列表
        List<User> users = userDao.findUsers(pageUtil);
        //数据总条数，用于计算分页数据
        int total = userDao.getTotalUser(pageUtil);
        //分页信息封装
        PageResult pageResult = new PageResult(users,total,pageUtil.getLimit(),pageUtil.getPage());
        return pageResult;
    }
}

Fügen Sie zweitens den Code für die jqGrid-Initialisierung in dem Bereich hinzu, in dem Paging-Daten auf der Seite angezeigt werden müssen:

@RestController
@RequestMapping("users")
public class PageTestController {

    @Autowired
    private UserService userService;

    //分页功能测试
    @RequestMapping(value = "/list",method = RequestMethod.GET)
    public Result list(@RequestParam Map<String,Object> params){
        Result result = new Result();
        if (StringUtils.isEmpty(params.get("page"))||StringUtils.isEmpty(params.get("limit"))){
            //返回错误码
            result.setResultCode(500);
            //错误信息
            result.setMessage("参数异常！");
            return result;
        }
        //封装查询参数
        PageQueryUtil queryParamList = new PageQueryUtil(params);
        //查询并封装分页结果集
        PageResult userPage = userService.getUserPage(queryParamList);
        //返回成功码
        result.setResultCode(200);
        result.setMessage("查询成功");
        //返回分页数据
        result.setData(userPage);
        return result;
    }
}

Rufen Sie abschließend die jqGrid()-Methode des jqGrid-Paging-Plug-Ins auf, um den Paging-Anzeigebereich zu rendern. Der Code lautet wie folgt:

Die Parameter und Bedeutungen in der jqGrid()-Methode lauten wie folgt in der Abbildung dargestellt.

jqGrid-Frontend-Seitentest:

Erstellen Sie eine neue jqgrid-page-test.html-Datei im Verzeichnis resources/static. Der Code lautet wie folgt:

<link href="plugins/jqgrid-5.8.2/ui.jqgrid-bootstrap4.css" rel="external nofollow"  rel="stylesheet"/>
<!--jqGrid依赖jQuery,因此需要先引入jquery.min.js文件，下方地址为字节跳动提供的cdn地址-->
<script src="http://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<!--grid.locale-cn.js为国际化所需的文件，-cn表示中文-->
<script src="plugins/jqgrid-5.8.2/grid.locale-cn.js"></script>
<script src="plugins/jqgrid-5.8.2/jquery.jqGrid.min.js"></script>

jqGrid-Initialisierung

Erstellen Sie eine neue jqgrid-page-test.html-Datei. Seite in der Datei resources/static-Verzeichnis -test.js, der Code lautet wie folgt:

<!--jqGrid必要DOM，用于创建表格展示列表数据-->
<table id="jqGrid" class="table table-bordered"></table>

<!--jqGrid必要DOM，分页信息区域-->
<div id="jqGridPager"></div>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Springboot-Paging-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!