json-server模拟REST API

一般情况下,一个APP的数据都需要等待接口人员开发完对应的接口才可以获取到,这样子的效率有点低。最好是我们可以自己模拟接口数据,进行页面的数据填充,打通所有关节,之后等接口开发好了,改下接口地址就好了。

我们今天所要讲的工具:json-server就能实现这样的功能。

1、安装json-server

首先我们的电脑要安装有nodejs,然后使用npm命令来安装:sudo npm install -g json-server

MeWifi:~ cjy$ npm install -g json-server
/usr/local/bin/json-server -> /usr/local/lib/node_modules/json-server/bin/index.js
- [email protected] node_modules/json-server/node_modules/compression/node_modules/ms
/usr/local/lib
└─┬ [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ └── [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ └─┬ [email protected]
  │   └── [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ └─┬ [email protected]
  │   └─┬ [email protected]
  │     └─┬ [email protected]
  │       └─┬ [email protected]
  │         └── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └─┬ [email protected]
          └── [email protected]

检验是否安装成功,查看json-server配置项:json-server -h

MeWifi:~ cjy$ json-server -h
/usr/local/bin/json-server [options] <source>

选项:
  --config, -c               Path to config file    [默认值: "json-server.json"]
  --port, -p                 Set port                             [默认值: 3000]
  --host, -H                 Set host                        [默认值: "0.0.0.0"]
  --watch, -w                Watch file(s)                                [布尔]
  --routes, -r               Path to routes file
  --middlewares, -m          Paths to middleware files                    [数组]
  --static, -s               Set static files directory
  --read-only, --ro          Allow only GET requests                      [布尔]
  --no-cors, --nc            Disable Cross-Origin Resource Sharing        [布尔]
  --no-gzip, --ng            Disable GZIP Content-Encoding                [布尔]
  --snapshots, -S            Set snapshots directory               [默认值: "."]
  --delay, -d                Add delay to responses (ms)
  --id, -i                   Set database id property (e.g. _id)  [默认值: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                  [默认值: "Id"]
  --quiet, -q                Suppress log messages from output            [布尔]
  --help, -h                 显示帮助信息                                 [布尔]
  --version, -v              显示版本号                                   [布尔]

示例:
  /usr/local/bin/json-server db.json
  /usr/local/bin/json-server file.js
  /usr/local/bin/json-server
  http://example.com/db.json

https://github.com/typicode/json-server 

2、运行

在任意的目录创建一个json文件,例如在json目录创建data.json文件,写入以下内容,并在json目录下执行json-server data.json

{
    "list": {
        "news": [
            {          "newsId": 1,
                "title": "标题1",
                "content": "私服大师傅放声大哭"
            },
            {          "newsId": 2,
                "title": "标题2",
                "content": "怎么可能"
            }
        ]
    },
    "detail": {
        "object": {
            "name": "我是大锤",
            "sex": 1,
            "isComplete": true
        }
    }
}

成功的话会出现如下内容

MeWifi:~ cjy$ cd /工作/json/
MeWifi:json cjy$ json-server data.json

  \{^_^}/ hi!

  Loading data.json
  Done

  Resources
  http://localhost:3000/list
  http://localhost:3000/detail

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database

接下去就可以访问了:

3、常用操作

json-server支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等。

这里主要介绍下它的强大的过滤功能

示例数据源:

[
    {
        "newsId": 1,
        "title": "标题1",
        "content": "私服大师傅放声大哭"
    },
    {
        "newsId": 2,
        "title": "标题2",
        "content": "怎么可能"
    }
]

属性值(Filter)

使用 . 操作对象属性值

//获取content的长度为4的数据

排序(Sort)

使用 _sort 和 _order (默认使用升序(ASC))

//按照newsId降序排列

分割(Slice)

使用 _start 和 _end 或者 _limit

//从下标0(第一个对象)开始,获取1条数据

全文检索

使用 q,在对象全部value中遍历查找包含指定值的数据

//查找全部字段包含“可能”的数据

使用 _like 进行模糊查找 (支持正则表达式)

//查找content中含有“大哭”字样的数据

还有一些操作,可以参考这篇文章:json-server说明

时间: 2024-11-05 16:01:11

json-server模拟REST API的相关文章

用JSON-server模拟REST API

来源于: 用JSON-server模拟REST API(一) 安装运行 用JSON-server模拟REST API(二) 动态数据 用JSON-server模拟REST API(三) 进阶使用 在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的. 对比过多种mock工具后,我最终选择了使用 json server 作为工具,因为它足够简单,写少量数据,即可使用.也因为它足够强大,支持CORS和JSONP跨

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

前面演示了如何安装并运行 json server, 和使用第三方库真实化模拟数据 , 下面将展开更多的配置项和数据操作. 配置项 在安装好json server之后,通过 json-server -h可以看到如下配置项: json-server [options] <source> Options: --config, -c 指定 config 文件 [默认: "json-server.json"] --port, -p 设置端口号 [default: 3000] --ho

lzugis——Arcgis Server for JavaScript API之POI

POI(Point Of Interest),感兴趣点,其实呢,严格意义上说应该不是POI,但是单位就这样叫了,我也就这样叫了,其实现的功能大致是这样的:用过百度地图的朋友们都知道你在百度地图时,当鼠标经过某个点时会显示这个对象的名称,点击该对象,会弹出该对象的详细信息.如下图所示: 实现后的效果呢就是这样子的,下面呢我来说说在Arcgis Server for JavaScript API下,我实现该效果的思路与想法. 首先,得有一个图层用于显示这些点对象,这个图层可以是切片,也可以是WMS,

json server的简单使用(附:使用nodejs快速搭建本地服务器)

作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要安装nodejs,建议使用最新版本.然后全局安装json server. npm install json-server -g 安装完成后可以用 json-server -h 命令检查是否安装成功,成功后会出现json-server相关的参数选项. 运行 安装完成后,可以在任一目录下建立一个 xxx

Vue.js(15)之 json-server搭建模拟的API服务器

json-server搭建模拟的API服务器 运行命令 npm install json-server -D 全局安装 json-server 项目根目录下创建 mock 文件夹 mock 文件夹下添加 db.json 文件,内容如下: { "students": [ { "id": 1, "name": "小明", "age": 20}, { "id": 2, "name&q

在线HTTP POST/GET模拟请求api接口http请求测试工具https://post.jsonin.com/

在线HTTP POST/GET模拟请求api接口http请求测试工具 在线POST/GET接口测试工具https://post.jsonin.com/ Json在线解析及格式化校验工具 https://jsonin.com/ 原文地址:https://www.cnblogs.com/daxiangxm/p/postjson.html

Postman:帮助你实现快速高效的 HTTP 模拟和 API 调试

转载自:http://xiequan.info/postman-帮助你实现快速高效的http模拟和api调试 有了Postman,你可以构造简单的以及复杂的请求,保存以备以后使用,并分析由API发送的响应.Postman可以显着减少测试和开发的API所需的时间.Postman适合自己的个人开发者,小型团队或大型机构同样适用. Install Postman(安装Postman) Postman是Chrome的App,也就是说我们只能够在Chrome浏览器中使用. 这里是安装地址Google Ch

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow. 在上一讲中,实现了InfoWindow的显示,但是并没有实现地图拖动地图InfoWindow随着联动,以及缩放地图InfoWindow随着联动的问题,在本文章中,就上述两个问题提供一个解决思路. 首先,说说拖动地图InfoWindow的联动.拖动地图时,地图并未做缩放,所以只是做一个位置的偏移,因此,定义一个公共变量,记录InfoWindow出来时候的

存储学习之--通过StarWind在Windows 2008 Server模拟IP SAN

存储学习之--通过StarWind在Windows 2008 Server模拟IP SAN 一.StarWind 介绍 StarWind 与 StarPort iSCSI 一起,这个软件准许你输出任何本地 CD 和 DVD 数据到网络上,你在网络上能够虚拟硬盘,输出整体服务器储存子系统和大量的快照工作. 1.软件介绍 ISCSI软件. StarWind 是一个独立于硬件,适合网吧.企业虚拟磁盘数据管理.速度非常的快! 成本效益和可升级的存储管理解决方案,能够得到存储区域网络的好处,如:增强的灾难

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow

用过Arcgis Server for JavaScript API肯定知道InfoWIndow,你在用InfoWindow的时候会发现各种问题,例如不能完全显示的问题,遮盖对象的问题等等,所以呢我在实现这个功能的时候动了下脑子,想自己用div+css弄一个,倒腾了半天,弄出来了一个如下所示的: 做的比较丑陋,样式方面还得好好下下功夫,东西是差不多实现了,下面说说思路: 首先,DIV定义,这个样式,我定义了5个div,分别是infowin,title,colse,content,arrow,其中