這次帶給大家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列印輸出也可以看到啦! ! !
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是vue.js前後端資料互動步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!