如何使用 json-server 简单操作步骤方法小白菜鸟入门上手教程
feilong.org 修订于2021-01-23 04:03:24 268 次浏览前端人员是需要模拟数据接口，用vue react 之类脚手架开发前端页面，
一般用静态模拟数据就行了。
也可以使用模拟的接口来做。比如json-server。
如何使用 json-server ？飞龙写了一个简单操作步骤方法的教程，与具体的案例一起，
方便前端小白和菜鸟们json-server入门，上手就会。
有详细的注解。下面是简单的步骤，一步步跟着做就行了。
1.安装json-server
安装有 node.js 环境后 ,打开cmd命令行工具，输入以下命令
npm install -g json-server
json-server -v
2.创建文件夹 G:\react\next0\nnn\ 。然后打开此nnn文件夹。
3.创建 nnn\db.json 把模拟数据放进去。
{
"room1": [{
"id": "001",
"name": "Sherry",
"age": 24,
"friends": [{
"id": "100",
"name": "you1"
}, {
"id": "200",
"name": "you2"
}]
}, {
"id": "002",
"name": "Addy",
"age": 26
}],
"room2": {
"id": "003",
"name": "Jack",
"age": 25
},
"room3": [{
"id": "004",
"name": "Rebeca",
"age": 27
}, {
"id": "005",
"name": "feilong",
"age": 37,
"url": "http://feilong.org"
}],
"posts": [{
"id": 122,
"title": "json-server",
"author": "typicode"
},{
"id": 123,
"title": "json-post",
"author": "feilong"
}],
"comments": [{
"id": 222,
"body": "some best",
"postId": 122
},{
"id": 224,
"body": "other best",
"postId": 122
},{
"id": 226,
"body": "help you",
"postId": 150
}],
"profile": {
"name": "feilong",
"age": "40"
}
}
4.创建 nnn\json-server.json 基本配置文件。
文件内容如下：
{
"port": 8008,
"read-only": false,
"no-cors": false,
"no-gzip": false,
"watch": true,
"static": "./abc",
"snapshots": "./kz",
"routes": "rd.json"
}
查看配置的帮助信息：
json-server -h
5.在此 nnn 文件夹下，打开命令行工具，运行如下命令 启动服务，或重启服务。
json-server --watch db.json
飞龙提示：
如果 基本配置文件json-server.json 放在 next0/
则需要在next0/目录下 运行如下命令：
json-server --watch nnn/db.json
6.浏览器访问以下网址，注意观察返回
http://localhost:8008
http://localhost:8008/room1
http://localhost:8008/room1/001
http://localhost:8008/room1?name=Addy
http://localhost:8008/comments?body_like=best
http://localhost:8008/room1?id_ne=001
http://localhost:8008/comments?postId=122
http://localhost:8008/comments?id_gte=224
http://localhost:8008/comments?id_lte=224
http://localhost:8008/comments?q=best
http://localhost:8008/room1?q=you
http://localhost:8008/comments?q=224
http://localhost:8008/comments?q=122
http://localhost:8008/posts?_embed=comments
http://localhost:8008/comments?_embed=post
http://localhost:8008/comments/224?_embed=post
http://localhost:8008/comments?_expand=post
http://localhost:8008/comments/224?_expand=post
7.改变 http://localhost:8008 的首页内容(选学)
a.新建abc文件夹，做一个index.html静态html文件
b.在 json-server.json 添加配置 "static": "./abc/",
c.在nnn文件夹，命令行输入
json-server --watch db.json
重启服务后，打开 http://localhost:8008
飞龙提示：如果不配置，可以用默认配置 "static": "./public/"
如果也不新建public文件夹，则打开默认首页。
你可以通过此方式，弄静态htmlcssjs或其他静态资源访问。
8.改变启动服务的方式。
a.检查nnn文件夹下是否有 package.json
如果没有，可以命令行输入
npm init
b. 在 package.json 里检查或添加配置项
{
"scripts": {
"mock": "json-server db.json --port 8008"
}
}
c.在nnn文件夹，命令行输入
npm run mock
重启服务后，打开 http://localhost:8008
end 20200904 feilong.org gz
更新网址：https://feilong.org/json-server-abc-step-usage
最初发布：20091008 01:56:00 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： json 教程
