传智黑马Java学成在线项目 第3天 讲义-CMS页面管理开发一

1 自定义条件查询
1.1 需求分析
在页面输入查询条件，查询符合条件的页面信息。
查询条件如下：
站点Id：精确匹配
模板Id：精确匹配
页面别名：模糊匹配
...
1.2 服务端
1.2.1 Dao

使用 CmsPageRepository中的findAll(Example<S> var1, Pageable var2)方法实现，无需定义。

下边测试fifindAll方法实现自定义条件查询：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

/ / 自定义条件查询测试 @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方法中增加自定义条件查询代码

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

/ * * * 页面列表分页查询 * @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、增加查询表单

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

< ! ‐‐ 查询表单 ‐‐ > < 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，如下：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

data ( ) { return { siteList : [] , / / 站点列表 list : [] , total : 50 , params : { siteId : '' , pageAliase : '' , page : 1 , / / 页码 size : 2 / / 每页显示个数 } } }

3、在钩子方法中 构建siteList站点列表

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

mounted ( ) { / / 默认查询页面 this. query ( ) / / 初始化站点列表 this.siteList = [ { siteId : ' 5 a 751 fab 6 abb 5044 e 0 d 19 ea 1 ' , siteName : ' 门户主站 ' } , { siteId : ' 102 ' , siteName : ' 测试站 ' } ] }

1.3.2 Api调用
1、向服务端传递查询条件，修改 cms.js，如下：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

/ / 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方法

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

/ / 查询 query : function ( ) { cmsApi. page_list ( this. params. page , this. params.size , this.