学成在线项目总结 - Day3 CMS页面管理开发

自定义查询页面

能够使数据库数据显示在页面中之后，我们还需要根据不同条件（站点id，模板id，页面别名等等）来查询所需页面信息。而有些查询需要支持模糊匹配，有些必须精确匹配。

我们需要使用到CmsPageRepository中的findAll(Example<S> var1, Pageable var2)方法实现。

这个功能的基本逻辑是：

• 根据自定义查询输入的查询条件，创建一个CmsPage对象
• 将对象传递进Example对象中，通过条件匹配器ExampleMatcher来匹配查询
• 此时，将这个Example对象传递进CmsPageRepository的findAll()方法中，从所有页面里查询是否含有匹配的数据

精确匹配测试代码

    @Test
    public void testFindAllByExample() {
        // 分页参数
        int page = 0; // 页码从0开始
        int size = 10;
        Pageable pageable = PageRequest.of(page, size);

        // 条件值对象
        CmsPage cmsPage = new CmsPage();
        cmsPage.setSiteId("5a751fab6abb5044e0d19ea1");
        // 条件匹配器
        ExampleMatcher exampleMatcher = ExampleMatcher.matching();
        // 定义Example
        Example<CmsPage> example = Example.of(cmsPage, exampleMatcher);
        Page<CmsPage> all = cmsPageRepository.findAll(example, pageable);
        List<CmsPage> content = all.getContent();
        System.out.println(content);
//        cmsPageRepository.findAll();
    }

如果需要模糊匹配，如查询页面别名时，还可以在exampleMatcher后添加如下代码，定义条件匹配器：

exampleMatcher = exampleMatcher.withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains()); 
//页面别名模糊查询，需要自定义字符串的匹配器实现模糊查询
//ExampleMatcher.GenericPropertyMatchers.startsWith()//开头匹配

注意每次使用匹配器都需要让它返回给一个ExampleMatcher对象.

服务端添加查询代码

实际上只需将刚才写的测试代码复制到业务层中即可。
需要注意的是由于可能存在queryPageRequest请求值为空的情况，所以需要提前添加判定
if (queryPageRequest == null) {queryPageRequest = new QueryPageRequest();}
而后面还要使用if语句判定哪些数据作为查询条件输入了，并将有值的赋值给CmsPage对象。

代码：自定义页面查询功能

前端部分的实现

我们需要通过前端部分的表单输入，来得到查询条件，从而使后端按条件查询。
后端查询出相应结果后，还要通过前端来展示结果。

以下是实现这一过程的步骤

• 创建查询表单
  
• 为站点下拉框填充数据（在<script>中的钩子方法中实现）
• 在data()中添加需要的数据模型对象siteId和pageAliase，查询方法中也要传入相应的参数。
• 然后我们还要向服务端传递查询条件，具体就是把查询的内容拼接到cms.js中的url上。

  // 定义方法，请求服务端页面查询接口
  export const pagelist = (page, size, params) =>{
  // 将params传递的数据拼装成key/value串
  let queryString = querystring.stringify(params);
  // 请求服务端的页面查询接口
  // 通过ajax调用获取页面数据
  return http.requestQuickGet(apiUrl + '/cms/page/list/' + page + '/' + size + '?' + queryString);
  }

代码：自定义查询前端部分

新增页面

后端开发

定义Api接口

• 这部分的功能是新增一个页面的数据信息，首先想到在api中添加相应接口。
  • Api接口的功能是什么？就是一个add()方法：添加一个CmsPage对象，并以CmsPageResult为返回类型，提示添加成功与否。

定义业务层接口实现类

这里重写接口中的add()方法，将CmsPage对象传递进，通过cmsPageRepository的save()方法将新页面存进数据库，返回成功与否的提示。

需要注意的是，为了防止重复添加相同的页面，我们在查询类里定义一个新的查询方法，根据siteId, pageWebPath 和 pageName查询新建的页面是否已经存在，如果不存在，我们才执行保存新增页面的操作。

前端开发

• 我们在查询列表界面增加一个“新增页面”按钮。这里使用到<router-link>标签，使按钮导向一个新建页面。
• 在index.js中添加新增页面路由
• 新增页面的完善
  • 添加返回按钮：
    • 为了回到原来的页面，我们需要知道原页面的页码和查询的站点id。
    • 在查询页面，通过this.params.page给返回按钮传参
    • 在新增页面，通过this.$route.query.page获取参数
    • 返回到查询页面，我们要在页面渲染前获取页码和站点id数据，所以将参数传递到钩子方法created()中
  • 表单验证
    • 在<el-form>中添加校验名称:rules="pageFormRules"
    • 在data()配置校验规则

前端Api调用

• 在cms.js中创建一个方法调用服务端接口，将表达数据提交到后台。
• 完善提交过程：增加提交确认流程和提交后清空列表

新增页面前后端

修改页面

定义接口

• 通过Id查询页面接口 public CmsPage findById(String id);
• 修改页面接口public CmsPageResult edit(String id,CmsPage cmsPage);

业务层实现

• 在业务层编写具体实现查询Id和修改指定页面的代码
• 在Controller中重写接口定义的方法（即使用业务层方法）
  • 注意：提交json数据要加@Requestbody注解，以及@PathVariable
  • getmapping，putmapping，postmapping对应查询，修改，新建功能的url

后端代码

前端实现

• 编写编辑页面，和新建页面类似
• 在index.js中配置路由，传入pageId
• 在pagelist页面添加编辑页面链接，编写edit方法，传入pageId以打开页面
• 在编辑页面data()中添加pageId，以接收页面信息
• 在钩子方法中根据pageId获取页面信息
• 定义api方法，和服务端建立连接：获取页面信息 + 提交编辑内容

前端代码

增删改查操作的流程总结

服务端

• 定义接口，确定需求。
  • 比如新增页面，就需要add()方法
• 编写业务层代码
  • 就是实现需求的具体操作
• Controller中调用业务层方法
  • 即重写所定义的接口中的方法，并将此方法映射到对应路径(如@PostMapping(‘/add’))
  • 注意，需使用@RequestBody获取；路径中的占位符使用@PathVariable获取

前端

• 创建所需页面
  • 页面要由父页面导向，需要父页面中添加标签，为其添加导向该页面的路由信息；
  • 如果还需要传参，如进入某一数据的编辑界面，那么要在钩子方法中获取其pageId信息，通过$route从服务端获取
• 在cms.js配置api路由，和服务端建立连接
• 在index.js中配置页面路由

异常处理

• 创建统一的异常处理类，用来捕获异常
• 在业务层、持久层或Controller中执行方法先抛出异常，再处理正确代码
• 异常分为可预知异常和不可预知异常

异常处理

本作品采用《CC 协议》，转载必须注明作者和本文链接