表单数据提交到后台

export const page_add = paramas => {
return http.requestPost(apiUrl+'/cms/page/add',paramas)
}

page_add.vue的提交按钮的事件

要解析的结果json

使用message提示信息

简写的方式

 addSubmit(){
this.$refs['pageForm'].validate((valid)=>{
if(valid){
cmsApi.page_add(this.pageForm).then(res=>{
//解析服务端响应内容
if(res.success){
// this.$message({
// message:'提交成功!',
// type:'success'
// })
this.$message.success("提交成功")
}
});
}else{
//console.log('error submit!!')
this.$message.error("提交失败")
return false
}
})
}

纠正page_add.vue ,最上面是两个下拉选择select

controller里面加个断点

数据库内有数据

重复提交就会失败

增加一个是否确认提交

找到确认的弹窗的代码

<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template> <script>
export default {
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>

addSubmit(){
this.$refs.pageForm.validate((valid)=>{
console.log('表单的状态')
if(valid){
this.$confirm('您确定提交数据吗', '提示', {}).then(() => {
//alert(JSON.stringify(this.pageForm))
cmsApi.page_add(this.pageForm).then(res=>{
//解析服务端响应内容
if(res.success){
// this.$message({
// message:'提交成功!',
// type:'success'
// })
this.$message.success("提交成功")
}
});
}); }else{
//console.log('error submit!!')
this.$message.error("提交失败")
return false
}
})
}


确认就会提交成功

清空表单

resetFields和clearValidate区别

https://www.jianshu.com/p/b18c1ea2bf8f

成功后表单数据清空

最终代码

<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="类型">
<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 type="primary" @click="addSubmit" >提交</el-button>
<el-button type="primary" @click="go_back" >返回</el-button>
</div>
</div>
</template> <script>
import * as cmsApi from '../api/cms'
export default {
data() {
return {
//站点列表
siteList: [],
//模版列表
templateList: [],
//新增界面数据
pageForm: {
siteId: '',
templateId: '',
pageName: '',
pageAliase: '',
pageWebPath: '',
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'}
]
}
}
},
methods:{
addSubmit(){
this.$refs.pageForm.validate((valid)=>{
console.log('表单的状态')
if(valid){
this.$confirm('您确定提交数据吗', '提示', {}).then(() => {
//alert(JSON.stringify(this.pageForm))
cmsApi.page_add(this.pageForm).then(res=>{
//解析服务端响应内容
if(res.success){
// this.$message({
// message:'提交成功!',
// type:'success'
// })
this.$message.success("提交成功")
this.$refs['pageForm'].resetFields()
}
});
}); }else{
//console.log('error submit!!')
this.$message.error("提交失败")
return false
}
})
},
go_back() {
this.$router.push({
path:'/cms/page/list',
query:{
page: this.$route.query.page,
siteId: this.$route.query.siteId
}
})
}
},
created:function(){
//初始化站点列表
this.siteList = [
{
siteId:'5a751fab6abb5044e0d19ea1',
siteName:'门户主站'
},
{
siteId:'',
siteName:'测试站'
}
]
//模板列表
this.templateList = [
{
templateId:'5a962b52b00ffc514038faf7',
templateName:'首页'
},
{
templateId:'5a962bf8b00ffc514038fafa',
templateName:'轮播图'
}
]
}
}
</script>

page_add.vue

阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_08-新增页面-前端-Api调用的更多相关文章

  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. 微服务项目开发学成在线_day02 CMS前端开发

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

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

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

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

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

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

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

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

    1 Eureka注册中心 1.1 需求分析 在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...

随机推荐

  1. 5.Hbase API 操作开发

    Hbase API 操作开发需要连接Zookeeper进行节点的管理控制 1.配置 HBaseConfiguration: 包:org.apache.hadoop.hbase.HBaseConfigu ...

  2. EditPlus使用技巧

    1.p{$$}*10  按ctrl+E  自动 填写10行 P标签.  $表示数字,$$表示2位数...   p{b$}*10 2.cltr +j 复制当前行. 3.自动填充开启. --------锚 ...

  3. Java并发包--ConcurrentLinkedQueue

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3498995.html ConcurrentLinkedQueue介绍 ConcurrentLinkedQ ...

  4. ESLint 报错 import/no-unresolved

    马的,就这个规则百度了大半天终于找到可以用的: 不得不说百度真的辣鸡 还是翻墙去谷歌找到了解决方法 解决方法是:在 .eslintrc 中设置 "rules": { "i ...

  5. Spring boot dubbo+zookeeper 搭建------基于gradle项目的消费端与服务端分离实战

    1. Dubbo简介 Dubbo是Alibaba开源的分布式框架,是RPC模式的一种成熟的框架,优点是可以与Spring无缝集成,应用到我们的后台程序中.具体介绍可以查看Dubbo官网. 2. Why ...

  6. FireFox版本大于36.0,Yslow不能正常使用解决方案

    Yslow暂时不支持firefox 36.0及以上版本你可以使用它的书签版本.访问这里 http://yslow.org/mobile/把页面最后的那个 Desktop Bookmarklet Ins ...

  7. wangEditor实现ctrl+v粘贴word图片并上传

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  8. web批量下载文件到本地

    JavaWeb 文件下载功能 文件下载的实质就是文件拷贝,将文件从服务器端拷贝到浏览器端,所以文件下载需要IO技术将服务器端的文件读取到,然后写到response缓冲区中,然后再下载到个人客户端. 1 ...

  9. 以下是Direct 3d的安装步骤

    安装配置 真的是软肋 o( ̄ε ̄*)   我记录以下 步骤 防止下次忘记了 首先要安装到direct3d 之后在vs上配置  如下: 找到 安装direct3d的文件夹 复制路径(如下 我的路径为 G ...

  10. 安装包设计-------打包(MFC)---------知识总结

    目录: 1.选择文件夹 2.判断文件夹或文件是否存在 3.通过cmd命令行向程序中传递参数. 4.路径处理 5.文件夹以及文件的删除 6.复制文件 7.创建目录 8.从当前的应用程序中抽取资源 9.引 ...