五分鐘生一個 API (with Loopback)

建立環境

API 會是我們前端常常碰到的,或許你是全端工程師,那這對你來說應該相當輕鬆,但是如果你不熟悉,也不想要花太多時間從頭建置一個全新的 API,那你就來對地方了

首先我們先安裝 loopback-cli

npm install -g loopback-cli

再來我們來開個小專案資料夾,然後進去

mkdir loopback-project && cd loopback-project

動土典禮

lb app

然後他會問你晚餐要吃什麼(哈,才怪)。以下為他會問的問題
1. 你要取的名字(可以直接 Enter 默認滴否default)
2. 版本用哪個(3.x,直接 Enter)
3. 哪種用途(當然是 API啦,Enter)

跑完之後就結束惹,感覺什麼都不用做就可以下班了!你可以執行以下了指令來看看它長什麼樣子

node .

User是它已經幫你建好,可以讓你做auth用的,之後我會再談如何使用

建立 Model

讓我們來建立一個動物的資料庫好了,會有動物種類,以及每隻動物名字以及歲數

lb model

接下來就會開始一堆問題了,怕英文的人不用擔心,我來解救你

Enter the model name: (Enter 默認)
(輸入 model 名稱)
Select the datasource to attach animal to: db (memory)
(選擇資料來源)
Select model's base class: PersistedModel
(選擇 model class)
Expose animal via the REST API? Yes
(把 animal 於 REST API 上使用)
Custom plural form (used to build REST URL): (Enter 默認)
(客制的複數(英文)型態,通常不需要特別輸入)
Common model or server only? common
(如果你想要前後端共用這個 model,選擇 common )

接著我們就要開始建立我們要的 model 了

Property name: name
(動物名字)
Property type: string
Required: Yes
Default value[leave blank for none]: (Enter 默認)
--- 下一個 property ---
Property name: age
Property type: number
Required: Yes
Default value[leave blank for none]: (Enter 默認)
--- 下一個 property ---
Property name: kindId
Property type: number
Required: No
Default value[leave blank for none]: (Enter 默認)
--- 結束後,再問下一個 property name 的時候按下 Enter,就會直接跳出 ---

建立好動物 model 後,我們接著來建立種類

lb model

又來一堆問題

Enter the model name: kind
(動物種類)
Select the datasource to attach kind to: db (memory)
Select model's base class: PersistedModel
Expose kind via the REST API? Yes
Custom plural form (used to build REST URL): (enter)
Common model or server only? common
--- model property 部分 ---
Property name: name
Property type: string
Required: Yes
Default value[leave blank for none]: (enter)
--- 然後再問下一個 property name 的時候按下 enter 離開 ---

設定 model 關係

接下來我們要來設定關係,我知道你已經沒有耐心了,我們快結束了

lb relation

接著他會問你從哪裡開始建立關係

Select the model to create the relationship from: kind
(從哪裡開始)
Relationship type: has many
(關係種類)
Choose a model to create a relationship with: animal
(跟哪個 model 有關係)
Enter the property name for the relation: (enter)
(輸入關係名稱,所以英文可以這樣說:kind + has many + animals)
Optionally enter a custom foreign key: kindId
(foreign key 名稱)
Require a through model? No

最後一步,設定 animal => kind 的關係

lb relation

這裡結束就真的設定完了

Select the model to create the relationship from: animal
(從哪裡開始)
Relationship type: belongs to
(關係種類)
Choose a model to create a relationship with: kind
(跟哪個 model 有關係)
Enter the property name for the relation: (enter)
(輸入關係名稱,所以英文可以這樣說:animal + belongs to + kind)
Optionally enter a custom foreign key: kindId
(foreign key 名稱)
Require a through model? No

啟動我們的 API

node .

打開任一個瀏覽器,然後到以下網址

http://localhost:3000/explorer/

我們會看到有 animal, kind, user 三個 model,讓我們先加入一些動物的種類,點開 kind 點開到 POST /kinds,然後輸入以下的資料

{ "name": "cat" }

如果成功後,你會看到以下的畫面

重複此步驟,但是把 cat 變成 dog,這樣我們就有兩個種類了
cat = 1, dog = 2

接下來,我們來建立一些動物

如果你按了黃色的部分,data會先自動幫你填好,這樣可以少打一些字,讓我們依序來建立以下的動物們

// 記得把id的部分移除,不然會失敗喔!
[
{
"name": "May",
"age": 2,
"kindId": 1
},
{
"name": "June",
"age": 6,
"kindId": 1
},
{
"name": "Yoyo",
"age": 6,
"kindId": 2
},
{
"name": "Lala",
"age": 6,
"kindId": 2
}
]

測試資料

讓我們來測試如果選取貓的話,會出現哪些動物

往下拉,會看到我們需要輸入 kind id 來做 filter 的動作

看到 May & June 出現,真是開心!如果你想要拉狗狗出來,kind id 改成 2 就好了

雖然你可能花了好幾十分鐘做到此,不過當你熟了後,不用五分鐘,就可以把 API 做好了。希望幫助你的技術又升級了一小步!

Like what you read? Give Jim Kang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.