工作中，在进行前端开发时，如果后端还没有做好准备，前端不可避免的要使用一些模拟数据。很多时候，我们并不想使用简单的静态数据，这个时候，我们就可以使用json-server来完成模拟请求以及返回数据的过程。

json-server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源，简单来讲就是可以用来模拟接口数据。

安装

使用npm全局安装
npm install -g json-server

或者使用yarn全局安装
yarn global add json-server

使用

在本地准备一个 json 文件，用来存放接口数据。
data.json文件内容：

{"posts": [{"positionId": 1,"title": "bbb","author": "lucy","info":{"age":18,"sex":"man"}},{"positionId": 2,"title": "yyy","author": "nike"},{"positionId": 3,"title": "aaa","author": "json"}],"comments": [{"id": 1,"body": "some comment","postId": 1}],"profile": {"name": "typicode"}}

动态生成模拟数据

通过mockJs库，可以很方便的生成模拟数据。

// 引入mockjs
var Mock = require('mockjs');module.exports = () => {// 使用 Mockvar data = Mock.mock({'list|10': [{// 属性 id 是一个自增数，起始值为 1，每次增 1'id|+1': 1,//随机生成5-10个字符的标题title: '@ctitle(5,10)',//随机名字autor: '@cname'}]});// 返回的data会作为json-server的数据return data;
};

启动服务

控制台输入json-server json文件路径，启动 Json 服务，把这个文件返回的数据托管成web服务。输出下面这些内容就是启动成功了。

json-server 常用的一些配置项

配置项	简写	值类型	描述
–watch	-w	[Boolean]	是否监视文件，自动刷新数据
–port	-p	[Number]	设置端口号，默认为3000
–host	-H	[String]	设置域，默认为"localhost"
–routes	-r	[String]	指定路由文件
–id	-i	[String]	设置数据的key值，默认为“id"，即默认拿取key为id的value值
–static	-s	设置静态资源目录，可以用来访问图片
–config	-c	[String]	指定配置文件，默认值为”json-server.json"
–version	-v		显示版本号

其它的内容可以通过json-server -h，帮助列表查看。

示例：
修改端口号为3333
json-server ./mock/data.json -p 3333

启动监视，自动刷新数据，使用这条命令，当修改数据后，刷新页面就可以显示修改后的数据。
json-server ./mock/data.json -w

启动成功后，访问http://localhost:3000/posts，可以看到如下数据：

也就是我们data.json文件中key为posts的value值。

当我们修改--id为positionId后，
json-server ./mock/data.json -i positionId
在地址栏中输入 /1，就可以拿到positionId为1的value

当使用 -s 设置静态资源目录后
json-server ./mock/data.json -w -i positionId -s ./mock/images/
如果images文件夹里有图片，可以直接访问http://localhost:3000/1.png，查看该图片。

配置路由

我们现在访问的地址都是http://localhost:3000/posts，如果我们需要访问http://localhost:3000/home/posts，来获取数据，直接在地址栏中输入这个地址，返回的数据是空的，这个时候我们可以通过配置路由来完成。

json-server ./mock/data.json -w -r ./mock/routes.json

routes.json文件中将/home/posts指向/posts，内容如下：

{"/home/posts":"/posts"
}

保存之后，重启服务，可以看到/home/posts也被指向了/posts，现在再访问http://localhost:3000/home/posts，就可以拿到数据了。

修改package.json文件

每次启动服务时，都需要在终端输入json-server ./mock/data.json -w -i positionId，我觉得太麻烦了，可以把这条命令写在配置文件 package.json中的 scripts 脚本中，这个操作相当于添加了一个快捷方式。如下图：

修改完配置文件后，启动json-server服务时，我们只需要在终端中输入以下命令，也是可以成功运行的。

使用npm启动服务，输入 npm run mock
使用yarn启动服务，输入 yarn mock

查询

下面介绍一些常用的查询方法：

分页 Paginate

?_page=[number]&_limit=[number]。
将返回的数据按照分页显示，_page是第几页，_limit表示每一页多少条数据，默认每页显示10条数据。
后台会返回数据的总长度，总长度的数据在响应头：X-Total-Count 中。

