學成在線筆記三：CMS管理頁面開發

注意：

我是用的element-ui的版本位：2.10.1，若要使用本博客中的前端代碼，建議修改爲相同版本。

修改方式：修改根目錄下的package.json中dependencies中的element-ui的版本號爲：2.10.1 即可

自定義條件查詢

需求分析

頁面自定條件包含：

• 站點ID：精確匹配
• 模板ID：精確匹配
• 頁面別名：模糊匹配
• …

服務端開發

CmsPageService

修改findList方法

public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest) {
        // 頁面別名模糊查詢
        ExampleMatcher pageAliaseMatcher = ExampleMatcher.matching().withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains());
        
        CmsPage params = new CmsPage();
        // 站點ID
        if (StringUtils.isNotBlank(queryPageRequest.getSiteId())) {
            params.setSiteId(queryPageRequest.getSiteId());
        }
    	// 頁面別名
        params.setPageAliase(queryPageRequest.getPageAliase());

        // 構建查詢條件
        Example<CmsPage> cmsPageExample = Example.of(params, pageAliaseMatcher);

        if (page <= 0) {
            page = 1;
        }
        // 頁碼從0開始
        page = page - 1;
        // 查詢
        Page<CmsPage> pageResult = cmsPageRepository.findAll(cmsPageExample, PageRequest.of(page, size));
        QueryResult<CmsPage> cmsPageQueryResult = new QueryResult<>();
        cmsPageQueryResult.setList(pageResult.getContent());
        cmsPageQueryResult.setTotal(pageResult.getTotalElements());

        return new QueryResponseResult(CommonCode.SUCCESS, cmsPageQueryResult);
    }

CmsSiteControllerApi

由於前端頁面需要按站點ID查詢，所以前端需要展示站點的下拉選擇，需要新增API

在xc-service-api/cms中新增CmsSiteControllerApi

package com.xuecheng.api.cms;

import com.xuecheng.framework.model.response.QueryResponseResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

@Api(value = "CMS站點管理接口", description = "CMS頁面站點管理接口，提供站點的增刪改查")
public interface CmsSiteControllerApi {

    @ApiOperation("查詢所有站點信息")
    QueryResponseResult findAll();

}

CmsSiteController

在xc-service-manage-cms中新增Controller

package com.xuecheng.manage_cms.controller;

import com.xuecheng.api.cms.CmsSiteControllerApi;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.manage_cms.service.CmsSiteService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("cms/site")
public class CmsSiteController implements CmsSiteControllerApi {

    @Autowired
    private CmsSiteService cmsSiteService;

    @Override
    @GetMapping
    public QueryResponseResult findAll() {
        return cmsSiteService.findAll();
    }

}

CmsSiteService

package com.xuecheng.manage_cms.service;

import com.xuecheng.framework.domain.cms.CmsSite;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.manage_cms.dao.CmsSiteRepository;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Slf4j
@Service
public class CmsSiteService {

    @Autowired
    private CmsSiteRepository cmsSiteRepository;

    public QueryResponseResult findAll() {
        List<CmsSite> cmsSiteList = cmsSiteRepository.findAll();
        QueryResult<CmsSite> queryResult = new QueryResult<>(cmsSiteList, cmsSiteList.size());
        return new QueryResponseResult(CommonCode.SUCCESS, queryResult);
    }

}

CmsSiteRepository

package com.xuecheng.manage_cms.dao;

import com.xuecheng.framework.domain.cms.CmsSite;
import org.springframework.data.mongodb.repository.MongoRepository;

public interface CmsSiteRepository extends MongoRepository<CmsSite, String> {
}

前端開發

頁面修改

修改src/module/cms/page/page_list.vue中的內容，主要爲：

• 新增data綁定的數據
• 新增查詢站點列表的方法
• 新增用於錄入查詢條件的輸入框和下拉選擇框

1. 在template中的查詢按鈕之前添加如下代碼

   	<!-- 站點ID下拉選擇 -->
       <el-select v-model="params.siteId" placeholder="請選擇站點">
         <el-option
           v-for="item in cmsSiteList"
           :key="item.siteId"
           :label="item.siteName"
           :value="params.siteId">
         </el-option>
       </el-select>
       <!-- 頁面別名輸入框 -->
       <span style="margin-left: 10px;">頁面別名：</span>  
       <el-input v-model="params.pageAliase" placeholder="" style="width: 200px"></el-input>
   

2. 修改script中的代碼如下

   <script>
       import * as cmsApi from '../api/cms'
       export default {
         data() {
           return {
             tableData: [],
             cmsSiteList: [],
             total: 50,
             params: {
                 page: 1,
                 size: 20,
                 siteId: '',
                 pageAliase:''
             }
           }
         },
         methods: {
           // cmsPage分頁查詢
           changePage:function() {
               this.query()
           },
           // 分頁查詢CmsPage
           query:function() {
               // 分頁查詢CMS頁面
               console.log("當前頁碼：" + this.params.page + ", 當前記錄數：" + this.params.size);
               cmsApi.page_list(this.params.page, this.params.size, this.params).then(res => {
                   // 獲取數據
                   this.total = res.queryResult.total
                   this.tableData = res.queryResult.list
               })
           },
           // 查詢所有站點cmsSite
           cmsSiteQueryAll:function() {
               cmsApi.site_list_all().then(res => {
                 this.cmsSiteList = res.queryResult.list
               })
           }
         },
         mounted() {
             this.query()
             // 查詢站點數據
             this.cmsSiteQueryAll()
         }
       }
     </script>
   

修改API

修改src/module/cms/api/cms.js

import http from './../../../base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
/**
 * 分頁查詢CMS頁面
 * 
 * @param {*} page 當前頁
 * @param {*} size 每頁記錄數
 * @param {*} params 其他參數：頁面別名、站點ID、頁面ID等
 */
export const page_list = (page,size,params) => { 
    let queryParams = querystring.stringify(params)
    return http.requestQuickGet(apiUrl + '/cms/page/list/'+page+'/'+size + '?' + queryParams) 
}

/**
 * 查詢所有站點信息
 */
export const site_list_all = () => { 
    return http.requestQuickGet(apiUrl + '/cms/site') 
}

測試

完成想要的效果。

異常處理

異常處理流程

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

1. 自定義異常類型。
2. 自定義錯誤代碼及錯誤信息。
3. 對於可預知的異常由程序員在代碼中主動拋出，由SpringMVC統一捕獲。可預知異常是程序員在代碼中手動拋出本系統定義的特定異常類型，由於是程序員拋出的異常，通常異常信息比較齊全，程序員在拋出時會指定錯誤代碼及錯誤信息，獲取異常信息也比較方便。
4. 對於不可預知的異常（運行時異常）由SpringMVC統一捕獲Exception類型的異常。不可預知異常通常是由於系統出現bug、或一些不要抗拒的錯誤（比如網絡中斷、服務器宕機等），異常類型爲RuntimeException類型（運行時異常）。
5. 可預知的異常及不可預知的運行時異常最終會採用統一的信息格式（錯誤代碼+錯誤信息）來表示，最終也會隨請求響應給客戶端。

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

可預知異常處理

自定義異常類

package com.xuecheng.framework.exception;

import com.xuecheng.framework.model.response.ResultCode;
import lombok.Getter;

/**
 * 自定義異常類
 */
@Getter
public class CustomerException extends RuntimeException {

    private ResultCode resultCode;

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

}

異常拋出工具類

package com.xuecheng.framework.exception;

import com.xuecheng.framework.model.response.ResultCode;

/**
 * 自定義異常拋出類
 */
public class ExceptionCast {

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

}

統一異常處理類

package com.xuecheng.framework.exception;

import com.xuecheng.framework.model.response.ResponseResult;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 統一異常處理類
 */
@Slf4j
@ControllerAdvice
public class ExceptionCatch {


    /**
     * 自定義異常類型處理
     *
     * @param e CustomerException
     */
    @ResponseBody
    @ExceptionHandler(CustomerException.class)
    public ResponseResult customerException(CustomerException e) {
        log.error("發生異常, 異常信息：{}", e.getMessage());
        return new ResponseResult(e.getResultCode());
    }

}

