json-server进阶
本文于1819天之前发表,文中内容可能已经过时。
上一篇文章详细介绍了下json-server的基础使用,完成了简单的增删改查操作,但是如果有时候我们需要大量并且合理的数据,之前的操作似乎就很鸡肋了,或者亦又想自定义api访问地址等等。那么这篇文章正是你所需要的。
动态数据
使用js动态生成数据
创建db.js
文件
1 | module.exports = function() { |
在该目录下执行
1 | json-server db.js |
现在访问http://localhost:3000/list
会看到动态生成了1000条数据,这跟咱们手动在json文件里写1000条数据效果一样,但肯定没有这么方便。还好json-server支持使用js动态生成的json格式数据。
Mockjs生成数据
虽然我们使用js动态生成了一些数据,但是这似乎不太符合常理。既然要模拟,那我们就模拟一些比较合理的数据,这里推荐使用Mockjs
一款很好的数据模拟第三方库。
上篇文章我留下了一个思考:mockjs是可以作为一个独立的mock server
存在,但为什么不单独用它?
- 不能跨域使用
- 与某些框架中的路由处理逻辑冲突
- 无法定义复杂的数据结构
- 无法自定义较为复杂的路由
其实数据生成器有很多,在这里必须提一下faker
,几乎支持全部常用的数据格式,而且还有多语言,但是正如网上很多人所说那样,他的中文数据是以西方文字为基础,并不能很好的模拟中文 。
比如我随机生成一个用户信息(城市、街道、公司、月份、邮箱、电话):
可以明显看到通过faker
生成的数据可读性真的很差,再来看下mockjs
1 | let Mock = require('mockjs'); |
可以看到这次生成数据可读性很好,而且图片的提供商还是国内的(不用爬梯子访问了)
生成真实合理的数据
在你db.js
文件所在目录下安装mockjs
1 | npm install mockjs --save |
在这里不重复说mockjs的使用方法,文档都有。mockjs官网:http://mockjs.com/
改造下db.js
1 | let Mock = require('mockjs'); |
可以看到这次生成的数据
配置项
上篇文章列过json-server的配置项,再看下。
1 | json-server [options] <source> |
直接在命令行配置,例如
1 | json-server db.js -d 500 -q -r ./routes.json |
也可以创建json-server.json
文件进行配置
1 | { |
然后直接运行
1 | json-server db.js |
当然也可以使用npm
启动
自定义路由
自定义路由通俗的讲就是给api请求地址起了个别名,而且和后台商量好后就避免后期了修改接口地址的麻烦。
在mock
目录下创建router.json
文件,注意每个路由文件应该以/
开头。
1 | { |
在这个json文件里key
就是真实部署时要访问的api路径,对应的value
就是我们开发时虚拟的api路径。
现在访问 /api/list/1
和访问/list/1
都返回/list/1
的内容
高级查找
Filter(过滤)
使用.
操作 对象属性值,比如访问更深层次的属性
1 | GET /list?name.length=2&id=888 |
Paginate(分页)
使用 _page
和可选的 _limit
来对返回数据定制(不设置默认返回10条)。
在返回的Response Headers 中,有一个属性Link
,里面会有first, prev, next and last links。 而且还有X-Total-Count
1 | GET /list?name.length=2&id=888 |
Sort(排序)
使用 _sort
和 _order
(默认是ascending)
1 | GET /list?_sort=id&_order=asc |
对于多字段的排序, 可以这样
1 | GET /list?_sort=id,name.length&_order=desc,asc |
Slice(分隔)
使用 _start
和 _end
或者 _limit
1 | GET /list?_start=2&_end=5 |
Operators(运算)
使用 _gte
或 _lte
选取一个范围
1 | # 选取id在2-5之间的数据 |
使用 _ne
排除一个值
1 | GET /list?name_ne=游魂 |
使用 _like
进行模糊查找 (支持正则表达式)
1 | GET /list?name_like=游魂 |
Full-text search(全文检索)
使用 q
,在对象全部value中遍历查找包含指定值的数据
1 | GET /list?q=张 |
Relationships(关系图谱)
获取包含下级资源的数据, 使用 _embed
1 | GET /parents?_embed=children |
获取包含上级资源的数据, 使用 _expand
1 | GET /children?_expand=parents |
还有很多没说到,但是这些已经足够用了。
json-server官网:https://github.com/typicode/json-server