资讯专栏INFORMATION COLUMN

用JSON-server模拟REST API(三) 进阶使用

xavier / 3137人阅读

摘要:前面演示了如何安装并运行和使用第三方库真实化模拟数据下面将展开更多的配置项和数据操作。示例数据源元小总小把清保住影办历战资和总由共先定制向向圆适者定书她规置斗平相。

前面演示了如何安装并运行 json server , 和使用第三方库真实化模拟数据 , 下面将展开更多的配置项和数据操作。

配置项

在安装好json server之后,通过 json-server -h 可以看到如下配置项:

json-server [options] 

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/showtopics/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://www.ucloud.cn/yun/79761.html

相关文章

  • 理解RESTful架构与json-server模拟REST api的使

    摘要:一什么是架构即的缩写,我们把他翻译为表述性状态传递,是博士在年他的博士论文中提出来的一种软件架构风格。是个无状态的协议,所以状态就保存在服务器端。只要少量的数据就可使用,支持和。同时支持,同时提供一系列的查询方法如。 一、什么是RESTful架构? REST即Representational State Transfer的缩写,我们把他翻译为表述性状态传递,是Roy Fielding博...

    Atom 评论0 收藏0
  • 介绍两大神器!——使json-server和faker.js模拟REST API

    摘要:今天发现了一个神器在他的帮助下可以在很短的时间内搭建一个然后就可以让前端在不依赖后端的情况下进行开发啦关于什么是设计指南阮一峰简单来说,是一个模块,运行服务器,你可以指定一个文件作为的数据源。更多属性可以查看这里好啦,基本就是这样啦, 今天发现了一个神器——json-server!在他的帮助下可以在很短的时间内搭建一个Rest API, 然后就可以让前端在不依赖后端的情况下进行开发啦!...

    sarva 评论0 收藏0
  • JSON-server模拟REST API(一) 安装运行

    摘要:曹县宣布昨日晚间登日成功长江流域首次发现海豚支持党中央决定抄写党章势在必行为了方便,再创建一个文件,写入然后使用到目录下执行命令,如果成功会出现你的电脑中文件夹所在目录的路径如果不成功请检查文件的格式是否正确。 在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的。所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的。 对比过多种mock工具后,我最终...

    Sleepy 评论0 收藏0
  • 使json-server模拟REST API

    摘要:官方地址使用可全局安装,也可针对项目安装。可用开启服务。数据文件格式如下让读书点燃梦想地点滨江星耀城让读书点燃梦想地点滨江星耀城仿京东购物车仿京东购物车修改里面的命令。 在前端开发中,如果后端接口还没有提供,前端拿不到数据,可能就没法继续写一些交互行为的代码。这一问题可通过json-server来很好地解决。本文主要讲如何将json-server和webpack进行整合,基于vue-w...

    smartlion 评论0 收藏0
  • JSON-server模拟REST API(二) 动态数据

    摘要:上一篇演示了如何安装并运行在这里将使用第三方库让模拟的数据更加丰满和实用。使用动态数据上一篇演示时,使用了作为数据载体,虽然方便,但是如果需要大量的数据,则显得力不从心。 上一篇演示了如何安装并运行 json server , 在这里将使用第三方库让模拟的数据更加丰满和实用。 使用动态数据 上一篇演示时,使用了 db.json 作为数据载体,虽然方便,但是如果需要大量的数据,则显得力不...

    weakish 评论0 收藏0

发表评论

0条评论

xavier

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<