不可預知異常處理

統一異常處理

在ExceptionCatch中新增方法，用於捕獲不可預知異常

    /**
     * 已知異常種類列表
     */
    private static ImmutableMap<Class<? extends Throwable>, ResultCode> OPTIONS;

    private static ImmutableMap.Builder<Class<? extends Throwable>, ResultCode> builder = ImmutableMap.builder();

    static {
        OPTIONS = builder
                .put(HttpMessageNotReadableException.class, CommonCode.PARAMS_ERROR)
                .build();
    }
	
	/**
     * 全局異常類型處理
     *
     * @param e Exception
     */
    @ResponseBody
    @ExceptionHandler(Exception.class)
    public ResponseResult exception(Throwable e) {
        log.error("發生異常, 異常信息：{}", e.getMessage());
        if (OPTIONS.containsKey(e.getClass())) {// 該異常爲已知異常類型
            return new ResponseResult(OPTIONS.get(e.getClass()));
        }
        return new ResponseResult(CommonCode.SERVER_ERROR);
    }

CMS頁面管理開發

增刪改查全部完成後的代碼如下：

後端

CmsPageService

package com.xuecheng.manage_cms.service;

import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.domain.cms.response.CmsCode;
import com.xuecheng.framework.domain.cms.response.CmsPageResult;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.manage_cms.dao.CmsPageRepository;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Example;
import org.springframework.data.domain.ExampleMatcher;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;

import java.util.Optional;

@Slf4j
@Service
public class CmsPageService {

    @Autowired
    private CmsPageRepository cmsPageRepository;

    /**
     * 分頁查詢頁面列表
     *
     * @param page 當前頁碼
     * @param size 每頁記錄數
     * @param queryPageRequest 查詢條件
     */
    public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest) {
        // 頁面別名模糊查詢
        ExampleMatcher pageAliaseMatcher = ExampleMatcher.matching().withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains());

        CmsPage params = new CmsPage();
        // 站點ID
        if (StringUtils.isNotBlank(queryPageRequest.getSiteId())) {
            params.setSiteId(queryPageRequest.getSiteId());
        }
        // 頁面別名
        params.setPageAliase(queryPageRequest.getPageAliase());

        // 構建查詢條件
        Example<CmsPage> cmsPageExample = Example.of(params, pageAliaseMatcher);

        if (page <= 0) {
            page = 1;
        }
        // 頁碼從0開始
        page = page - 1;
        // 查詢
        Page<CmsPage> pageResult = cmsPageRepository.findAll(cmsPageExample, PageRequest.of(page, size));
        QueryResult<CmsPage> cmsPageQueryResult = new QueryResult<>();
        cmsPageQueryResult.setList(pageResult.getContent());
        cmsPageQueryResult.setTotal(pageResult.getTotalElements());

        return new QueryResponseResult(CommonCode.SUCCESS, cmsPageQueryResult);
    }

    /**
     * 新增頁面
     *
     * @param cmsPage 頁面
     */
    public CmsPage add(CmsPage cmsPage) {
        return cmsPageRepository.insert(cmsPage);
    }

    /**
     * 按ID查詢頁面
     *
     * @param pageId 頁面ID
     */
    public CmsPage findByPageId(String pageId) {
        Optional<CmsPage> cmsPage = cmsPageRepository.findById(pageId);
        return cmsPage.orElse(null);
    }

    /**
     * 編輯頁面
     *
     * @param cmsPage 頁面ID
     */
    public CmsPage edit(CmsPage cmsPage) {
        // 查詢
        if (cmsPage != null && StringUtils.isNotBlank(cmsPage.getPageId())) {
            Optional<CmsPage> optionalCmsPage = cmsPageRepository.findById(cmsPage.getPageId());
            if (optionalCmsPage.isPresent()) {
                CmsPage one = optionalCmsPage.get();
                // 執行更新
                one.setTemplateId(cmsPage.getTemplateId());
                one.setSiteId(cmsPage.getSiteId());
                one.setPageAliase(cmsPage.getPageAliase());
                one.setPageName(cmsPage.getPageName());
                one.setPageWebPath(cmsPage.getPageWebPath());
                one.setPagePhysicalPath(cmsPage.getPagePhysicalPath());
                // 保存
                return cmsPageRepository.save(one);
            }
        }

        return null;
    }

    /**
     * 刪除指定ID的頁面
     *
     * @param pageId 頁面ID
     */
    public void deleteById(String pageId) {
        // 查詢
        cmsPageRepository.deleteById(pageId);
    }
}

CmsPageController

package com.xuecheng.manage_cms.controller;

import com.xuecheng.api.cms.CmsPageControllerApi;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.domain.cms.response.CmsCode;
import com.xuecheng.framework.domain.cms.response.CmsPageResult;
import com.xuecheng.framework.exception.ExceptionCast;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.manage_cms.service.CmsPageService;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("cms/page")
public class CmsPageController implements CmsPageControllerApi {

    @Autowired
    private CmsPageService cmsPageService;

    @Override
    @GetMapping("list/{page}/{size}")
    public QueryResponseResult findList(@PathVariable("page") int page,
                                        @PathVariable("size") int size,
                                        QueryPageRequest queryPageRequest) {
        return cmsPageService.findList(page, size, queryPageRequest);
    }

    @Override
    @PostMapping
    public CmsPageResult add(@RequestBody CmsPage cmsPage) {
        if (cmsPage == null) {
            ExceptionCast.cast(CommonCode.PARAMS_ERROR);
        }
        // 校驗是否已存在
        CmsPage _cmsPage = cmsPageService.findBySiteIdAndPageNameAndPageWebPath(cmsPage.getSiteId(), cmsPage.getPageName(), cmsPage.getPageWebPath());
        if (_cmsPage != null) {
            ExceptionCast.cast(CmsCode.CMS_ADDPAGE_EXISTSNAME);
        }
        return new CmsPageResult(CommonCode.SUCCESS, cmsPageService.add(cmsPage));
    }

    @Override
    @GetMapping("/{pageId}")
    public CmsPageResult getCmsPage(@PathVariable("pageId") String pageId) {
        CmsPage cmsPage = cmsPageService.findByPageId(pageId);
        if (cmsPage == null) {
            ExceptionCast.cast(CmsCode.CMS_EDITPAGE_NOTEXISTS);
        }
        return new CmsPageResult(CommonCode.SUCCESS, cmsPage);
    }

    @Override
    @DeleteMapping("/{pageId}")
    public CmsPageResult deleteById(@PathVariable("pageId") String pageId) {
        if (StringUtils.isBlank(pageId)) {
            ExceptionCast.cast(CommonCode.PARAMS_ERROR);
        }
        cmsPageService.deleteById(pageId);
        return new CmsPageResult(CommonCode.SUCCESS, null);
    }

    @Override
    @PutMapping
    public CmsPageResult edit(@RequestBody CmsPage cmsPage) {
        if (cmsPage == null) {
            ExceptionCast.cast(CommonCode.PARAMS_ERROR);
        }
        CmsPage edit = cmsPageService.edit(cmsPage);
        if (edit == null) {
            ExceptionCast.cast(CommonCode.FAIL);
        }
        return new CmsPageResult(CommonCode.SUCCESS, edit);
    }


}

CmsPageControllerApi

package com.xuecheng.api.cms;

import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.CmsSite;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.domain.cms.response.CmsPageResult;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.Response;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;

@Api(value = "CMS頁面管理接口", description = "CMS頁面管理接口，提供頁面的增刪改查")
public interface CmsPageControllerApi {

    @ApiOperation("分頁查詢頁面列表")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "page", value = "頁碼", required = true, paramType = "path"),
            @ApiImplicitParam(name = "size", value = "每頁記錄數", required = true, paramType = "path")
    })
    QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest);

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

    @ApiOperation("修改頁面")
    CmsPageResult edit(CmsPage cmsPage);

    @ApiOperation("按ID獲取頁面")
    CmsPageResult getCmsPage(String pageId);

    @ApiOperation("按ID刪除頁面")
    CmsPageResult deleteById(String pageId);

}

前端

