json-server 30 秒无代码搭建一个完整的 REST API 服务
↓推荐关注↓
场景
在公司进行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有那些需要补充的也可以进行评论，作者不胜感激。排版码字不易，觉得对您有所帮助，就帮忙点个赞吧！
作者：山楂片
https://segmentfault.com/a/1190000040457773
- EOF -
觉得本文对你有帮助？请分享给更多人
推荐关注「前端大全」，提升前端技能
点赞和在看就是最大的支持❤️