PageHelper查詢資料，並將結果集傳送到前端
阿新 • • 發佈：2022-05-31
初用PageHelper，記錄使用，解釋pageInfo返回是Page物件而不是結果集
1. pom新增依賴
<!-- Mybatis分頁外掛PageHelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.3.0</version>
</dependency>
2. 在 SqlSessionFactory 設定外掛，或在 SpirngMVC 配置檔案中設定
這裡以SqlSessionFactory為例
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 指定Mybatis配置檔案 --> <property name="configLocation" value="classpath:mybatis-config.xml" /> <!-- 指定資料來源 --> <property name="dataSource" ref="pooledDataSource" /> <!-- 指定mapper檔案位置 --> <property name="mapperLocations" value="classpath:mapper/*.xml" /> <!-- 配置PageHelper外掛 --> <property name="plugins"> <array> <bean class="com.github.pagehelper.PageInterceptor"> <property name="properties"> <props> <prop key="helperDialect">mysql</prop> <!-- 頁碼長度為0時不進行分頁 --> <prop key="pageSizeZero">true</prop> </props> </property> </bean> </array> </property> </bean>
3. Controller方法
@RequestMapping("/allBooks") public ModelAndView getAllBooks() { ModelAndView mv = new ModelAndView(); PageHelper.startPage(1, 4); // 傳入頁碼，每頁條數 List<Book> books = mapper.getAllBooks(); // SQL查詢所有書，此時books是Page物件，不是ArrayList物件 PageInfo<Book> pageInfo = new PageInfo<>(books); List<Book> list = pageInfo.getList(); // 返回結果集，list實際上是一個Page物件 mv.addObject("pageInfo", pageInfo); mv.addObject("books", new Gson().toJson(list)); mv.setViewName("book/show"); }
（1）在 PageHelper.startPage() 執行後，Mapper進行SQL查詢返回的結果集向下轉型成了一個 Page 物件，而不是ArrayList物件
（2）Page類 繼承了 ArrayList類，重寫了 toString() 方法，所以 new PageInfo<>(books) 傳入了一個Page物件，pageInfo.getList() 返回的也是 Page物件，所以 pageInfo.getList() 返回值不是我們想要的book集合
- pageInfo.getList()的返回值，一個Page物件：
Page{count=true,
pageNum=1,
pageSize=4,
startRow=0,
endRow=4,
total=8,
pages=2,
reasonable=false,
pageSizeZero=true}
[Book{bookId=1, bookName='死屋', author='unknown', press='unknown', imgPath='/static/img/book/default.jpg', bookImpression='null'},
Book{bookId=2, bookName='我和你', author='馬丁·布伯', press='四川人民出版社', imgPath='', bookImpression='null'},
Book{bookId=3, bookName='波蘭史', author='', press='', imgPath='', bookImpression=''},
Book{bookId=4, bookName='無敵艦隊', author='unknown', press='unknown', imgPath='/static/img/book/default.jpg', bookImpression='null'}
- 而我們只想要book集合的資訊
Book{bookId=2, bookName='我和你', author='馬丁·布伯', press='四川人民出版社', imgPath='', bookImpression='null'}, Book{bookId=3, bookName='波蘭史', author='', press='', imgPath='', bookImpression=''}, Book{bookId=4, bookName='無敵艦隊', author='unknown', press='unknown', imgPath='/static/img/book/default.jpg', bookImpression='null'}
(3) 將 pageInfo.getList() 返回的結果轉換成 Json，併發送給前端，交由前端進行Json解析，得到物件後，對其進行遍歷
Page就是一個ArrayList，可以進行遍歷獲取結果集
4. 前端JS解析獲取結果集
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title></title>
<script th:src="@{/static/js/jquery-3.6.0.js}"></script>
</head>
<body>
<!-- 獲取後端傳過來的Model資料 -->
<input id="books" type="hidden" th:value="${books}">
</body>
<script th:inline="javascript">
$(function () {
var booksJson = $("#books").val();
var books = JSON.parse(booksJson); // 將傳過來Json進行解析，得到List集合
$.each(books, function (index, book) { // 遍歷物件，並將物件轉為字串
alert(JSON.stringify(book)); // alert展示每本書的資訊
});
});
</script>
解析結果：SQL查詢後分頁的第一頁，4條Book物件的資訊如下
5. 詳細使用的朋友建議自己看原始碼
...