vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實例
本文將向大家介紹一種用vue-resource從后端請求數(shù)據(jù)的方法。
比如說從后端請求一張表過來，
（1）首先，在data中return一個msg:[]數(shù)組來接收表的數(shù)據(jù)；
（2）在方法中定義一個請求函數(shù)，比如我們這里函數(shù)名定義為showDetails；
methods:{
showDetails:function(){
this.$http.get(baseURL+“api/條件”).then(function(res){
this.msg = res.body;
});
}
}
這里baseURL項目的路徑，如果項目部署在服務(wù)器上面一般格式為www.XXX.com/項目名；之后的api是后端封裝的api接口；然后條件就是對表的查詢，刪除等語句。比如對名為student的表進行查詢，需要獲取studentID為40001的學(xué)生信心，則查詢語句可寫為‘query?table=student&studentIDeq=40001',需要注意的是與有關(guān)數(shù)據(jù)庫的操作字段（通俗點講，可以理解為后端定義的字段）要加引號，而前端定義的字段要放在引號外面；
（3）最后，別忘了這個請求操作是沒有調(diào)用，是默認(rèn)執(zhí)行的，所以要在mounted里面實時執(zhí)行；
mounted: function (){
this.showDetails();
}
好了，這個函數(shù)就完成了，你可以通過瀏覽器控制臺的network查看從后端取得的數(shù)據(jù)，或者通過console打印輸出也可以看到啦?。?！
以上這篇vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+TypeScript報錯:無法找到模塊xx的聲明文件問題
這篇文章主要介紹了Vue3+TypeScript報錯:無法找到模塊xx的聲明文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了Vue的基本應(yīng)用。具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
本文將結(jié)合實例代碼，解決Vue+SpringBoot+Shiro跨域問題，相信大家剛開始做都會遇到這個問題，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
Vue2.0利用 v-model 實現(xiàn)組件props雙向綁定的優(yōu)美解決方案
本篇文章主要介紹了Vue2 利用 v-model 實現(xiàn)組件props雙向綁定的優(yōu)美解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue實現(xiàn)動態(tài)響應(yīng)數(shù)據(jù)變化
本篇文章主要介紹了Vue 動態(tài)響應(yīng)數(shù)據(jù)變化，通過綁定數(shù)據(jù)即可以實時改變視圖顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了解決vue頁面渲染但dom沒渲染的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在Vue框架中我們經(jīng)常需要綁定各種JS事件,如"點擊事件"、"鼠標(biāo)移動事件"、"鍵盤事件"等等,這篇文章主要給大家介紹了關(guān)于Vue鼠標(biāo)點擊事件和鍵盤事件的相關(guān)資料,需要的朋友可以參考下2024-01-01
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vuex分模塊后,實現(xiàn)獲取state的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07