用JSON-server模仿REST API(三) 进阶运用

2024年4月2日 254次阅读 来源: 烈日神巫

前面演示了怎样装置并运转 json server , 和运用第三方库实在化模仿数据 , 下面将睁开更多的设置项和数据操纵。

设置项

在装置好json server以后，经由过程 json-server -h 能够看到以下设置项：

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]

Examples:
  bin db.json
  bin file.js
  bin http://example.com/db.json

既能够经由过程敕令行体式格局单行设置，如

json-server db.js -p 3003 -d 500 -q -r ./routes.json

，也能够经由过程 json-server.json 文件举行设置后：

# /mock/json-server.json

{
    "host": "0.0.0.0",
    "port": "3003",
    "watch": false,
    "delay": 500,
    "quiet": true,
    "routes": "./routes.json"
}

运转

json-server db.js

返回静态文件

在 /mock 下竖立 public 目次，即可直接接见其下的一切静态文件，包括但不限于
js, css ,markdown 文件等。

地点栏输入 http://localhist:3003/readme.md 即可接见以下文件

# /mock/public/readme.md

# hello Mr DJ,这节拍不要停

挪动装备接见

经由过程 json server 竖立的rest api效劳默许能够在局域网中经由过程WIFI接见接口。
windows下面经由过程 ipconfig 查找到电脑的局域网地点.mac装备是经由过程 ifconfig | grep "inet " | grep -v 127.0.0.1 检察。
比方我的电脑局域网ip是 192.168.0.6,在手机上接见 http://192.168.0.6:3003 即可。

自定义路由

能够经由过程自定义路由的情势，简化数据结构，或是竖立高弹性的web api，比方

# /mock/routes.json

{
  "/news/:id/show": "/news/:id",
  "/topics/:id/show": "/news/:id",
    
}

接见 /news/1/show 和 topics/1/show 均返回指定的 /news/1 内容。

* 须要注重的是，路由必需以 / 开首

npm启动

比拟在终端中直接输入种种敕令，我更喜好应用 node scripts 来处置惩罚使命，在 /mock 下竖立文件 package.json,然后运转 npm run mock 。

# /mock/package.json

{
  "scripts": {
    "mock": "json-server db.js"
  }
}

数据过滤

数据过滤是 json server 中异常强力的功用。经由过程url上简朴的query字段，即可过滤出林林总总的数据。
示例数据源:

[
    {
        "id": 0,
        "title": "元小总小把清保住影办历战资和总由",
        "desc": "共先定制向向圆适者定书她规置斗平相。要广确但教金更前三响角面等以白。眼查何参提适",
        "tag": "值集空",
        "views": 3810,
        "images": [
            "http://dummyimage.com/200x100/79f2a5&text=别角置",
            "http://dummyimage.com/200x100/f28279&text=收面几容受取",
            "http://dummyimage.com/200x100/7993f2&text=做件"
        ]
    },
    {
        "id": 1,
        "title": "物器许条对越复术",
        "desc": "方江周是府整头墨客权部部条。始克识史但给又约同段十子按者感律备。关长厂平难山从合",
        "tag": "分七眼术保",
        "views": 4673,
        "images": [
            "http://dummyimage.com/200x100/79f2a5&text=别角置"
        ]
    },
    {
        "id": 2,
        "title": "但学却连质法计性想般最",
        "desc": "以群亲它天即资几行位具回同务度。场养验快但部光天火金时内我。任提教毛办结论感看还",
        "tag": "响六",
        "views": 4131,
        "images": [
            "http://dummyimage.com/200x100/79f2a5&text=别角置",
            "http://dummyimage.com/200x100/f28279&text=收面几容受取",
            "http://dummyimage.com/200x100/7993f2&text=做件"
        ]
    },
    ...
    {
        "id": 99,
        "title": "则群起然线部其深我位价业红候院",
        "desc": "为高值务须西生型住断况里听。志置开用她你然始查她响元还。照员给门次府此据它后支越",
        "tag": "何你",
        "views": 2952,
        "images": [
            "http://dummyimage.com/200x100/79f2a5&text=别角置"
        ]
    }
]

属性值(Filter)

运用 . 操纵对象属性值

// 猎取图片数目为3，且标签字数为2的消息

GET /news?images.length=3&tag.length=2

支解(Slice)

运用 _start 和 _end 或许 _limit (response中会包括 X-Total-Count)

// 猎取id=10最先的5篇消息

GET /news?_start=10&_limit=5

// 猎取id=20最先,id=35完毕的消息

GET /news?_start=20&_end=35

排序(Sort)

运用 _sort 和 _order (默许运用升序(ASC))

// 根据阅读数目降序分列

GET /news?_sort=views&_order=DESC

运算符(Operators)

运用 _gte 或 _lte 拔取一个局限

// 拔取阅读量在2000-2500之间的消息

GET /news?views_gte=2000&views_lte=2500

运用 _ne 消除一个值

// 挑选tag属性不是 "国际消息" 的分类

GET /news?tag_ne=国际消息

运用 _like 举行隐约查找 (支撑正则表达式)

// 查找title中含有 "前端" 字样的消息 

GET /news?title_like=前端

全文检索(Full-text search)

运用 q，在对象悉数value中遍历查找包括指定值的数据

// 查找消息悉数字段包括 "强拆" 字样的数据

GET /news?q=强拆

关联图谱(Relationships)

猎取包括下级资本的数据, 运用 _embed

GET /news?_embed=comments
GET /news/1?_embed=comments

猎取包括上级资本的数据, 运用 _expand

GET /news?_expand=post
GET /news/1?_expand=post

作为中间件

除了自力作为rest api 效劳器以外， json server 一样能够作为诸如 Express 之类框架的中间件运用，详细API详见 json server模块

参考资料

json-server源码 ： json-server
mockjs源码 ： mockjs
demo ： 示例代码

全文完

    原文作者：烈日神巫
    原文地址: https://segmentfault.com/a/1190000005793520
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