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

由于这里是在之前这篇文章的基础上进行稍加修改完成的，因而其绝大部分代码与上面的是一样的，而其不同之处在于，其请求数据的数据源不是来源于json文件，而是来自于后台的数据。此处的后台服务器中的数据由JSON Server所提供。

注意事项

json的数据结构

这是之前所请求的json数据：

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

如果我们直接使用之前所使用的json数据，其在JSON Server中执行下面命令启动服务器：

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后面不应该直接跟数字0而是应该跟一个Object对象或者是数组对象。之所以出现这种情况，其主要是因为在JSON Server的json顶级对象中，其是不允许直接跟字符串或数字的，而是应该跟Object对象或者是数组对象。

所以说上面的json数据应该修改如下：

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

现在再次执行下面的代码启动服务器：

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

我们可以看到，现在JSON Server已经启动成功！

请求的url地址

我们在这里不能直接使用http://localhost:3000的请求地址，然后再获取响应信息后直接点出来，原因如下：

从这里，我们可以看到，我们所获取的实际上返回的是一个页面，我们是不能对页面直接点出来数据然后再操作的。即我们如果在响应结果中使用res.body，其返回的结果为：

此时我们访问的url地址应该为：

http://localhost:3000/people

其响应后的结果为：

从这里我们可以看出，这才是我们所期望得到的结果。

从后台获取vue-resource的数据源

基本上，在上面两点注意事项修改完成后，下面的代码就可以运行了，因而这里就不必再多说了，直接上完整源码：

源码

.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服务器数据的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue-resource + json-server模拟数据的方法

    本文介绍了vue-resource + json-server模拟数据,分享给大家,具体如下: 一.安装 npm install vue-resource --save npm install json-server --save 二.配置与使用vue-resource // main.js import VueResource from 'vue-resource' Vue.use(VueResource) this.$http.get('api/getNewsList') .then(fun

  • Vue-cli 使用json server在本地模拟请求数据的示例代码

    Vue-cli 使用json server在本地模拟请求数据的示例代码

    写在前面: 开发的时候,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.json server 作为模拟工具,因为设置简单,容易上手.本文是做一个简单的上手介绍,有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. json server 工具: 在后台还没给接口之前,使用JSON-Server搭建一台JSON服务器,将接口要返回的数据放在json文件里面.然后请求这些数据,这样我们可以先做

  • Vue使用json-server进行后端数据模拟功能

    正开发过程中 前后端分离或者不分离 ,接口多半是之后与页面的开发 ,所以建立rest的APL的接口 给前端提供虚拟的数据是非常必要的 所以这里我使用了json-server作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等,接下来我把我自己的上使用心写成文档 安装 首先必须有node环境(都用到json-server一定会有node环境吧)然后全局安装json-server np

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

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

    由于这里是在之前这篇文章的基础上进行稍加修改完成的,因而其绝大部分代码与上面的是一样的,而其不同之处在于,其请求数据的数据源不是来源于json文件,而是来自于后台的数据.此处的后台服务器中的数据由JSON Server所提供. 注意事项 json的数据结构 这是之前所请求的json数据: { "status":0 ,"message":[ { "id":1 ,"name":"张三" } ,{ "i

  • Java获取此次请求URL以及服务器根路径的方法

    本文介绍了Java获取此次请求URL以及获取服务器根路径的方法,并且进行举例说明,感兴趣的朋友可以学习借鉴下文的内容. 一. 获取此次请求的URL String requestUrl = request.getScheme() //当前链接使用的协议 +"://" + request.getServerName()//服务器地址 + ":" + request.getServerPort() //端口号 + request.getContextPath() //应用

  • Spring4.0 MVC请求json数据报406错误的解决方法

    Spring4.0 MVC请求json数据报406错误,如何解决? 解决方法一: 1.导入jackson-core-2.5.1.jar和jackson-databind-2.5.1.jar 2.Spring配置文件添加: <!-- 避免IE执行AJAX时,返回JSON出现下载文件 spring3为:org.springframework.http.converter.json.MappingJacksonHttpMessageConverter spring4为:org.springframew

  • newtonsoft.json解析天气数据出错解决方法

    今天用NewtonSoft.JSon解析一个天气数据,数据格式如: 复制代码 代码如下: {"status":1,"detail":"\u6570\u636e\u83b7\u53d6\u6210\u529f","data":[[{"date":"2014-01-01","dis_id":"1119","dis_name":&qu

  • php从数据库读取数据,并以json格式返回数据的方法

    php中,从数据库读取数据,并以json格式返回数据.具体方法如下: 第一步,定义相关变量 $servername = "localhost"; $username = "root"; $password = "root"; $mysqlname = "datatest"; $json = ''; $data = array(); class User { public $id; public $fname; public $

  • vue请求服务器数据后绑定不上的解决方法

    后台返回的数据,json类型 {"success":1,"tagList":[{"Id":1,"name":"林俊杰"},{"Id":2,"name":"MV"},{"Id":3,"name":"三次元"},{"Id":4,"name":"

  • Vue请求java服务端并返回数据代码实例

    Vue请求java服务端并返回数据代码实例

    这篇文章主要介绍了Vue请求java服务端并返回数据代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近在自学vue怎么与java进行数据交互.其实axios还是挺简单的,与ajax请求几乎一样,无外乎也就是要解决下跨域的问题. 废话不多说了,直接贴代码,一看就懂! //向springmvc Controller发起请求,传递一个参数 get请求(带参数传递) axios.get('http://127.0.0.1:8088/inas/

  • Android开发使用json实现服务器与客户端数据的交互功能示例

    本文实例讲述了Android开发使用json实现服务器与客户端数据的交互功能.分享给大家供大家参考,具体如下: 第一步:写一个远程查询工具类,使用单例模式 /** * 查询远程服务器的工具 * @author chen.lin * */ public class QueryUtils { //private static final String TAG = "CommonUtils"; private static QueryUtils instance; private Share

  • android异步请求服务器数据示例

    1.在android4.0以后的版本,主线程(UI线程)不在支持网络请求,原因大概是影响主线程,速度太慢,容易卡机,所以需要开启新的线程请求数据: 复制代码 代码如下: thread1 = new Thread(){@Overridepublic void run() {  try {    URL url = new URL(WebUrlManager.CARSEVER_GetCarsServlet);    HttpURLConnection conn = (HttpURLConnectio

随机推荐