如何使用 json-server 简单操作步骤方法小白菜鸟入门上手教程
feilong.org 修订于2021-01-23 04:03:24 437 次浏览前端人员是需要模拟数据接口，用vue react 之类脚手架开发前端页面，
一般用静态模拟数据就行了。
也可以使用模拟的接口来做。比如json-server。
如何使用 json-server ？飞龙写了一个简单操作步骤方法的教程，与具体的案例一起，
方便前端小白和菜鸟们json-server入门，上手就会。
有详细的注解。下面是简单的步骤，一步步跟着做就行了。
1.安装json-server
安装有 node.js 环境后 ,打开cmd命令行工具，输入以下命令
|
1 2 |
npm install -g json-server json-server -v |
2.创建文件夹 G:\react\next0\nnn\ 。然后打开此nnn文件夹。
3.创建 nnn\db.json 把模拟数据放进去。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
{ "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 基本配置文件。
文件内容如下：
|
1 2 3 4 5 6 7 8 9 10 |
{ "port": 8008, "read-only": false, "no-cors": false, "no-gzip": false, "watch": true, "static": "./abc", "snapshots": "./kz", "routes": "rd.json" } |
查看配置的帮助信息：
|
1 |
json-server -h |
5.在此 nnn 文件夹下，打开命令行工具，运行如下命令 启动服务，或重启服务。
|
1 |
json-server --watch db.json |
飞龙提示：
如果 基本配置文件json-server.json 放在 next0/
则需要在next0/目录下 运行如下命令：
|
1 |
json-server --watch nnn/db.json |
6.浏览器访问以下网址，注意观察返回
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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文件夹，命令行输入
|
1 |
json-server --watch db.json |
重启服务后，打开 http://localhost:8008
飞龙提示：如果不配置，可以用默认配置 "static": "./public/"
如果也不新建public文件夹，则打开默认首页。
你可以通过此方式，弄静态htmlcssjs或其他静态资源访问。
8.改变启动服务的方式。
a.检查nnn文件夹下是否有 package.json
如果没有，可以命令行输入
|
1 |
npm init |
b. 在 package.json 里检查或添加配置项
|
1 2 3 4 5 |
{ "scripts": { "mock": "json-server db.json --port 8008" } } |
c.在nnn文件夹，命令行输入
|
1 |
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 教程