json server的简单使用
//搬运自博客园：小目标
作为前端开发人员，经常需要模拟后台数据，我们称之为mock。通常的方式为自己搭建一个服务器，返回我们想要的数据。json server 作为工具，因为它足够简单，写少量数据，即可使用。
安装
首先需要安装nodejs，建议使用最新版本。然后全局安装json server.
npm install json-server -g
安装完成后可以用
json-server -h
命令检查是否安装成功，成功后会出现json-server相关的参数选项。
运行
安装完成后，可以在任一目录下建立一个 xxx.json 文件,例如在 mock/ 文件夹下，建立一个 db.json 文件，并写入以下内容，
{
"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": "抄写党章势在必行！" }
]
}
]
}
并在 mock/ 文件夹下执行：
json-server -w db.json -p 3003
操作数据
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 } }
使用动态数据
使用 db.json 作为数据载体，虽然方便，但是如果需要大量的数据，则显得力不从心。
幸好 json server 可以通过js动态生成json格式数据，官方例子为生成1000组user数据：
# /mock/db.js
module.exports =function() {
var data = {
users: []
}
for(vari = 0; i < 1000; i++) {
data.users.push({
id: i,
name: 'user' + i
})
}
return data
}
/mock 目录下运行
json-server db.js -p 3003
我们访问 http://localhost:3003/news/ 看到的数据是
[
{
"id": 0,
"name": "user0" },
{
"id": 1,
"name": "user1" },
{
"id": 2,
"name": "user2" },
{
"id": 3,
"name": "user3" },
...
{
"id": 999,
"name": "user999" }
]
