在實現了分頁查詢后，我原本的項目之前的模糊查詢失效，之前是傳一個封裝好的實體對象給后端，后端通過這個對象查詢后返回結果給到前端。由于實現了分頁，所以查詢得到的結果也需要分頁。

有個很關鍵的問題是分頁需要傳pageNum和pageSize這兩個參數，后端@RequestBody一次只能接收一個對象（@RequestBody是讀取的流的方式, 在取 body參數時第一個參數取到后把request.getInputStream()關閉，一個請求中只包含一個request body）。而我要進行的查詢又需要傳一個對象，在走了一些彎路后想到：為什么不把pageNum和pageSize以及需要的實體整合成一個新的對象，傳給后端后再分開獲取值呢？這樣雖然比較麻煩，但是沒有其他思路我就這么試了，確實可以實現想要的多條件分頁模糊查詢。

后端實現

**注意：**要先導入PageHelper和Lombok插件，具體操作可以查看我的上一篇博客。

新建一個實體類

@Data @NoArgsConstructor public class FundPage {private String fundCode;private String fundFullName;private String custodianCode;private String fundCategory;private String needReview;private Integer pageNum;private Integer pageSize; }

dao層和mapper文件不需要更改，修改service層和實現類的業務函數

//原本的service層函數 List<FundInfo> getLots(FundInfo fundInfo) //改寫后 PageInfo<FundInfo> getLots(FundInfo fundInfo,Integer pageNum,Integer pageSize); //service的實現類 @Overridepublic PageInfo<FundInfo> getLots(FundInfo fundInfo,Integer pageNum,Integer pageSize) {FundInfoExample example = new FundInfoExample();FundInfoExample.Criteria criteria = example.createCriteria();if (fundInfo.getFundCode() != null) {criteria.andFundCodeLike("%" + fundInfo.getFundCode() + "%");}if (fundInfo.getCustodianCode() != null) {criteria.andCustodianCodeLike("%" + fundInfo.getCustodianCode() + "%");}if (fundInfo.getFundFullName() != null) {criteria.andFundFullNameLike("%" + fundInfo.getFundFullName() + "%");}if (fundInfo.getNeedReview() != null) {criteria.andNeedReviewLike("%" + fundInfo.getNeedReview() + "%");}if (fundInfo.getFundCategory() != null) {criteria.andFundCategoryLike("%" + fundInfo.getFundCategory() + "%");}PageHelper.startPage(pageNum,pageSize);List<FundInfo> fundInfoList=fundInfoMapper.selectByExample(example);PageInfo<FundInfo> pageInfo=new PageInfo<>(fundInfoList);return pageInfo;}

這里使用了PageHelper中的PageInfo類，這里主要是用到了其中的幾個方法。

注意：PageHelper.startPage(pageNum,pageSize);的作用開啟分頁，通過將查詢后的結果集用PageInfo型的對象接收即可實現分頁。此外，這里的模糊查詢使用的是逆向工程生成的方法，具體可以查看我的其他博客。

controller層

@Autowiredprivate FundInfoService fundInfoService; ... @PostMapping("/test")public Result<List<FundInfo>> getTest(@RequestBody FundPage fundPage){FundInfo fundInfo=new FundInfo();fundInfo.setNeedReview(fundPage.getNeedReview());fundInfo.setFundCategory(fundPage.getFundCategory());fundInfo.setFundCode(fundPage.getFundCode());fundInfo.setFundFullName(fundPage.getFundFullName());fundInfo.setCustodianCode(fundPage.getCustodianCode());int pageNum=fundPage.getPageNum();int pageSize=fundPage.getPageSize();PageInfo<FundInfo> pageInfo=fundInfoService.getLots(fundInfo,pageNum,pageSize);List<FundInfo> fundInfoList=pageInfo.getList();int total= Math.toIntExact(pageInfo.getTotal());return Result.buildResult(Result.Status.OK,fundInfoList,total);}

controller層通過對獲取到的FundPage的屬性進行提取，提取到的fundInfo，pageNum，pageSize作為調用模糊查詢方法的參數。查詢結果用PageInfo類型的對象接收，再定義一個FundInfo類型的List集合，調用PageInfo的getList()方法，最后通過工具類返回給前端。

前端實現

由于我是使用angular+primeng的來做前端，所以這里貼上我的頁面布局，上面的部分是一個組件，下面的部分是一個組件(angular是組件化開發，可以理解為一個頁面/部分是一個組件)

由于模糊查詢提交的表單是在一個組件，顯示結果在另一個組件，所以當中涉及到組件間傳值的問題

我解決組件間傳值的方法是在fundInfoTable組件中導入fundInfo組件，然后再ngDoCheck()函數中監聽表單是否提交

ngDoCheck()是組件的生命周期的其中一部分，用于監測數據是否變更，但是每個變化檢測周期都會大頻率調用這個鉤子，所以要輕量級實現，以下是官方文檔的部分介紹

新建一個實體類，這實體類與后端是一致的。

export class FundPage {fundCode: string;fundFullName: string;fundCategory: string;custodianCode: string;needReview: string;pageNum:number;pageSize:number; }

將提交后的表單數據賦值給fundPage，并把pageNum和pageSize給個初始化值（null也行）

sub(data) {if (data.custodianCode == '') {data.custodianCode = null;}if (data.fundCategory == '') {data.fundCategory = null;}if (data.needReview == '') {data.needReview = null;}this.fundPage=data;this.fundPage.pageNum=1;this.fundPage.pageSize=10;}

這里省略了表單還有其他細節，主要也是說一個思路

在fundInfoTable組件定義監聽變量

//前兩個用于控制懶加載的函數在ngDoCheck()中只被調用一次，沒有控制的話會一直調用 bindOne: boolean = false; bindTwo: boolean = true; //用于區別對全部數據的分頁查詢和對模糊條件的分頁查詢 isSearch: boolean = false;

編寫ngDoCheck()變更檢測鉤子

ngDoCheck() {//當監聽到查詢值改變時，將監聽值bindTwo賦值為true，使頁面能夠再次重新調用懶加載函數if(this.fundPage!=this.fundInfoComponent.fundPage){this.bindTwo=true;}// 檢查是否提交了模糊查詢服務//通過兩個變量來監聽，使得this.loadFundInfos()只能調用一次if (this.fundInfoComponent.fundPage&&(this.bindOne||this.bindTwo)) {this.fundPage = this.fundInfoComponent.fundPage;this.isSearch = true;this.bindTwo=false;this.loadFundInfos();//查詢后回到第一頁this.first=0}}

懶加載函數

//懶加載分頁的數據loadFundInfos() {this.loading = true;setTimeout(() => {if (this.isSearch) {this.fundPage.pageNum = (this.first + 10) / 10;this.fundPage.pageSize = this.rows;this.fundService.getLots(this.fundPage).then(response => { this.totalRecords = response.total; this.infos = response.data; })} else {this.fundService.getPage(this.first + 10, this.rows).then(response => { this.totalRecords = response.total; this.infos = response.data; })}this.loading = false;}, 500)}

總結

后端的模糊查詢分頁其實難度不大，主要是前端卡了很久，主要問題在于如何把查詢到的分頁數據實時渲染到table上，試了幾種鉤子都沒有效果，最后是突然想到之前做過的一道算法題，給我提供了用兩個監聽變量來控制函數的調用。我的實現方法可能不規范，但總歸是實現了，希望能給大家一些思路，我是個新手，如果有錯誤的地方，歡迎大家指正，我們可以一起討論！

總結

以上是生活随笔為你收集整理的多条件模糊分页查询（angular+primeng+springboot）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。