使用 json-server 搭建本地數據接口

我們在做前后端分離的項目中，有時會碰到這樣的情況，就是當我們前端的項目已完成部分后，需要調用后端接口來做調試，但是有時后端接口還沒有完成，這個時候就需要我們自己來模擬了。

如果我們只是 get 一些數據，只用借助 jsonplaceholder 就可以了，但是如果我們想要 post 一些數據，使用 jsonplaceholder 就有些力不從心了。這時候就可以借助 json-server 來搭建一個本地的數據接口，然后我們可以對本地的數據進行增刪改查。

json-server 主要作用是模擬服務端接口數據，搭建一個本地的數據接口。里面只是我們想要mock的數據，便於調試調用，一般用在前后端分離后，前端人員可以不依賴API開發，而在本地搭建一個 JSON 服務，自己產生測試數據來模擬后端響應數據，然后測試一些業務邏輯。

json-server 是一個可以快速構造假數據的 REST API 服務器，它的文檔很全，需要注意的是它只接受 json 格式 的請求，在用 Postman 這種工具測試 POST 和 PUT 這種方法時，需要設置 Content-Type為 application/json

json-server的官方網址：https://www.npmjs.com/package/json-server

json-server的 Github 地址:https://github.com/typicode/json-server

 

第一步：使用 npm 全局安裝 json-server（前提是已經安裝好了node環境）

　　npm install -g json-server

安裝后可以使用命令 json-server -h 檢測是否安裝成功，成功后會出現如下圖：

 

第二步：初始化

1. 創建一個文件夾，我是在桌面新建文件夾 jsonserver，然后通過命令行 cd desktop / jsonserver 引入到該文件夾下

2. 初始化一個 package.json 文件，因為要在當前的這個文件下下載對應的模塊和插件，不然的話我們沒有辦法去使用

   通過命令 npm init / npm init --yes 進行初始化，完成后會在文件夾中新增加 package.json 文件

3. 安裝依賴模塊 

   npm install json-server --S


   安裝完成后在項目中會生成 node_modules 所需要的依賴，在 package.json 文件的 dependencies 會有 json-server 及版本號

4. 創建 JSON 數據，作為 API 的數據源

   在 jsonserver 文件夾下創建 db.json 文件，並寫入 json 數據：

   {
     "users": [
       {
         "name": "tt",
         "phone": "123456789",
         "email": "[e-mail]",
         "age": "20",
         "id": 1,
         "companyId": 1
       },
       {
         "name": "dede",
         "phone": "123456789",
         "email": "[e-mail]",
         "age": "30",
         "id": 2,
         "companyId": 2
       }
     ]
   }

   注意：數據格式符合 JSON 格式（尤其注意最后一個鍵值對后面不要有逗號），key 和 value 值都要雙引號

5. 修改配置文件

   打開 package.json 文件，將 scripts 進行如下配置

   

   json-server 默認是 3000 端口，我們也可以自己指定端口，指令如下：

　  　json-server --watch db.json --port 3004

 

第三步：運行 json-server

　　執行 npm run json:server

運行成功，提供一個端口為 3000 的地址

在瀏覽器中訪問 http://localhost:3000 （啟動 json-server 后，點擊才有效）

歐了，啟動成功

json 文件中的每一個對象都類似於一個API接口響應的數據，訪問 Resources 下的這些接口就能得相應數據了

再比對 db.json（因為我導入了 jsonplaceholder 的數據，所以和初始定義的數據不一樣） 文件的數據，可以發現：Resources 下的 /posts /comment /profile 分別是 db.json 里面的子對象， /db 就是整個 db.json 數據包。

也就是說 json-server 把 db.json 根節點的每一個key，當作了 url。所以只要修改 db.json 文件就可以當數據接口了。