vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實(shí)例
本文將向大家介紹一種用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項(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）最后，別忘了這個請求操作是沒有調(diào)用，是默認(rèn)執(zhí)行的，所以要在mounted里面實(shí)時執(zhí)行；
mounted: function (){
this.showDetails();
}
好了，這個函數(shù)就完成了，你可以通過瀏覽器控制臺的network查看從后端取得的數(shù)據(jù)，或者通過console打印輸出也可以看到啦?。?！
以上這篇vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁 ,需要的朋友可以參考下2018-05-05
watch函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于VUE3中watch監(jiān)聽使用的相關(guān)資料,需要的朋友可以參考下2022-06-06
svg-sprite-loader 的插件，用來根據(jù)導(dǎo)入的 svg 文件自動生成 symbol 標(biāo)簽并插入 html，這篇文章主要介紹了VUE-cli3使用 svg-sprite-loader,需要的朋友可以參考下2018-10-10
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03
this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁面的實(shí)現(xiàn)代碼
這篇文章主要介紹了this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁面,this.$router.push進(jìn)行頁面跳轉(zhuǎn)時，攜帶參數(shù)有params和query兩種方式，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-04-04
在Vue.js?3.0中，推出了新的組合式API，使得開發(fā)者能夠更加方便靈活地編寫Vue組件，這也是組合式?API?成為了?Vue?新的開發(fā)范式，與傳統(tǒng)的選項(xiàng)?API?相比，組合式?API?更加靈活、易于維護(hù)的原因，在本文中，我們將詳細(xì)介紹?Vue?組合式API的風(fēng)格及使用2023-06-06
Vue?CompositionAPI中watch和watchEffect的區(qū)別詳解
這篇文章主要為大家詳細(xì)介紹了Vue?CompositionAPI中watch和watchEffect的區(qū)別，文中的示例代碼簡潔易懂，希望對大家學(xué)習(xí)Vue有一定的幫助2023-06-06
vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的深入講解
這篇文章主要給大家介紹了關(guān)于vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的相關(guān)資料,在講解過程中,我們會對比Vue2.x的API特性,使用有哪些區(qū)別,需要的朋友可以參考下2022-01-01
這篇文章主要為大家介紹了vue shallowRef作用及引發(fā)問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue拖拽組件 vuedraggable API options實(shí)現(xiàn)盒子之間相互拖拽排序
這篇文章主要介紹了vue拖拽組件 vuedraggable API options實(shí)現(xiàn)盒子之間相互拖拽排序克隆clone，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07