首页 >web前端 >js教程 >关于vue.js前后端数据交互之提交数据的操作

关于vue.js前后端数据交互之提交数据的操作

不言原创: 2018-06-29 17:17:232294浏览

这篇文章主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下

本文实例讲述了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(&#39;ruleForm&#39;)">提交</el-button>
 </el-form-item>
</el-form>

（2）在data里面定义表单内容的字段及表单的约束规则；

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

（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("提交成功", &#39;提交结果&#39;, {
                confirmButtonText: &#39;确定&#39;,
                type: &#39;success&#39;,
                callback: action => {
                },
              });
            }
            else{
              this.$alert("提交失败", &#39;提交结果&#39;, {
                confirmButtonText: &#39;确定&#39;,
                type: &#39;warning&#39;,
                callback: action => {
                },
              });
            }
          })
        } else {
          console.log(&#39;error submit!!&#39;);
          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几个字段，并且后端的接口啥的都已经定义好的情况下，不然是不会成功的哦

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

关于vue.js前后端数据交互之提交数据的操作

相关文章