Vue.js请求JSON Server服务器数据的实现方法

张侦毅 2018-11-27 10:58 互联网

文章主要介绍了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服务器数据的实现方法，希望对大家有所帮助，

Vue.jsjavascript类库javascript