前端必备技能：json-server全攻略

在项目的初始阶段，后端提供的接口或数据可能是不完整的，作为一名前端开发工程师，不可避免的要使用mock的数据。如果此时的你不想使用简单的静态数据，而是想自己在本地启动一个server来模拟请求相关的操作，那么json-server是一个不错的选择。

json-serve可以帮助我们快速搭建一个mock-server本地服务，可以根据不同的后缀获取到不同的数据。

一、准备工作1、安装Node

由于json-server需要通过Node对其进行启动，所以首先要安装Node。Node可自行安装，在此不再进行演示。

2、全局安装json-server

3、查看版本

在cmd控制台中输入以下命令，查看版本号。用于验证是否安装成功。

4、准备一份JSON文件

我这里准备的是一份名字为score.json的文件，用于存放虚拟数据。

二、启动服务1、常用命令选项：•-- watch：通过该命令可以实时监测score.json的变化，如果省略该命令，即使score.json发生变化，刷新、或重新发送请求，仍然会返回初次启动服务时的数据。简写形式为：-w•--port:指定服务的端口号，可省略，默认为3000。简写形式：-p•--host:设置域，可省略。简写形式：-H

上方命令可简写为：

但，一般通过下面命令，即可完基本工作：

2、工作场景建议

如果你已知项目接口域名及端口号，为避免后续更改接口信息。我们可以这样做：

•假设项目接口域名为：,端口号为：•设置host映射：用记事本打开目录中的文件。底部增加：，该文件如果不允许修改，增加相对应的权限即可。•启动服务命令：

由于80是默认端口号，所以我们可以通过来对数据进行操作了。

3、通过文件启动项目

启动json-server时， 如果自定义配置的参数过多，容易出现命令敲错的现象。我们可以在创建一个名字为的文件，内容为：

通过启动即可。

4、自定义配置文件

json-server允许我们把所有的配置放到一个配置文件中，这个配置文件默认json-server.json。配置文件的主要内容如下：

可以通过启动项目。

4、输出类似以下内容，说明启动成功。

5、其它相关启动参数

三、获取数据()1、get获取scoreList属性•

2、通过以下两种方式可get获取scoreList属性当中id为1的数据：•

•

3、单条件查找：属性为的数据•

4、多条件查找：属性为，为的数据•

5、全局搜索（模糊查询）：查询所有属性值中包含的数据•

6、可以用访问更深层的属性：查询属性的属性为的数据：•

7、通过 and  实现对数据的分页：将每页显示条记录，查询第页内容：•

8、通过与 对数据进行排序。指定排序的属性，指定排序的类型（为升序，为降序）•按的倒序排列：

•多条件排序：年龄相同按语文的升序排列：

9、通过、、对数据进行截取。•截取前5条记录:

•截取第3到第6的记录(共三条):

•从第2条记录开始截取5条记录(共5条):

10、通过操作符（大于等于）， （小于等于）, （不等于）, （模糊查询）获得数据。•年龄大于等于23：

四、添加数据()

五、删除数据（delete）•删除id为11的数据:

六、更新数据（patch、put）•通过请求，将为的记录属性修改为。（为局部修改）

•通过请求将为的记录替换成一个新的对象，该对象只有属性，值为。（为替换，id不会替换）

七、自定义路由

创建route.json文件，可对路由进行如下配置：

启动：

八、json-server是依赖express开发而来，如有需要可进行深度定制

1、安装json-server

2、创建server.js文件：