百日轉職前端工程師：第四週前端後端怎麼合作開餐廳《DAY 7》

大家好，這是百日轉職前端工程師的 Day7，也是 6/17（三）。今天來聊聊前後端的差別。

老實說我覺得最好理解的比喻應該就是「餐廳」的運作了，比喻來說「前端」其實就是餐廳外場負責點餐和招待，而「後端」則是依據前端收到的需求進食材庫拿食物並且料理後送出，這篇文章將讓你一次用最簡單的方式搞懂整個網頁背後到底是怎麼運作。

一、前端後端是怎麼合作的

基本上當你 (Client) 進入到一網頁時就像是來到一間餐廳，你會點各種菜或者跟店員做各種互動，這時候招待你的是外場，像是這間店的裝潢，以及店內菜單的設計等，這些工作對比到網頁上就是「前端」工程師負責的事。

當你 (Client) 進到店裡你點了一道菜

1. 這時候就外場服務生就要發出一個需求 (request) 給餐廳的櫃檯，其有點像是 API 的角色

• 會去確認你的需求/權限是否符合，接著通過櫃台把需求傳給餐廳的內場人員

1. 而餐廳的內場人員就要根據這需求去調閱餐廳的食材庫 (database) 並且取出適當的食材加工後送回 (response) 給餐廳的櫃檯
2. 櫃檯再交給外場的服務生，最後遞交到你 (Client) 手上

前端和後端負責的任務

• 而餐廳後台從食材庫取出食材並且加工的一系列工作，這些工作對比到網頁上就是「後端」工程師要負責的事
• 而餐廳的門面菜單等等的設計以及外場服務生的服務則是「前端」工程師要負責的事

繼續用餐廳比喻網頁，基本上你到一間餐廳你看得到的部分就是前端，而你看不到的地方發生的事就是後端。

接下來我們回到網頁，真實講解一下前端和後端互動發生的事

1. 基本上當你的 Chrome 瀏覽器 (Client) 造訪一個網頁時
2. 你首先要輸入網址接著你的瀏覽器會先發需求給域名系統 (DNS)
3. 請他幫忙根據域名 (Domain) 解碼一下真正的 IP 地址
4. 域名系統於是告訴你網址精確的 IP 地址為何。
5. 你的瀏覽器才能進一步透過這個 IP 位置找到對應的伺服器 (Server，我理解就是遠方的電腦)
6. 然後發 request 給這個 Server
7. 接著 Server 會根據你的需求從資料庫 (database) 中取出一些資料
8. Server 回應 (response) 給你的瀏覽器 (Client)。

二、舉一個小案例

當我在 Google 上輸入 JavaScript 實際上發生了什麼事？

1. 我的瀏覽器 (Client) ，先詢問 DNS 得到 Google 的 IP 是 172.217.24.14
2. 接著瀏覽器再發 request 到 172.217.24.14 到 Google 的 Server
3. Server 於是查詢了它的 Database 取出資料做處理
4. 後回應 (response) 回傳給我的瀏覽器一系列的查詢結果

三、總結：前端工程師負責資料的呈現，後端工程師負責處理後台資料的處理

基本上前端工程師有點介於設計師和工程師的平衡點，要去想辦法用程式邏輯讓資料美美的呈現在頁面上，也要去撰寫邏輯讓頁面能夠跟使用者做互動。

而後端工程師則是做些更底層的資料處理，想辦法讓網頁能夠實現更複雜的功能。