page_list.vue

  <template>
    <div>
        <!-- 站點ID下拉選擇 -->
        <el-select v-model="params.siteId" placeholder="請選擇站點">
          <el-option
            v-for="item in cmsSiteList"
            :key="item.siteId"
            :label="item.siteName"
            :value="item.siteId">
          </el-option>
        </el-select>
        <!-- 頁面別名輸入框 -->
        <span style="margin-left: 10px;">頁面別名：</span>  
        <el-input v-model="params.pageAliase" placeholder="" style="width: 200px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="query" style="margin-top: 20px">查詢</el-button>
        <!-- 新增頁面按鈕 -->
        <router-link class="mui-tab-item" :to="{path:'/cms/page/add/',query:{ page: this.params.page, siteId: this.params.siteId}}">
          <el-button type="primary" icon="el-icon-search" style="margin-top: 20px">新增頁面</el-button>
        </router-link>
        <!-- 頁面展示表格 -->
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
            <el-table-column type="index" width="70"></el-table-column>
            <el-table-column prop="pageName" label="頁面名稱" width="400"></el-table-column>
            <el-table-column prop="pageAliase" label="別名" width="120"></el-table-column>
            <el-table-column prop="pageType" label="頁面類型" width="100" :formatter="pageTypeFormatter"></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="創建時間"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="edit(scope.$index, scope.row)">編輯</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="del(scope.$index, scope.row)">刪除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 分頁欄 -->
        <el-pagination
            @current-change="changePage"
            :current-page.sync="params.page"
            :page-size="params.size"
            layout="total, prev, pager, next"
            :total="total"
            style="float: right">
        </el-pagination>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
          tableData: [],
          cmsSiteList: [],
          total: 50,
          params: {
              page: 1,
              size: 20,
              siteId: '',
              pageAliase:''
          }
        }
      },
      methods: {
        // cmsPage分頁查詢
        changePage:function() {
            this.query()
        },
        // 分頁查詢CmsPage
        query:function() {
            // 分頁查詢CMS頁面
            console.log("當前頁碼：" + this.params.page + ", 當前記錄數：" + this.params.size);
            cmsApi.page_list(this.params.page, this.params.size, this.params).then(res => {
                // 獲取數據
                this.total = res.queryResult.total
                this.tableData = res.queryResult.list
            })
        },
        // 查詢所有站點cmsSite
        cmsSiteQueryAll:function() {
            cmsApi.site_list_all().then(res => {
              this.cmsSiteList = res.queryResult.list
            })
        },
        // 編輯cms頁面
        edit:function(index, data) {
          this.$router.push({
                    path:'/cms/page/edit', 
                    query: {
                        page:this.params.page,
                        siteId:this.params.siteId,
                        pageId:data.pageId
                    }
                })
        },
        // 刪除cms頁面
        del:function(index, data) {
          this.$confirm('確認刪除該條記錄?', '提示', {
              confirmButtonText: '確定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              // 刪除
              cmsApi.deleteCmsPageById(data.pageId).then(res => {
                // 提示消息
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: 'success'
                })
              })
              
              // 重新查詢數據
              this.query()
          })
        },
        // 頁面類型數據格式化
        pageTypeFormatter:function(row, column, cellValue, index) {
          if (row.pageType === '1') {
            return '動態'
          } else if (row.pageType === '0') {
            return '靜態'
          }
        }
      },
      mounted() {
          this.query()
          this.cmsSiteQueryAll()
      },
      created() {
        this.params.page = Number.parseInt(this.$route.query.page || 1)
        this.params.siteId = this.$route.query.siteId || ''
      }
    }
  </script>

page_add.vue

  <template>
    <div style="margin-top:10px; width:40%">
        <el-form :model="cmsPage" :rules="rules" ref="cmsPageForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="站點ID" prop="siteId">
                <!-- 站點ID下拉選擇 -->
                <el-select v-model="cmsPage.siteId" placeholder="請選擇站點">
                    <el-option
                        v-for="item in cmsSiteList"
                        :key="item.siteId"
                        :label="item.siteName"
                        :value="item.siteId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板ID" prop="templateId">
                <!-- 模板ID下拉選擇 -->
                <el-select v-model="cmsPage.templateId" placeholder="請選擇模板">
                    <el-option
                        v-for="item in cmsTemplateList"
                        :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="cmsPage.pageName"></el-input>
            </el-form-item>
            <el-form-item label="別名" prop="pageAliase">
                <el-input v-model="cmsPage.pageAliase"></el-input>
            </el-form-item>
            <el-form-item label="訪問路徑" prop="pageWebPath">
                <el-input v-model="cmsPage.pageWebPath"></el-input>
            </el-form-item>
            <el-form-item label="物理路徑" prop="pagePhysicalPath">
                <el-input v-model="cmsPage.pagePhysicalPath"></el-input>
            </el-form-item>
            <el-form-item label="類型" prop="pageType">
                <el-radio-group v-model="cmsPage.pageType">
                <el-radio label="0">靜態</el-radio>
                <el-radio label="1">動態</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="創建日期" prop="pageCreateTime">
                <el-date-picker
                    v-model="cmsPage.pageCreateTime"
                    type="datetime"
                    placeholder="選擇日期時間">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="goBack">返回</el-button>
                <el-button type="primary" @click="onSubmit('cmsPageForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
            cmsPage: {
                siteId:'', 
                templateId:'', 
                pageName: '', 
                pageAliase: '', 
                pageWebPath: '', 
                pageParameter:'', 
                pagePhysicalPath:'', 
                pageType:'', 
                pageCreateTime: new Date()
            },
            cmsSiteList:[],
            cmsTemplateList:[],
            rules: {
                siteId: [
                    { required: true, message: '請選擇站點', trigger: 'change'}
                ],
                templateId: [
                    { required: true, message: '請選擇模板', trigger: 'change' }
                ],
                pageCreateTime: [
                    { type: 'date', required: true, message: '請選擇創建時間', trigger: 'change' }
                ],
                pageName: [
                    { required: true, message: '請輸入頁面名稱', trigger: 'blur' }
                ],
                pageWebPath: [
                    { required: true, message: '請輸入頁面名稱', trigger: 'blur' }
                ],
                pagePhysicalPath: [
                    { required: true, message: '請輸入頁面名稱', trigger: 'blur' }
                ],
                pageType: [
                    { required: true, message: '請選擇頁面類型', trigger: 'change' }
                ]
            }
        }
      },
      methods: {
        // 查詢所有站點cmsSite
        cmsSiteQueryAll:function() {
            cmsApi.site_list_all().then(res => {
              this.cmsSiteList = res.queryResult.list
            })
        },
        // 查詢所有模板cmsTemplate
        cmsTemplateQueryAll:function() {
            cmsApi.template_list_all().then(res => {
              this.cmsTemplateList = res.queryResult.list
            })
        },
        onSubmit:function(formname) {
            // 校驗表單
            this.$refs[formname].validate((valid) => {
                if (valid) {// 校驗通過
                    this.$confirm('確認提交?', '提示', {
                        confirmButtonText: '確定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        cmsApi.add(this.cmsPage).then(res => {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                            // 清空數據
                            this.cmsPage = {}
                            // 回退頁面
                            this.goBack()
                        }).catch(res => {
                            this.$message({
                                showClose: true,
                                message: '系統異常',
                                type: 'error'
                            })
                        })
                    })
                } else {
                    this.$message({
                        showClose: true,
                        message: '提交失敗，請檢查是否正確錄入數據！',
                        type: 'error'
                    });
                }
            });
            
        },
        goBack:function() {
            if (this.$route.query.page) {
                // 返回
                this.$router.push({
                    path:'/cms/page/list', 
                    query: {
                        page:this.$route.query.page,
                        siteId:this.$route.query.siteId
                    }
                })
            } else {
                this.$router.push({
                    path:'/cms/page/list'
                })
            }
        }
      },
      created() {
        
      },
      mounted() {
          this.cmsSiteQueryAll()
          this.cmsTemplateQueryAll()
      }
    }
  </script>

