練手項目2筆記之day03

文章目錄

1. 自定義條件查詢

1. 需求分析

在頁面輸入查詢條件，查詢符合條件的頁面信息

查詢條件如下：

站點id：精確匹配

模板id：精確匹配

頁面別名：模糊匹配

2. 服務端

1. dao

還是用CmsPageRepository的findAll()方法，參數多了Example，無需定義

測試findAll方法實現自定義條件查詢

@Test
public void testFindAllByExample(){

  // 分頁參數
  int page = 0;
  int size = 10;
  Pageable pageable = PageRequest.of(page,size);

  // 條件值對象
  CmsPage cmsPage = new CmsPage();
  //        cmsPage.setSiteId("5a751fab6abb5044e0d19ea1");
  cmsPage.setPageAliase("輪播");
  // 條件匹配器
  ExampleMatcher exampleMatcher = ExampleMatcher.matching();
  exampleMatcher = exampleMatcher.withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains());
  // 定義example
  Example<CmsPage> example = Example.of(cmsPage,exampleMatcher);
  Page<CmsPage> all = cmsPageRepository.findAll(example, pageable);
  List<CmsPage> content = all.getContent();
  System.out.println(content);
}

2. Service

在PageService的findlist方法中增加自定義條件查詢代碼

public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest) {
  // 如果穿的對象爲空
  if(queryPageRequest==null){
    queryPageRequest = new QueryPageRequest();
  }

  // 自定義條件查詢
  // 條件匹配器
  ExampleMatcher exampleMatcher = ExampleMatcher.matching()
    .withMatcher("pageAliase",ExampleMatcher.GenericPropertyMatchers.contains());
  // 條件值對象
  CmsPage cmsPage = new CmsPage();
  // 設置條件值
  // 站點id
  if(StringUtils.isNotEmpty(queryPageRequest.getSiteId())){
    cmsPage.setSiteId(queryPageRequest.getSiteId());
  }
  // 設置模板id
  if(StringUtils.isNotEmpty(queryPageRequest.getTemplateId())){
    cmsPage.setTemplateId(queryPageRequest.getTemplateId());
  }
  // 設置頁面別名
  if(StringUtils.isNotEmpty(queryPageRequest.getPageAliase())){
    cmsPage.setPageAliase(queryPageRequest.getPageAliase());
  }

  // 定義條件對象
  Example<CmsPage> example = Example.of(cmsPage,exampleMatcher);

  // 分頁參數
  if(page<=0){
    page=1;
  }
  if(size<=0){
    size=10;
  }
  page = page-1;
  Pageable pageable = PageRequest.of(page,size);
  Page<CmsPage> all = cmsPageRepository.findAll(example,pageable);

  QueryResult queryResult = new QueryResult();
  queryResult.setTotal(all.getTotalElements());//數據總記錄數
  queryResult.setList(all.getContent());//數據列表
  QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult);
  return queryResponseResult;
}

3. controller無需修改

4. 測試

用debug模式，使用SwaggerUI測試

3. 前端

1. 頁面

增加查詢表單

數據模型對象，增加siteList, pageAliase, siteId

在鉤子方法中構建siteList站點列表

<template>
<!--編寫頁面靜態部分，即view部分-->
<div>
  <!--查詢表單-->
  <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>
  <el-button type="primary" size="small" v-on:click="query">查詢</el-button>
  <el-table
            :data="list"
            stripe
            style="width: 100%">
    <el-table-column type="index" width="60">
  </el-table-column>
    <el-table-column prop="pageName" label="頁面名稱" width="120">
  </el-table-column>
    <el-table-column prop="pageAliase" label="別名" width="120">
  </el-table-column>
    <el-table-column prop="pageType" label="頁面類型" width="150">
  </el-table-column>
    <el-table-column prop="pageWebPath" label="訪問路徑" width="250">
  </el-table-column>
    <el-table-column prop="pagePhysicalPath" label="物理路徑" width="250">
  </el-table-column>
    <el-table-column prop="pageCreateTime" label="創建時間" width="180">
  </el-table-column>
  </el-table>
  <el-pagination
                 layout="prev, pager, next"
                 :total="total"
                 :page-size="params.size"
                 :current-page="params.page"
                 @current-change="changePage"
                 style="float:right">
  </el-pagination>
  </div>
