iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
自我挑戰組

30天小老闆系列(1)--線上排班小工具系列 第 15

DAY15 服務室--JSON Server自己開

前言

我們現在有了 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 看看到底內容是什麼?
連進去後可以看到:
https://ithelp.ithome.com.tw/upload/images/20210915/20136833kWwax2goDL.jpg

這就是說,我們的資料庫中含有:

  • /posts
  • /comments
  • /profile

我們可以對他們使用這些方法:
GETPOSTPUTPATCHDELETEOPTIONS

結語

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


上一篇
DAY14 資料室--Vuex項目結構
下一篇
DAY16 服務室--JSON Server RESTful API簡單用
系列文
30天小老闆系列(1)--線上排班小工具30

尚未有邦友留言

立即登入留言