飞龙博客

妙法莲华经

如何使用 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 教程