泉州网站建设的步骤,品牌网站有哪些内容,如何推广引流,网站设计四项原则文章目录1.修改页面流程1#xff09;前端逻辑2#xff09;后端逻辑2.修改页面接口定义3.后端开发--Dao4.后端开发--Service5.后端开发--Controller1#xff09;根据id查询页面2#xff09;保存页面信息6.前端开发--页面处理流程7.前端开发--编写page_edit.vue8.前端开发--配…
文章目录1.修改页面流程1前端逻辑2后端逻辑2.修改页面接口定义3.后端开发--Dao4.后端开发--Service5.后端开发--Controller1根据id查询页面2保存页面信息6.前端开发--页面处理流程7.前端开发--编写page_edit.vue8.前端开发--配置路由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){OptionalCmsPage 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查询页面 OverrideGetMapping(/get/{id})public CmsPage findById(PathVariable(id) String id) {return pageService.getById(id);}2保存页面信息 OverridePutMapping(/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
templatedivel-form :modelpageForm label-width80px :rulespageFormRules refpageForm el-form-item label所属站点 propsiteIdel-select v-modelpageForm.siteId placeholder请选择站点el-optionv-foritem in siteList:keyitem.siteId:labelitem.siteName:valueitem.siteId/el-option/el-select/el-form-itemel-form-item label选择模版 proptemplateIdel-select v-modelpageForm.templateId placeholder请选择el-optionv-foritem in templateList:keyitem.templateId:labelitem.templateName:valueitem.templateId/el-option/el-select/el-form-itemel-form-item label页面名称 proppageNameel-input v-modelpageForm.pageName auto-completeoff /el-input/el-form-itemel-form-item label别名 proppageAliaseel-input v-modelpageForm.pageAliase auto-completeoff /el-input/el-form-itemel-form-item label访问路径 proppageWebPathel-input v-modelpageForm.pageWebPath auto-completeoff /el-input/el-form-itemel-form-item label物理路径 proppagePhysicalPathel-input v-modelpageForm.pagePhysicalPath auto-completeoff /el-input/el-form-itemel-form-item label数据Url propdataUrlel-input v-modelpageForm.dataUrl auto-completeoff /el-input/el-form-itemel-form-item label类型el-radio-group v-modelpageForm.pageTypeel-radio classradio label0静态/el-radioel-radio classradio label1动态/el-radio/el-radio-group/el-form-itemel-form-item label创建时间el-date-picker typedatetime placeholder创建时间 v-modelpageForm.pageCreateTime/el-date-picker/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickgo_back返回/el-buttonel-button typeprimary click.nativeeditSubmit :loadingaddLoading提交/el-button/div/div
/template
scriptimport * as cmsApi from ../api/cmsexport 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.pageIdthis.$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操作 width80
template slot‐scopepage
el‐button
sizesmalltypetext
clickedit(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.pageIdthis.$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 typeprimary clickeditSubmit 提交/el‐button3提交按钮时间内容
文件位置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(提交失败);}});});}});}