</template>
<script>
  // 編寫頁面靜態部分，即model和VM部分
  import * as cmsApi from '../api/cms'

  export default {
    data() {
      return {
        siteList: [],//站點列表
        list: [],
        total: 0,
        params: {
          siteId: '',
          pageAliase: '',
          page: 2,//頁碼
          size: 10 // 每頁顯示個數
        }
      }
    },
    methods: {
      query: function () {
        // alert('查詢');
        // 調用服務端的接口
        cmsApi.page_list(this.params.page, this.params.size,this.params).then((res) => {
          // 將res結果數據賦值給數據模型對象
          this.list = res.queryResult.list;
          this.total = res.queryResult.total;
        })
      },
      changePage: function (page) {
        // 調用query方法
        this.params.page = page;
        this.query();
      }
    },
    mounted() {
      //默認查詢頁面
      this.query();
      // 初始化站點列表
      this.siteList = [
        /* {
          siteId: '5a751fab6abb5044e0d19ea1',
          siteName: '門戶主站'
        }.
        {
          siteId: '102'.
          siteName: '測試站'
        }*/

        {
          siteId:'5a751fab6abb5044e0d19ea1',
          siteName:'門戶主站'
        },
        {
          siteId:'102',
          siteName:'測試站'
        }
      ]
    }
  }
</script>
<style>
  /*編寫頁面樣式，不是必須*/
</style>

2. api調用

向服務端傳遞查詢條件，修改cms.js

// 頁面查詢
export const page_list = (page,size,params) =>{
  // 將params對象數據拼裝成key/value串
  let queryStr = querystring.stringify(params);
  // 請求服務端的頁面查詢接口
  return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+'?'+queryStr)
}

頁面調用api方法，在methods方法中，見頁面部分代碼

測試，成功，記得前後端程序都要開…

2. 新增頁面

1. 新增頁面接口定義

1. 定義響應模型

已經定義好了

@Data
public class CmsPageResult extends ResponseResult {
  CmsPage cmsPage;
  public CmsPageResult(ResultCode resultCode,CmsPage cmsPage) {
    super(resultCode);
    this.cmsPage = cmsPage;
  }
}

2. 定義添加api

在api中添加接口

// 新增頁面
@ApiOperation("新增頁面")
public CmsPageResult add(CmsPage cmsPage);

2. 新增頁面服務端開發

1. 頁面唯一索引

在cms_page集上創建頁面名稱、站點id、頁面webpath爲唯一索引

studio 3T，集合上右鍵，add index，選取要添加的field，選擇unique，成功會多個索引

2. dao

添加根據頁面名稱、站點Id、頁面webpath查詢頁面方法，此方法用於校驗頁面是否存在

// 根據頁面名稱、站點id、頁面webpath查詢
CmsPage findByPageNameAndSiteIdAndPageWebPath(String pageName,String siteId,String pageWebPath);

使用的是本身的save方法

3. service

// 新增頁面
public CmsPageResult add(CmsPage cmsPage){
  // 校驗頁面名稱、站點id、頁面webpath的唯一性
  // 根據頁面名稱、站點id、頁面webpath去cms_page集合，如果查到說明此頁面已經存在，如果查詢不到繼續添加
  CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath());
  if(cmsPage1==null){
    // 調用dao新增頁面
    cmsPage.setPageId(null);// 添加頁面主鍵由springdata自動生成
    cmsPageRepository.save(cmsPage);
    return new CmsPageResult(CommonCode.SUCCESS,cmsPage);
  }
  // 添加失敗
  return new CmsPageResult(CommonCode.FAIL,null);
}

4. controller

post方法提交，參數需要寫requestbody註解

@Override
@PostMapping("/add")
public CmsPageResult add(@RequestBody CmsPage cmsPage) {
  return pageService.add(cmsPage);
}

5. 接口測試

同之前方法，post有example，直接選中，稍微修改即可

3. 新增頁面前端開發

1. 新增頁面

1. 編寫page_add.vue頁面

使用Element-UI的form組件編寫添加表單內容，效果如下：

創建page_add.vue頁面
配置路由

在cms模塊的路由文件中配置“添加頁面”的路由：

{path:'/cms/page/add',name:'新增頁面',component: page_add,hidden:true}

注意：由於“添加頁面”不需要顯示爲一個菜單，這裏hidden設置爲true隱藏菜單

測試

在頁面列表添加“添加頁面”的按鈕

實際情況是用戶進入頁面查詢列表，點擊“新增頁面”按鈕進入新增頁面窗口

</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>
<router-link :to="{path:'/cms/page/add',query:{
                  page: this.params.page,
                  siteId: this.params.siteId
                  }}">
  <el-button type="primary" size="small">新增頁面</el-button>
</router-link>

說明：router-link是vue提供的路由功能，用於在頁面生成路由鏈接，最終在html渲染後就是<a標籤

