欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Cms页面管理开发

程序员文章站 2022-05-08 11:22:51
...

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

测试如下:Cms页面管理开发
则测试成功。
删除,修改,添加与查询业务逻辑类似。

相关标签: Cms 增删改查