10月29, 2016

JSON-Server and XMLHttpRequest

前提

在很多时候,前端程序员往往较早一步实现页面逻辑,后端程序员由于需要联调、掌握业务逻辑,消耗的时间比较长一点。那前端为了等后端程序员开发完成之后,API能够通过直接修改URL来对接,就需要伪造一些数据,但是,大部分情况而言,伪造的数据都是不变的。前端脚本不可能用来实现对数据的增删该查。但是,昨天意外发现一个工具——json-server,可以帮助前端程序员来解决页面逻辑控制的痛点。下面我通过一个简单的增删改查的例子来进行记录。

知识点

  • json-server的安装和使用

  • POSTMAN的简单使用

  • XMLHttpRequest对象的用法

  • http-server


具体实现

json-server的安装

可以直接去github中查询其API。通过npm安装在全局中:

$ npm install -g json-server

json-server的启动

在启动之前,先来伪造一些数据。新建一个json文件,命名为/db.json,添加以下数据:

{
  "getArticle": [
    {
      "id": 2,
      "title": "json-1",
      "content": "beace2"
    },
    {
      "id": 3,
      "title": "json-2",
      "content": "beace3"
    }
  ],
  "postArticle": [
    {
      "id": 1,
      "title": "json-server",
      "content": "typicode"
    }
  ]
}

在命令行中,键入:

$ json-server /path/to/db.json

可以观察到,服务启动在了本地的3000端口,截图如下:

img

我们可以访问http://localhost:3000/getArticle,来看到服务返回的json信息。(当然,可也以访问http://localhost:3000/postArticle,总之既定规则由你来决定)

json-server-return

POSTMAN测试

其实,这样的功能并不能够证明其有多么遍历,我们随便伪造一个json文件也可以通过这样请求来获取数据,其实便利在于我们可以改变数据,而且是真实发生。

可以通过POSTMAN来进行测试,效果如下诸多截图。

获取数据

img

通过id获取数据

img

POST数据

img

DELETE数据

img

一系列操作之后 ,回到/db.json中会发现数据发生了改变。

XMLHttpRequest

通过一个简单的请求来获取数据并展示在网页上:

getJSON("http://localhost:3000/getArticle", function(response) {
    console.log(response);
})
function getJSON(url, callback) {
    var request = new XMLHttpRequest();
    request.open("GET", url);
    request.onreadystatechange = function () {
    //为了排版优美,省略了状态判断
        if (callback) {
            callback(JSON.parse(request.responseText));
        }
    };
    request.send(null);
}

XMLHttpRequest的使用必须通过http协议,在这里介绍一个轻量级的web server——http-server.

通过npm全局安装:

$ npm install -g http-server

在项目根目录中运行:

$ http-server

打开浏览器,进入http://localhost:8080.

本文链接:https://beacelee.com/post/json-server-and-xmlhttprequest.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。