前言

我們現在有了 Nuxt.js 建立的環境、有了 Vuex 來做資料的處理，現在就差資料要從哪裡來了。
身為一個只會前端的小菜雞，要自己架一個後端資料庫，我覺得是很有困難的。
可是前端沒有學習完整，就跑去學後端的東西，我覺得這樣太貪心了，所以這次就想嘗試用 JSON Server 快速建立一個虛擬的資料庫，不會後端也可以開一個 REST API 囉！

如何安裝JSON Server

安裝非常簡單，使用npm全域安裝即可

npm install -g json-server

建立資料庫

在專案資料夾中，新增 db.json 檔案
接著可以在裡面放入基本的 data 範例，以供測試。

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

我簡單解說 data 資料內容，db.json 必須是個物件，我們目前物件中有三組資料，分別叫做 "posts"、"comments"、"profile"。

• "posts"：是一個陣列，陣列中目前只存放一個物件
• "comments"：是一個陣列，陣列中只存放一個物件
• "profile"：是一個物件

可以看到陣列中的物件都有id，這個是不可變更且自動產生的唷。

啟動伺服器

套件也安裝好了，資料也準備好了，接著就可以啟動伺服器看看到底裡面是什麼東西囉！

json-server --watch db.json

輸入完就會看到這段

\{^_^}/ hi!

  Loading db.json
  Oops, db.json doesn't seem to exist
  Creating db.json with some default data

  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

這段就是說，我們創了一個虛擬資料庫在 http://localhost:3000，我們可以直接在網址列輸入 http://localhost:3000 看看到底內容是什麼？
連進去後可以看到：

這就是說，我們的資料庫中含有：

• /posts
• /comments
• /profile

我們可以對他們使用這些方法：
GET、POST、PUT、PATCH、DELETE、OPTIONS

結語

經過今天的研究，我們創造了自己的第一個虛擬資料庫囉，可喜可賀！
明天我們接著來深入研究吧～