Vue.js請求JSON Server伺服器資料的實現方法

張偵毅發表於2018-11-27
Vue.jsJSONServer伺服器

文章主要介紹了Vue.js請求JSON Server伺服器資料的實現方法,需要的朋友可以參考下。

由於這裡是在之前《vue.js中的vue-resource示例詳解》的基礎上進行稍加修改完成的，因而其絕大部分程式碼與上面的是一樣的，而其不同之處在於，其請求資料的資料來源不是來源於json檔案，而是來自於後臺的資料。此處的後臺伺服器中的資料由JSON Server所提供。

注意事項

json的資料結構

這是之前所請求的json資料：

  1. {
  2.  "status":0
  3. ,"message":[
  4.  {
  5.  "id":1
  6.  ,"name":"張三"
  7.  }
  8. ,{
  9.  "id":2
  10.  ,"name":"李四"
  11.  }
  12. ]
  13. }

如果我們直接使用之前所使用的json資料，其在JSON Server中執行下面命令啟動伺服器：

  1. json-server db.json

在控制檯中我們會看到，其是會報錯的，其報的錯誤程式碼如下：

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

上面的意思是說，在status後面不應該直接跟數字0而是應該跟一個Object物件或者是陣列物件。之所以出現這種情況，其主要是因為在JSON Server的json頂級物件中，其是不允許直接跟字串或數字的，而是應該跟Object物件或者是陣列物件。

所以說上面的json資料應該修改如下：

  1. {
  2.  "people": {
  3.  "status": {
  4.  "status": 0
  5.  },
  6.  "message": [
  7.  {
  8.  "id": 1,
  9.  "name": "張三"
  10.  },
  11.  {
  12.  "id": 2,
  13.  "name": "李四"
  14.  }
  15.  ]
  16.  }
  17. }

現在再次執行下面的程式碼啟動伺服器：

  1. json-server db.json

其啟動後的結果如下：

  1. \{^_^}/ hi!
  2. Loading db.json
  3. Done
  4. Resources
  5. http://localhost:3000/status
  6. http://localhost:3000/message
  7. Home
  8. http://localhost:3000
  9. Type s + enter at any time to create a snapshot of the database

我們可以看到，現在JSON Server已經啟動成功！

請求的url地址

我們在這裡不能直接使用http://localhost:3000的請求地址，然後再獲取響應資訊後直接點出來，原因如下：

從這裡，我們可以看到，我們所獲取的實際上返回的是一個頁面，我們是不能對頁面直接點出來資料然後再操作的。即我們如果在響應結果中使用res.body，其返回的結果為：

此時我們訪問的url地址應該為：

http://localhost:3000/people

其響應後的結果為：

從這裡我們可以看出，這才是我們所期望得到的結果。

從後臺獲取vue-resource的資料來源

基本上，在上面兩點注意事項修改完成後，下面的程式碼就可以執行了，因而這裡就不必再多說了，直接上完整原始碼：

原始碼

.html原始碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>vue-router</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.  <ul>
  10.  <li v-for="item in list">{{item.name}}</li>
  11.  </ul>
  12. </div>
  13. <script src="../../../../js/vue/vue/1.0/vue.js"></script>
  14. <script src="../../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
  15. <script type="application/javascript">
  16.  var vm = new Vue({
  17.  el:'#app'
  18.  ,data:{
  19.  list:[]
  20.  }
  21.  ,created(){
  22.  this.getData();
  23.  }
  24.  ,methods:{
  25.  getData(){
  26.  var url = 'http://localhost:3000/people';
  27.  this.$http.get(url).then(function(res){
  28.   var body = res.body;
  29.   if(!body.status){
  30.   alert('請求出錯！');
  31.   }
  32.   this.list = body.message;
  33.  });
  34.  }
  35.  }
  36.  });
  37. </script>
  38. </body>
  39. </html>

db.json原始碼：

  1. {
  2.  "people": {
  3.  "status": {
  4.  "status": 0
  5.  },
  6.  "message": [
  7.  {
  8.  "id": 1,
  9.  "name": "張三"
  10.  },
  11.  {
  12.  "id": 2,
  13.  "name": "李四"
  14.  }
  15.  ]
  16.  }
  17. }

執行結果

總結

以上所述是小編給大家介紹的Vue請求JSON Server伺服器資料的實現方法，希望對大家有所幫助，

相關文章