微服务[学成在线] day03：CMS页面管理开发

cory_lin

于 2020-07-24 12:17:28 发布

阅读量437

点赞数

分类专栏：微服务项目学习文章标签： spring java vue spring boot

本文链接：https://blog.csdn.net/codeyee/article/details/107558335

版权

本文详细介绍了使用Spring Boot和Vue开发CMS页面管理的过程，包括自定义条件查询、新增、修改和删除页面的前后端实现，以及异常处理策略。通过案例展示了如何进行DAO、Service和Controller层的CRUD操作，同时利用SwaggerUI进行接口测试。此外，还讨论了前端页面的构建，如表单验证和API调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

😎 知识点概览

为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。

本章节为【学成在线】项目的 day03 的内容

使用 Spring data 提供的 PageRequest 模块进行分页查询的应用
使用 Spring data 提供 MongoDB 的dao接口进行前后端联调的 CRUD 操作
基于 VUE.JS 的前端模块化开发
使用统一的响应模型、状态码进行 RESTful 风格的API开发
熟悉使用 Swagger 进行接口文档的生成与测试
异常处理以及如何自定义异常，根据不同的异常自定义返回的消息格式。

一、自定义条件查询

0x01 需求分析

在页面输入查询条件，查询符合条件的页面信息。

查询条件如下：

站点Id：精确匹配

模板Id：精确匹配

页面别名：模糊匹配

0x02 服务端

Dao层

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

单元测试

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

1、指定站点id、模板id作为查询条件

//自定义条件查询
@Test
public void testDiyFindAll(){
   
    //精确匹配条件值
    CmsPage cmsPage = new CmsPage();
    cmsPage.setSiteId("5a751fab6abb5044e0d19ea1");
    cmsPage.setTemplateId("5a925be7b00ffc4b3c1578b5");
    
    //条件匹配器,用于模糊匹配
    ExampleMatcher matching = ExampleMatcher.matching();
    
    //条件查询实例
    Example<CmsPage> example = Example.of(cmsPage, matching);

    //分页参数
    int page = 0;
    int size = 20;
    Pageable pageable = PageRequest.of(page,size);

    //调用dao
    Page<CmsPage> all = cmsPageRepository.findAll(example, pageable);
    List<CmsPage> content = all.getContent();
    System.out.println(content);
}

查询结果

在上面的代码基础上，增加 ExampleMatcher 实例的一些属性作为模糊查询的参数，增加的代码如下

cmsPage.setPageAliase("详细");
//条件匹配器,用于模糊匹配
ExampleMatcher matching = ExampleMatcher.matching()
       .withMatcher("pageAliase",ExampleMatcher.GenericPropertyMatchers.contains());

.withMatcher 的第一个参数表示要将哪个字段进行匹配，第二个则是要使用的匹配器；

ExampleMatcher.GenericPropertyMatchers 有多个匹配器，这里我们用 .contains() 进行模糊匹配

查询结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UP39KAD7-1595564194374)(C:\Users\root\AppData\Roaming\Typora\typora-user-images\image-20200319175137244.png)]

Service层

@Autowired
CmsPageRepository cmsPageRepository;

/**
 * 分页查询
 * @param page 页号
 * @param size 每页大小
 * @param queryPageRequest 查询条件
 * @return
 */
public QueryResponseResult findList(int page,int size,QueryPageRequest queryPageRequest) {
   
    //判断条件对象是否为空
    if(queryPageRequest == null){
   
        queryPageRequest = new QueryPageRequest();
    }

    //匹配条件值
    CmsPage cmsPage = new CmsPage();

    //设置条件值
    //站点ID
    if(!StringUtil.isNullOrEmpty(queryPageRequest.getSiteId())){
   
        cmsPage.setSiteId(queryPageRequest.getSiteId());
    }
    //模板ID
    if(!StringUtil.isNullOrEmpty(queryPageRequest.getTemplateId())){
   
        cmsPage.setTemplateId(queryPageRequest.getTemplateId());
    }

    //站点别名
    if(!StringUtil.isNullOrEmpty(queryPageRequest.getPageAliase())){
   
        cmsPage.setPageAliase(queryPageRequest.getPageAliase());
    }

    //条件匹配器，用于模糊查询
    ExampleMatcher exampleMatcher = ExampleMatcher.matching()
            .withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains());


    //条件查询实例
    Example<CmsPage> example = Example.of(cmsPage, exampleMatcher);

    //过滤条件
    if(page <= 0){
   
        page = 1;
    }
    if(size <= 0){
   
        size = 10;
    }
    page = page - 1;

    //创建分页查询参数
    PageRequest pageable = PageRequest.of(page, size);

    //分页查询数据
    Page<CmsPage> all = cmsPageRepository.findAll(example, pageable);

    //整理查询到的数据
    QueryResult queryResult = new QueryResult();
    queryResult.setList(all.getContent());
    queryResult.setTotal(all.getTotalElements());

    //返回结果
    return new QueryResponseResult(CommonCode.SUCCESS,queryResult);
}