to：目標路由地址

完善頁面內容：

<template>
<!--編寫頁面靜態部分，即view部分-->
<div>
  <el-form :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm">
    <el-form-item label="所屬站點" prop="siteId">
      <el-select v-model="pageForm.siteId" placeholder="請選擇站點">
        <el-option
                   v-for="item in siteList"
                   :key="item.siteId"
                   :label="item.siteName"
                   :value="item.siteId">
  </el-option>
  </el-select>
  </el-form-item>
    <el-form-item label="選擇模版" prop="templateId">
      <el-select v-model="pageForm.templateId" placeholder="請選擇">
        <el-option
                   v-for="item in templateList"
                   :key="item.templateId"
                   :label="item.templateName"
                   :value="item.templateId">
  </el-option>
  </el-select>
  </el-form-item>
    <el-form-item label="頁面名稱" prop="pageName">
      <el-input v-model="pageForm.pageName" auto-complete="off"></el-input>
  </el-form-item>
    <el-form-item label="別名" prop="pageAliase">
      <el-input v-model="pageForm.pageAliase" auto-complete="off"></el-input>
  </el-form-item>
    <el-form-item label="訪問路徑" prop="pageWebPath">
      <el-input v-model="pageForm.pageWebPath" auto-complete="off"></el-input>
  </el-form-item>
    <el-form-item label="物理路徑" prop="pagePhysicalPath">
      <el-input v-model="pageForm.pagePhysicalPath" auto-complete="off"></el-input>
  </el-form-item>
    <el-form-item label="類型">
      <el-radio-group v-model="pageForm.pageType">
        <el-radio class="radio" label="0">靜態</el-radio>
        <el-radio class="radio" label="1">動態</el-radio>
  </el-radio-group>
  </el-form-item>
    <el-form-item label="創建時間">
      <el-date-picker type="datetime" placeholder="創建時間" v-model="pageForm.pageCreateTime">
  </el-date-picker>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="addSubmit">提交</el-button>
    <el-button type="primary" @click="go_back">返回</el-button>
  </div>
  </div>
