SpringBoot2.7结合Thymeleaf使用PageHelper实现分页

Veyit

已于 2022-09-06 17:04:43 修改

阅读量1.1k

点赞数 5

分类专栏： Java 文章标签： spring boot java

于 2022-09-06 17:01:32 首次发布

本文链接：https://blog.csdn.net/qq_53179277/article/details/126728397

版权

Java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

导入依赖

				<!-- PageHelper分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.1</version>
        </dependency>
                <!-- 添加thymeleaf依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

配置application.yml

# PageHelper相关配置
pagehelper:
  helper-dialect: mysql
  
# Thymeleaf相关配置
spring:
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8

创建实体类

PageDTO.java

import lombok.Data;

@Data
public class PageDTO {
    private Integer pageNum=1;
    private Integer pageSize=3;
}

Info.java

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class InfoPO {

    private Integer bookId;
    private Integer userId;
    private String bookName;
    private String img;
    private String author;
}

实现controller

ShowInfoController.java

    @GetMapping("/index")
    public String index(Model model,PageDTO pageDTO){
        PageInfo<InfoPO> poList = infoService.findInfos(pageDTO).getData();
        model.addAttribute("page", poList);
        return "index";
    }

编写Service类

InfoService.java

import com.github.pagehelper.PageInfo;
import com.veyit.iot.entity.Result;
import com.veyit.iot.entity.dto.PageDTO;
import com.veyit.iot.entity.po.InfoPO;

import java.util.List;

public interface InfoService {
    Result<PageInfo<InfoPO>> findInfos(PageDTO pageDTO);
}

InfoServiceImpl.java

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.veyit.iot.dao.InfoMapper;
import com.veyit.iot.entity.Result;
import com.veyit.iot.entity.dto.PageDTO;
import com.veyit.iot.entity.po.InfoPO;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;

@Service
@Transactional
public class InfoServiceImpl implements InfoService {

    @Resource
    private InfoMapper infoMapper;

    @Override
    public Result<PageInfo<InfoPO>> findInfos(PageDTO pageDTO) {
        PageHelper.startPage(pageDTO.getPageNum(), pageDTO.getPageSize());
        return new Result<>(200,"获取成功",new PageInfo<InfoPO>(infoMapper.getInfos()));
    }
}

编写Dao层

InfoMapper.java

import com.veyit.iot.entity.po.InfoPO;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface InfoMapper {
    List<InfoPO> getInfos();
    }

InfoMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.veyit.iot.dao.InfoMapper">
    <select id="getInfos" resultType="InfoPO">
        select * from info
    </select>
</mapper>

前端页面

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<div class="ui container">
    <a class="ui button middle blue" th:href="@{/update}">新增</a>
    <table class="table table-hover" border="1" style="border-spacing: 0 ;width: 80%;">
        <thead>
        <tr>
            <th>id</th>
            <th>发布人id</th>
            <th>书名</th>
            <th>图片</th>
            <th>作者</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr  th:each="info : ${page.list}">
            <td th:text="${info.bookId}">neo</td>
            <td th:text="${info.userId}">neo</td>
            <td th:text="${info.bookName}">neo</td>
            <td th:text="${info.img}">Otto</td>
            <td th:text="${info.author}">6</td>
            <td>
                <div style="text-align: center">
                <a th:href="@{/edit/{id}(id=${info.bookId})}" class="ui button mini pink">修改</a>
                <a th:href="@{/delete/{id}(id=${info.bookId})}" class="ui button mini teal">删除</a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="ui attached segment" >
        <table class="m-mobile-wide" width="605px">
            <tbody>
            <tr align="center">
                <td>
                    <a th:href="@{/index(pageNum=${page.pageNum}-1)}"  class="ui button basic mini" th:unless="${page.isFirstPage}">上一页</a>
                </td>
                <td>
                    第
                    <h8 th:text="${page.pageNum}">2</h8>
                    页/共
                    <h8 th:text="${page.pages}">4</h8>
                    页
                    共
                    <h8 th:text="${page.total}">29</h8>
                    条
                </td>
                <td>
                    <form name="pageForm" th:action="@{/index}" method="get">
                        <div class="ui mini input ">
                            <input type="text" class="m-bg" name="pageNum" placeholder="页码" style="width: 50px!important; height: 27.76px!important;" required>
                            <button type="submit" style="font-size: 11px!important;width: 30px!important; height: 0px!important; border: none;margin: 5px;padding: 0;" class="button mini">
                                跳转
                            </button>
                        </div>
                    </form>
                </td>
                <td> &nbsp;</td>
                <td  style="float: right">
                    <a th:href="@{/index(pageNum=${page.pageNum}+1)}" class="ui button basic mini " style="float: right;" th:unless="${page.isLastPage}">下一页</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="ui success  message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon"></i>
        <div class="header">提示：</div>
        <p th:text="${message}"></p>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    $(".message .close").on('click',function () {
        $(this).closest(".message")
            .transition("fade");
    })
</script>
</html>