用JSON-server模拟REST API(一) 安装运行

2016-06-25 10:10:00

在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。

对比过多种mock工具后，我最终选择了使用 json server 作为工具，因为它足够简单，写少量数据，即可使用。
也因为它足够强大，支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法，如limit，order等。下面我将详细介绍 json server 的使用。

安装

首先你的电脑中需要安装nodejs，建议使用最新版本。然后全局安装json server.

npm install json-server -g
使用linux和macOS的电脑需要加上sudo

sudo npm install json-server -g
安装完成后可以用 json-server -h 命令检查是否安装成功，成功后会出现

json-server [options] 选项：  --config, -c       Path to config file            [默认值: "json-server.json"]  --port, -p         Set port                                     [默认值: 3000]  --host, -H         Set host                                [默认值: "0.0.0.0"]  --watch, -w        Watch file(s)                                        [布尔]  --routes, -r       Path to routes file  --static, -s       Set static files directory  --read-only, --ro  Allow only GET requests                              [布尔]  --no-cors, --nc    Disable Cross-Origin Resource Sharing                [布尔]  --no-gzip, --ng    Disable GZIP Content-Encoding                        [布尔]  --snapshots, -S    Set snapshots directory                       [默认值: "."]  --delay, -d        Add delay to responses (ms)  --id, -i           Set database id property (e.g. _id)          [默认值: "id"]  --quiet, -q        Suppress log messages from output                    [布尔]  --help, -h         显示帮助信息                                         [布尔]  --version, -v      显示版本号                                           [布尔]示例：  json-server db.json  json-server file.js  json-server http://example.com/db.jsonhttps://github.com/typicode/json-server

运行

安装完成后，可以在任一目录下建立一个 xxx.json 文件,例如在 mock/ 文件夹下，建立一个 db.json 文件，并写入以下内容，并在 mock/ 文件夹下执行 json-server db.json -p 3003 。

{  "news":[    {      "id": 1,      "title": "曹县宣布昨日晚间登日成功",      "date": "2016-08-12",      "likes": 55,      "views": 100086    },    {      "id": 2,      "title": "长江流域首次发现海豚",      "date": "2016-08-12",      "likes": 505,      "views": 9800    }  ],  "comments":[    {      "id": 1,      "news_id": 1,      "data": [        {          "id": 1,          "content": "支持党中央决定"        },        {          "id": 2,          "content": "抄写党章势在必行！"        }      ]    }  ]}

为了方便，再创建一个 package.json 文件，写入

{  "scripts": {    "mock": "json-server db.json --port 3003"  }}

然后使用到 /mock 目录下执行 npm run mock 命令，如果成功会出现

> @ mock /你的电脑中mock文件夹所在目录的路径/mock> json-server db.json -p 3003  \{^_^}/ hi!  Loading db.json  Done  Resources  http://localhost:3003/news  http://localhost:3003/comments  Home  http://localhost:3003

如果不成功请检查 db.json 文件的格式是否正确。

操作数据

GET

这个时候访问 http://localhost:3003/db 可以查看 db.json 文件中所定义的全部数据。
使用浏览器地址栏，jQuery.get 或 fecth({method: "get"}) 访问 http://localhost:3003/news ，则可以看到 news 对象下的数据,以Array格式返回:

[  {    "id": 1,    "title": "曹县宣布昨日晚间登日成功",    "date": "2016-08-12",    "likes": 55,    "views": 100086  },  {    "id": 2,    "title": "长江流域首次发现海豚",    "date": "2016-08-12",    "likes": 505,    "views": 9800  }]

POST

以jquery的 $.ajax 方法举例,以下代码会实时的向 db.json 中的 news 对象push一条新的数据再次用 get 方式访问 http://localhost:3003/news , 就可以看到它了

$.ajax({    type: 'post',    url: 'http://localhost:3003/news',    data: {      "id": 3,      "title": "我是新加入的新闻",      "date": "2016-08-12",      "likes": 0,      "views": 0    }  })

PUT

同样以jquery的 $.ajax 方法举例,以下代码会实时的对 db.json 中的 news 对象中 id=1 数据进行修改

$.ajax({    type: 'put',    url: 'http://localhost:3003/news/1',    data: {      "title": "曹县宣布昨日晚间登日失败",      "date": "2016-08-12",      "likes": 55,      "views": 100086    }  })// 结果[  {    "id": 1,    "title": "曹县宣布昨日晚间登日失败",    "date": "2016-08-12",    "likes": 55,    "views": 100086  }]

PATCH 和 DELETE 使用方式同上，就不做演示了。