json-server模拟REST API

Posted ha_cjy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json-server模拟REST API相关的知识,希望对你有一定的参考价值。

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

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

1、安装json-server

首先我们的电脑要安装有nodejs,然后使用npm命令来安装:sudo npm install -g json-server(windows系统的不需要加sudo)

MeWifi:~ cjy$ npm install -g json-server
/usr/local/bin/json-server -> /usr/local/lib/node_modules/json-server/bin/index.js
- ms@0.7.1 node_modules/json-server/node_modules/compression/node_modules/ms
/usr/local/lib
└─┬ json-server@0.11.2 
  ├─┬ compression@1.7.0 
  │ ├── bytes@2.5.0 
  │ └── debug@2.6.8 
  ├── cors@2.8.4 
  ├─┬ express-urlrewrite@1.2.0 
  │ └─┬ path-to-regexp@1.7.0 
  │   └── isarray@0.0.1 
  ├── please-upgrade-node@1.0.1 
  ├─┬ update-notifier@1.0.3
  │ └─┬ latest-version@2.0.0
  │   └─┬ package-json@2.4.0
  │     └─┬ got@5.7.1
  │       └─┬ readable-stream@2.3.3 
  │         └── isarray@1.0.0 
  └─┬ yargs@6.6.0
    └─┬ read-pkg-up@1.0.1
      └─┬ read-pkg@1.1.0
        └─┬ normalize-package-data@2.4.0 
          └── hosted-git-info@2.5.0 

检验是否安装成功,查看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说明

以上是关于json-server模拟REST API的主要内容,如果未能解决你的问题,请参考以下文章

json-server30秒无代码搭建一个完整的REST API服务-基础入门

使用 json-server 来创建一个模拟 API

Json-server 模拟 API 而不是调用

json-server模拟后端接口处理数据

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

Json-server 创建模拟API服务器