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中的方法