點燈坊

失くすものさえない今が強くなるチャンスよ

JSON Server 簡介

Sam Xiao's Avatar 2024-02-17

為了模擬後端的 REST API，我們不必安裝後端 Framework 或 Database，只要安裝 JSON Server 就能以 JSON 檔案模擬出 REST API 的 GET、POST、PUT 與 DELETE，非常方便。

Install JSON Server

$ npm i -D json-server
  • 使用 NPM 安裝 JSON Server
  • i：相當於 install
  • -D：相當於 --save-dev，安裝成 dev dependencies

Create JSON File

$ mkdir data
$ cd data
$ touch db.json
  • 在專案目錄下建立 data 目錄
  • 在 data 目錄下建立 db.json，此即為資料庫檔案

db.json

{
  "todos": []
}
  • 建立 key 為 todos，value 為 empty array 的 JSON 檔案
  • 如此表示在 http://localhost:3000/todos 下自動產生 API

JSON Server 支援不同 route 的 API，只要 JSON 檔案的 key 不同即可

NPM Config

package.json

{
  "name": "vue34-lab",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "db": "json-server ./data/db.json"
  },
  "dependencies": {
    "axios": "^1.6.7",
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vue/eslint-config-prettier": "^8.0.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.3",
    "vite": "^5.0.10"
  }
}

Line 12

"db": "json-server ./data/db.json"
  • db：啟動 JSON Server

Run JSON Server

$ npm run db
  • 使用 NPM 啟動 JSON Server

Test JSON Server

http://localhost:300

json001

  • JSON Server 以成功啟動

Conclusion

  • 將來 Debug 只要直接觀察 data/db.json 即可，不再需要任何工具

Reference

typicode, json-server

# JSON Server