使用json-server快速搭建API服务

概述：

　　json-server是什么？它一个在前端本地运行，可以存储json数据的server。通俗来说，就是模拟服务端接口数据，一般用在前后端分离开发时，前端人员可以不依赖API进行开发，而在本地搭建一个JSON服务，自己产生测试数据。顾名思义，json-server就是个存储json数据的server~。

官网地址：

https://www.npmjs.com/package/json-server

一、安装：

说明：通过使用npm全局安装json-server。访问的数据源在本地的db.json中配置。

安装命令：npm install -g json-server

查看版本：json-serevr -v

启动服务：json-server --watch db.json

说明：编辑过db.json文件，db.json数据有变动，都要关闭服务然后重新启动。

Install-Package NPOI -Version 2.4.1

 二、环境搭建：

创建数据：

{  "posts": [    {      "id": 1,      "title": "json-server",      "author": "typicode"    }  ],  "comments": [    {      "id": 1,      "body": "some comment",      "postId": 1    }  ],  "profile": {    "name": "typicode"  }}

官网创建package.json，配置执行脚本命令等：

{    "scripts": {        "mock": "json-server db.json --port 3004"    }}

配置后，之后启动服务命令：npm run mock

创建public文件夹，存放静态资源：

说明：比如，请求的j静态文件，包括文本、图片、音频和视频资源，分目录存放到这个文件下

创建json_sever_config.json配置静态资源：

说明：主要是用来配置图片、音频、视频资源。通过命令行配置路由、数据文件、监控等会让命令变的很长，而且容易敲错；json-server允许我们把所有的配置放到一个配置文件中，这个配置文件一般命名为json_sever_config.json

• json_sever_config.json

  {
    "port": 3004,            
    "watch": true,           
    "static": "./public",
    "read-only": false, 
    "no-cors": false, 
    "no-gzip": false
  }
  

• package.json

  {
      "scripts": {
          "mock": "json-server --c json_sever_config.json db.json"
      }
  }

比如访问public中静态资源图片：http://localhost:3000/1.png

 三、启动参数：

• 语法：json-server [options] <source>

• 选项列表：

四、CRUD操作:

准备数据源：

说明：写入db.json文件中的数据，测试数据如下：

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  },
   "fruits": [
        {
            "id": 1,
            "name": "糖心富士苹果",
            "price": 2.38
        },
        {
            "id": 2,
            "name": "橘子",
            "price": 3.88
        },
        {
            "id": 3,
            "name": "宁夏西瓜",
            "price": 1.98
        },
        {
            "id": 4,
            "name": "麒麟西瓜",
            "price": 3.98
        },
        {
            "id": 5,
            "name": "红蛇果",
            "price": 2.5
        },
        {
            "id": 6,
            "name": "黑皮西瓜",
            "price": 0.98
        },
        {
            "id": 7,
            "name": "红心火龙果",
            "price": 2.69
        },
        {
            "id": 8,
            "name": "国产火龙果",
            "price": 1.69
        },
        {
            "id": 9,
            "name": "海南荔枝",
            "price": 9.9
        },
        {
            "id": 10,
            "name": "陕西冬枣",
            "price": 5.39
        },
        {
            "id": 11,
            "name": "软籽石榴",
            "price": 2.39
        },
        {
            "id": 12,
            "name": "蜜橘",
            "price": 1.99
        },
        {
            "id": 13,
            "name": "海南香蕉",
            "price": 1.45
        }
    ],
    "users": [
        {
            "name": {
                "username":"admin",
                "nickname":"zhangsan"
            },
            "pwd": "123456"
        }
    ]
}

查询数据：

说明：此处的数据的查询分为如下几种不同数方式：

• 查询所有数据：http://localhost:3000/db

• 查询某个对象：http://localhost:3000/fruits

• 根据id查询某个对象，方式1：http://localhost:3000/fruits/1

  返回结果为对象

  {
  "id": 1,
  "name": "糖心富士苹果",
  "price": 2.38
  }
  

• 根据id查询某个对象，方式2:http://localhost:3000/fruits?id=1

  返回结果为数组

  [
  {
  "id": 1,
  "name": "糖心富士苹果",
  "price": 2.38
  }
  ]
  

• 多条件查询，用&符号连接：http://localhost:3000/fruits?id=1&price=2.38

