因为这是在前一篇文章的基础上稍加修改完成的，所以大部分代码都和上面一样，但不同的是请求数据的数据源不是来自json文件，而是来自后台数据。这里后台服务器的数据是由JSON Server提供的。

需要注意的事项

json的数据结构

这是前面请求的json数据：

{'status' :0，' message' : [{'id' :1，' name' : '张三' }，{ 'id':2，' name': '李四' }]}如果我们直接使用之前使用的json数据，

JSON-服务器db.json

在控制台中，我们可以看到它将报告错误，报告的错误代码如下：

{^_^}/嗨！正在加载数据库。JSON完成了数据库中的“状态”(数字)类型。不支持JSON。使用对象或对象数组。上面的意思是状态后面不应该直接跟数字0，而应该跟一个对象对象或者数组对象。主要原因是在json Server的JSON顶层Objects中，不允许直接跟在字符串或者数字后面，而应该跟在对象对象或者数组对象后面。

因此，上面的json数据应该修改如下：

{ ' people ' : { ' status ' : { ' status ' : 0 }，' message' : [{'id' : 1，' name' : '张三' }，{'id' : 2，' name' 3360。

JSON-服务器db.json

启动后的结果如下：

{^_^}/嗨！正在加载db . JSON Done Resources http://localhost :3000/status http://localhost :3000/Message home http://localhost :3000随时输入类型s以创建数据库的快照。我们可以看到现在JSON Server已经成功启动了！

请求的Url地址

在这里，我们无法直接使用请求的地址http://localhost:3000，然后获取响应信息并直接指出，原因如下：

从这里可以看出，我们得到的实际上是返回一个页面，不能直接在页面上指出数据，然后进行操作。也就是说，如果我们在响应结果中使用res.body，则返回的结果是：

此时，我们访问的网址应该是：

http://localhost :3000/人

响应结果是：

从这里，我们可以看出这是我们期待的结果。

从后台获取虚拟资源的数据源

基本上，以上两个注意点的修改完成后，下面的代码就可以运行了，所以这里就不用多说了，直接去完整的源代码就可以了：

源代码。html源代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title vue-router/title/head dydiv id=' app ' ul Li v-for='列表中的项目' { item . name } }/Li/ul/div script src=' http :/./././js/vue/vue/1.0/vue . js '/script script src=' http :/./././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 '；这个。$http.get(url)。然后(函数(RES){ var body=RES . body；if(！Body.status){ alert('请求错误！' );} this . list=body . message；});} } });/script/body/htmldb.json源代码：

{ ' people ' : { ' status ' : { ' status ' : 0 }，' message' : [{'id' : 1，' name' : '张三' }，{'id' : 2，' name' 3360。

摘要

以上就是边肖介绍的Vue请求JSON Server数据的实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！