学成在线--5.CMS页面管理开发（修改页面）
生活随笔
收集整理的這篇文章主要介紹了
学成在线--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進行查詢，一個用于對相應信息進行編輯，分別如下：
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.前端開發–頁面處理流程
（1）用戶在頁面列表中，點擊“編輯”按鈕；
（2）進入編輯頁面，通過鉤子方法請求服務端獲取正在編輯的當前頁面信息，并賦值給數據模型對象；
（3）頁面信息通過數據綁定在表單顯示；
（4）用戶修改信息點擊“提交”，請求服務端修改頁面信息接口。
7.前端開發–編寫page_edit.vue
修改頁面的布局同添加頁面，可以直接復制添加頁面，在添加頁面基礎上修改。
文件位置：src/ module/ cms/ page/ page_edit.vue
預覽：
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('提交失敗');}});});}});}總結
以上是生活随笔為你收集整理的学成在线--5.CMS页面管理开发（修改页面）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL 2012企业版安装教程
- 下一篇： Multisim14.0详细安装教程