共计 4336 个字符，预计需要花费 11 分钟才能阅读完成。
场景
在公司进行 React 或者 Vue 我的项目开发的过程中，在后端尚未筹备好接口时，咱们须要进行数据 mock 来实现页面渲染、模仿前后端交互。
之前咱们都是这么做的：
1. 采纳本地静态数据 json 的形式来模仿接口数据，然而这种形式咱们只能去读取数据，无奈对数据进行增删改等操作。
2. 在本地搭建一个基于 node.js 的服务器，然而这样须要咱们本人写代码去手动搭建本地服务器。
3. 装置 mock.js, 模仿接口去申请 mock 生成的数据，然而 mock.js 生成的数据具备随机性，不肯定使咱们须要的数据。
json-server 退场
理解了过来前端如何模仿接口数据进行联调的几种形式的毛病后，一种新的数据模仿形式 -JSON-Server。
json-server 是基于 Node.js 的服务器，能够间接把一个 json 文件托管成一个具备全 RESTful 格调的 API, 并反对跨域、jsonp、路由订制、数据快照保留等性能的 web 服务器。
JSON-Server 官网文档：https://github.com/typicode/j…
这是官网文档对 json-server 介绍的第一句话：
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
翻译过去就是 30 秒之内搭建一个残缺的 RESTFUL 格调的 API 服务，0 代码, 这个是不是开玩笑的
从这句话中咱们就能够看到 json-server 的劣势：
1.0 代码疾速搭建
2. 完全符合 RESTFUL 格调的 API 服务实现
装置
npm install -g json-server 全局装置
我的项目文件创建和数据初始化
新建 db.json
{
"products": [
{
"name": "华为",
"id": 1,
"price": 4000,
"specs": {"width": 11}
},
{
"name": "苹果",
"id": 2,
"price": 5000,
"specs": {"width": 12}
},
{
"name": "小米",
"id": 3,
"price": 6000,
"specs": {"width": 13}
}
]
}db.json 能够了解为本地一个数据库，当咱们拜访对应的增删改查路由接口时，db.json 中的数据是实时更新的
我的项目配置
1. 自定义配置
能够在 package.json 文件中的 scripts 中进行如下配置："json-server": "json-server --watch db.json --port 3006"
2. 而后执行 yarn json-server 命令
3. 当初拜访 http://localhost:3006/products 就能够获取所有的商品数据了
根底
### get 申请
/products 申请所有商品
/products/2 申请 id 为 2 的商品
/products?name= 华为 申请 name 为华为的商品 ### post 申请
/products
参数 params:{
"name": "vivo",
"id": 4,
"price":3600
}
向商品列表中增加一条商品 ### put 申请（全副更新）
/products/5
params:{
"name": "联想 666",
"price":3250
}
将 id 为 5 的商品的对象全副替换为 {"id":5,"name": "联想 666","price":3250}### patch 申请（局部更新）
/products/4
params:{price:3200}
将 id 为 4 的商品的 price 值改为 3200 其余的属性值不变 ### delete 申请
/products/1 删除 id 为 1 的商品
## 进阶
##### 过滤查问
/products?name= 小米 &price_gte=6500 合并查问 name 为小米并且 price 大于 6500 元的商品
/products?specs.width=13 规格的宽度为 13 的商品 #### 条件查问 _gte 大于 _lte 小于 _ne 不等于 _like 蕴含 (含糊查问)
/products?price_gte=4600 价格大于 4600 的商品
/products?price_lte=8000 价格小于 8000 的商品 ##### 分页查问
/products?_page=2&_limit=5 获取第二页的数据 每页申请 5 条 ##### 排序查问
/products?_sort=price&_order=desc 依据价格进行排序 排序形式为 desc 降序 asc 升序 ##### 任意切片查问
/products?_start=2&_end=4 从索引值为 2 到索引值为 4 之间的数据 #### 全文检索查问
/products?q= 米 查问全副数据中蕴含”米“关键字的数据
json-server 路由配置
很多时候咱们须要的路由接口可能不是简略的 http://localhost:3000/products 这种格局的，而是
http://localhost:3000/api/pro… 这是咱们就须要对路由接口进行自定义配置。
新建一个 routes.json 文件，进行如下配置
"/api/*": "/$1",
"/:resource/:id/show": "/:resource/:id",
"/posts/:category": "/posts?category=:category",
"/articles\?id=:id": "/posts/:id"
}启动命令配置
json-server db.json --routes routes.json根据 routes.json 文件的配置进行路由重定向：
/api/products # → /products
*** 当拜访 /api/products 路由接口时，服务器会重定向到 /products 来拜访数据，上面的路由配置以此类推 ***
/api/products/1 # → /products/1
/products/1/show # → /products/1
/products/ 小米 # → /products?name= 小米
/products?id=1 # → /products/1
json-server 自定义配置
自定义配置能够通过上面两种形式进行配置
1. 新建 json-server-config.json
进行命令行配置：json-server –c json-server-config.json db.json 这样的话上面的配置就起作用了
{
"port": 5000, // 自定义端口
"watch": true, // 主动监听变动
"static": "./public", // 动态文件门路
"read-only": false, // 是否只能应用 GET 申请
"no-cors": false, // 是否反对跨域
"no-gzip": false, // 是否反对压缩
"routes": "route.json" // 路由配置地址
}2.json-server 命令行应用
json-server [options] <source>
Options:
--config, -c Path to config file (配置文件) [default: "json-server.json"]
--port, -p Set port (服务器端口) [default: 3000]
--host, -H Set host (host 地址) [default: "localhost"]
--watch, -w Watch file(s) (监听 json 文件) [boolean]
--routes, -r Path to routes file (路由配置文件)
--middlewares, -m Paths to middleware files (中间件文件) [array]
--static, -s Set static files directory (动态文件门路)
--read-only, --ro Allow only GET requests(是否只反对 get 申请) [boolean]
--no-cors, --nc Disable Cross-Origin Resource Sharing (是否跨域) [boolean]
--no-gzip, --ng Disable GZIP Content-Encoding (是否压缩) [boolean]
--snapshots, -S Set snapshots directory [default: "."]
--delay, -d Add delay to responses (ms) (提早数据返回)
--id, -i Set database id property (e.g. _id) (数据主键) [default: "id"]
--foreignKeySuffix, --fks Set foreign key suffix, (e.g. _id as in post_id)
[default: "Id"]
--quiet, -q Suppress log messages from output [boolean]
--help, -h Show help (帮忙信息) [boolean]
--version, -v Show version number (版本信息) [boolean] 命令行执行：
1.source 能够是 json 文件也能够是 js 文件
2. 命令行配置举例说明
json-server -c xxx.config.json –routes routes.json -p 8001 -i pid …. db.json
chrome 插件 web 前端助手 FeHelper 工具
当咱们在浏览器上申请 /products 时，获取到 db.json 中的 json 数据
装置了 FeHelper 后，在浏览器上咱们的数据主动进行格式化，而且 json 数据也能够进行折叠、排序、下载数据等性能，是不是咱们展现的 json 数据也变得好看了！！！
chrome 浏览器装置流程：1. https://github.com/zxlie/FeHelper/tree/master/apps/static/screenshot/crx
从 github 上下载最新版本的 crx 文件
2.chrome 浏览器地址栏输出：chrome://extensions/ 并关上
3. 右上角开启开发者模式
4. 拖拽 crx 到以后页面，实现装置
理解了 json-server 的根本应用后，咱们在搭建本人的本地 React 或者 Vue 我的项目时，就能够应用 json
-server 搭建本地服务器，对数据库 db.json 外面的数据进行增删改查，不必再放心刷新页面后，操作的数据失落。
接下来就让咱们在理论我的项目中去应用下 json-server 吧！！！
作者对于 json-server 的了解属于根底入门级别，对于文章中的了解或者应用谬误，望各位大神不吝指出，对于 json-server 有那些须要补充的也能够进行评论，作者不胜感激。排版码字不易，感觉对您有所帮忙，就帮忙点个赞吧！