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