Vue請求JSON Server服務(wù)器數(shù)據(jù)的實(shí)現(xiàn)方法
由于這里是在之前這篇文章的基礎(chǔ)上進(jìn)行稍加修改完成的，因而其絕大部分代碼與上面的是一樣的，而其不同之處在于，其請求數(shù)據(jù)的數(shù)據(jù)源不是來源于json文件，而是來自于后臺的數(shù)據(jù)。此處的后臺服務(wù)器中的數(shù)據(jù)由JSON Server所提供。
注意事項(xiàng)
json的數(shù)據(jù)結(jié)構(gòu)
這是之前所請求的json數(shù)據(jù)：
{
"status":0
,"message":[
{
"id":1
,"name":"張三"
}
,{
"id":2
,"name":"李四"
}
]
}
如果我們直接使用之前所使用的json數(shù)據(jù)，其在JSON Server中執(zhí)行下面命令啟動服務(wù)器：
json-server db.json
在控制臺中我們會看到，其是會報(bào)錯的，其報(bào)的錯誤代碼如下：
\{^_^}/ hi!
Loading db.json
Done
Type of "status" (number) in db.json is not supported. Use objects or arrays of objects.
上面的意思是說，在status后面不應(yīng)該直接跟數(shù)字0而是應(yīng)該跟一個(gè)Object對象或者是數(shù)組對象。之所以出現(xiàn)這種情況，其主要是因?yàn)樵贘SON Server的json頂級對象中，其是不允許直接跟字符串或數(shù)字的，而是應(yīng)該跟Object對象或者是數(shù)組對象。
所以說上面的json數(shù)據(jù)應(yīng)該修改如下：
{
"people": {
"status": {
"status": 0
},
"message": [
{
"id": 1,
"name": "張三"
},
{
"id": 2,
"name": "李四"
}
]
}
}
現(xiàn)在再次執(zhí)行下面的代碼啟動服務(wù)器：
json-server db.json
其啟動后的結(jié)果如下：
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/status
http://localhost:3000/message
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
我們可以看到，現(xiàn)在JSON Server已經(jīng)啟動成功！
請求的url地址
我們在這里不能直接使用http://localhost:3000的請求地址，然后再獲取響應(yīng)信息后直接點(diǎn)出來，原因如下：
從這里，我們可以看到，我們所獲取的實(shí)際上返回的是一個(gè)頁面，我們是不能對頁面直接點(diǎn)出來數(shù)據(jù)然后再操作的。即我們?nèi)绻陧憫?yīng)結(jié)果中使用res.body，其返回的結(jié)果為：
此時(shí)我們訪問的url地址應(yīng)該為：
其響應(yīng)后的結(jié)果為：
從這里我們可以看出，這才是我們所期望得到的結(jié)果。
從后臺獲取vue-resource的數(shù)據(jù)源
基本上，在上面兩點(diǎn)注意事項(xiàng)修改完成后，下面的代碼就可以運(yùn)行了，因而這里就不必再多說了，直接上完整源碼：
源碼
.html源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
</div>
<script src="../../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[]
}
,created(){
this.getData();
}
,methods:{
getData(){
var url = 'http://localhost:3000/people';
this.$http.get(url).then(function(res){
var body = res.body;
if(!body.status){
alert('請求出錯！');
}
this.list = body.message;
});
}
}
});
</script>
</body>
</html>
db.json源碼：
{
"people": {
"status": {
"status": 0
},
"message": [
{
"id": 1,
"name": "張三"
},
{
"id": 2,
"name": "李四"
}
]
}
}
運(yùn)行結(jié)果
總結(jié)
以上所述是小編給大家介紹的Vue請求JSON Server服務(wù)器數(shù)據(jù)的實(shí)現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue-property-decorator使用手冊，文中較詳細(xì)的給大家介紹了他們的用法，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關(guān)于Vue3中Vuex詳細(xì)使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
vue+swiper實(shí)現(xiàn)時(shí)間軸效果
這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
基于vue2.0的活動倒計(jì)時(shí)組件countdown(附源碼下載)
這是一款基于vue2.0的活動倒計(jì)時(shí)組件，可以使用服務(wù)端時(shí)間作為當(dāng)前時(shí)間，在倒計(jì)時(shí)開始和結(jié)束時(shí)可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動倒計(jì)時(shí)組件countdown,需要的朋友可以參考下2018-10-10
vue3中的ref,toRef,toRefs三個(gè)的作用使用小結(jié)
Vue3中ref、reactive、toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，就此做一份筆記作為區(qū)別，本文重點(diǎn)給大家講解vue3中的ref，toRef，toRefs三個(gè)是干嘛的，有什么作用，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動態(tài)導(dǎo)航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動態(tài)導(dǎo)航欄和面包屑功能,基于一個(gè)新建的Vue3項(xiàng)目上實(shí)現(xiàn)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vant 在vue-cli 4.x中按需加載操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
淺談在Vue.js中如何實(shí)現(xiàn)時(shí)間轉(zhuǎn)換指令
這篇文章主要介紹了淺談在Vue.js中如何實(shí)現(xiàn)時(shí)間轉(zhuǎn)換指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
vue如何實(shí)現(xiàn)動態(tài)改變地址欄的參數(shù)值
這篇文章主要介紹了vue如何實(shí)現(xiàn)動態(tài)改變地址欄的參數(shù)值，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07