全文搜索 Full-text search

?q=[string]

过滤 Filter

?[key]=[value]
通过指定 key 和 value 的值，可以筛选出要查询的数据结果。
如果有多个条件，中间用 & 连接，例如：?title=bbb&author=lucy。

可以用 . 访问更深层的属性。

还可以使用一些判断条件作为过滤查询的辅助。
可以用的拼接条件有：_gte(大于等于)、_lte(小于等于)、_ne(不等于)、_like(包含)。

截取 Slice

?_start=[number]&_end=[number]
在地址栏的最后加上 ?_start=2&_end=3，表示取出第2条开始（不包含第2条）到第3条（包含第3条）数据。

排序 sort

_sort=[key]&_order=desc(降序)/asc(升序)
将返回的数据按照 _sort 定义的字段进行排序，_order 设置排序的方式（默认为升序）。
在地址栏的最后加上 ?_sort=title&_order=desc，表示将数据按照 title 的 value，进行降序排列。

请求添加数据

常用的HTTP请求测试工具有 postman、Insomnia。
这里使用Insomnia来操作。

回到我们的data.json文件中，也可以看到刚刚添加成功的数据。

如何使用json-server模拟数据相关推荐

SQL server模拟数据实现稍复杂查询语句
目录 1 DISTINCT(不允许重复)的用法 2 BETWEEN(在某个范围内)的用法 3 IN(属于若干个孤立的值)的用法 4 NULL(空值)的用法 5 ORDER BY(排序)的用法 6 模糊 ...
SQL server 模拟数据进行select基本查询
目录 1 命名规范 2 模拟生成数据 1 新建数据表 2 在数据表中,模拟生成80条数据 2 select查询 count函数 sum函数 avg函数 max函数 min函数 Select+case- ...
在SQL Server中将数据导出为XML和Json
BCP "SELECT DEPT_CODE,PARENTCODE FROM longshinewebhr.dbo.b01 where PARENTCODE like '10201%' FOR ...
js json对象转字符串_Mock.js模拟数据实现前端独立开发
在后端接口尚未完成时, 前端开发人员只能请求静态文件的方式来模拟数据, 非常繁琐, 使用mockjs, 我们可以对ajax请求进行拦截, 随机生成各种各样的数据, 包括图片, 非常方便, 由于实在肝不 ...
没有json数据，自己造！mockjs的使用-模拟数据其实超级简单
虽然mockjs已经有好几年没有更新了,但是这个其实跟年限无关,因为它最终的目的是生成模拟json. 而且mockjs可以用于任何webpack项目中,也就是可以在已有的项目中添加mockjs.比如w ...
Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
在做管理后台功能时,经常需要用到表格展示数据,从数据库查询返回的数据,返回集合或数组到前台,然后前台将数据渲染成表格,方便直观展示数据,通常还需要结合分页.查询.排序.Datatables是一款符合上 ...
mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
前端模拟数据的技术方案（二）
读取模拟服务器的静态数据,读取模拟服务器动态数据. 一.准备工作 1.参考文档 json-server官网 mockjs官网 2.安装包 # 安装json-server服务 npm install j ...
JSON Server在快速开发过程中的使用
在开发过程中,接口多半是滞后于页面开发的.利用JSON Server快速搭建模拟返回REST风格的后台数据,保证前后端开发的分离.前后端开发只要设定好接口以及数据的定义,剩下的就可以各自开发,最后集成 ...
详解vue-element-admin 使用mock.js动态模拟数据
大家好,我是一条肥鲶鱼. 提示:胆小慎入文章目录大家好,我是一条肥鲶鱼. 前言一.mock.js 1.为什么使用mock.js 2.mock-server.js的出现二.使用步骤 1.开发环境 ...

如何使用json-server模拟数据

安装

使用

启动服务

json-server 常用的一些配置项

配置路由

修改package.json文件

查询

分页 Paginate

全文搜索 Full-text search

过滤 Filter

截取 Slice

排序 sort

请求添加数据

如何使用json-server模拟数据相关推荐

最新文章

热门文章