Mybatis-Plus | Spring Boot+Mybatis-Plus+Thymeleaf+Bootstrap分页页查询（前后端都有）


一、Maven依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
    <dependencies>
        <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>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </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>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>
    </dependencies>

二、Spring Boot核心配置文件（application.properties）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
server.port=8081
server.servlet.context-path=/demo
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=123456
mybatis-plus.mapper-locations=classpath:com/java/dao/*Dao.xml
mybatis-plus.type-aliases-package=com.java.entity
logging.level.com.java.dao=debug
#####Thymeleaf配置文件
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
#编码
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.check-template=true
#类型
spring.thymeleaf.servlet.content-type=text/html
#前缀
spring.thymeleaf.prefix=classpath:/templates/
#后缀
spring.thymeleaf.suffix=.html

三、数据库

1
2
3
4
5
6
7
8
9
10
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `username` varchar(255) NOT NULL COMMENT '用户名',
  `password` varchar(255) NOT NULL COMMENT '密码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;
LOCK TABLES `users` WRITE;
INSERT INTO `users` VALUES (1,'admin','123'),(3,'234','234'),(5,'456','123'),(6,'123','123'),(7,'789','789'),(10,'121','121'),(11,'1231','231'),(12,'1123','12313'),(13,'312231','1231'),(14,'123123','123123'),(15,'r1324','134'),(16,'1234','1234'),(17,'1234','1234'),(18,'1234','1324'),(19,'rqwer','qwer'),(20,'wer','qwer'),(21,'qwer','qwer');
UNLOCK TABLES;

四、注册Mybatis-Plus分页拦截器

1
2
3
4
5
6
7
8
9
10
@Configuration
public class MybatisPlusConfig {
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 方言
        paginationInterceptor.setDialectType("mysql");
        return paginationInterceptor;
    }
}

五、dao接口

1
2
3
4
5
6
7
8
9
10
11
package com.java.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.java.entity.vo.Users;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

@Repository
@Mapper
public interface UserDao extends BaseMapper<Users> {
}

六、service接口和实现类

1
2
3
public interface UserService {
    IPage<Users> selectAllByPage(Integer pageNum, Integer pageSize);
}
1
2
3
4
5
6
7
8
@Service
public class UserServiceImpl implements UserService {
    @Override
    public IPage<Users> selectAllByPage(Integer pageNum, Integer pageSize) {
        Page<Users> userPage = new Page<>(pageNum, pageSize);
        return userDao.selectPage(userPage, null);
    }
}

七、controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/selectAllByPage/{pageNum}/{pageSize}")
    @ResponseBody
    public ModelAndView selectAllByPage(@PathVariable("pageNum") Integer pageNum, @PathVariable("pageSize") Integer pageSize) {
        ModelAndView modelAndView = new ModelAndView();
        IPage<Users> usersIPage = userService.selectAllByPage(pageNum, pageSize);
        if (usersIPage.getRecords().size() > 0) {
            modelAndView.setViewName("index");
            modelAndView.addObject("usersIPage", usersIPage);
        } else {
            modelAndView.setViewName("error");
            modelAndView.addObject("msg", "查询失败");
        }
        return modelAndView;
    }
}

八、entity

1
2
3
4
5
6
@Data
public class User {
    private Integer id;
    private String username;
    private String password;
}

1
2
3
4
5
@ToString(callSuper = true)
@Getter
@Setter
public class Users extends User {
}

九、引入jQuery和Bootstrap

在这里插入图片描述

十、前端界面（index.html）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.css}"/>
    <script th:src="@{/jquery-1.12.4.js}"></script>
    <script th:src="@{/bootstrap.js}"></script>
</head>
<body>
<table class="table">
    <caption>用户信息</caption>
    <thead>
    <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="users : ${usersIPage.getRecords()}">
        <td th:text="${users.id}"></td>
        <td th:text="${users.username}"></td>
        <td th:text="${users.password}"></td>
    </tr>
    </tbody>
</table>
<ul class="pagination">
    <li th:if="${usersIPage.getCurrent()<=5}">
        <a href="#" th:if="${usersIPage.getCurrent()==1}">&laquo;</a>
        <a th:href="@{/selectAllByPage/1/2}" th:if="${usersIPage.getCurrent()!=1}">&laquo;</a>
    </li>

    <li th:if="${usersIPage.getCurrent()>5}"><a
            th:href="@{/selectAllByPage/{pageNum}/2(pageNum=${usersIPage.getCurrent()-5})}">&laquo;</a></li>

    <li th:if="${usersIPage.getCurrent()<=3}" th:each="i:${#numbers.sequence(1,5)}"
        th:class="${usersIPage.getCurrent()==i}? 'active':''"><a th:text="${i}"
                                                                 th:href="@{/selectAllByPage/{i}/2(i=${i})}"></a>
    </li>

    <li th:if="${usersIPage.getCurrent()>3 && usersIPage.getCurrent()+2<=usersIPage.getPages()}"
        th:each="i:${#numbers.sequence(usersIPage.getCurrent()-2,usersIPage.getCurrent()+2)}"
        th:class="${usersIPage.getCurrent()==i}? 'active':''"><a
            th:text="${i}" th:href="@{/selectAllByPage/{i}/2(i=${i})}"></a></li>

    <li th:if="${usersIPage.getCurrent()+2>usersIPage.getPages()}"
        th:each="i:${#numbers.sequence(usersIPage.getPages()-4,usersIPage.getPages())}"
        th:class="${usersIPage.getCurrent()==i}? 'active':''"><a
            th:text="${i}" th:href="@{/selectAllByPage/{i}/2(i=${i})}"></a></li>

    <li th:if="${usersIPage.getCurrent()+5<=usersIPage.getPages()}"><a
            th:href="@{/selectAllByPage/{pageNum}/2(pageNum=${usersIPage.getCurrent()+5})}">&raquo;</a>
    </li>

    <li th:if="${usersIPage.getCurrent()+5>usersIPage.getPages()}">
        <a href="#" th:if="${usersIPage.getCurrent()==usersIPage.getPages()}">&raquo;</a>
        <a th:href="@{/selectAllByPage/{pageNum}/2(pageNum=${usersIPage.getPages()})}"
           th:if="${usersIPage.getCurrent()!=usersIPage.getPages()}">&raquo;</a>
    </li>
</ul>
</body>
</html>

十一、分页效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述