Controller层无需修改

使用SwaggerUI测试

参数

查询结果

从查询结果中我们可以看出，根据我们输入的条件，查询到了指定 sizeId 并且 pageAliase 包含预览的信息。

0x03 前端

页面

1、增加查询表单

在el-table上方添加该表单

<!--查询表单-->
<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、新增数据模型对象

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

3、在钩子方法中获取 siteList 站点列表（这里暂时用静态数据代替）

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

API调用

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

//public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'  //ES6 导入
import querystring from "querystring"
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre
//页面查询
export const page_list = (page,size,params) => {
   

  //将json对象转成key/value对
  let queryString = querystring.stringify(params);
  //定义方法，请求服务端查询接口
  return http.requestQuickGet(apiUrl + '/cms/page/list/'+page+'/'+ size +'?' + queryString)
}

2、页面调用api方法

//查询
query:function () {
   
  //调用服务端接口
  cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) =>{
   
    console.log(res)
    //将res结果数据赋值给数据模型对象
    this.list = res.queryResult.list
    this.total = res.queryResult.total
  })
}

3、测试

二、新增页面

0x01 准备工作，站点和模板API

在配置新增页面的功能之前，我们先配置两个接口，用于获取站点和模板的信息

Dao层

CmsSizeRepository

/**
 * 继承MongoDB自带的Repository
 */
public interface CmsSizeRepository extends MongoRepository<CmsSite,String> {
   
}

CmsTemplateRepository

/**
 * 继承MongoDB自带的Repository
 */
public interface CmsTemplateRepository extends MongoRepository<CmsTemplate,String> {
   

}

定义查询模型

QuerySizeRequest

package com.xuecheng.framework.domain.cms.request;

import com.xuecheng.framework.model.request.RequestData;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.util.Date;

@Data
public class QuerySizeRequest extends RequestData {
   
    //站点ID
    @ApiModelProperty("站点ID")
    private String siteId;
    //站点名称
    @ApiModelProperty("站点名称")
    private String siteName;
    //站点域
    @ApiModelProperty("站点域")
    private String siteDomain;
    //站点端口
    @ApiModelProperty("站点端口")
    private String sitePort;
    //站点访问地址
    @ApiModelProperty("站点访问地址")
    private String siteWebPath;
    //创建时间
    @ApiModelProperty("创建时间")
    private Date siteCreateTime;
}

QueryTemplateRequest

package com.xuecheng.framework.domain.cms.request;

import com.xuecheng.framework.model.request.RequestData;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

@Data
public class QueryTemplateRequest extends RequestData {
   
    //站点ID
    @ApiModelProperty("站点ID")
    private String siteId;
    //模版ID
    @ApiModelProperty("模版ID")
    private String templateId;
    //模版名称
    @ApiModelProperty("模版名称")
    private String templateName;
    //模版参数
    @ApiModelProperty("模版参数")
    private String templateParameter;
    //模版文件Id
    @ApiModelProperty("模版文件Id")
    private String templateFileId;
}

定义响应模型

CmsSizeResult

@Data
public class CmsSizeResult extends ResponseResult {
   
    CmsSite cmsSite;
    public CmsSizeResult(ResultCode resultCode, CmsSite cmsSite) {
   
        super(resultCode);
        this.cmsSite = cmsSite;
    }
}

CmsTemplateResult

@Data
public class CmsTemplateResult extends ResponseResult {
   
    CmsTemplate cmsTemplate;
    public CmsTemplateResult(ResultCode resultCode, CmsTemplate cmsTemplate) {
   
        super(resultCode);
        this.cmsTemplate = cmsTemplate;
    }
}

Service层

SiteService

@Service
public class SiteService {
   
    @Autowired
    CmsSiteRepository cmsSiteRepository;

    /**
     * 查询所有的站点信息
     * @return
     */
    public QueryResponseResult findList(){
   
        //获取所有的站点信息
        List<CmsSite> all = cmsSiteRepository.findAll();
        if(all == null){
   
            return new QueryResponseResult(CommonCode.FAIL, null);
        }
        //查询响应模板
        QueryResult<CmsSite> queryResult = new QueryResult<CmsSite>();
        queryResult.setList(all);