这次给大家带来操作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('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几个字段，并且后端的接口啥的都已经定义好的情况下，不然是不会成功的哦
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用vuex操作state对象
以上就是操作vue.js前后端数据的详细内容。