学成在线--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('提交失败');}});});}});}