使用本地json-server服務，創建簡單的本地api數據

前言

近期在學習 Vue 框架，在學習過程中，發現了一個和 mockjs 類似的第三方庫: json-server。它不僅可以模擬出完美的接口數據，還可以修改請求的類型來修改本地的數據，是一個非常不錯的庫，所以分享記錄一下使用心得。

快速上手

一.新建存儲數據的文件

在電腦上創建一個專屬於 json-server 的文件夾，文件夾主要是用於創建和存儲 json 數據。例如: "test-json"

二.初始化 package.json

VsCode 編輯器打開 test-json 文件夾，打開終端輸入命令行npm init初始化 package.json 文件，輸入命令行后一直回車就可以了。

命令:

npm init

三.創建 db.json 數據文件

在 package.json 同級目錄下創建一個 db.json，用於設計我們需要的 api 數據。如下所示，我們創建了一個的簡簡單單接口數據:

{
  "users": [
    {
      "name": "joker",
      "age": 22,
      "sex": "男"
    },
    {
      "name": "tom",
      "age": 24,
      "sex": "男"
    },
    {
      "name": "jerry",
      "age": 18,
      "sex": "男"
    }
  ]
}

四.安裝 json-server

打開 IDE 終端，輸入命令行npm install json-server --save-dev安裝本地的 json-server。

命令:

npm install json-server --save-dev

五.配置 json-server 運行腳本

安裝好 json-server 后，我們需要在 package.json 中配置運行啟動 json 服務的 script。

1.json-server --watch db.json: 運行 json-server 服務，運行啟動本地 api 數據。

2.json-server --watch db.json --port 8888: 運行啟動 json-server 服務在本地其他端口(默認端口 3000)。

3.json-server http://jsonplaceholder.typicode.com/db: 運行啟動配置遠程模式 json-server 服務。

"scripts": {
  "json-server": "json-server --watch db.json --port 8888",
  "json-server:remote": "json-server http://jsonplaceholder.typicode.com/db",
},

六.運行啟動服務，獲取數據

運行啟動服務命令后，打開postman獲取本地的api數據，檢測本地數據是否運行成功。如下圖所示，postman獲取本地數據正確：

參考文獻

json-server