1、进入页面，通过钩子方法请求服务端获取页面信息，并赋值给数据模型对象
2、页面信息通过数据绑定在表单显示
3、用户修改信息点击“提交”请求服务端修改页面信息接口
3.3.3 修改页面
3.3.3.1 编写page_edit页面
修改页面的布局同添加页面，可以直接复制添加页面，在添加页面基础上修改。
下边编写页面内容：
1、编写page_edit.vue
页面布局同添加页面，略。
2、配置路由
进入修改页面传入pageId

import page_edit from '@/module/cms/page/page_edit.vue';
{ path: '/cms/page/edit/:pageId', name:'修改页面',component: page_edit,hidden:true},

提供好的资料oage_edi.vue

复制到项目里面

修改按钮

会执行一个修改提交的方法

在钩子函数内取参数并查询

首先需要打开修改页面

在列表也的table上加一个修改列

拿的数据就是这一行的数据，所以这里的page是对应的。从page中就可以拿到一行的数据 page.row

如果想增加一列，读出这一行的信息。那就以这种插槽的方式定义一个template。page是任意命名的

定义修改的方法

定义页面的路由

通过url传参，冒号pageId

这样我们最终通过这种方式打开

前端api定义方法

点击就进入了修改页面

修改页面的数据就加载出来了

现在的路由是通过url地址传参的

所以要通过params.pageId这种去取值

如果你在路由的地方定义的是abc

那么取值的地方也就是abc

转载于:https://www.cnblogs.com/wangjunwei/p/11570014.html

阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_10-修改页面-前端-修改页面...相关推荐

2023年最新黑马程序员Java微服务项目--学成在线
正式上线Java微服务项目<学成在线> 项目对程序员的重要性不用播妞多说了吧更重要的是这次是完整!实战!企业级!项目! 划重点:全新发布!正式上线! <学成在线>项目以在 ...
微服务实战项目-学成在线-课程发布模块
学成在线-课程发布模块 1 模块需求分析 1.1 模块介绍课程信息编辑完毕即可发布课程,发布课程相当于一个确认操作,课程发布后学习者在网站可以搜索到课程,然后查看课程的详细信息,进一步选课.支付.在 ...
前端网页项目-学成在线案例
典型的企业级网站目的是为了整体感知企业级网站布局流程,复习以前知识准备素材和工具: 学成在线PSD源文件开发工具=PS(切图)/cutterman插件+vscode(代码)+chrome(测试) ...
学成在线--1.CMS接口开发
文章目录 0.定义CMS 1.CMS页面管理 2.需求分析 3.模型类介绍 4.定义请求及响应类型 5.定义接口 6.创建CMS工程结构 7.Dao 1)创建Dao,继承MongoRepository ...
Java的新项目学成在线笔记-day10（三）
1.4 测试CMS一键发布接口 1.4.1 配置虚拟主机在nginx配置课程详情页面的虚拟主机,实现访问:www.xuecheng.com/course/detail/.....html. #静态资 ...
Java的新项目学成在线笔记-day6（五）
1.4 页面发布前端用户操作流程: 1.用户进入cms页面列表. 2.点击"发布"请求服务端接口,发布页面. 3.提示"发布成功",或发布失败. 1.4.1 ...
Java的新项目学成在线笔记-day10（一）
1 课程发布 1.1 需求分析课程发布后将生成正式的课程详情页面,课程发布后用户即可浏览课程详情页面,并开始课程的学习. 课程发布生成课程详情页面的流程与课程预览业务流程相同,如下: 1.用户进入教 ...
Java的新项目学成在线笔记-day9（七）
3 课程预览技术方案 3.1 需求分析课程预览是为了保证课程发布后的正确性,通过课程预览可以直观的通过课程详情页面看到课程的信息是否正确, 通过课程预览看到的页面内容和课程发布后的页面内容是一致的. ...
学成在线--2.CMS前端页面查询开发
文章目录 0.思路总结 1.创建CMS模块的目录架构 2.创建页面并配置路由 1)在page目录新建page_list.vue,扩展名为.vue. 2)在cms的router下配置路由. 3)在bas ...
学成在线--7.CMS页面管理开发（异常处理）
文章目录 1.异常处理的问题分析 2.异常处理流程 3.可预知异常处理 1.自定义异常类 2.异常抛出类 3.异常捕获类 4.异常处理测试 1)定义错误代码 2)异常处理测试 4.不可预知异常处理 1 ...

阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_10-修改页面-前端-修改页面...

首先需要打开修改页面

定义页面的路由

前端api定义方法

阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_10-修改页面-前端-修改页面...相关推荐

最新文章

热门文章