springboot的前后端不分离且使用mybatis的项目是怎么实现分页的?
时间: 2024-02-16 14:59:59 浏览: 126
在 Spring Boot 的前后端不分离且使用 MyBatis 的项目中,可以通过 PageHelper 插件来实现分页。具体步骤如下:
1. 在 pom.xml 文件中添加 PageHelper 的依赖:
```xml
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
```
2. 在 MyBatis 的 Mapper 中定义查询语句,并使用 PageHelper.startPage() 方法来指定查询的页码和每页的数据量。例如:
```java
@Repository
public interface UserMapper {
@Select("SELECT * FROM users")
List<User> findAll();
@Select("SELECT * FROM users WHERE username LIKE CONCAT('%',#{username},'%')")
List<User> findByUsername(String username);
@Select("SELECT * FROM users WHERE id=#{id}")
User findById(Long id);
@Select("SELECT * FROM users")
PageInfo<User> findAllWithPage();
}
```
3. 在控制器中调用 Mapper 的查询方法,并将结果封装为 PageInfo 对象。例如:
```java
@GetMapping("/users")
public String listUsers(@RequestParam(defaultValue = "1") int pageNum, Model model) {
PageHelper.startPage(pageNum, 10);
PageInfo<User> pageInfo = new PageInfo<>(userMapper.findAll());
model.addAttribute("pageInfo", pageInfo);
return "users";
}
```
4. 在前端页面中遍历 PageInfo 对象中的数据,并显示分页的页码和链接。例如:
```html
<div class="pagination">
<ul>
<li th:class="${pageInfo.isFirstPage() ? 'disabled' : ''}">
<a th:if="${!pageInfo.isFirstPage()}" th:href="@{/users(pageNum=1)}"><<</a>
</li>
<li th:class="${pageInfo.isFirstPage() ? 'disabled' : ''}">
<a th:if="${!pageInfo.isFirstPage()}" th:href="@{/users(pageNum=${pageInfo.pageNum - 1})}"><</a>
</li>
<li th:each="num : ${pageInfo.navigatepageNums}">
<a th:class="${num == pageInfo.pageNum ? 'active' : ''}" th:href="@{/users(pageNum=${num})}" th:text="${num}"></a>
</li>
<li th:class="${pageInfo.isLastPage() ? 'disabled' : ''}">
<a th:if="${!pageInfo.isLastPage()}" th:href="@{/users(pageNum=${pageInfo.pageNum + 1})}">></a>
</li>
<li th:class="${pageInfo.isLastPage() ? 'disabled' : ''}">
<a th:if="${!pageInfo.isLastPage()}" th:href="@{/users(pageNum=${pageInfo.pages})}">>></a>
</li>
</ul>
</div>
```
通过以上步骤,就可以在 Spring Boot 的前后端不分离且使用 MyBatis 的项目中实现分页功能了。
阅读全文