欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

json-server进阶

程序员文章站 2022-07-14 09:04:44
...

​ 上一篇文章详细介绍了下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官网: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官网:github.com/typicode/js…