vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
本文實(shí)例講述了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作。分享給大家供大家參考，具體如下：
前端小白剛開始做頁面的時(shí)候，我們的前端頁面中經(jīng)常會用到表單，所以學(xué)會提交表單也是一個(gè)基本技能，其實(shí)用ajax就能實(shí)現(xiàn)，但他的原始語法有點(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="請選擇專利類型" 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里面定義表單內(nèi)容的字段及表單的約束規(guī)則；
data() {
return {
ruleForm: {
name: '',
type: '',
date: '',
intro: '',
}
}
rules: {
name: [
{ required: true, message: '請輸入用戶名', trigger: 'blur' },
{ min: 1, max: 20, message: '長度在 1 到20個(gè)字符', trigger: 'blur' }
],
type: [
{ required: true, message: '請選擇用戶類型', trigger: 'change' }
],
date: [
{ required: true, message: '請輸入出生日期', trigger: 'blur' },
{ min: 1, max: 100, message: '長度在 1 到 100 個(gè)字符', trigger: 'blur' }
],
intro: [
{ required: true, message: '請輸入備注', trigger: 'blur' },
{ min: 50, max: 500, message: '請輸入至少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ǔ)充說明如下：
這里再向大家介紹一種用vue-resource從后端請求數(shù)據(jù)的方法。
比如說從后端請求一張表過來，
（1）首先，在data中return一個(gè)msg:[]數(shù)組來接收表的數(shù)據(jù)；
（2）在方法中定義一個(gè)請求函數(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接口；然后條件就是對表的查詢，刪除等語句。比如對名為student的表進(jìn)行查詢，需要獲取studentID為40001的學(xué)生信心，則查詢語句可寫為‘query?table=student&studentIDeq=40001',需要注意的是與有關(guān)數(shù)據(jù)庫的操作字段（通俗點(diǎn)講，可以理解為后端定義的字段）要加引號，而前端定義的字段要放在引號外面；
（3）最后，別忘了這個(gè)請求操作是沒有調(diào)用，是默認(rèn)執(zhí)行的，所以要在mounted里面實(shí)時(shí)執(zhí)行；
mounted: function (){
this.showDetails();
}
好了，這個(gè)函數(shù)就完成了，你可以通過瀏覽器控制臺的network查看從后端取得的數(shù)據(jù)，或者通過console打印輸出也可以看到啦?。。?/p>
當(dāng)然啦。前提是你的數(shù)據(jù)庫里面有一張名為user的表，表里面有name，type，date，intro幾個(gè)字段，并且后端的接口啥的都已經(jīng)定義好的情況下，不然是不會成功的哦
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
- Avue實(shí)現(xiàn)動態(tài)查詢與數(shù)據(jù)展示的示例代碼
- vue中輕量級模糊查詢fuse.js使用方法步驟
- vue中el表單的簡單查詢方法
- 5種vue模糊查詢的方法總結(jié)
- vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)
- vue中wangEditor的使用及回顯數(shù)據(jù)獲取焦點(diǎn)的方法
- Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互
- 詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
- Vue?3?表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)選項(xiàng)卡案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
詳解Vue-cli來構(gòu)建Vue項(xiàng)目的步驟
這篇文章主要為大家介紹了Vue-cli來構(gòu)建Vue項(xiàng)目的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue自定義可選時(shí)間的日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式
這篇文章主要介紹了vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了在VUE3中如何禁止網(wǎng)頁返回到上一頁,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了el-form 多層級表單的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
在用vite創(chuàng)建vue3項(xiàng)目時(shí)已經(jīng)選擇了添加ESLint,本文就來介紹一下ESLint在項(xiàng)目中需要怎樣配置和使用,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
electron-vue中報(bào)錯Cannot?use?import?statement?outside?a?m
Electron 是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報(bào)錯Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
Vue3實(shí)現(xiàn)全局loading指令的示例詳解
這篇文章主要介紹了Vue3實(shí)現(xiàn)全局loading指令,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06