vue.js前后端数据交互之提交数据操作详解


Posted in Javascript onApril 24, 2018

本文实例讲述了vue.js前后端数据交互之提交数据操作。分享给大家供大家参考,具体如下:

前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点。。。额 。。。复杂,所以这里给大家提供一种用vue-resource向后端提交数据。

(1)第一步,先在template中写一个表单;

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
 <el-form-item label="用户名" prop="name">
   <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
 <el-form-item label="用户类型" prop="type">
   <el-select v-model="ruleForm.type" placeholder="请选择专利类型" style="width:500px;">
 <el-option label="一级管理员" value="1"></el-option>
 <el-option label="二级管理员" value="2"></el-option>
 <el-option label="三级管理员" value="3"></el-option>
 <el-option label="普通用户" value="4"></el-option>
   </el-select>
 </el-form-item>
 <el-form-item label="出生日期" prop="date">
   <el-input v-model="ruleForm.date"></el-input>
 </el-form-item>
 <el-form-item label="备注" prop="intro">
   <el-input type="textarea" v-model="ruleForm.intro" :rows="10"></el-input>
 </el-form-item>
 <el-form-item>
   <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
 </el-form-item>
</el-form>

(2)在data里面定义表单内容的字段及表单的约束规则;

data() {
   return {
    ruleForm: {
       name: '',
       type: '',
       date: '',
       intro: '',
     }
   }
 rules: {
     name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 1, max: 20, message: '长度在 1 到20个字符', trigger: 'blur' }
     ],
     type: [
      { required: true, message: '请选择用户类型', trigger: 'change' }
     ],
     date: [
      { required: true, message: '请输入出生日期', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
     ],
     intro: [
      { required: true, message: '请输入备注', trigger: 'blur' },
      { min: 50, max: 500, message: '请输入至少50个字', trigger: 'blur' }
     ],
    }
}

(3)定义提交表单的方法

methods:{
submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
      this.$http.get(baseURL+"api/create?table=user&"+getParamsString(param)).then(function(res){
            if(res.body==1){
              this.$alert("提交成功", '提交结果', {
                confirmButtonText: '确定',
                type: 'success',
                callback: action => {
                },
              });
            }
            else{
              this.$alert("提交失败", '提交结果', {
                confirmButtonText: '确定',
                type: 'warning',
                callback: action => {
                },
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
}

上面提交函数里面的baseURL以及api的介绍补充说明如下:

这里再向大家介绍一种用vue-resource从后端请求数据的方法。

比如说从后端请求一张表过来,

(1)首先,在data中return一个msg:[]数组来接收表的数据;

(2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails;

methods:{
  showDetails:function(){
    this.$http.get(baseURL+"api/条件").then(function(res){
      this.msg = res.body;
    });
  }
}

这里baseURL项目的路径,如果项目部署在服务器上面一般格式为www.XXX.com/项目名;之后的api是后端封装的api接口;然后条件就是对表的查询,删除等语句。比如对名为student的表进行查询,需要获取studentID为40001的学生信心,则查询语句可写为‘query?table=student&studentIDeq=40001',需要注意的是与有关数据库的操作字段(通俗点讲,可以理解为后端定义的字段)要加引号,而前端定义的字段要放在引号外面;

(3)最后,别忘了这个请求操作是没有调用,是默认执行的,所以要在mounted里面实时执行;

mounted: function (){
   this.showDetails();
}

好了,这个函数就完成了,你可以通过浏览器控制台的network查看从后端取得的数据,或者通过console打印输出也可以看到啦!!!

当然啦。前提是你的数据库里面有一张名为user的表,表里面有name,type,date,intro几个字段,并且后端的接口啥的都已经定义好的情况下,不然是不会成功的哦

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
vue实现选项卡及选项卡切换效果
Apr 24 #Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 #Javascript
js 图片转base64的方式(两种)
Apr 24 #Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 #Javascript
You might like
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python搜索指定目录的方法
2015/04/29 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
人事经理岗位职责
2014/04/28 职场文书
工地质量标语
2014/06/12 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers