0.需求分析

在頁面輸入查詢條件，查詢符合條件的頁面信息。
查詢條件如下：
站點Id：精確匹配
模板Id：精確匹配
頁面別名：模糊匹配

1.服務端–Dao

使用 CmsPageRepository中的findAll(Example var1, Pageable var2)方法實現，無需定義

下邊測試findAll方法實現自定義條件查詢：

//自定義條件查詢測試
@Test
public void testFindAll() {
//條件匹配器
ExampleMatcher exampleMatcher = ExampleMatcher.matching();
exampleMatcher = exampleMatcher.withMatcher("pageAliase",
ExampleMatcher.GenericPropertyMatchers.contains());
//頁面別名模糊查詢，需要自定義字符串的匹配器實現模糊查詢
//ExampleMatcher.GenericPropertyMatchers.contains() 包含
//ExampleMatcher.GenericPropertyMatchers.startsWith()//開頭匹配
//條件值
CmsPage cmsPage = new CmsPage();
//站點ID
cmsPage.setSiteId("5a751fab6abb5044e0d19ea1");
//模板ID
cmsPage.setTemplateId("5a962c16b00ffc514038fafd");
// cmsPage.setPageAliase("分類導航");
//創建條件實例
Example<CmsPage> example = Example.of(cmsPage, exampleMatcher);
Pageable pageable = new PageRequest(0, 10);
Page<CmsPage> all = cmsPageRepository.findAll(example, pageable);
System.out.println(all);
}

2.服務端–Service

在PageService的findlist方法中增加自定義條件查詢代碼

/**
* 頁面列表分頁查詢
* @param page 當前頁碼
* @param size 頁面顯示個數
* @param queryPageRequest 查詢條件
* @return 頁面列表
*/
public QueryResponseResult findList(int page,int size,QueryPageRequest queryPageRequest){
//條件匹配器
//頁面名稱模糊查詢，需要自定義字符串的匹配器實現模糊查詢
ExampleMatcher exampleMatcher = ExampleMatcher.matching()
.withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains());
//條件值
CmsPage cmsPage = new CmsPage();
//站點ID
if(StringUtils.isNotEmpty(queryPageRequest.getSiteId())){
cmsPage.setSiteId(queryPageRequest.getSiteId());
} /
/頁面別名
if(StringUtils.isNotEmpty(queryPageRequest.getPageAliase())){
cmsPage.setPageAliase(queryPageRequest.getPageAliase());
} /
/創建條件實例
Example<CmsPage> example = Example.of(cmsPage, exampleMatcher);
//頁碼
page = page‐1;
//分頁對象
Pageable pageable = new PageRequest(page, size);
//分頁查詢
Page<CmsPage> all = cmsPageRepository.findAll(example,pageable);
QueryResult<CmsPage> cmsPageQueryResult = new QueryResult<CmsPage>();
cmsPageQueryResult.setList(all.getContent());
cmsPageQueryResult.setTotal(all.getTotalElements());
//返回結果
return new QueryResponseResult(CommonCode.SUCCESS,cmsPageQueryResult);
}

3.服務端–Controller

4.前端

1）page_list.vue中增加查詢表單

文件名：page_list.vue

<!‐‐查詢表單‐‐>
<el‐form :model="params">
<el‐select v‐model="params.siteId" placeholder="請選擇站點">
<el‐option
v‐for="item in siteList"
:key="item.siteId"
:label="item.siteName"
:value="item.siteId">
</el‐option>
</el‐select>
頁面別名：<el‐input v‐model="params.pageAliase" style="width: 100px"></el‐input>
<el‐button type="primary" v‐on:click="query" size="small">查詢</el‐button>
</el‐form>

2）page_list.vue中添加數據模型對象

文件名：page_list.vue

增加siteList、pageAliase、siteId，如下：

3）在鉤子方法中構建siteList站點列

文件名：page_list.vue

5.Api調用

1）修改 cms.js，向服務端傳遞查詢條件

2）page_list.vue中頁面調用api中的方法