Cms页面管理开发

Cms页面管理开发

一、服务端查询页面（模糊查询与精准查询）
查询条件如下：
站点Id：精确匹配
模板Id：精确匹配
页面别名：模糊匹配

1.Dao层
根据Spring Data MongoDB中的 CmsPageRepository中的findAll(Example var1, Pageable var2)方法实现，无需定义。

2.在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

 @Override
    @GetMapping("/list/{page}/{size}")
    public QueryResponseResult findList(@PathVariable("page") int page, @PathVariable("size") int size, QueryPageRequest queryPageRequest) {
        // QueryResponseResult queryResponseResult1 = new QueryResponseResult(CommonCode.SUCCESS);

        return pageService.findList(page, size, queryPageRequest);
    }

即可完成页面查询。
二、前端调用服务端接口
1.增加查询表单

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

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

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

mounted() {
  //默认查询页面
  this.query()
  //初始化站点列表
  this.siteList = [
    {
      siteId:'5a751fab6abb5044e0d19ea1',
      siteName:'门户主站'
    },
    {
      siteId:'102',
      siteName:'测试站'
    }
  ]
}

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

//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)
}

页面调用api方法

//查询
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
  })
}

测试如下：
则测试成功。
删除，修改，添加与查询业务逻辑类似。