文章目录
- 0.需求分析
- 1.服务端--Dao
- 2.服务端--Service
- 3.服务端--Controller
- 4.前端
- 1)page_list.vue中增加查询表单
- 2)page_list.vue中添加数据模型对象
- 3)在钩子方法中构建siteList站点列
- 5.Api调用
- 1)修改 cms.js,向服务端传递查询条件
- 2)page_list.vue中页面调用api中的方法
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