page_edit.vue

  <template>
    <div style="margin-top:10px; width:40%">
        <el-form :model="cmsPage" :rules="rules" ref="cmsPageForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="站點ID" prop="siteId">
                <!-- 站點ID下拉選擇 -->
                <el-select v-model="cmsPage.siteId" placeholder="請選擇站點">
                    <el-option
                        v-for="item in cmsSiteList"
                        :key="item.siteId"
                        :label="item.siteName"
                        :value="item.siteId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板ID" prop="templateId">
                <!-- 模板ID下拉選擇 -->
                <el-select v-model="cmsPage.templateId" placeholder="請選擇模板">
                    <el-option
                        v-for="item in cmsTemplateList"
                        :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="cmsPage.pageName"></el-input>
            </el-form-item>
            <el-form-item label="別名" prop="pageAliase">
                <el-input v-model="cmsPage.pageAliase"></el-input>
            </el-form-item>
            <el-form-item label="訪問路徑" prop="pageWebPath">
                <el-input v-model="cmsPage.pageWebPath"></el-input>
            </el-form-item>
            <el-form-item label="物理路徑" prop="pagePhysicalPath">
                <el-input v-model="cmsPage.pagePhysicalPath"></el-input>
            </el-form-item>
            <el-form-item label="類型" prop="pageType">
                <el-radio-group v-model="cmsPage.pageType">
                <el-radio label="0">靜態</el-radio>
                <el-radio label="1">動態</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="創建日期" prop="pageCreateTime">
                <el-date-picker
                    v-model="cmsPage.pageCreateTime"
                    type="datetime"
                    placeholder="選擇日期時間">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="goBack">返回</el-button>
                <el-button type="primary" @click="onSubmit('cmsPageForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
            cmsPage: {
                siteId:'', 
                templateId:'', 
                pageName: '', 
                pageAliase: '', 
                pageWebPath: '', 
                pageParameter:'', 
                pagePhysicalPath:'', 
                pageType:'', 
                pageCreateTime: new Date()
            },
            cmsSiteList:[],
            cmsTemplateList:[],
            rules: {
                siteId: [
                    { required: true, message: '請選擇站點', trigger: 'change'}
                ],
                templateId: [
                    { required: true, message: '請選擇模板', trigger: 'change' }
                ],
                pageCreateTime: [
                    { required: true, message: '請選擇創建時間', trigger: 'change' }
                ],
                pageName: [
                    { required: true, message: '請輸入頁面名稱', trigger: 'blur' }
                ],
                pageWebPath: [
                    { required: true, message: '請輸入頁面名稱', trigger: 'blur' }
                ],
                pagePhysicalPath: [
                    { required: true, message: '請輸入頁面名稱', trigger: 'blur' }
                ],
                pageType: [
                    { required: true, message: '請選擇頁面類型', trigger: 'change' }
                ]
            }
        }
      },
      methods: {
        // 查詢所有站點cmsSite
        cmsSiteQueryAll:function() {
            cmsApi.site_list_all().then(res => {
              this.cmsSiteList = res.queryResult.list
            })
        },
        // 查詢所有模板cmsTemplate
        cmsTemplateQueryAll:function() {
            cmsApi.template_list_all().then(res => {
              this.cmsTemplateList = res.queryResult.list
            })
        },
        onSubmit:function(formname) {
            // 校驗表單
            this.$refs[formname].validate((valid) => {
                if (valid) {// 校驗通過
                    this.$confirm('確認提交?', '提示', {
                        confirmButtonText: '確定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        cmsApi.edit(this.cmsPage).then(res => {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                            // 清空數據
                            this.cmsPage = {}
                            // 回退頁面
                            this.goBack()
                        })
                    })
                } else {
                    this.$message({
                        showClose: true,
                        message: '提交失敗，請檢查是否正確錄入數據！',
                        type: 'error'
                    });
                }
            });
            
        },
        goBack:function() {
            if (this.$route.query.page) {
                // 返回
                this.$router.push({
                    path:'/cms/page/list', 
                    query: {
                        page:this.$route.query.page,
                        siteId:this.$route.query.siteId
                    }
                })
            } else {
                this.$router.push({
                    path:'/cms/page/list'
                })
            }
        },
        getCmsPage:function(pageId) {
            cmsApi.findCmsPageById(pageId).then(res => {
                this.cmsPage = res.cmsPage
            })
        }
      },
      created() {
        this.getCmsPage(this.$route.query.pageId)
      },
      mounted() {
          this.cmsSiteQueryAll()
          this.cmsTemplateQueryAll()
      }
    }
  </script>

定義路由

修改src/module/cms/router/index.js

import Home from '@/module/home/page/home.vue'
import page_list from '@/module/cms/page/page_list.vue'
import page_add from '@/module/cms/page/page_add.vue'
import page_edit from '@/module/cms/page/page_edit.vue'

export default [{ 
  path: '/cms', 
  component: Home, 
  name: 'CMS內容管理', 
  hidden: false, 
  children:[{
    path:'/cms/page/list',
    name:'頁面列表',
    component: page_list,
    hidden:false
  },{
    path:'/cms/page/add',
    name:'頁面新增',
    component: page_add,
    hidden:true
  },{
    path:'/cms/page/edit',
    name:'頁面修改',
    component: page_edit,
    hidden:true
  }]
}]

定義API

在src/module/cms/api/cms.js中新增API定義

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

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

/**
 * 按ID查詢頁面
 */
export const findCmsPageById = (pageId) => { 
    return http.requestQuickGet(apiUrl + '/cms/page/'+ pageId)
}

/**
 * 按ID刪除頁面
 */
export const deleteCmsPageById = (pageId) => { 
    return http.requestDelete(apiUrl + '/cms/page/'+ pageId)
}

CMS站點管理開發

增刪改查全部完成後的代碼如下：

後端

CmsSiteResult

新增返回實體類

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

import com.xuecheng.framework.domain.cms.CmsSite;
import com.xuecheng.framework.model.response.ResponseResult;
import com.xuecheng.framework.model.response.ResultCode;
import lombok.Data;

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

CmsSiteRepository

package com.xuecheng.manage_cms.dao;

import com.xuecheng.framework.domain.cms.CmsSite;
import org.springframework.data.mongodb.repository.MongoRepository;

public interface CmsSiteRepository extends MongoRepository<CmsSite, String> {
}

CmsSiteService

package com.xuecheng.manage_cms.service;

import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.CmsSite;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.manage_cms.dao.CmsSiteRepository;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Example;
import org.springframework.data.domain.ExampleMatcher;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Optional;

@Slf4j
@Service
public class CmsSiteService {

    @Autowired
    private CmsSiteRepository cmsSiteRepository;

    public QueryResponseResult findAll() {
        List<CmsSite> cmsSiteList = cmsSiteRepository.findAll();
        QueryResult<CmsSite> queryResult = new QueryResult<>(cmsSiteList, cmsSiteList.size());
        return new QueryResponseResult(CommonCode.SUCCESS, queryResult);
    }

    /**
     * 分頁查詢頁面列表
     *
     * @param page 當前頁碼
     * @param size 每頁記錄數
     */
    public QueryResponseResult findList(int page, int size) {
        if (page <= 0) {
            page = 1;
        }
        // 頁碼從0開始
        page = page - 1;
        // 查詢
        Page<CmsSite> siteResult = cmsSiteRepository.findAll(PageRequest.of(page, size));
        QueryResult<CmsSite> cmsSiteQueryResult = new QueryResult<>();
        cmsSiteQueryResult.setList(siteResult.getContent());
        cmsSiteQueryResult.setTotal(siteResult.getTotalElements());

        return new QueryResponseResult(CommonCode.SUCCESS, cmsSiteQueryResult);
    }

    /**
     * 新增站點
     *
     * @param cmsSite 站點
     */
    public CmsSite add(CmsSite cmsSite) {
        return cmsSiteRepository.insert(cmsSite);
    }

    /**
     * 按ID查詢站點
     *
     * @param siteId 站點ID
     */
    public CmsSite findBySiteId(String siteId) {
        Optional<CmsSite> cmsSite = cmsSiteRepository.findById(siteId);
        return cmsSite.orElse(null);
    }

