學成在線--5.CMS頁面管理開發（修改頁面）

文章目錄

- 1.修改頁面流程
- - 1）前端邏輯
  - 2）后端邏輯
- 2.修改頁面接口定義
- 3.后端開發--Dao
- 4.后端開發--Service
- 5.后端開發--Controller
- - 1）根據id查詢頁面
  - 2）保存頁面信息
- 6.前端開發--頁面處理流程
- 7.前端開發--編寫page_edit.vue
- 8.前端開發--配置路由
- 9.前端開發--在page_list.vue中添加“編輯”鏈接
- 10.前端開發--進入修改頁面立即顯示要修改的頁面信息
- - 1）定義api方法
  - 2）定義數據對象
  - 3）在created鉤子方法中查詢頁面信息
- 11.前端開發--Api調用
- - 1）定義api方法
  - 2）提交按鈕方法
  - 3）提交按鈕時間內容

1.修改頁面流程

1）前端邏輯

（1）用戶在頁面列表中，點擊“編輯”按鈕；
（2）進入編輯頁面，通過鉤子方法請求服務端獲取正在編輯的當前頁面信息，并賦值給數據模型對象；
（3）頁面信息通過數據綁定在表單顯示；
（4）用戶修改信息點擊“提交”，請求服務端修改頁面信息接口。

2）后端邏輯

（1）用戶在前端點擊“編輯”，跳轉編輯頁面后，需要顯示頁面信息，此時后端向服務器請求一次數據（使用 Spring Data提供的findById方法完成根據主鍵查詢）；
（2）用戶在編輯頁面修改相應信息后，點擊“提交“，此時第二次和數據庫進行數據交互（使用 Spring Data提供的save方法完成數據保保存）。

2.修改頁面接口定義

文件位置：Api項目下的com/ xuecheng/ api/ cms/ CmsPageControllerApi
修改頁面需要定義兩個API接口，一個用于根據指定id進行查詢，一個用于對相應信息進行編輯，分別如下：

@ApiOperation("通過ID查詢頁面")
public CmsPage findById(String id);@ApiOperation("修改頁面")
public CmsPageResult edit(String id,CmsPage cmsPage);

3.后端開發–Dao

文件位置：com/ xuecheng/ manage_cms/ dao/ CmsPageRepository

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

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

4.后端開發–Service

文件位置：com/ xuecheng/ manage_cms/ service/ PageService

    //根據頁面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){//準備更新數據//設置要修改的數據//更新模板idone.setTemplateId(cmsPage.getTemplateId());//更新所屬站點one.setSiteId(cmsPage.getSiteId());//更新頁面別名one.setPageAliase(cmsPage.getPageAliase());//更新頁面名稱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);}

5.后端開發–Controller

文件位置：com/ xuecheng/ manage_cms/ controller/ CmsPageController

1）根據id查詢頁面

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

2）保存頁面信息

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

6.前端開發–頁面處理流程

7.前端開發–編寫page_edit.vue

修改頁面的布局同添加頁面，可以直接復制添加頁面，在添加頁面基礎上修改。
文件位置：src/ module/ cms/ page/ page_edit.vue

<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-optionv-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-optionv-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 {//頁面idpageId:'',//模版列表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>

預覽：
在這里插入圖片描述

8.前端開發–配置路由

文件位置：src/ module/ cms/ route/ 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: '/',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/:pageId',name:'修改頁面',component: page_edit,hidden:true}]}
]

9.前端開發–在page_list.vue中添加“編輯”鏈接

文件位置：src/ module/ cms/ page/ page_list.vue

參考table組件的例子，在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,query:{
page: this.params.page,
siteId: this.params.siteId}})
}

預覽：
在這里插入圖片描述

10.前端開發–進入修改頁面立即顯示要修改的頁面信息

1）定義api方法

文件位置：src/ module/ cms/ api/ cms.js

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

2）定義數據對象

文件位置：src/ module/ cms/ page/ page_edit.vue

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

data(){return {//頁面idpageId:'',//模版列表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:[]}},

3）在created鉤子方法中查詢頁面信息

文件位置：src/ module/ cms/ page/ page_edit.vue

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

11.前端開發–Api調用

1）定義api方法

文件位置：src/ module/ cms/ api/ cms.js

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

2）提交按鈕方法

文件位置：src/ module/ cms/ page/ page_edit.vue

<el‐button type="primary" @click="editSubmit" >提交</el‐button>

3）提交按鈕時間內容

文件位置：src/ module/ cms/ page/ page_edit.vue

      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('提交失敗');}});});}});}