Vue請(qǐng)求JSON Server服務(wù)器數(shù)據(jù)的實(shí)現(xiàn)方法

更新時(shí)間：2018年11月02日 11:52:05 作者：張偵毅

這篇文章主要介紹了Vue請(qǐng)求JSON Server服務(wù)器數(shù)據(jù)的實(shí)現(xiàn)方法,需要的朋友可以參考下

由于這里是在之前這篇文章的基礎(chǔ)上進(jìn)行稍加修改完成的，因而其絕大部分代碼與上面的是一樣的，而其不同之處在于，其請(qǐng)求數(shù)據(jù)的數(shù)據(jù)源不是來(lái)源于json文件，而是來(lái)自于后臺(tái)的數(shù)據(jù)。此處的后臺(tái)服務(wù)器中的數(shù)據(jù)由JSON Server所提供。

注意事項(xiàng)

json的數(shù)據(jù)結(jié)構(gòu)

這是之前所請(qǐng)求的json數(shù)據(jù)：

{
 "status":0
,"message":[
 {
 "id":1
 ,"name":"張三"
 }
,{
 "id":2
 ,"name":"李四"
 }
]
}

如果我們直接使用之前所使用的json數(shù)據(jù)，其在JSON Server中執(zhí)行下面命令啟動(dòng)服務(wù)器：

json-server db.json

在控制臺(tái)中我們會(huì)看到，其是會(huì)報(bào)錯(cuò)的，其報(bào)的錯(cuò)誤代碼如下：

 \{^_^}/ hi!
 Loading db.json
 Done
 Type of "status" (number) in db.json is not supported. Use objects or arrays of objects.

上面的意思是說(shuō)，在status后面不應(yīng)該直接跟數(shù)字0而是應(yīng)該跟一個(gè)Object對(duì)象或者是數(shù)組對(duì)象。之所以出現(xiàn)這種情況，其主要是因?yàn)樵贘SON Server的json頂級(jí)對(duì)象中，其是不允許直接跟字符串或數(shù)字的，而是應(yīng)該跟Object對(duì)象或者是數(shù)組對(duì)象。

所以說(shuō)上面的json數(shù)據(jù)應(yīng)該修改如下：

{
 "people": {
 "status": {
 "status": 0
 },
 "message": [
 {
 "id": 1,
 "name": "張三"
 },
 {
 "id": 2,
 "name": "李四"
 }
 ]
 }
}

現(xiàn)在再次執(zhí)行下面的代碼啟動(dòng)服務(wù)器：

json-server db.json

其啟動(dòng)后的結(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)啟動(dòng)成功！

請(qǐng)求的url地址

我們?cè)谶@里不能直接使用http://localhost:3000的請(qǐng)求地址，然后再獲取響應(yīng)信息后直接點(diǎn)出來(lái)，原因如下：

從這里，我們可以看到，我們所獲取的實(shí)際上返回的是一個(gè)頁(yè)面，我們是不能對(duì)頁(yè)面直接點(diǎn)出來(lái)數(shù)據(jù)然后再操作的。即我們?nèi)绻陧憫?yīng)結(jié)果中使用res.body，其返回的結(jié)果為：

此時(shí)我們?cè)L問(wèn)的url地址應(yīng)該為：

http://localhost:3000/people

其響應(yīng)后的結(jié)果為：

從這里我們可以看出，這才是我們所期望得到的結(jié)果。

從后臺(tái)獲取vue-resource的數(shù)據(jù)源

基本上，在上面兩點(diǎn)注意事項(xiàng)修改完成后，下面的代碼就可以運(yùn)行了，因而這里就不必再多說(shuō)了，直接上完整源碼：

源碼

.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('請(qǐng)求出錯(cuò)！');
  }
  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請(qǐng)求JSON Server服務(wù)器數(shù)據(jù)的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: