一、Maven依赖
<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)
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
三、数据库
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分页拦截器
@Configuration
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 方言
paginationInterceptor.setDialectType("mysql");
return paginationInterceptor;
}
}
五、dao接口
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接口和实现类
public interface UserService {
IPage<Users> selectAllByPage(Integer pageNum, Integer pageSize);
}
@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
@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
@Data
public class User {
private Integer id;
private String username;
private String password;
}
@ToString(callSuper = true)
@Getter
@Setter
public class Users extends User {
}
九、引入jQuery和Bootstrap
十、前端界面(index.html)
<!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}">«</a>
<a th:href="@{/selectAllByPage/1/2}" th:if="${usersIPage.getCurrent()!=1}">«</a>
</li>
<li th:if="${usersIPage.getCurrent()>5}"><a
th:href="@{/selectAllByPage/{pageNum}/2(pageNum=${usersIPage.getCurrent()-5})}">«</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})}">»</a>
</li>
<li th:if="${usersIPage.getCurrent()+5>usersIPage.getPages()}">
<a href="#" th:if="${usersIPage.getCurrent()==usersIPage.getPages()}">»</a>
<a th:href="@{/selectAllByPage/{pageNum}/2(pageNum=${usersIPage.getPages()})}"
th:if="${usersIPage.getCurrent()!=usersIPage.getPages()}">»</a>
</li>
</ul>
</body>
</html>
十一、分页效果