学成在线--5.CMS页面管理开发（修改页面）
生活随笔
收集整理的這篇文章主要介紹了
学成在线--5.CMS页面管理开发（修改页面）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 1.修改頁(yè)面流程
- 1）前端邏輯
- 2）后端邏輯
- 2.修改頁(yè)面接口定義
- 3.后端開(kāi)發(fā)--Dao
- 4.后端開(kāi)發(fā)--Service
- 5.后端開(kāi)發(fā)--Controller
- 1）根據(jù)id查詢頁(yè)面
- 2）保存頁(yè)面信息
- 6.前端開(kāi)發(fā)--頁(yè)面處理流程
- 7.前端開(kāi)發(fā)--編寫(xiě)page_edit.vue
- 8.前端開(kāi)發(fā)--配置路由
- 9.前端開(kāi)發(fā)--在page_list.vue中添加“編輯”鏈接
- 10.前端開(kāi)發(fā)--進(jìn)入修改頁(yè)面立即顯示要修改的頁(yè)面信息
- 1）定義api方法
- 2）定義數(shù)據(jù)對(duì)象
- 3）在created鉤子方法中查詢頁(yè)面信息
- 11.前端開(kāi)發(fā)--Api調(diào)用
- 1）定義api方法
- 2）提交按鈕方法
- 3）提交按鈕時(shí)間內(nèi)容
1.修改頁(yè)面流程
1）前端邏輯
（1）用戶在頁(yè)面列表中，點(diǎn)擊“編輯”按鈕；
（2）進(jìn)入編輯頁(yè)面，通過(guò)鉤子方法請(qǐng)求服務(wù)端獲取正在編輯的當(dāng)前頁(yè)面信息，并賦值給數(shù)據(jù)模型對(duì)象；
（3）頁(yè)面信息通過(guò)數(shù)據(jù)綁定在表單顯示；
（4）用戶修改信息點(diǎn)擊“提交”，請(qǐng)求服務(wù)端修改頁(yè)面信息接口。
2）后端邏輯
（1）用戶在前端點(diǎn)擊“編輯”，跳轉(zhuǎn)編輯頁(yè)面后，需要顯示頁(yè)面信息，此時(shí)后端向服務(wù)器請(qǐng)求一次數(shù)據(jù)（使用 Spring Data提供的findById方法完成根據(jù)主鍵查詢 ）；
（2）用戶在編輯頁(yè)面修改相應(yīng)信息后，點(diǎn)擊“提交“，此時(shí)第二次和數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)交互（使用 Spring Data提供的save方法完成數(shù)據(jù)保保存）。
2.修改頁(yè)面接口定義
文件位置：Api項(xiàng)目下的com/ xuecheng/ api/ cms/ CmsPageControllerApi
修改頁(yè)面需要定義兩個(gè)API接口，一個(gè)用于根據(jù)指定id進(jìn)行查詢，一個(gè)用于對(duì)相應(yīng)信息進(jìn)行編輯，分別如下：
3.后端開(kāi)發(fā)–Dao
文件位置：com/ xuecheng/ manage_cms/ dao/ CmsPageRepository
使用 Spring Data提供的findById方法完成根據(jù)主鍵查詢 。
使用 Spring Data提供的save方法完成數(shù)據(jù)保存 。
4.后端開(kāi)發(fā)–Service
文件位置：com/ xuecheng/ manage_cms/ service/ PageService
//根據(jù)頁(yè)面id查詢頁(yè)面public CmsPage getById(String id){Optional<CmsPage> optional = cmsPageRepository.findById(id);if(optional.isPresent()){CmsPage cmsPage = optional.get();return cmsPage;}return null;}//修改頁(yè)面public CmsPageResult update(String id,CmsPage cmsPage){//根據(jù)id從數(shù)據(jù)庫(kù)查詢頁(yè)面信息CmsPage one = this.getById(id);if(one!=null){//準(zhǔn)備更新數(shù)據(jù)//設(shè)置要修改的數(shù)據(jù)//更新模板idone.setTemplateId(cmsPage.getTemplateId());//更新所屬站點(diǎn)one.setSiteId(cmsPage.getSiteId());//更新頁(yè)面別名one.setPageAliase(cmsPage.getPageAliase());//更新頁(yè)面名稱one.setPageName(cmsPage.getPageName());//更新訪問(wèn)路徑one.setPageWebPath(cmsPage.getPageWebPath());//更新物理路徑one.setPagePhysicalPath(cmsPage.getPagePhysicalPath());//提交修改cmsPageRepository.save(one);return new CmsPageResult(CommonCode.SUCCESS,one);}//修改失敗return new CmsPageResult(CommonCode.FAIL,null);}5.后端開(kāi)發(fā)–Controller
文件位置：com/ xuecheng/ manage_cms/ controller/ CmsPageController
1）根據(jù)id查詢頁(yè)面
@Override@GetMapping("/get/{id}")public CmsPage findById(@PathVariable("id") String id) {return pageService.getById(id);}2）保存頁(yè)面信息
@Override@PutMapping("/edit/{id}")//這里使用put方法，http 方法中put表示更新public CmsPageResult edit(@PathVariable("id")String id, @RequestBody CmsPage cmsPage) {return pageService.update(id,cmsPage);}6.前端開(kāi)發(fā)–頁(yè)面處理流程
（1）用戶在頁(yè)面列表中，點(diǎn)擊“編輯”按鈕；
（2）進(jìn)入編輯頁(yè)面，通過(guò)鉤子方法請(qǐng)求服務(wù)端獲取正在編輯的當(dāng)前頁(yè)面信息，并賦值給數(shù)據(jù)模型對(duì)象；
（3）頁(yè)面信息通過(guò)數(shù)據(jù)綁定在表單顯示；
（4）用戶修改信息點(diǎn)擊“提交”，請(qǐng)求服務(wù)端修改頁(yè)面信息接口。
7.前端開(kāi)發(fā)–編寫(xiě)page_edit.vue
修改頁(yè)面的布局同添加頁(yè)面，可以直接復(fù)制添加頁(yè)面，在添加頁(yè)面基礎(chǔ)上修改。
文件位置：src/ module/ cms/ page/ page_edit.vue
預(yù)覽：
8.前端開(kāi)發(fā)–配置路由
文件位置：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:'頁(yè)面列表',component: page_list,hidden:false},{path:'/cms/page/add',name:'新增頁(yè)面',component: page_add,hidden:true},{path:'/cms/page/edit/:pageId',name:'修改頁(yè)面',component: page_edit,hidden:true}]} ]9.前端開(kāi)發(fā)–在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>編寫(xiě)edit方法
//修改 edit:function (pageId) { this.$router.push({ path: '/cms/page/edit/'+pageId,query:{ page: this.params.page, siteId: this.params.siteId}}) }預(yù)覽：
10.前端開(kāi)發(fā)–進(jìn)入修改頁(yè)面立即顯示要修改的頁(yè)面信息
1）定義api方法
文件位置：src/ module/ cms/ api/ cms.js
//根據(jù)id查詢頁(yè)面 export const page_get = id =>{return http.requestQuickGet(apiUrl+'/cms/page/get/'+id) }2）定義數(shù)據(jù)對(duì)象
文件位置：src/ module/ cms/ page/ page_edit.vue
進(jìn)入修改頁(yè)面?zhèn)魅雙ageId參數(shù)，在數(shù)據(jù)模型中添加pageId
data(){return {//頁(yè)面idpageId:'',//模版列表templateList:[],addLoading: false,//加載效果標(biāo)記//新增界面數(shù)據(jù)pageForm: {siteId:'',templateId:'',pageName: '',pageAliase: '',pageWebPath: '',dataUrl:'',pageParameter:'',pagePhysicalPath:'',pageType:'',pageCreateTime: new Date()},pageFormRules: {siteId:[{required: true, message: '請(qǐng)選擇站點(diǎn)', trigger: 'blur'}],templateId:[{required: true, message: '請(qǐng)選擇模版', trigger: 'blur'}],pageName: [{required: true, message: '請(qǐng)輸入頁(yè)面名稱', trigger: 'blur'}],pageWebPath: [{required: true, message: '請(qǐng)輸入訪問(wèn)路徑', trigger: 'blur'}],pagePhysicalPath: [{required: true, message: '請(qǐng)輸入物理路徑', trigger: 'blur'}]},siteList:[]}},3）在created鉤子方法中查詢頁(yè)面信息
文件位置：src/ module/ cms/ page/ page_edit.vue
created: function () {this.pageId=this.$route.params.pageId;//根據(jù)主鍵查詢頁(yè)面信息cmsApi.page_get(this.pageId).then((res) => {console.log(res);if(res){this.pageForm = res;}});},11.前端開(kāi)發(fā)–Api調(diào)用
1）定義api方法
文件位置：src/ module/ cms/ api/ cms.js
//修改頁(yè)面提交 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）提交按鈕時(shí)間內(nèi)容
文件位置：src/ module/ cms/ page/ page_edit.vue
editSubmit(){this.$refs.pageForm.validate((valid) => {//表單校驗(yàn)if (valid) {//表單校驗(yàn)通過(guò)this.$confirm('確認(rèn)提交嗎？', '提示', {}).then(() => {this.addLoading = true;//修改提交請(qǐng)求服務(wù)端的接口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('提交失敗');}});});}});}總結(jié)
以上是生活随笔為你收集整理的学成在线--5.CMS页面管理开发（修改页面）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： SQL 2012企业版安装教程
- 下一篇： Multisim14.0详细安装教程