本文实例讲述了 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 几个字段, 并且后端的接口啥的都已经定义好的情况下, 不然是不会成功的哦
来源: http://www.jb51.net/article/138837.htm