    /**
     * 編輯站點
     *
     * @param cmsSite 站點
     */
    public CmsSite edit(CmsSite cmsSite) {
        // 查詢
        if (cmsSite != null && StringUtils.isNotBlank(cmsSite.getSiteId())) {
            Optional<CmsSite> optionalCmsSite = cmsSiteRepository.findById(cmsSite.getSiteId());
            if (optionalCmsSite.isPresent()) {
                CmsSite one = optionalCmsSite.get();
                // 執行更新
                one.setSiteCreateTime(cmsSite.getSiteCreateTime());
                one.setSiteDomain(cmsSite.getSiteDomain());
                one.setSiteName(cmsSite.getSiteName());
                one.setSitePort(cmsSite.getSitePort());
                one.setSiteWebPath(cmsSite.getSiteWebPath());
                // 保存
                return cmsSiteRepository.save(one);
            }
        }

        return null;
    }

    /**
     * 刪除指定ID的站點
     *
     * @param siteId 站點ID
     */
    public void deleteById(String siteId) {
        // 查詢
        cmsSiteRepository.deleteById(siteId);
    }
}

CmsSiteController

package com.xuecheng.manage_cms.controller;

import com.xuecheng.api.cms.CmsSiteControllerApi;
import com.xuecheng.framework.domain.cms.CmsSite;
import com.xuecheng.framework.domain.cms.response.CmsSiteResult;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.manage_cms.service.CmsSiteService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("cms/site")
public class CmsSiteController implements CmsSiteControllerApi {

    @Autowired
    private CmsSiteService cmsSiteService;

    @Override
    @GetMapping
    public QueryResponseResult findAll() {
        return cmsSiteService.findAll();
    }

    @Override
    @GetMapping("list/{page}/{size}")
    public QueryResponseResult findList(@PathVariable("page") int page,
                                        @PathVariable("size") int size) {
        return cmsSiteService.findList(page, size);
    }

    @Override
    @PostMapping
    public CmsSiteResult add(@RequestBody CmsSite cmsSite) {
        return new CmsSiteResult(CommonCode.SUCCESS, cmsSiteService.add(cmsSite));
    }

    @Override
    @GetMapping("/{siteId}")
    public CmsSiteResult getCmsSite(@PathVariable("siteId") String siteId) {
        CmsSite cmsSite = cmsSiteService.findBySiteId(siteId);
        if (cmsSite == null) {
            return new CmsSiteResult(CommonCode.FAIL, null);
        }
        return new CmsSiteResult(CommonCode.SUCCESS, cmsSite);
    }

    @Override
    @DeleteMapping("/{siteId}")
    public CmsSiteResult deleteById(@PathVariable("siteId") String siteId) {
        try {
            cmsSiteService.deleteById(siteId);
        } catch (Exception e) {
            return new CmsSiteResult(CommonCode.FAIL, null);
        }
        return new CmsSiteResult(CommonCode.SUCCESS, null);
    }

    @Override
    @PutMapping
    public CmsSiteResult edit(@RequestBody CmsSite cmsSite) {
        CmsSite edit = cmsSiteService.edit(cmsSite);
        if (edit != null) {
            return new CmsSiteResult(CommonCode.SUCCESS, edit);
        }
        return new CmsSiteResult(CommonCode.FAIL, null);
    }


}

CmsSiteControllerApi

package com.xuecheng.api.cms;

import com.xuecheng.framework.domain.cms.CmsSite;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.domain.cms.response.CmsSiteResult;
import com.xuecheng.framework.model.response.QueryResponseResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;

@Api(value = "CMS站點管理接口", description = "CMS頁面站點管理接口，提供站點的增刪改查")
public interface CmsSiteControllerApi {


    @ApiOperation("查詢所有站點信息")
    QueryResponseResult findAll();

    @ApiOperation("分頁查詢站點列表")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "page", value = "頁碼", required = true, paramType = "path"),
            @ApiImplicitParam(name = "size", value = "每頁記錄數", required = true, paramType = "path")
    })
    QueryResponseResult findList(int page, int size);

    @ApiOperation("新增站點")
    CmsSiteResult add(CmsSite cmsSite);

    @ApiOperation("修改站點")
    CmsSiteResult edit(CmsSite cmsSite);

    @ApiOperation("按ID獲取站點")
    CmsSiteResult getCmsSite(String siteId);

    @ApiOperation("按ID刪除站點")
    CmsSiteResult deleteById(String siteId);

}

前端

site_list.vue

  <template>
    <div>
        <el-button type="primary" icon="el-icon-search" @click="query" style="margin-top: 20px">查詢</el-button>
        <!-- 新增站點按鈕 -->
        <router-link class="mui-tab-item" :to="{path:'/cms/site/add/'}">
          <el-button type="primary" icon="el-icon-search" style="margin-top: 20px">新增站點</el-button>
        </router-link>
        <!-- 站點展示表格 -->
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
            <el-table-column type="index" width="70"></el-table-column>
            <el-table-column prop="siteName" label="站點名稱" width="200"></el-table-column>
            <el-table-column prop="siteDomain" label="站點域" width="320"></el-table-column>
            <el-table-column prop="sitePort" label="站點端口" width="100"></el-table-column>
            <el-table-column prop="siteWebPath" label="訪問路徑" width="250"></el-table-column>
            <el-table-column prop="siteCreateTime" label="創建時間"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="edit(scope.$index, scope.row)">編輯</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="del(scope.$index, scope.row)">刪除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 分頁欄 -->
        <el-pagination
            @current-change="changePage"
            :current-page.sync="params.page"
            :page-size="params.size"
            layout="total, prev, pager, next"
            :total="total"
            style="float: right">
        </el-pagination>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
          tableData: [],
          total: 50,
          params: {
              page: 1,
              size: 20,
          }
        }
      },
      methods: {
        // cmsPage分頁查詢
        changePage:function() {
            this.query()
        },
        // 分頁查詢CmsPage
        query:function() {
            // 分頁查詢CMS站點
            console.log("當前頁碼：" + this.params.page + ", 當前記錄數：" + this.params.size);
            cmsApi.site_list(this.params.page, this.params.size).then(res => {
                // 獲取數據
                this.total = res.queryResult.total
                this.tableData = res.queryResult.list
            })
        },
        // 編輯cms站點
        edit:function(index, data) {
          this.$router.push({
                    path:'/cms/site/edit', 
                    query: {
                        page:this.params.page,
                        siteId:data.siteId
                    }
                })
        },
        // 刪除cms站點
        del:function(index, data) {
          this.$confirm('確認刪除該條記錄?', '提示', {
              confirmButtonText: '確定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              // 刪除
              cmsApi.deleteCmsSiteById(data.siteId).then(res => {
                // 提示消息
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: 'success'
                })
              })
              
              // 重新查詢數據
              this.query()
          })
        }
      },
      mounted() {
          this.query()
          this.cmsSiteQueryAll()
      },
      created() {
        this.params.page = Number.parseInt(this.$route.query.page || 1)
        this.params.siteId = this.$route.query.siteId || ''
      }
    }
  </script>

