前言：昨天有介紹關於APP上資料要怎麼來，可以先在專案建立資料夾方式來建立資料，接下來，介紹在社群參考了大大有分享一個Node.js套件-json-server

我覺得這個服務可以讓開發者想專注在撰寫前端資料串接邏輯，感覺如果這個專案還在構想階段只是一個prototype要展示的話，不需要擔心還要去啟伺服器環境..等

• 建立專案資料夾

mkdir mock_data

• 用VSCode打開專案

cd mock_data

code .

• 安裝指令
  (我是裝在全域環境 -g )

npm init -y

npm i json-server -g

• 建立data.json(以本次專案建立商品資料為例)
  先設想商品有id name price description 之後可以再擴充

{
  "products": [
    {
      "id": 1,
      "name": "商品一",
      "price": 100,
      "description": "這是一個商品的描述一"
    },
    {
      "id": 2,
      "name": "商品二",
      "price": 200,
      "description": "這是一個商品的描述二"
    },
    {
      "id": 3,
      "name": "商品三",
      "price": 300,
      "description": "這是一個商品的描述三"
    }
  ]
}

• 啟動API Server
  於終端機到剛剛的專案資料夾目錄輸入：

json-server --watch data.json

預設情況下，可以在瀏覽器輸入：

http://localhost:3000/products

就可以看到剛剛建立的資料啦

參考資源

介紹json-server文章
六角學院
保哥直播
npm
JsonVue Chrome插件

明天再來介紹怎麼將這個API服務部署到線上環境！