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},

提供好的资料page_edit.vue

复制到项目里面

修改按钮

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

在钩子函数内取参数并查询. 调用的api里面的page_get方法

首先需要打开修改页面

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

    <el-table-column label="操作" width="">
<template slot-scope="page">
<el-button
size="samll"
type="text"
@click="edit(page.row.pageId)">编辑 </el-button>
</template>
</el-table-column>

slot-scope表示插槽,要从页面内拿一些数据

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

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

定义修改的方法。路径的地方如果这么传值的话,是有问题的

     edit:function (pageId) {
//打开修改页面
this.$router.push({
path: '/cms/page/edit/'+pageId
})
}

定义页面的路由

通过url传参,冒号pageId

import page_edit from '@/module/cms/page/page_edit.vue'

{path: '/cms/page/edit/:pageId', name:'修改页面', component: page_edit,hidden:true}

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

前端api定义方法

export const page_get = id => {
return http.requestQuickGet(apiUrl+'/cms/page/get/'+id)
}
export const page_edit = (id,paramas) => {
return http.requestPost(apiUrl+'/cms/page/edit/'+id,paramas)
}


点击就进入了修改页面

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

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

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

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

那么取值的地方也就是abc

最终代码

<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-option
v-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-option
v-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="">静态</el-radio>
<el-radio class="radio" label="">动态</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 {
//页面id
pageId:'',
//模版列表
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:'',
siteName:'测试站'
}
]
//模板列表
this.templateList = [
{
templateId:'5a962b52b00ffc514038faf7',
templateName:'首页'
},
{
templateId:'5a962bf8b00ffc514038fafa',
templateName:'轮播图'
}
]
}
}
</script>
<style> </style>

page_edit.vue

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

  1. 微服务项目开发学成在线_day03 CMS页面管理开发

    springboot引入mangodb依赖坐标:在spring-boot集成条件下,使用mongodb的DAO层开发. swagger查看接口文档,请求地址:http://localhost:3100 ...

  2. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作

    这是轮播图的原始文件 运行门户需要把 nginx启动起来 单独运行轮播图.把里面的css的引用都加上网址的url 这就是单独访问到的轮播图的效果 轮播图模板的地址: 阶段5 3.微服务项目[学成在线] ...

  3. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_03-用户认证技术方案-Oauth2协议

    2.2 Oauth2认证 2.2.1 Oauth2认证流程 第三方认证技术方案最主要是解决认证协议的通用标准 问题,因为要实现 跨系统认证,各系统之间要遵循一定的 接口协议. OAUTH协议为用户资源 ...

  5. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析

    1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...

  6. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_20-页面静态化-静态化测试-填写页面DataUrl

    启动前端和后端.轮播图的数据url可以在这里修改. 找到列表页面的轮播图,然后点击编辑 随便更新一个地址测试 提交后数据再次编辑 发现url没有变化 在pageService里面update方法把更新 ...

  7. 微服务项目开发学成在线_day02 CMS前端开发

    1 Vue.js与Webpack研究 开发版的浏览器:https://www.google.cn/intl/zh-CN/chrome/dev/ 前端的开发框架:微服务项目开发学成在线_Vue.js与W ...

  8. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_05-Feign远程调用-客户端负载均衡介绍

    2 Feign远程调用 在前后端分离架构中,服务层被拆分成了很多的微服务,服务与服务之间难免发生交互,比如:课程发布需要调用 CMS服务生成课程静态化页面,本节研究微服务远程调用所使用的技术. 下图是 ...

  9. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_02-Eureka注册中心-搭建Eureka单机环境

    我们先搭建单机环境 govern是治理的意思, 这样就把工程创建好了 创建包 创建SpringBoot的启动类. 在父工程里面已经确定了Spring Cloud的版本了.相当于锁定了版本 接下里只需要 ...

  10. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_04-Eureka注册中心-将服务注册到Eureka Server

    cms相当于客户端 配置客户端的信息 后面加逗号分隔开 50102表示向两台eureka服务上报服务,如果有一台死掉了 那么还可以上另外的一台去注册服务 直接把ip注册到eureka 启动类加注解 重 ...

随机推荐

  1. 《数据结构与算法之美》 <07>队列:队列在线程池等有限资源池中的应用?

    我们知道,CPU 资源是有限的,任务的处理速度与线程个数并不是线性正相关.相反,过多的线程反而会导致 CPU 频繁切换,处理性能下降.所以,线程池的大小一般都是综合考虑要处理任务的特点和硬件环境,来事 ...

  2. 中国大学MOOC课程信息之数据分析可视化一

    版权声明:本文为博主原创文章,转载 请注明出处:https://blog.csdn.net/sc2079/article/details/82263391 9月2日更:中国大学MOOC课程信息之数据分 ...

  3. editplus多行合并成一行

    原文:https://www.cnblogs.com/jpfss/p/9238877.html Editplus 合并行快捷键: Ctrl+Shift+J     ,选中要合并的行,再按快捷键即可

  4. 用js刷剑指offer(包含min函数的栈)

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 牛客网链接 js代码 const stack1 = [] const stack2 = ...

  5. Reservoir Sampling 蓄水池采样算法

    https://blog.csdn.net/huagong_adu/article/details/7619665 https://www.jianshu.com/p/63f6cf19923d htt ...

  6. python+Appium自动化:日志logging模块

    日志级别 debug.info.warn.error.critical五个级别 logging模块构成(四部分) logger(记录器,用于日志采集) Handler(处理器,将日志记录发送到合适的路 ...

  7. 收集Nginx-access,Nginx-error日志

    1.配置Logstash [root@Logstash logstash]# vim /usr/local/logstash/config/nginx_log.conf input {   beats ...

  8. maven工程中dubbo与spring整合

    1)引入相应jar包 <!-- 引入dubbo服务 start--> <dependency> <groupId>com.alibaba</groupId&g ...

  9. 9、组件注册-@Import-使用ImportSelector

    9.组件注册-@Import-使用ImportSelector 9.1 @Import 源码: @Target(ElementType.TYPE) @Retention(RetentionPolicy ...

  10. django 内置标签

    1.autoescape 自动转义开关 官网:https://docs.djangoproject.com/en/2.2/ref/templates/builtins/ 作用:将 html 内容解析成 ...