site_add.vue

  <template>
    <div style="margin-top:10px; width:40%">
        <el-form :model="cmsTemplate" :rules="rules" ref="cmsTemplateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="站點ID" prop="siteId">
                <!-- 站點ID下拉選擇 -->
                <el-select v-model="cmsTemplate.siteId" placeholder="請選擇站點">
                    <el-option
                        v-for="item in cmsSiteList"
                        :key="item.siteId"
                        :label="item.siteName"
                        :value="item.siteId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板名稱" prop="templateName">
                <el-input v-model="cmsTemplate.templateName"></el-input>
            </el-form-item>
            <el-form-item label="模板參數" prop="templateParameter">
                <el-input v-model="cmsTemplate.templateParameter"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="goBack">返回</el-button>
                <el-button type="primary" @click="onSubmit('cmsTemplateForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
            cmsSiteList:[],
            cmsTemplate: {
                templateName: '', 
                templateParameter: '',
                siteId: ''
            },
            rules: {
                siteId: [
                    { required: true, message: '請選擇站點', trigger: 'change' }
                ],
                templateName: [
                    { required: true, message: '請輸入模板名稱', trigger: 'blur' }
                ],
                templateParameter: [
                    { required: true, message: '請輸入模板參數', trigger: 'blur' }
                ]
            }
        }
      },
      methods: {
        // 查詢所有站點cmsSite
        cmsSiteQueryAll:function() {
            cmsApi.site_list_all().then(res => {
              this.cmsSiteList = res.queryResult.list
            })
        },
        onSubmit:function(formname) {
            // 校驗表單
            this.$refs[formname].validate((valid) => {
                if (valid) {// 校驗通過
                    this.$confirm('確認提交?', '提示', {
                        confirmButtonText: '確定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        cmsApi.addCmsTemplate(this.cmsTemplate).then(res => {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                            // 清空數據
                            this.cmsTemplate = {}
                            // 回退頁面
                            this.goBack()
                        }).catch(res => {
                            this.$message({
                                showClose: true,
                                message: '系統異常',
                                type: 'error'
                            })
                        })
                    })
                } else {
                    this.$message({
                        showClose: true,
                        message: '提交失敗，請檢查是否正確錄入數據！',
                        type: 'error'
                    });
                }
            });
            
        },
        goBack:function() {
            if (this.$route.query.page) {
                // 返回
                this.$router.push({
                    path:'/cms/template/list', 
                    query: {
                        page:this.$route.query.page
                    }
                })
            } else {
                this.$router.push({
                    path:'/cms/template/list'
                })
            }
        }
      },
      created() {
        
      },
      mounted() {
          this.cmsSiteQueryAll()
      }
    }
  </script>

site_edit.vue

  <template>
    <div style="margin-top:10px; width:40%">
        <el-form :model="cmsTemplate" :rules="rules" ref="cmsTemplateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="站點ID" prop="siteId">
                <!-- 站點ID下拉選擇 -->
                <el-select v-model="cmsTemplate.siteId" placeholder="請選擇站點">
                    <el-option
                        v-for="item in cmsSiteList"
                        :key="item.siteId"
                        :label="item.siteName"
                        :value="item.siteId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板名稱" prop="templateName">
                <el-input v-model="cmsTemplate.templateName"></el-input>
            </el-form-item>
            <el-form-item label="模板參數" prop="templateParameter">
                <el-input v-model="cmsTemplate.templateParameter"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="goBack">返回</el-button>
                <el-button type="primary" @click="onSubmit('cmsTemplateForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
            cmsSiteList:[],
            cmsTemplate: {
                templateName: '', 
                templateParameter: '',
                siteId: ''
            },
            rules: {
                siteId: [
                    { required: true, message: '請選擇站點', trigger: 'change' }
                ],
                templateName: [
                    { required: true, message: '請輸入模板名稱', trigger: 'blur' }
                ],
                templateParameter: [
                    { required: true, message: '請輸入模板參數', trigger: 'blur' }
                ]
            }
        }
      },
      methods: {
        // 查詢所有站點cmsSite
        cmsSiteQueryAll:function() {
            cmsApi.site_list_all().then(res => {
              this.cmsSiteList = res.queryResult.list
            })
        },
        onSubmit:function(formname) {
            // 校驗表單
            this.$refs[formname].validate((valid) => {
                if (valid) {// 校驗通過
                    this.$confirm('確認提交?', '提示', {
                        confirmButtonText: '確定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        cmsApi.editCmsTemplate(this.cmsTemplate).then(res => {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                            // 清空數據
                            this.cmsTemplate = {}
                            // 回退頁面
                            this.goBack()
                        })
                    })
                } else {
                    this.$message({
                        showClose: true,
                        message: '提交失敗，請檢查是否正確錄入數據！',
                        type: 'error'
                    });
                }
            });
            
        },
        goBack:function() {
            if (this.$route.query.page) {
                // 返回
                this.$router.push({
                    path:'/cms/template/list', 
                    query: {
                        page:this.$route.query.page
                    }
                })
            } else {
                this.$router.push({
                    path:'/cms/template/list'
                })
            }
        },
        getCmsTemplate:function(templateId) {
            cmsApi.findCmsTemplateById(templateId).then(res => {
                this.cmsTemplate = res.cmsTemplate
            })
        }
      },
      created() {
        this.getCmsTemplate(this.$route.query.templateId)
        this.cmsSiteQueryAll()
      }
    }
  </script>

定義路由

修改src/module/cms/router/index.js

import Home from '@/module/home/page/home.vue'
import page_list from '@/module/cms/page/page_list.vue'
import page_add from '@/module/cms/page/page_add.vue'
import page_edit from '@/module/cms/page/page_edit.vue'
import site_list from '@/module/cms/page/site_list.vue'
import site_add from '@/module/cms/page/site_add.vue'
import site_edit from '@/module/cms/page/site_edit.vue'

export default [{ 
  path: '/cms', 
  component: Home, 
  name: 'CMS內容管理', 
  hidden: false, 
  children:[{
    path:'/cms/page/list',
    name:'頁面列表',
    component: page_list,
    hidden:false
  },{
    path:'/cms/page/add',
    name:'頁面新增',
    component: page_add,
    hidden:true
  },{
    path:'/cms/page/edit',
    name:'頁面修改',
    component: page_edit,
    hidden:true
  },{
    path:'/cms/site/list',
    name:'站點列表',
    component: site_list,
    hidden:false
  },{
    path:'/cms/site/add',
    name:'站點新增',
    component: site_add,
    hidden:true
  },{
    path:'/cms/site/edit',
    name:'站點修改',
    component: site_edit,
    hidden:true
  }]
}]

定義API

在src/module/cms/api/cms.js中新增API定義

/********************************************
 * CMS站點相關API
 ********************************************/
/**
 * 分頁查詢CMS站點
 */ 
export const site_list = (page,size) => {
    return http.requestQuickGet(apiUrl + '/cms/site/list/'+page+'/'+size) 
}

/**
 * 查詢所有站點信息
 */
export const site_list_all = () => { 
    return http.requestQuickGet(apiUrl + '/cms/site') 
}

/**
 * 新增站點
 */
export const addCmsSite = (params) => { 
    return http.requestPost(apiUrl + '/cms/site', params)
}

/**
 * 修改站點
 */
export const editCmsSite = (params) => { 
    return http.requestPut(apiUrl + '/cms/site', params)
}

/**
 * 按ID查詢站點
 */
export const findCmsSiteById = (pageId) => { 
    return http.requestQuickGet(apiUrl + '/cms/site/'+ pageId)
}

/**
 * 按ID刪除站點
 */
export const deleteCmsSiteById = (pageId) => { 
    return http.requestDelete(apiUrl + '/cms/site/'+ pageId)
}

CMS模板管理開發

增刪改查全部完成後的代碼如下：

後端

CmsTemplateResult

新增返回shitilei

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

import com.xuecheng.framework.domain.cms.CmsTemplate;
import com.xuecheng.framework.model.response.ResponseResult;
import com.xuecheng.framework.model.response.ResultCode;
import lombok.Data;

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

CmsTemplateRepository

package com.xuecheng.manage_cms.dao;

import com.xuecheng.framework.domain.cms.CmsTemplate;
import org.springframework.data.mongodb.repository.MongoRepository;

public interface CmsTemplateRepository extends MongoRepository<CmsTemplate, String> {
}

CmsTemplateService

package com.xuecheng.manage_cms.service;

import com.xuecheng.framework.domain.cms.CmsTemplate;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.manage_cms.dao.CmsTemplateRepository;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Optional;

@Slf4j
@Service
public class CmsTemplateService {

    @Autowired
    private CmsTemplateRepository cmsTemplateRepository;

    public QueryResponseResult findAll() {
        List<CmsTemplate> cmsTemplateList = cmsTemplateRepository.findAll();
        QueryResult<CmsTemplate> queryResult = new QueryResult<>(cmsTemplateList, cmsTemplateList.size());
        return new QueryResponseResult(CommonCode.SUCCESS, queryResult);
    }

    /**
     * 分頁查詢頁面列表
     *
     * @param page 當前頁碼
     * @param size 每頁記錄數
     */
    public QueryResponseResult findList(int page, int size) {
        if (page <= 0) {
            page = 1;
        }
        // 頁碼從0開始
        page = page - 1;
        // 查詢
        Page<CmsTemplate> templateResult = cmsTemplateRepository.findAll(PageRequest.of(page, size));
        QueryResult<CmsTemplate> templateQueryResult = new QueryResult<>();
        templateQueryResult.setList(templateResult.getContent());
        templateQueryResult.setTotal(templateResult.getTotalElements());

        return new QueryResponseResult(CommonCode.SUCCESS, templateQueryResult);
    }


