JSON-Server and XMLHttpRequest

October 29, 2016

前提

在很多时候,前端程序员往往较早一步实现页面逻辑,后端程序员由于需要联调、掌握业务逻辑,消耗的时间比较长一点。那前端为了等后端程序员开发完成之后,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.