springboot+mybatisplus+thymeleaf整合分页(带前端和后端代码)

最新推荐文章于 2023-03-21 10:12:04 发布

原创最新推荐文章于 2023-03-21 10:12:04 发布 · 680 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #mybatis #java #后端 #前端

MybatisPlus的分页专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在SpringBoot项目中整合MyBatisPlus和Thymeleaf，实现数据分页功能，并展示了如何在前端展示分页列表，适合初学者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@springboot+mybatisplus+thymeleaf整合分页

最近一直在使用mybatis-plus开发，发现方便的地方挺多的，包括自带的分页插件，而且整合了springboot之后，很多基本的sql都不需要再编写了，但使用thymeleaf实现前端分页的资料非常少，自己总结了一些，供参考

准备

使用Spring Initializr 创建Springboot+mybatisplus+thymeleaf项目

pom.xml文件 ，

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>

2.application.yml对数据源的配置

logging:
  level:
    com.liwei.account.mapper: DEBUG

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/basketball?serverTimezone=UTC
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver



server:
  port: 8181


# 配置MyBatis日志
mybatis-plus:
  configuration:
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

3.后端代码

项目结构

然后创建对应的dao层，controller层

dao层：

Mapper
public interface PlayersMapper extends BaseMapper<Players> {

    @Select("select * from players a,clubs b where a.cid=b.cid")
    List<Players> findAll();

    @Select("select * from players a,clubs b where a.cid=b.cid")
    Page<Players> queryAllVideos(Page<Players> pagination);

}

如果需要分页还需要加一个配置类配置在config层中：

package com.liwei.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MybatisPlusPageConfig {

    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));  //添加分页插件
        return interceptor;
    }
}

ontroller层：

package com.liwei.controller;


import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.liwei.entity.Clubs;
import com.liwei.entity.Players;
import com.liwei.mapper.ClubsMapper;
import com.liwei.mapper.PlayersMapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

@Controller
@RequestMapping("players")
@Slf4j
public class PlayersController {

    @Autowired
    private PlayersMapper playersMapper;

    @Autowired
    private ClubsMapper clubsMapper;



    @GetMapping
    public String home(HttpServletRequest request,
                       @RequestParam(required = false, defaultValue = "1", value = "pn") Integer pn,Model model) {
        Page<Players> pageList=new Page<>(pn,5);
        IPage<Players> page = playersMapper.queryAllVideos(pageList);
        request.setAttribute("jumpUrl", "/players?pn=");
        //此处得到的page对象,包含了current（当前页）,pages（总页数），total（总记录数），records（记录，就是查询到的List集合）
        model.addAttribute("page", page);
        List<Clubs>ClubsList=clubsMapper.selectList(null);
        model.addAttribute("page",page);
        model.addAttribute("ClubsList",ClubsList);
        return "PlayersList";
    }

前端代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .page-item {
        padding: 1px 5px;
        border: 1px solid #afafaf;
        margin-left: 3px
    }

    .page-item.active {
        color: red;
        border: 1px solid red;
    }
</style>
<body>
<form th:action="@{/players}" method="get">

        <div align="center">
            <h1>美国职业篮球联盟(NBA)球员信息</h1>
            球员姓名: <input type="text" name="pname" th:value="${pname}">
            所属球队：<select name="cid" id="">
            <option value="">请选择</option>
            <option th:each="clubs:${ClubsList}"
                    th:selected="${clubs.cid} == ${session.cid}"
                    th:value="${clubs.cid}"
                    th:text="${clubs.cname}" ></option>
        </select>
            <button type="submit">查询</button><button type="button"><a th:href="@{/players/addList}">添加新球员信息</a></button>
        </div>
</form>
<table align="center" border="1px">
        <tr >
            <th >球员编号</th>
            <th >球员名称</th>
            <th >球员出生时间(yyyy-MM-dd)</th>
            <th >球员身高(单位:cm)</th>
            <th >球员体重(单位:kg)</th>
            <th >球员位置</th>
            <th >所属球队</th>
            <th >相关操作</th>

        </tr>
        <tr th:each="players:${page.records}">
            <td th:text="${players.pid}"></td>
            <td th:text="${players.pname}"></td>
            <td th:text="${players.birthday}"></td>
            <td th:text="${players.height}"></td>
            <td th:text="${players.weight}"></td>
            <td th:text="${players.position}"></td>
            <td th:text="${players.cname}"></td>
            <td><a  th:οnclick="pId([[${players.pid}]])">删除</a>
                <a th:href="@{'/players/updateList/'+${players.pid}}">修改</a>
            </td>
        </tr>
    </table>
<div align="center">
<div style="float: left" th:if="${page.pages>0}">
    当前第<span th:text="${page.current}"></span>页,共<span
        th:text="${page.pages}"></span>页,总记录数<span th:text="${page.total}"></span>
</div>
<hr>
<div style="float: right" th:if="${page.pages>0}">
    <a th:href="@{${jumpUrl}}" th:text="首页" th:if="${page.current>1}" th:class="page-item"></a>
    <a th:href="@{${jumpUrl}+${page.current-1}}" th:text="上一页" th:class="page-item"
       th:if="${page.current>1}"></a>
    <a th:href="@{${jumpUrl}+ ${i}}"
       th:each="i :${#numbers.sequence(1, page.pages)}" th:text="${i}"
       th:class="${page.current == i}? 'page-item active' :'page-item' "></a>
    <a th:href="@{${jumpUrl}+${page.current+1}}" th:text="下一页" th:class="page-item"
       th:if="${page.current<page.pages}"></a> <a
        th:href="@{${jumpUrl}+${page.pages}}" th:text="尾页" th:class="page-item"
        th:if="${page.current<page.pages}"></a>
</div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>

    function pId(pId) {
        $.ajax({
            url: '/players/deletePlayers/' + pId ,
            type: 'post',
            success: function (data) {
                if (data) {
                    alert("删除成功")
                    window.location.href = '/players';
                }
            }
        })
    }


</script>
</html>

查询结果