我们开发前端代码的时候,通常需要模拟后端服务器提供mock数据,当然你可以从头开发一个node服务器,搭配后端数据库,但还有一些简易方法,可以在本机模拟后端数据,那就是今天要讲的json-serverjson-server根据你提供的json文件快速搭建一个支持restful接口的本地server

快速开始

安装json-server

1
$ npm install -g json-server

本地创建db.json文件:

1
2
3
4
5
6
7
8
9
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}

开启server

1
$ json-server --watch db.json

在浏览器中输入http://localhost:3000/posts/1会获得json数据:

1
2
3
4
5
{
"id": 1,
"title": "json-server",
"author": "typicode"
}

相应的还提供其他CRUD的路由以及sort等其他数据操作:

1
2
3
4
5
6
7
8
9
10
11
GET /posts
GET /posts/1
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1
GET /profile
POST /profile
PUT /profile
PATCH /profile

s + enter 可以存储当前db的快照

进阶 - 生成随机数据库

我们可以使用程序来帮我们生成.json文件,这里我们使用faker来实现

1
2
$ touch generater.js
$ npm i faker lodash

写入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = function() {
const faker = require('faker')
const _ = require('lodash')
return {
people: _.times(100, n => {
return {
id: n,
name: faker.name.findName(),
avatar: faker.internet.avatar(),
}
})
}
}

然后:

1
$ json-server generater.js

浏览器输入http://localhost:3000/people,将会获得100个人的随机信息