json-server30秒無代碼搭建一個完整的REST API服務-基礎入門

場景

在公司進行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有那些須要補充的也能夠進行評論，做者不勝感激。排版碼字不易，以爲對您有所幫助，就幫忙點個贊吧！