飞龙博客

feilong.org 前端开发教程

如何使用 json-server 简单操作步骤方法小白菜鸟入门上手教程

飞龙更新于 2021-01-23 04:03 加入书签 CTRL+D 有 15 个朋友来过

前端人员是需要模拟数据接口,用vue react 之类脚手架开发前端页面,
一般用静态模拟数据就行了。
也可以使用模拟的接口来做。比如json-server。

如何使用 json-server ?飞龙写了一个简单操作步骤方法的教程,与具体的案例一起,
方便前端小白和菜鸟们json-server入门,上手就会。
有详细的注解。下面是简单的步骤,一步步跟着做就行了。

1.安装json-server
安装有 node.js 环境后 ,打开cmd命令行工具,输入以下命令

1
2
npm install -g json-serverjson-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

维护小站,感谢赞赏。
联系飞龙,请转淘宝

飞龙初发:
2009-10-08 01:56
本文更新网址:
https://feilong.org/json-server-abc-step-usage

所在目录: json 教程

  • html css js
  • angular react vue
  • flutter python