首頁 > 文章 > web前端 > 關於vue.js前後端資料互動之提交資料的操作

關於vue.js前後端資料互動之提交資料的操作

不言原創: 2018-06-29 17:17:232201瀏覽

這篇文章主要介紹了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前後端資料互動之提交資料的操作

相關文章