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

Posted 2021-08-21 山楂片

场景

在公司进行React或者Vue项目开发的过程中，在后端尚未准备好接口时，我们需要进行数据mock来实现页面渲染、模拟前后端交互。

之前我们都是这么做的：

1.采用本地静态数据json的方式来模拟接口数据，但是这种方式我们只能去读取数据，无法对数据进行增删改等操作。

2.在本地搭建一个基于node.js的服务器，但是这样需要我们自己写代码去手动搭建本地服务器。

3.安装mock.js,模拟接口去请求mock生成的数据，但是mock.js生成的数据具有随机性，不一定使我们需要的数据。

json-server登场

了解了过去前端如何模拟接口数据进行联调的几种方式的缺点后，一种新的数据模拟方式-JSON-Server。

json-server是基于Node.js的服务器，可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

JSON-Server官网文档：https://github.com/typicode/j...

这是官方文档对json-server介绍的第一句话：

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

翻译过来就是 30秒之内搭建一个完整的RESTFUL风格的API服务，0代码, 这个是不是开玩笑的

从这句话中我们就可以看到json-server的优势：

1.0代码快速搭建

2.完全符合RESTFUL风格的API服务实现

安装

npm install -g json-server 全局安装

项目文件创建和数据初始化

新建 db.json

{
  "products": [
    {
      "name": "华为",
      "id": 1,
      "price": 4000,
      "specs": {
        "width": 11
      }
    },
    {
      "name": "苹果",
      "id": 2,
      "price": 5000,
      "specs": {
        "width": 12
      }
    },
    {
      "name": "小米",
      "id": 3,
      "price": 6000,
      "specs": {
        "width": 13
      }
    }
  ]
}

db.json 可以理解为本地一个数据库，当我们访问对应的增删改查路由接口时，db.json中的数据是实时更新的

项目配置

1.自定义配置

可以在package.json文件中的scripts中进行如下配置：
"json-server": "json-server --watch db.json --port 3006"

2.然后执行yarn json-server 命令

3.现在访问http://localhost:3006/products 就可以获取所有的商品数据了

基础

### get请求

  /products 请求所有商品
  /products/2 请求id为2的商品
  /products?name=华为 请求name为华为的商品

### post请求

  /products
  参数params:{
      "name": "vivo",
      "id": 4,
      "price":3600
  }
  向商品列表中添加一条商品

### put请求 （全部更新）

  /products/5
  params:{
    "name": "联想666",
    "price":3250
  }
  将id为5的商品的对象全部替换为{"id":5,"name": "联想666","price":3250}

### patch请求 （部分更新）

  /products/4
  params:{
    price:3200
  }
  将id为4的商品的price值改为3200 其他的属性值不变

### delete请求

  /products/1 删除id为1的商品

## 进阶
##### 过滤查询

/products?name=小米&price_gte=6500 合并查询 name为小米并且price大于6500元的商品
/products?specs.width=13 规格的宽度为13的商品

#### 条件查询 _gte大于 _lte小于 _ne不等于 _like包含(模糊查询)

 /products?price_gte=4600 价格大于4600的商品
 /products?price_lte=8000 价格小于8000的商品

##### 分页查询

 /products?_page=2&_limit=5 获取第二页的数据 每页请求5条

##### 排序查询

 /products?_sort=price&_order=desc 根据价格进行排序 排序方式为 desc降序  asc升序

##### 任意切片查询

 /products?_start=2&_end=4 从索引值为2到索引值为4之间的数据

#### 全文检索查询

 /products?q=米 查询全部数据中包含”米“关键字的数据

json-server 路由配置

很多时候我们需要的路由接口可能不是简单的http://localhost:3000/products 这种格式的，而是
http://localhost:3000/api/pro... 这是我们就需要对路由接口进行自定义配置。

新建一个routes.json文件，进行如下配置

  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/posts/:category": "/posts?category=:category",
  "/articles\\?id=:id": "/posts/:id"
}

启动命令配置

json-server db.json --routes routes.json

依据routes.json文件的配置进行路由重定向：

/api/products # → /products 
 *** 当访问/api/products路由接口时，服务器会重定向到/products来访问数据，下面的路由配置以此类推***
/api/products/1  # → /products/1
/products/1/show # → /products/1
/products/小米 # → /products?name=小米
/products?id=1 # → /products/1

json-server自定义配置

自定义配置可以通过下面两种方式进行配置

1.新建json-server-config.json

进行命令行配置：json-server --c json-server-config.json db.json 这样的话下面的配置就起作用了

{
  "port": 5000,              //自定义端口
  "watch": true,             //自动监听变化
  "static": "./public",      //静态文件路径
  "read-only": false,        //是否只能使用GET请求
  "no-cors": false,          //是否支持跨域
  "no-gzip": false,          //是否支持压缩
  "routes": "route.json"     //路由配置地址
}

2.json-server 命令行使用

json-server [options] <source>
Options:
  --config, -c       Path to config file (配置文件)[default: "json-server.json"]
  --port, -p         Set port  (服务器端口) [default: 3000]
  --host, -H         Set host  (host地址)   [default:"localhost"]
  --watch, -w        Watch file(s) (监听json文件) [boolean]
  --routes, -r       Path to routes file (路由配置文件) 
  --middlewares, -m  Paths to middleware files (中间件文件) [array]
  --static, -s       Set static files directory (静态文件路径)
  --read-only, --ro  Allow only GET requests(是否只支持get请求) [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing (是否跨域) [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding (是否压缩) [boolean]
  --snapshots, -S    Set snapshots directory [default: "."]
  --delay, -d        Add delay to responses (ms) (延迟数据返回)
  --id, -i           Set database id property (e.g. _id) (数据主键)[default: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix, 
                     (e.g. _id as in post_id) [default: "Id"]
  --quiet, -q        Suppress log messages from output [boolean]
  --help, -h         Show help (帮助信息) [boolean]
  --version, -v      Show version number (版本信息) [boolean]

命令行执行：
1.source 可以是json文件也可以是js文件
2.命令行配置举例说明
json-server -c xxx.config.json --routes routes.json -p 8001 -i pid .... db.json

chrome插件web前端助手FeHelper工具

当我们在浏览器上请求/products时，获取到db.json中的json数据

安装了FeHelper后，在浏览器上我们的数据自动进行格式化，而且json数据也可以进行折叠、排序、下载数据等功能，是不是我们展示的json数据也变得美观了！！！

chrome浏览器安装流程：
1. https://github.com/zxlie/FeHelper/tree/master/apps/static/screenshot/crx
   从github上下载最新版本的crx文件
2.chrome浏览器地址栏输入：chrome://extensions/ 并打开
3.右上角开启开发者模式
4.拖拽crx到当前页面，完成安装

了解了json-server的基本使用后，我们在搭建自己的本地React或者Vue项目时，就可以使用json
-server搭建本地服务器，对数据库db.json里面的数据进行增删改查，不用再担心刷新页面后，操作的数据丢失。

接下来就让我们在实际项目中去使用下json-server吧！！！

作者对于json-server的理解属于基础入门级别，对于文章中的理解或者使用错误，望各位大神不吝指出，关于json-server有那些需要补充的也可以进行评论，作者不胜感激。排版码字不易，觉得对您有所帮助，就帮忙点个赞吧！