在项目的初始阶段,后端提供的接口或数据可能是不完整的,作为一名前端开发工程师,不可避免的要使用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文件:
领取专属 10元无门槛券
私享最新 技术干货