|
【郑州校区】学成在线 第3天 讲义-CMS页面管理开发一
1 自定义条件查询
1.1 需求分析
在页面输入查询条件，查询符合条件的页面信息。
查询条件如下：
站点Id：精确匹配
模板Id：精确匹配
页面别名：模糊匹配
...
1.2 服务端
1.2.1 Dao
使用 CmsPageRepository中的findAll(Example<S> var1, Pageable var2)方法实现，无需定义。
[AppleScript] 纯文本查看 复制代码 //自定义条件查询测试
@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);
}
1.2.2 Service
在PageService的fifindlist方法中增加自定义条件查询代码
[AppleScript] 纯文本查看 复制代码 /
**
*
页面列表分页查询
*
@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);
}
1.2.3 Controller
无需修改
1.2.4 测试
使用SwaggerUI测试
1.3 前端
1.3.1 页面
1、增加查询表单
[AppleScript] 纯文本查看 复制代码 <!
‐‐
查询表单
‐‐
>
<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、数据模型对象
增加siteList、pageAliase、siteId，如下：
[AppleScript] 纯文本查看 复制代码 data() {
return {
siteList:[],//站点列表
list:[],
total:50,
params:{
siteId:
''
,
pageAliase:
''
,
page:1,//页码
size:2//每页显示个数
}
}
}
3、在钩子方法中 构建siteList站点列表
[AppleScript] 纯文本查看 复制代码 mounted() {
//默认查询页面
this.
query()
//初始化站点列表
this.siteList
=
[
{
siteId:
'
5a751fab6abb5044e0d19ea1
'
,
siteName:
'
门户主站
'
},
{
siteId:
'
102
'
,
siteName:
'
测试站
'
}
]
}
1.3.2 Api调用
1、向服务端传递查询条件，修改 cms.js，如下：
[AppleScript] 纯文本查看 复制代码 //public是对axios的工具类封装，定义了http请求方法
import http from
'
./../../../base/api/public
'
import querystring from
'
querystring
'
let sysConfig
= require(
'
@/../config/sysConfig
'
)
let apiUrl =
sysConfig
.xcApiUrlPre;
export const page_list
=
(page,size,params)
=
> {
//将json对象转成key/value对
let query
=
querystring
.stringify(params)
return http
.requestQuickGet(apiUrl+
'
/cms/page/list/
'
+page+
'
/
'
+size+
'
/?
'
+query)
}
2、页面调用api方法
[AppleScript] 纯文本查看 复制代码 //查询
query:function () {
cmsApi.
page_list(this.
params.
page,this.
params.size,this.
params)
.then((res)
=
>{
console.log(res)
this.total = res.
queryResult.total
this.list
= res.
queryResult.list
})
}
测试如下：
|
收藏
淘帖
踩
