场景

在公司进行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有那些须要补充的也能够进行评论，作者不胜感激。排版码字不易，感觉对您有所帮忙，就帮忙点个赞吧！