    /**
     * 新增模板
     *
     * @param cmsTemplate 模板
     */
    public CmsTemplate add(CmsTemplate cmsTemplate) {
        return cmsTemplateRepository.insert(cmsTemplate);
    }

    /**
     * 按ID查詢模板
     *
     * @param templateId 模板ID
     */
    public CmsTemplate findBySiteId(String templateId) {
        Optional<CmsTemplate> cmsTemplate = cmsTemplateRepository.findById(templateId);
        return cmsTemplate.orElse(null);
    }

    /**
     * 編輯模板
     *
     * @param cmsTemplate 模板
     */
    public CmsTemplate edit(CmsTemplate cmsTemplate) {
        // 查詢
        if (cmsTemplate != null && StringUtils.isNotBlank(cmsTemplate.getTemplateId())) {
            Optional<CmsTemplate> optionalCmsTemplate = cmsTemplateRepository.findById(cmsTemplate.getTemplateId());
            if (optionalCmsTemplate.isPresent()) {
                CmsTemplate one = optionalCmsTemplate.get();
                // 執行更新
                one.setSiteId(cmsTemplate.getSiteId());
                one.setTemplateFileId(cmsTemplate.getTemplateFileId());
                one.setTemplateName(cmsTemplate.getTemplateName());
                one.setTemplateParameter(cmsTemplate.getTemplateParameter());
                // 保存
                return cmsTemplateRepository.save(one);
            }
        }

        return null;
    }

    /**
     * 刪除指定ID的模板
     *
     * @param templateId 模板ID
     */
    public void deleteById(String templateId) {
        // 查詢
        cmsTemplateRepository.deleteById(templateId);
    }
}

CmsTemplateController

package com.xuecheng.manage_cms.controller;

import com.xuecheng.api.cms.CmsTemplateControllerApi;
import com.xuecheng.framework.domain.cms.CmsTemplate;
import com.xuecheng.framework.domain.cms.response.CmsTemplateResult;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.manage_cms.service.CmsTemplateService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("cms/template")
public class CmsTemplateController implements CmsTemplateControllerApi {

    @Autowired
    private CmsTemplateService cmsTemplateService;

    @Override
    @GetMapping
    public QueryResponseResult findAll() {
        return cmsTemplateService.findAll();
    }

    @Override
    @GetMapping("list/{page}/{size}")
    public QueryResponseResult findList(@PathVariable("page") int page,
                                        @PathVariable("size") int size) {
        return cmsTemplateService.findList(page, size);
    }

    @Override
    @PostMapping
    public CmsTemplateResult add(@RequestBody CmsTemplate cmsTemplate) {
        return new CmsTemplateResult(CommonCode.SUCCESS, cmsTemplateService.add(cmsTemplate));
    }

    @Override
    @GetMapping("/{templateId}")
    public CmsTemplateResult getCmsTemplate(@PathVariable("templateId") String templateId) {
        CmsTemplate cmsTemplate = cmsTemplateService.findBySiteId(templateId);
        if (cmsTemplate == null) {
            return new CmsTemplateResult(CommonCode.FAIL, null);
        }
        return new CmsTemplateResult(CommonCode.SUCCESS, cmsTemplate);
    }

    @Override
    @DeleteMapping("/{templateId}")
    public CmsTemplateResult deleteById(@PathVariable("templateId") String templateId) {
        try {
            cmsTemplateService.deleteById(templateId);
        } catch (Exception e) {
            return new CmsTemplateResult(CommonCode.FAIL, null);
        }
        return new CmsTemplateResult(CommonCode.SUCCESS, null);
    }

    @Override
    @PutMapping
    public CmsTemplateResult edit(@RequestBody CmsTemplate cmsTemplate) {
        CmsTemplate edit = cmsTemplateService.edit(cmsTemplate);
        if (edit != null) {
            return new CmsTemplateResult(CommonCode.SUCCESS, edit);
        }
        return new CmsTemplateResult(CommonCode.FAIL, null);
    }

}

CmsTemplateControllerApi

package com.xuecheng.api.cms;

import com.xuecheng.framework.domain.cms.CmsTemplate;
import com.xuecheng.framework.domain.cms.response.CmsTemplateResult;
import com.xuecheng.framework.model.response.QueryResponseResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;

@Api(value = "CMS模板管理接口", description = "CMS頁面模板管理接口，提供模板的增刪改查")
public interface CmsTemplateControllerApi {

    @ApiOperation("查詢所有模板信息")
    QueryResponseResult findAll();

    @ApiOperation("分頁查詢模板列表")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "page", value = "頁碼", required = true, paramType = "path"),
            @ApiImplicitParam(name = "size", value = "每頁記錄數", required = true, paramType = "path")
    })
    QueryResponseResult findList(int page, int size);

    @ApiOperation("新增模板")
    CmsTemplateResult add(CmsTemplate cmsTemplate);

    @ApiOperation("修改模板")
    CmsTemplateResult edit(CmsTemplate cmsTemplate);

    @ApiOperation("按ID獲取模板")
    CmsTemplateResult getCmsTemplate(String templateId);

    @ApiOperation("按ID刪除模板")
    CmsTemplateResult deleteById(String templateId);

}

前端

template_list.vue

  <template>
    <div>
        <el-button type="primary" icon="el-icon-search" @click="query" style="margin-top: 20px">查詢</el-button>
        <!-- 新增站點按鈕 -->
        <router-link class="mui-tab-item" :to="{path:'/cms/template/add/'}">
          <el-button type="primary" icon="el-icon-search" style="margin-top: 20px">新增模板</el-button>
        </router-link>
        <!-- 站點展示表格 -->
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
            <el-table-column type="index" width="70"></el-table-column>
            <el-table-column prop="siteId" label="站點ID" width="300"></el-table-column>
            <el-table-column prop="templateName" label="模板名稱" width="320"></el-table-column>
            <el-table-column prop="templateParameter" label="模板參數" width="400"></el-table-column>
            <el-table-column prop="templateFileId" label="模板文件ID" width="250"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="edit(scope.$index, scope.row)">編輯</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="del(scope.$index, scope.row)">刪除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 分頁欄 -->
        <el-pagination
            @current-change="changePage"
            :current-page.sync="params.page"
            :page-size="params.size"
            layout="total, prev, pager, next"
            :total="total"
            style="float: right">
        </el-pagination>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
          tableData: [],
          total: 50,
          params: {
              page: 1,
              size: 20,
          }
        }
      },
      methods: {
        // cmsTemplate分頁查詢
        changePage:function() {
            this.query()
        },
        // 分頁查詢cmsTemplate
        query:function() {
            // 分頁查詢cmsTemplate
            cmsApi.template_list(this.params.page, this.params.size).then(res => {
                // 獲取數據
                this.total = res.queryResult.total
                this.tableData = res.queryResult.list
            })
        },
        // 編輯cmsTemplate
        edit:function(index, data) {
          this.$router.push({
                    path:'/cms/template/edit', 
                    query: {
                        page:this.params.page,
                        templateId:data.templateId
                    }
                })
        },
        // 刪除cmsTemplate
        del:function(index, data) {
          this.$confirm('確認刪除該條記錄?', '提示', {
              confirmButtonText: '確定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              // 刪除
              cmsApi.deleteCmsTemplateById(data.templateId).then(res => {
                // 提示消息
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: 'success'
                })
              })
              
              // 重新查詢數據
              this.query()
          })
        }
      },
      mounted() {
          this.query()
      },
      created() {
        this.params.page = Number.parseInt(this.$route.query.page || 1)
      }
    }
  </script>

