07-20 3682人
上一篇文章详细介绍了下json-server的基础使用，完成了简单的增删改查操作，但是如果有时候我们需要大量并且合理的数据，之前的操作似乎就很鸡肋了，或者亦又想自定义api访问地址等等。那么这篇文章正是你所需要的。
动态数据
使用js动态生成数据
创建db.js文件
module.exports = function() {
let data = { list: [] }
// Create 1000 datas
for (let i = 0; i < 1000; i++) {
data.list.push({ id: i, name: 'user' + i,link:'www.'+ i + '.com' })
}
return data
}
在该目录下执行
json-server db.js
现在访问http://localhost:3000/list会看到动态生成了1000条数据，这跟咱们手动在json文件里写1000条数据效果一样，但肯定没有这么方便。还好json-server支持使用js动态生成的json格式数据。
Mockjs生成数据
虽然我们使用js动态生成了一些数据，但是这似乎不太符合常理。既然要模拟，那我们就模拟一些比较合理的数据，这里推荐使用Mockjs一款很好的数据模拟第三方库。
上篇文章我留下了一个思考：mockjs是可以作为一个独立的mock server存在，但为什么不单独用它？
- 不能跨域使用
- 与某些框架中的路由处理逻辑冲突
- 无法定义复杂的数据结构
- 无法自定义较为复杂的路由
其实数据生成器有很多，在这里必须提一下faker，几乎支持全部常用的数据格式，而且还有多语言，但是正如网上很多人所说那样，他的中文数据是以西方文字为基础，并不能很好的模拟中文 。
比如我随机生成一个用户信息（城市、街道、公司、月份、邮箱、电话）：
可以明显看到通过faker生成的数据可读性真的很差，再来看下mockjs
let Mock = require('mockjs');
let Random = Mock.Random;
console.log(Random.city());
console.log(Random.cname());
console.log(Random.date());
console.log(Mock.mock({
"stars|1-10": "★"
}));
console.log(Random.image('200x100', '#4A7BF7', 'hello'))
可以看到这次生成数据可读性很好，而且图片的提供商还是国内的（不用爬梯子访问了）
生成真实合理的数据
在你db.js文件所在目录下安装mockjs
npm install mockjs --save
在这里不重复说mockjs的使用方法，文档都有。mockjs官网：http://mockjs.com/
改造下db.js
let Mock = require('mockjs');
let Random = Mock.Random;
module.exports = function() {
let data = { list: [] }
// Create 1000 datas
for (let i = 0; i < 1000; i++) {
data.list.push({ id: i, name: Random.cname(),link:Random.url() })
}
return data
}
可以看到这次生成的数据
配置项
上篇文章列过json-server的配置项，再看下。
json-server [options] <source>
Options:
--config, -c 指定 config 文件 [默认: "json-server.json"]
--port, -p 设置端口号 [default: 3000]
--host, -H 设置主机 [默认: "0.0.0.0"]
--watch, -w 监控文件 [boolean]
--routes, -r 指定路由文件
--static, -s 设置静态文件
--read-only, --ro 只允许 GET 请求 [boolean]
--no-cors, --nc 禁止跨域资源共享 [boolean]
--no-gzip, --ng 禁止GZIP [boolean]
--snapshots, -S 设置快照目录 [默认: "."]
--delay, -d 设置反馈延时 (ms)
--id, -i 设置数据的id属性 (e.g. _id) [默认: "id"]
--quiet, -q 不输出日志信息 [boolean]
--help, -h 显示帮助信息 [boolean]
--version, -v 显示版本号 [boolean]
直接在命令行配置，例如
json-server db.js -d 500 -q -r ./routes.json
也可以创建json-server.json文件进行配置
{
"watch": true,
"delay": 500,
"quiet": true,
"routes": "./routes.json"
}
然后直接运行
json-server db.js
当然也可以使用npm启动
自定义路由
自定义路由通俗的讲就是给api请求地址起了个别名，而且和后台商量好后就避免后期了修改接口地址的麻烦。
在mock目录下创建router.json文件，注意每个路由文件应该以/开头。
{
"/api": "/list",
"/api/list/:id": "/list/:id",
"/api/users?name=:name":"/users?name=:name"
}
在这个json文件里key就是真实部署时要访问的api路径，对应的value就是我们开发时虚拟的api路径。
现在访问 /api/list/1和访问/list/1 都返回/list/1的内容
高级查找
Filter(过滤)
使用.操作 对象属性值，比如访问更深层次的属性
GET /list?name.length=2&id=888
GET /list?name.age=18
Paginate(分页)
使用 _page 和可选的 _limit来对返回数据定制（不设置默认返回10条）。
在返回的Response Headers 中，有一个属性Link，里面会有first, prev, next and last links。 而且还有X-Total-Count
GET /list?name.length=2&id=888
GET /list?name.age=18
Sort(排序)
使用 _sort 和 _order （默认是ascending)
GET /list?_sort=id&_order=asc
对于多字段的排序， 可以这样
GET /list?_sort=id,name.length&_order=desc,asc
Slice(分隔)
使用 _start 和 _end 或者 _limit
GET /list?_start=2&_end=5
GET /list?_start=10&_limit=5
Operators(运算)
使用 _gte 或 _lte 选取一个范围
# 选取id在2-5之间的数据
GET /list?id_gte=2&id_lte=5
使用 _ne 排除一个值
GET /list?name_ne=游魂
使用 _like 进行模糊查找 (支持正则表达式)
GET /list?name_like=游魂
Full-text search(全文检索)
使用 q，在对象全部value中遍历查找包含指定值的数据
GET /list?q=张
Relationships(关系图谱)
获取包含下级资源的数据, 使用 _embed
GET /parents?_embed=children
获取包含上级资源的数据, 使用 _expand
GET /children?_expand=parents
还有很多没说到，但是这些已经足够用了。
json-server官网：https://github.com/typicode/json-server
欢迎留言