场景公司在做React或者Vue项目开发的时候，当后端接口还没有准备好，需要进行数据mocking实现页面渲染，模拟前后端交互。之前我们是这样做的：1.使用本地静态数据json来模拟接口数据，但是这种方式只能读取数据，不能增删改数据。2.在本地搭建一个基于node.js的服务器，但是这个需要我们自己写代码手动搭建本地服务器。3、安装mock.js，模拟接口请求mock生成的数据，但是mock.js生成的数据是随机的，不一定是我们需要的数据。json-server登场在了解了以往前端如何模拟接口数据进行联调的几种方法的不足之后，提出了一种新的数据模拟方法——JSON-Server。json-server是一个基于Node.js的服务器，可以直接将一个json文件托管成一个完整的RESTful风格API的web服务器，支持跨域、jsonp、路由自定义、数据快照保存等功能。JSON-Server官网文档：https://github.com/typicode/j...这是json-server官方文档的第一句话：GetafullfakeRESTAPIwithzerocodinginlessthan30seconds(Seriously）翻译过来就是在30秒内搭建一个完整的RESTFUL风格的API服务，0代码，这是在开玩笑吗？从这句话可以看出json-server的优势：1.0代码搭建快速2.完成RESTFUL风格的API服务实现安装npminstall-gjson-server全局安装工程文件创建和数据初始化newdb.json{"products":[{"name":"Huawei","id":1,"price":4000,"specs":{"width":11}},{"name":"Apple","id":2,"price":5000,"specs":{"width":12}},{"name":"Xiaomi","id":3,"price":6000,"specs":{"width":13}}]}db.json可以理解为一个本地数据库，当我们访问相应的路由接口增删改查时，db.json中的数据就是实时更新的项目配置1.自定义配置可以在package.json文件中的scripts中配置如下："json-server":"json-server--watchdb.json--port3006"2.然后执行yarnjson-server命令3.现在访问http://localhost:3006/products获取所有产品数据Basic###getrequest/productsrequestallProduct/products/2Requestproduct/productswithid2?name=Huawei请求name是华为的产品###postrequest/productsparameterparams:{"name":"vivo","id":4,"price":3600}添加一个产品到产品列表###putRequest(updateall)/products/5params:{"name":"Lenovo666","price":3250}将id为5的产品的所有对象替换为{"id":5,"name":"Lenovo666","price":3250}###补丁请求（部分更新）/products/4params:{price:3200}将id为4的商品的price值改为3200，其他属性值不变###deleterequest/products/1deleteproductwithid1##advanced#####Filterquery/products?name=Xiaomi&price_gte=6500合并查询名称为小米且价格大于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个商品#####排序query/products?_sort=price&_order=desc按价格排序排序方式为desc降序asc升序#####任意分片query/products?_start=2&_end=4索引值2和索引值4之间的数据####全文搜索query/products?q=m查询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-serverdb.json--routesroutes.json根据路由.json文件配置路由重定向：/api/products#→/products***当访问/api/products路由接口时，服务端会重定向到/products访问数据，以此类推如下路由配置***/api/products/1#→/products/1/products/1/show#→/products/1/products/Xiaomi#→/products?name=Xiaomi/products?id=1#→/products/1json-servercustomizationConfiguration自定义配置可以通过以下两种方式进行配置1.新建一个json-server-config.json用于命令行配置：json-server--cjson-server-config.jsondb.json在本例中，以下配置将启动Function{"port":5000,//Customport"watch":true,//Automa动态监听变化"static":"./public",//静态文件路径"read-only":false,//是否只能使用GET请求"no-cors":false,//是否支持交叉domain"no-gzip":false,//是否支持压缩"routes":"route.json"//路由配置地址}2.json-server命令行usejson-server[options]