template_add.vue

  <template>
    <div style="margin-top:10px; width:40%">
        <el-form :model="cmsTemplate" :rules="rules" ref="cmsTemplateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="站點ID" prop="siteId">
                <!-- 站點ID下拉選擇 -->
                <el-select v-model="cmsTemplate.siteId" placeholder="請選擇站點">
                    <el-option
                        v-for="item in cmsSiteList"
                        :key="item.siteId"
                        :label="item.siteName"
                        :value="item.siteId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板名稱" prop="templateName">
                <el-input v-model="cmsTemplate.templateName"></el-input>
            </el-form-item>
            <el-form-item label="模板參數" prop="templateParameter">
                <el-input v-model="cmsTemplate.templateParameter"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="goBack">返回</el-button>
                <el-button type="primary" @click="onSubmit('cmsTemplateForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
            cmsSiteList:[],
            cmsTemplate: {
                templateName: '', 
                templateParameter: '',
                siteId: ''
            },
            rules: {
                siteId: [
                    { required: true, message: '請選擇站點', trigger: 'change' }
                ],
                templateName: [
                    { required: true, message: '請輸入模板名稱', trigger: 'blur' }
                ],
                templateParameter: [
                    { required: true, message: '請輸入模板參數', trigger: 'blur' }
                ]
            }
        }
      },
      methods: {
        // 查詢所有站點cmsSite
        cmsSiteQueryAll:function() {
            cmsApi.site_list_all().then(res => {
              this.cmsSiteList = res.queryResult.list
            })
        },
        onSubmit:function(formname) {
            // 校驗表單
            this.$refs[formname].validate((valid) => {
                if (valid) {// 校驗通過
                    this.$confirm('確認提交?', '提示', {
                        confirmButtonText: '確定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        cmsApi.addCmsTemplate(this.cmsTemplate).then(res => {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                            // 清空數據
                            this.cmsTemplate = {}
                            // 回退頁面
                            this.goBack()
                        }).catch(res => {
                            this.$message({
                                showClose: true,
                                message: '系統異常',
                                type: 'error'
                            })
                        })
                    })
                } else {
                    this.$message({
                        showClose: true,
                        message: '提交失敗，請檢查是否正確錄入數據！',
                        type: 'error'
                    });
                }
            });
            
        },
        goBack:function() {
            if (this.$route.query.page) {
                // 返回
                this.$router.push({
                    path:'/cms/template/list', 
                    query: {
                        page:this.$route.query.page
                    }
                })
            } else {
                this.$router.push({
                    path:'/cms/template/list'
                })
            }
        }
      },
      created() {
        
      },
      mounted() {
          this.cmsSiteQueryAll()
      }
    }
  </script>

template_edit.vue

  <template>
    <div style="margin-top:10px; width:40%">
        <el-form :model="cmsTemplate" :rules="rules" ref="cmsTemplateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="站點ID" prop="siteId">
                <!-- 站點ID下拉選擇 -->
                <el-select v-model="cmsTemplate.siteId" placeholder="請選擇站點">
                    <el-option
                        v-for="item in cmsSiteList"
                        :key="item.siteId"
                        :label="item.siteName"
                        :value="item.siteId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板名稱" prop="templateName">
                <el-input v-model="cmsTemplate.templateName"></el-input>
            </el-form-item>
            <el-form-item label="模板參數" prop="templateParameter">
                <el-input v-model="cmsTemplate.templateParameter"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="goBack">返回</el-button>
                <el-button type="primary" @click="onSubmit('cmsTemplateForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
  </template>

  <script>
    import * as cmsApi from '../api/cms'
    export default {
      data() {
        return {
            cmsSiteList:[],
            cmsTemplate: {
                templateName: '', 
                templateParameter: '',
                siteId: ''
            },
            rules: {
                siteId: [
                    { required: true, message: '請選擇站點', trigger: 'change' }
                ],
                templateName: [
                    { required: true, message: '請輸入模板名稱', trigger: 'blur' }
                ],
                templateParameter: [
                    { required: true, message: '請輸入模板參數', trigger: 'blur' }
                ]
            }
        }
      },
      methods: {
        // 查詢所有站點cmsSite
        cmsSiteQueryAll:function() {
            cmsApi.site_list_all().then(res => {
              this.cmsSiteList = res.queryResult.list
            })
        },
        onSubmit:function(formname) {
            // 校驗表單
            this.$refs[formname].validate((valid) => {
                if (valid) {// 校驗通過
                    this.$confirm('確認提交?', '提示', {
                        confirmButtonText: '確定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        cmsApi.editCmsTemplate(this.cmsTemplate).then(res => {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                            // 清空數據
                            this.cmsTemplate = {}
                            // 回退頁面
                            this.goBack()
                        })
                    })
                } else {
                    this.$message({
                        showClose: true,
                        message: '提交失敗，請檢查是否正確錄入數據！',
                        type: 'error'
                    });
                }
            });
            
        },
        goBack:function() {
            if (this.$route.query.page) {
                // 返回
                this.$router.push({
                    path:'/cms/template/list', 
                    query: {
                        page:this.$route.query.page
                    }
                })
            } else {
                this.$router.push({
                    path:'/cms/template/list'
                })
            }
        },
        getCmsTemplate:function(templateId) {
            cmsApi.findCmsTemplateById(templateId).then(res => {
                this.cmsTemplate = res.cmsTemplate
            })
        }
      },
      created() {
        this.getCmsTemplate(this.$route.query.templateId)
        this.cmsSiteQueryAll()
      }
    }
  </script>

定義路由

修改src/module/cms/router/index.js

import Home from '@/module/home/page/home.vue'
import page_list from '@/module/cms/page/page_list.vue'
import page_add from '@/module/cms/page/page_add.vue'
import page_edit from '@/module/cms/page/page_edit.vue'
import site_list from '@/module/cms/page/site_list.vue'
import site_add from '@/module/cms/page/site_add.vue'
import site_edit from '@/module/cms/page/site_edit.vue'
import template_list from '@/module/cms/page/template_list.vue'
import template_add from '@/module/cms/page/template_add.vue'
import template_edit from '@/module/cms/page/template_edit.vue'

export default [{ 
  path: '/cms', 
  component: Home, 
  name: 'CMS內容管理', 
  hidden: false, 
  children:[{
    path:'/cms/page/list',
    name:'頁面列表',
    component: page_list,
    hidden:false
  },{
    path:'/cms/page/add',
    name:'頁面新增',
    component: page_add,
    hidden:true
  },{
    path:'/cms/page/edit',
    name:'頁面修改',
    component: page_edit,
    hidden:true
  },{
    path:'/cms/site/list',
    name:'站點列表',
    component: site_list,
    hidden:false
  },{
    path:'/cms/site/add',
    name:'站點新增',
    component: site_add,
    hidden:true
  },{
    path:'/cms/site/edit',
    name:'站點修改',
    component: site_edit,
    hidden:true
  },{
    path:'/cms/template/list',
    name:'模板列表',
    component: template_list,
    hidden:false
  },{
    path:'/cms/template/add',
    name:'模板新增',
    component: template_add,
    hidden:true
  },{
    path:'/cms/template/edit',
    name:'模板修改',
    component: template_edit,
    hidden:true
  }]
}]

定義API

在src/module/cms/api/cms.js中新增API定義

/********************************************
 * CMS模板相關API
 ********************************************/
/**
 * 分頁查詢CMS模板
 */ 
export const template_list = (page,size) => {
    return http.requestQuickGet(apiUrl + '/cms/template/list/'+page+'/'+size) 
} 
/**
 * 查詢所有模板信息
 */
export const template_list_all = () => { 
    return http.requestQuickGet(apiUrl + '/cms/template') 
}

/**
 * 新增模板
 */
export const addCmsTemplate = (params) => { 
    return http.requestPost(apiUrl + '/cms/template', params)
}

/**
 * 修改模板
 */
export const editCmsTemplate = (params) => { 
    return http.requestPut(apiUrl + '/cms/template', params)
}

/**
 * 按ID查詢模板
 */
export const findCmsTemplateById = (pageId) => { 
    return http.requestQuickGet(apiUrl + '/cms/template/'+ pageId)
}

/**
 * 按ID刪除模板
 */
export const deleteCmsTemplateById = (pageId) => { 
    return http.requestDelete(apiUrl + '/cms/template/'+ pageId)
}

以上內容全部由博主編寫並測試通過