前言
近期在學習 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/171049.html
標籤：JavaScript
上一篇：day 48