json-server环境搭建及使用

json-server环境搭建

一个在前端本地运行，可以存储json数据的server。

基于node环境，可以指定一个 json 文件作为 API 的数据源。

前提

• 安装 node 环境

下载安装

• 全局安装json-server

npm install -g json-server

监听服务

• 在需要的文件夹下执行以下命令，执行成功后，默认会创建 db.json 文件。

json-server --watch db.json

启动成功

• 根据执行命令，服务已正常监听，我们可以根据以下地址进行访问体验。
• 可以理解为json-server 把 db.json 根节点的每一个 key ，当作一个 router 。我们可以根据这个规则来编写测试。

• 在浏览器运行 http://localhost:3000 ，效果如下

修改端口号

方式一：

• json-server 默认端口为 3000，可以根据需要自定义端口号。

json-server --watch db.json --port 3006

方式二：

• 告诉你个可以偷懒的方式吧，如果觉得每次 启动服务 都要执行相关命令，可以在 db.json 同级文件夹新建一个 package.json 文件，然后把以下配置信息放在里面就可以啦。

{
  "scripts": {
    "mock": "json-server db.json --port 3006"
  }
}

• 注意启动服务的方式：执行以下命令即可。

npm run mock

数据操作

测试数据源

• 直接复制到所创建的 db.json 文件中

{
  "subject": [
	{
		"id": 1,
		"name": "JAVA",
		"price": 888 
	},
	{
		"id": 2,
		"name": "GO",
		"price": 2088
	},
	{
		"id": 3,
		"name": "VUE",
		"price": 288
	}
  ]
}

查询数据

获取数据方式

方式一：

• 直接在 url 后面拼接 id 值

http://localhost:3006/subject/3

• 返回数据格式：对象

{
  	id: 3,
  	name: "VUE",
 	price: 288
}

方式二：

• 也是我们常见 GET 的传参方式，拼接需要查询参数

http://localhost:3006/subject?id=3

• 返回数据格式：数组

[
  	{
		id: 3,
		name: "VUE",
		price: 288
	}
]

分页获取数据

• _page：页码
• _limit：每页显示数量，如果没有指定，默认每页10条数据。

http://localhost:3006/subject?_page=1&_limit=2

排序数据

• _sort：排序字段
• _order：排序方式【asc | desc】，默认asc

http://localhost:3006/subject?_sort=id&_order=desc

截取数据

• 使用 slice 方式，通过参数 _start 指定开始位置，_end指定结束位置
• 注意： 是通过 下标 方式截取
• 也可以结合_limit 指定开始位置算起，往后取n个数据。

http://localhost:3006/subject?_start=3&_end=6

http://localhost:3006/subject?_start=3&_limit=6

区间数据

• _gte： 大于等于
• _lte： 小于等于
• _ne： 不等于
• _like： 模糊查询

http://localhost:3006/subject?id_gte=2&_lte=5

http://localhost:3006/subject?name_like=V

配置静态资源服务器

• 在根目录下创建 json 文件，例 json_server_config.json
• 在根目录下创建 public 目录，存放静态资源。

{
	"port": 3006,
	"watch": true,
	"static": "./public",
	"read-only": false,
	"on-cors": true,
	"no-gzip": false
}

• 修改 package.json 文件中启动命令

{
  "name": "my-json-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
	"mock1": "json-server db.json --port 3006",
	"mock": "json-server --c json_server_config.json db.json"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

• 因为配置文件中指定静态文件的目录，所以访问图片时可以忽略 public 目录。
• 例：访问图片（public/image）：http://localhost:3006/image/test.png