</template>
<script>
  // 編寫頁面靜態部分，即model和VM部分
  import * as cmsApi from '../api/cms'

  export default {
    data() {
      return {
        siteList: [],
        templateList: [],
        pageForm:{
          siteId:'',
          templateId:'',
          pageName: '',
          pageAliase: '',
          pageWebPath: '',
          pageParameter:'',
          pagePhysicalPath:'',
          pageType:'',
          pageCreateTime: new Date()
        },
        pageFormRules: {
          siteId:[
            {required: true, message: '請選擇站點', trigger: 'blur'}
          ],
          templateId:[
            {required: true, message: '請選擇模版', trigger: 'blur'}
          ],
          pageName: [
            {required: true, message: '請輸入頁面名稱', trigger: 'blur'}
          ],
          pageWebPath: [
            {required: true, message: '請輸入訪問路徑', trigger: 'blur'}
          ],
          pagePhysicalPath: [
            {required: true, message: '請輸入物理路徑', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      addSubmit: function () {
        this.$refs.pageForm.validate((valid) => {
          if (valid) {
            // 確認提示
            this.$confirm('您確認提交嗎?', '提示', {
              confirmButtonText: '確定',
              cancelButtonText: '取消',
            }).then(() => {
              // 調用page_add方法請求服務端的新增頁面接口
              cmsApi.page_add(this.pageForm).then(res=>{
                if(res.success){
                  /*this.$message({
                    message: '提交成功',
                    // 將表單清空

                  })*/
                  this.$message.success('提交成功');
                  //將表單清空
                  this.$refs['pageForm'].resetFields();
                }else{
                  this.$message.error('提交失敗')
                }
              });
            })

          }
        })
      },
      // 返回
      go_back: function () {
        this.$router.push({
          path:'/cms/page/list',
          query:{
            // 取出路由中的參數
            page:this.$route.query.page,
            siteId:this.$route.query.siteId
          }
        })
      }
    },
    mounted() {
      //初始化站點列表
      this.siteList = [
        {
          siteId:'5a751fab6abb5044e0d19ea1',
          siteName:'門戶主站'
        },
        {
          siteId:'102',
          siteName:'測試站'
        }
      ]
      //模板列表
      this.templateList = [
        {
          templateId:'5a962b52b00ffc514038faf7',
          templateName:'首頁'
        },
        {
          templateId:'5a962bf8b00ffc514038fafa',
          templateName:'輪播圖'
        }
      ]
    }
  }
</script>
<style>
  /*編寫頁面樣式，不是必須*/
</style>

Form Attributes說明：

model 表單數據對象 ; rules 表單驗證規則 ;

Form-Item Attributes說明：

prop 表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的
label 標籤文本

數據對象 ,見之前代碼
站點及模板數據（先使用靜態數據）

在created鉤子方法中定義，created是在html渲染之前執行，這裏推薦使用created。

2. 添加返回

進入新增頁面後只能通過菜單再次進入頁面列表，可以在新增頁面添加“返回”按鈕，點擊返回按鈕返回到頁面列表。

新增頁面按鈕帶上參數說明：query表示在路由url上帶上參數
定義返回方法在page_add.vue上定義返回按鈕在page_add.vue上定義返回方法

說明：this.$route.query 表示取出路由上的參數列表，有兩個取路由參數的方法

通過在路由上添加key/value串使用this.$route.query來取參數，例如：/router1?id=123 ,/router1?id=456可以通過this.$route.query.id獲取參數id的值。
通過將參數作爲路由一部分進行傳參數使用this.$route.params來獲取，例如：定義的路由爲/router1/:id ，請求/router1/123時可以通過this.$route.params.id來獲取，此種情況用this.$route.query.id是拿不到的

查詢列表支持回顯

進入查詢列表，從url中獲取頁碼和站點id並賦值給數據模型對象，從而實現頁面回顯。

// 還未渲染的時候執行
created(){
// 取出路由中的參數，賦值給數據對象
this.params.page = Number.parseInt(this.$route.query.page || 1);
this.params.siteId = this.$route.query.siteId || ''
},

小技巧：使用 ||返回第一個有效值

3. 表單校驗

配置校驗規則在數據模型中配置校驗規則
點擊提交按鈕觸發校驗

在form表單上添加 ref屬性（ref=“pageForm”）在校驗時引用此表單對象

執行校驗

2. api調用

在cms.js中定義page_add方法

// 新增頁面
export const page_add = params =>{
  return http.requestPost(apiUrl+'/cms/page/add/',params)
}

添加事件，代碼見之前
- 確認提交窗口
- 提示操作結果

3. 修改頁面

修改頁面用戶操作流程：

用戶進入修改頁面，在頁面上顯示了修改頁面的信息
用戶修改頁面的內容，點擊“提交”，提示“修改成功”或“修改失敗”

1. 修改頁面接口定義

修改頁面需要定義的API如下：

// 根據頁面id查詢頁面信息
@ApiOperation("根據頁面id查詢頁面信息")
public CmsPage findById(String id);

// 修改頁面
@ApiOperation("修改頁面")
public CmsPageResult edit(String id,CmsPage cmsPage);

說明：提交數據使用post、put都可以，只是根據http方法的規範，put方法是對服務器指定資源進行修改，所以這裏使用put方法對頁面修改進行修改。

2. 修改頁面服務端開發

1. dao

使用Spring Data提供的findById方法完成根據主鍵查詢

使用Spring Data提供的save方法完成數據保存

2. service

// 根據頁面id查詢頁面
public CmsPage getById(String id){
  Optional<CmsPage> optional = cmsPageRepository.findById(id);
  if(optional.isPresent()){
    CmsPage cmsPage = optional.get();
    return cmsPage;
  }
  return null;
}

// 修改頁面
public CmsPageResult update(String id,CmsPage cmsPage){
  // 根據id從數據庫查詢頁面信息
  CmsPage one = this.getById(id);
  if(one!=null){
    // 準備更新數據
    // 設置要修改的數據
    // 更新頁面別名
    one.setPageAliase(cmsPage.getPageAliase());
    // 更新所屬站點
    one.setSiteId(cmsPage.getSiteId());
    // 更新模板id
    one.setTemplateId(cmsPage.getTemplateId());
    // 更新頁面名稱
    one.setPageName(cmsPage.getPageName());
    // 更新訪問路徑
    one.setPageWebPath(cmsPage.getPageWebPath());
    // 更新物理路徑
    one.setPagePhysicalPath(cmsPage.getPagePhysicalPath());
    // 提交修改
    cmsPageRepository.save(one);
    return new CmsPageResult(CommonCode.SUCCESS,one);
  }
  // 修改失敗
  return new CmsPageResult(CommonCode.FAIL,null);
}

3. Controller

@Override
@GetMapping("/get/{id}")
public CmsPage findById(@PathVariable("id") String id) {
  return pageService.getById(id);
}

@Override
@PutMapping("/edit/{id}")//使用普通方法，http中put表示更新
public CmsPageResult edit(@PathVariable("id") String id,@RequestBody CmsPage cmsPage) {
  return pageService.update(id,cmsPage);
}

3. 修改頁面前端開發

1. 頁面處理流程

如下：

進入頁面，通過鉤子方法請求服務端獲取頁面信息，並賦值給數據模型對象
頁面信息通過數據綁定到表單顯示
用戶修改信息點擊“提交”請求服務端修改頁面信息接口

2. 修改頁面

1. 編寫page_edit頁面

修改頁面的佈局提那家頁面，可以直接複製添加頁面，在添加基礎上修改

編寫頁面內容：

編寫page_edit.vue 頁面佈局同添加頁面
配置路由進入修改頁面傳入pageId

import page_edit from '@/module/cms/page/page_edit.vue';
{path:'/cms/page/edit/:pageId',name:'修改頁面',component: page_edit,hidden:true}

在頁面列表添加“編輯”鏈接

在page_list.vue上添加“操作”列

<el‐table‐column label="操作" width="80">
  <template slot‐scope="page">
    <el‐button
               size="small"type="text"
               @click="edit(page.row.pageId)">編輯
      </el‐button>
  </template>
  </el‐table‐column>

編寫edit方法

edit: function (pageId) {
  // 打開修改頁面
  this.$router.push({
    path:'/cms/page/edit/'+pageId
  })
}

測試

2. 頁面內容顯示

功能實現：進入修改頁面立即顯示要修改的頁面信息

定義api方法

// 根據id查詢頁面
export const page_get = id =>{
  return http.requestQuickGet(apiUrl+'/cms/page/get/'+id)
}

定義數據對象

進入修改頁面傳入pageId參數，在數據模型中添加pageId

<template>
<div>
  <el-form   :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm" >
    <el-form-item label="所屬站點" prop="siteId">
      <el-select v-model="pageForm.siteId" placeholder="請選擇站點">
        <el-option
                   v-for="item in siteList"
                   :key="item.siteId"
                   :label="item.siteName"
                   :value="item.siteId">
  </el-option>
  </el-select>
  </el-form-item>
    <el-form-item label="選擇模版" prop="templateId">
      <el-select v-model="pageForm.templateId" placeholder="請選擇">
        <el-option
                   v-for="item in templateList"
                   :key="item.templateId"
                   :label="item.templateName"
                   :value="item.templateId">
  </el-option>
  </el-select>
  </el-form-item>
    <el-form-item label="頁面名稱" prop="pageName">
      <el-input v-model="pageForm.pageName" auto-complete="off" ></el-input>
  </el-form-item>

    <el-form-item label="別名" prop="pageAliase">
      <el-input v-model="pageForm.pageAliase" auto-complete="off" ></el-input>
  </el-form-item>
    <el-form-item label="訪問路徑" prop="pageWebPath">
      <el-input v-model="pageForm.pageWebPath" auto-complete="off" ></el-input>
  </el-form-item>

    <el-form-item label="物理路徑" prop="pagePhysicalPath">
      <el-input v-model="pageForm.pagePhysicalPath" auto-complete="off" ></el-input>
  </el-form-item>
    <el-form-item label="數據Url" prop="dataUrl">
      <el-input v-model="pageForm.dataUrl" auto-complete="off" ></el-input>
  </el-form-item>
    <el-form-item label="類型">
      <el-radio-group v-model="pageForm.pageType">
        <el-radio class="radio" label="0">靜態</el-radio>
        <el-radio class="radio" label="1">動態</el-radio>
  </el-radio-group>
  </el-form-item>
    <el-form-item label="創建時間">
      <el-date-picker type="datetime" placeholder="創建時間" v-model="pageForm.pageCreateTime"></el-date-picker>
  </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="go_back">返回</el-button>
    <el-button type="primary" @click.native="editSubmit" :loading="addLoading">提交</el-button>
  </div>
  </div>
</template>
<script>
  import * as cmsApi from '../api/cms'
  export default{
    data(){
      return {
        //頁面id
        pageId:'',
        //模版列表
        templateList:[],
        addLoading: false,//加載效果標記
        //新增界面數據
        pageForm: {
          siteId:'',
          templateId:'',
          pageName: '',
          pageAliase: '',
          pageWebPath: '',
          dataUrl:'',
          pageParameter:'',
          pagePhysicalPath:'',
          pageType:'',
          pageCreateTime: new Date()
        },
        pageFormRules: {
          siteId:[
            {required: true, message: '請選擇站點', trigger: 'blur'}
          ],
          templateId:[
            {required: true, message: '請選擇模版', trigger: 'blur'}
          ],
          pageName: [
            {required: true, message: '請輸入頁面名稱', trigger: 'blur'}
          ],
          pageWebPath: [
            {required: true, message: '請輸入訪問路徑', trigger: 'blur'}
          ],
          pagePhysicalPath: [
            {required: true, message: '請輸入物理路徑', trigger: 'blur'}
          ]
        },
        siteList:[]
      }
    },
    methods:{
      go_back(){
        this.$router.push({
          path: '/cms/page/list', query: {
            page: this.$route.query.page,
            siteId:this.$route.query.siteId
          }
        })
      },
      editSubmit(){
        this.$refs.pageForm.validate((valid) => {
          if (valid) {
            this.$confirm('確認提交嗎？', '提示', {}).then(() => {
              this.addLoading = true;
              // 修改提交請求服務端的接口
              cmsApi.page_edit(this.pageId,this.pageForm).then((res) => {
                console.log(res);
                if(res.success){
                  this.addLoading = false;
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  //返回
                  this.go_back();

                }else{
                  this.addLoading = false;
                  this.$message.error('提交失敗');
                }
              });
            });
          }
        });
      }

    },
    created: function () {
      this.pageId=this.$route.params.pageId;
      //根據主鍵查詢頁面信息
      cmsApi.page_get(this.pageId).then((res) => {
        console.log(res);
        if(res){
          this.pageForm = res;
        }
      });
    },
    mounted:function(){

      //初始化站點列表
      this.siteList = [
        {
          siteId:'5a751fab6abb5044e0d19ea1',
          siteName:'門戶主站'
        },
        {
          siteId:'102',
          siteName:'測試站'
        }
      ]
      //模板列表
      this.templateList = [
        {
          templateId:'5a962b52b00ffc514038faf7',
          templateName:'首頁'
        },
        {
          templateId:'5a962bf8b00ffc514038fafa',
          templateName:'輪播圖'
        }
      ]
    }
  }
</script>
<style>

</style>

在created鉤子方法中查詢頁面信息
預覽回顯效果

3. api調用

定義api方法

// 修改頁面提交
export const page_edit = (id,params) =>{
  return http.requestPut(apiUrl+'/cms/page/edit/'+id,params)
}

提交按鈕，對應事件內容，見之前代碼
測試

4. 刪除頁面

用戶操作流程：

用戶進入用戶列表，點擊“刪除”
執行刪除操作，提示“刪除成功”或“刪除失敗”

1. 刪除頁面接口定義

// 刪除頁面
@ApiOperation("刪除頁面")
public ResponseResult delete(String id);

2. 刪除頁面服務端開發

1. dao

使用spring data提供的deleteById方法完成刪除

2. service

// 根據id刪除頁面
public ResponseResult delete(String id){
  // 先查詢一下
  Optional<CmsPage> optional = cmsPageRepository.findById(id);
  if(optional.isPresent()){
    cmsPageRepository.deleteById(id);
    return new ResponseResult(CommonCode.SUCCESS);
  }
  return new ResponseResult(CommonCode.FAIL);
}

3. controller

@Override
@DeleteMapping("/del/{id}")
public ResponseResult delete(String id) {
  return pageService.delete(id);
}

3. 前端

1. api方法

// 刪除頁面
export  const page_del = id =>{
  return http.requestDelete(apiUrl+'/cms/page/del/'+id)
}

2. 編寫頁面

在page_list.vue頁面添加刪除按鈕

<el-table-column label="操作" width="80">
  <template slot-scope="page">
    <el-button
               size="small" type="text"
               @click="edit(page.row.pageId)">編輯
    </el-button>
    <el-button
               size="small" type="text"
               @click="del(page.row.pageId)">刪除
    </el-button>
  </template>
</el-table-column>

刪除事件

del:function (pageId) {
  this.$confirm('您確認刪除嗎?', '提示', { }).then(() => {

    //調用服務端接口
    cmsApi.page_del(pageId).then(res=>{

      if(res.success){
        this.$message.success("刪除成功")
        //刷新頁面
        this.query()
      }else{
        this.$message.error("刪除失敗")
      }
    })
  })

}
},

5. 異常處理

1. 異常處理的問題分析

從添加頁面的service方法中，看到問題：

上面的代碼只要操作不成功，僅向用戶返回“錯誤代碼：1111，失敗信息：操作失敗”，無法區別具體的異常信息
service方法在執行過程出現異常在哪捕獲？在service的話每個都要加try/catch，在controller也都要價try/catch，代碼冗餘且不易維護

解決方案：

在service方法中的編碼順序是先校驗判斷，有問題拋出具體的異常信息，最後執行具體的業務操作，返回成功信息
在統一異常處理類中去捕獲異常，無需controller捕獲異常，向用戶返回統一規範的響應信息

2. 異常處理流程

系統對異常的處理使用統一的異常處理流程：

自定義異常類型
自定義錯誤代碼及錯誤信息
對於可預知的異常由程序員在代碼中主動拋出，由springMVC統一捕獲

可預知異常是程序員在代碼中手動拋出本系統定義的特定異常類型，通常信息齊全，會指定錯誤代碼及錯誤信息，獲取異常信息方便

對於不可預知的異常（運行時異常）由springMVC統一捕獲Exception類型的異常

不可預知異常通常是由於系統出現bug，或一些不可抗因素（電纜被挖斷），異常類型RuntimeException

可預知的異常及不可預知的運行時異常最終採用統一的信息格式（錯誤代碼+錯誤提示）表示，最終會隨請求響應給客戶端

異常拋出和處理流程

在controller、service和dao中程序員拋出自定義異常，springMVC拋出框架異常類型
統一由異常捕獲類捕獲異常，並進行處理
捕獲到自定義異常直接取出錯誤代碼和錯誤信息，響應給客戶
捕獲到非自定義異常類型首先從map中找該異常類型是否對應具體的錯誤代碼，如果有取出錯誤代碼和錯誤信息響應給客戶，如果從map中找不到異常類型對應的錯誤代碼統一代碼99999響應給客戶
將錯誤代碼及錯誤信息以json格式響應給用戶。

3. 可預知異常處理

1. 自定義異常類

在common工程定義異常類型

public class CustomException extends RuntimeException{

  // 錯誤代碼
  ResultCode resultCode;

  public CustomException(ResultCode resultCode){
    this.resultCode = resultCode;
  }

  public ResultCode getResultCode(){
    return resultCode;
  }
}

2. 異常拋出類

public class ExceptionCast {

  public static void cast(ResultCode resultCode){
    throw new CustomException(resultCode);
  }
}

3. 異常捕獲類

使用@ControllerAdvice和@ExceptionHandler註解來捕獲指定類型的異常

@ControllerAdvice// 控制器增強
public class ExceptionCatch {

  private static final Logger LOGGER = LoggerFactory.getLogger(ExceptionCatch.class);

  // 定義map，配置異常類型所對應的錯誤代碼
  private static ImmutableMap<Class<? extends Throwable>,ResultCode> EXCEPTIONS;
  // 定義map的builder對象，構建ImmutableMap
  protected static ImmutableMap.Builder<Class<? extends Throwable>,ResultCode> builder = ImmutableMap.builder();

  // 捕獲CustomException此類異常
  @ExceptionHandler(CustomException.class)
  @ResponseBody
  public ResponseResult customException(CustomException customException){
    // 記錄日誌
    LOGGER.error("catch exception:{}",customException.getMessage());
    ResultCode resultCode = customException.getResultCode();
    return new ResponseResult(resultCode);
  }

  // 捕獲Exception此類異常
  @ExceptionHandler(Exception.class)
  @ResponseBody
  public ResponseResult exception(Exception exception){
    // 記錄日誌
    LOGGER.error("catch exception:{}",exception.getMessage());
    if(EXCEPTIONS == null){
      EXCEPTIONS  = builder.build();//EXCEPTIONS構建成功
    }
    // 從EXCEPTIONS中找異常類型對應的錯誤代碼，如果找到，將錯誤代碼響應給用戶，如果找不到給用戶響應99999異常
    ResultCode resultCode = EXCEPTIONS.get(exception.getClass());
    if(resultCode != null){
      return new ResponseResult(resultCode);
    }else{
      // 返回99999
      return new ResponseResult(CommonCode.SERVER_ERROR);
    }

  }

  static {
    // 定義異常類型對應的錯誤代碼
    builder.put(HttpMessageNotReadableException.class,CommonCode.INVALID_PARAM);
  }
}

4. 異常處理測試

1. 定義錯誤代碼

每個業務操作的異常使用異常代碼去標識，已經被提前定義好了。

@ToString
public enum CmsCode implements ResultCode {
  CMS_ADDPAGE_EXISTSNAME(false,24001,"頁面名稱已存在！"),
  CMS_GENERATEHTML_DATAURLISNULL(false,24002,"從頁面信息中找不到獲取數據的url！"),
  CMS_GENERATEHTML_DATAISNULL(false,24003,"根據頁面的數據url獲取不到數據！"),
  CMS_GENERATEHTML_TEMPLATEISNULL(false,24004,"頁面模板爲空！"),
  CMS_GENERATEHTML_HTMLISNULL(false,24005,"生成的靜態html爲空！"),
  CMS_GENERATEHTML_SAVEHTMLERROR(false,24005,"保存靜態html出錯！"),
  CMS_COURSE_PERVIEWISNULL(false,24007,"預覽頁面爲空！");
  //操作代碼
  boolean success;
  //操作代碼
  int code;
  //提示信息
  String message;
  private CmsCode(boolean success, int code, String message){
    this.success = success;
    this.code = code;
    this.message = message;
  }

  @Override
  public boolean success() {
    return success;
  }

  @Override
  public int code() {
    return code;
  }

  @Override
  public String message() {
    return message;
  }
}

2. 異常處理測試

拋出異常

在controller、service、dao都可以拋出異常

修改PageService的add方法，添加拋出異常的代碼

// 新增頁面
public CmsPageResult add(CmsPage cmsPage){
  // 校驗cmsPage是否爲空
  if(cmsPage==null){
    // 拋出異常
  }
  // 校驗頁面名稱、站點id、頁面webpath的唯一性
  // 根據頁面名稱、站點id、頁面webpath去cms_page集合，如果查到說明此頁面已經存在，如果查詢不到繼續添加
  CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath());
  if(cmsPage1 !=null){
    // 頁面已經存在
    // 拋出異常，異常內容就是頁面已經存在
    ExceptionCast.cast(CmsCode.CMS_ADDPAGE_EXISTSNAME);
  }
  if(cmsPage1==null){
    // 調用dao新增頁面
    cmsPage.setPageId(null);
    cmsPageRepository.save(cmsPage);
    return new CmsPageResult(CommonCode.SUCCESS,cmsPage);
  }
  // 添加失敗
  return new CmsPageResult(CommonCode.FAIL,null);
}

啓動工程，掃描到異常捕獲的類ExceptionCatch

在SpringBoot的啓動類中添加

@ComponentScan(basePackages = {"com.xuecheng.framework"})//掃描common工程的類

前端展示異常信息

服務端響應信息如下

頁面提取異常處理

addSubmit(){
  this.$refs.pageForm.validate((valid) => {
    if (valid) {
      this.$confirm('確認提交嗎？', '提示', {}).then(() => {
        cmsApi.page_add(this.pageForm).then((res) => {
          console.log(res);
          if(res.success){
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$refs['pageForm'].resetFields();
          }else if(res.message){
            this.$message.error(res.message);
          }else{
            this.$message.error('提交失敗');
          }
        });
      });
    }
  });
}

4. 不可預知異常處理

1. 定義異常捕獲方法

1. 異常拋出測試

使用postman測試添加頁面，不輸入cmsPost信息，提交，報錯信息如下

org.springframework.http.converter.HttpMessageNotReadableException

上邊的響應信息在客戶端無法解析

在異常捕獲類中添加對Exception異常的捕獲

@ExceptionHandler(Exception.class)
@ResponseBody
public ResponseResult exception(Exception exception){
  //記錄日誌
  LOGGER.error("catch exception:{}",exception.getMessage());
  return null;
}

2. 異常捕獲方法

針對上邊的問題解決方案是：

我們在map中配置HttpMessageNotReadableException和錯誤代碼
在異常捕獲類中對Exception異常進行捕獲，並從map中獲取異常類型對應的錯誤代碼，如果存在錯誤代碼返回此錯誤，否則統一返回99999錯誤。

具體開發實現如下：

在通用錯誤代碼類ConmmonCode中配置非法參數異常

INVALID_PARAM(false,10003,"非法參數！"),

在異常捕獲類中配置HttpMessageNotReadableException爲非法參數異常

異常捕獲代碼見之前的代碼

3. 異常處理測試

仍然模擬“問題”中的測試步驟，異常結果爲“非法參數”

6. 實戰

1. 查詢條件完善

頁面查詢條件增加：頁面名稱、頁面類型

頁面名稱對應CmsPage模型類中的pageName屬性

頁面類型對應CmsPage模型類中的pageType屬性

查詢要求：

頁面名稱：模糊查詢

頁面類型：精確匹配，頁面類型包括：靜態和動態，在數據庫靜態用“0”，動態用“1”

2. 頁面屬性增加DataUrl

在CmsPage.java模型類型中有一個dataUrl屬性，此屬性在頁面靜態化時需要填寫。

本需求要求：

在新增頁面增加dataUrl輸入框，並支持添加
在修改頁面增加dataUrl輸入框，並支持修改