• 分页查询：http://localhost:3000/fruits?_page=2&_limit=5

• 排序查询：http://localhost:3000/fruits?_sort=price&_order=desc

• 多字段排序：http://localhost:3000/fruits?_sort=price,id&_order=desc,asc

• 截取局部数据：

  slice的方式，和 Array.slice() 方法类似。采用 _start 来指定开始位置， _end 来指定结束位置。

  _end:http://localhost:3000/fruits?_start=2&_end=4

  [
  {
  "id": 3,
  "name": "宁夏西瓜",
  "price": 1.98
  },
  {
  "id": 4,
  "name": "麒麟西瓜",
  "price": 3.98
  }
  ]
  

  用_limit来指定从开始位置起往后取几个数据。

  _limit:http://localhost:3000/fruits?_start=2&_limit=4

  [
  {
  "id": 3,
  "name": "宁夏西瓜",
  "price": 1.98
  },
  {
  "id": 4,
  "name": "麒麟西瓜",
  "price": 3.98
  },
  {
  "id": 5,
  "name": "红蛇果",
  "price": 2.5
  },
  {
  "id": 6,
  "name": "黑皮西瓜",
  "price": 0.98
  }
  ]
  

• 范围查询：

  [
  {
  "id": 4,
  "name": "麒麟西瓜",
  "price": 3.98
  },
  {
  "id": 5,
  "name": "红蛇果",
  "price": 2.5
  },
  {
  "id": 6,
  "name": "黑皮西瓜",
  "price": 0.98
  }
  ]
  

  [
  {
  "id": 2,
  "name": "橘子",
  "price": 3.88
  },
  {
  "id": 3,
  "name": "宁夏西瓜",
  "price": 1.98
  },
  {
  "id": 4,
  "name": "麒麟西瓜",
  "price": 3.98
  },
  {
  "id": 5,
  "name": "红蛇果",
  "price": 2.5
  },
  {
  "id": 6,
  "name": "黑皮西瓜",
  "price": 0.98
  },
  {
  "id": 7,
  "name": "红心火龙果",
  "price": 2.69
  },
  {
  "id": 8,
  "name": "国产火龙果",
  "price": 1.69
  },
  {
  "id": 9,
  "name": "海南荔枝",
  "price": 9.9
  },
  {
  "id": 11,
  "name": "软籽石榴",
  "price": 2.39
  },
  {
  "id": 12,
  "name": "蜜橘",
  "price": 1.99
  },
  {
  "id": 13,
  "name": "海南香蕉",
  "price": 1.45
  }
  ]
  

• 采用_ne来设置不包含某个值(不包含id=1和id=10):http://localhost:3000/fruits?id_ne=1&id_ne=10

• 采用 _gte和 _lte 来设置一个取值范围（range）:http://localhost:3000/fruits?id_gte=4&id_lte=6

• 模糊查询：

  [
  {
  "id": 1,
  "name": "糖心富士苹果",
  "price": 2.38
  },
  {
  "id": 5,
  "name": "红蛇果",
  "price": 2.5
  },
  {
  "id": 7,
  "name": "红心火龙果",
  "price": 2.69
  },
  {
  "id": 8,
  "name": "国产火龙果",
  "price": 1.69
  }
  ]
  

• 采用_like来设置匹配某个字符串（或正则表达式）：http://localhost:3000/fruits?name_like=果

• 全文搜索：

  [
  {
  "id": 2,
  "name": "橘子",
  "price": 3.88
  },
  {
  "id": 12,
  "name": "蜜橘",
  "price": 1.99
  }
  ]

• 采用 q 来设置搜索内容，搜索所有字段中包含的关键字:http://localhost:3000/fruits?q=橘

新增数据：

说明：新增一条数据，标识id自增

type：post

url：http://localhost:3000/fruits

data：

{
		"name": "西红柿",
		"price": 1.38
}

修改数据：

说明：修改id为14的数据

type：put

url：http://localhost:3000/fruits/14

data：

{
		"name": "大西红柿",
		"price": 1.38
}

删除数据：

说明：删除id为14的数据

type：delete

url：http://localhost:3000/fruits/14

• 这是此公众号的第一篇文章，写点什么呢?

• RabbitMQ的六种工作模式

• WebAPI中添加基于JWT的Token验证

• ‍基于BaiduAI人脸识别的.NET实现

See you next good day~