您好,登錄后才能下訂單哦!
本文實(shí)例講述了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作。分享給大家供大家參考,具體如下:
前端小白剛開始做頁(yè)面的時(shí)候,我們的前端頁(yè)面中經(jīng)常會(huì)用到表單,所以學(xué)會(huì)提交表單也是一個(gè)基本技能,其實(shí)用ajax就能實(shí)現(xiàn),但他的原始語(yǔ)法有點(diǎn)。。。額 。。。復(fù)雜,所以這里給大家提供一種用vue-resource向后端提交數(shù)據(jù)。
(1)第一步,先在template中寫一個(gè)表單;
<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="請(qǐng)選擇專利類型" > <el-option label="一級(jí)管理員" value="1"></el-option> <el-option label="二級(jí)管理員" value="2"></el-option> <el-option label="三級(jí)管理員" 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里面定義表單內(nèi)容的字段及表單的約束規(guī)則;
data() { return { ruleForm: { name: '', type: '', date: '', intro: '', } } rules: { name: [ { required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur' }, { min: 1, max: 20, message: '長(zhǎng)度在 1 到20個(gè)字符', trigger: 'blur' } ], type: [ { required: true, message: '請(qǐng)選擇用戶類型', trigger: 'change' } ], date: [ { required: true, message: '請(qǐng)輸入出生日期', trigger: 'blur' }, { min: 1, max: 100, message: '長(zhǎng)度在 1 到 100 個(gè)字符', trigger: 'blur' } ], intro: [ { required: true, message: '請(qǐng)輸入備注', trigger: 'blur' }, { min: 50, max: 500, message: '請(qǐng)輸入至少50個(gè)字', 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("提交成功", '提交結(jié)果', { confirmButtonText: '確定', type: 'success', callback: action => { }, }); } else{ this.$alert("提交失敗", '提交結(jié)果', { confirmButtonText: '確定', type: 'warning', callback: action => { }, }); } }) } else { console.log('error submit!!'); return false; } }); } }
上面提交函數(shù)里面的baseURL以及api的介紹補(bǔ)充說(shuō)明如下:
這里再向大家介紹一種用vue-resource從后端請(qǐng)求數(shù)據(jù)的方法。
比如說(shuō)從后端請(qǐng)求一張表過來(lái),
(1)首先,在data中return一個(gè)msg:[]數(shù)組來(lái)接收表的數(shù)據(jù);
(2)在方法中定義一個(gè)請(qǐng)求函數(shù),比如我們這里函數(shù)名定義為showDetails;
methods:{ showDetails:function(){ this.$http.get(baseURL+"api/條件").then(function(res){ this.msg = res.body; }); } }
這里baseURL項(xiàng)目的路徑,如果項(xiàng)目部署在服務(wù)器上面一般格式為www.XXX.com/項(xiàng)目名;之后的api是后端封裝的api接口;然后條件就是對(duì)表的查詢,刪除等語(yǔ)句。比如對(duì)名為student的表進(jìn)行查詢,需要獲取studentID為40001的學(xué)生信心,則查詢語(yǔ)句可寫為‘query?table=student&studentIDeq=40001',需要注意的是與有關(guān)數(shù)據(jù)庫(kù)的操作字段(通俗點(diǎn)講,可以理解為后端定義的字段)要加引號(hào),而前端定義的字段要放在引號(hào)外面;
(3)最后,別忘了這個(gè)請(qǐng)求操作是沒有調(diào)用,是默認(rèn)執(zhí)行的,所以要在mounted里面實(shí)時(shí)執(zhí)行;
mounted: function (){ this.showDetails(); }
好了,這個(gè)函數(shù)就完成了,你可以通過瀏覽器控制臺(tái)的network查看從后端取得的數(shù)據(jù),或者通過console打印輸出也可以看到啦?。?!
當(dāng)然啦。前提是你的數(shù)據(jù)庫(kù)里面有一張名為user的表,表里面有name,type,date,intro幾個(gè)字段,并且后端的接口啥的都已經(jīng)定義好的情況下,不然是不會(huì)成功的哦
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。