簡介
上次講完了網路的架構，今天來談點前端和後端的東西吧。我們常聽到的前端和後端（或者前台與後台），其實是一個簡稱。也就是說，這個世界上存在各式各樣不同的前端，就好像「韓信」之於「趙信」，以及「張飛」之於「岳飛」，雖然名相同，也都是帶兵打架的人物，但還是有稍稍的不一樣（廢話，他們根本就是不同人）。例如，以一個線上遊戲來說好了，前端負責的就是畫面顯示的部分，而後端則是處理各個玩家血量、裝備等資訊的伺服器。因此，嚴謹一點來說，這篇文章將要說的是「網頁」的前端和後端。
開始囉！
先快把褲子穿上吧，多難看啊！
好啦，所以前端和後端的差別到底在哪？一直賣關子，很討厭耶……
別急，讓我先給你建個概念
吃早餐了嗎？先去買份早餐吧！
昨天下午，為了趕一份後天要交的人工智慧報告，你做在電腦前寫了10個小時的code。實在是太忙了，晚餐、宵夜都沒有吃，非常不像平常的你。肥宅如你，好不容易寫完了程式，你的程式也開始比較像人一點的時候，累爆的你，頭昏眼花倒頭就睡。
早上九點，鬧鐘響起，拖著疲憊的身軀和餓壞的肚子，你獨自一個人走到早餐店。
老闆，我要一份火腿三明治。
只見老闆娘兼主廚兼店小二兼房東慢條斯理的指著桌上的三明治，對著你微笑，說了一聲：
好吃喔，帥哥，要不要再來點紅茶？
那給我一杯紅茶，啊對了，我要再一碗鐵板麵。
好低，沒問題
老闆娘樂壞了，一大早就有同學買了一堆早餐，雖然這些早餐只佔她今天營業額的百分之一，她還是在煎台上幫你多打了顆蛋。打完蛋的她，馬上又跑到冰櫃去拿了冷凍的鐵板麵。拿完冷凍麵的她，又到飲料桶旁邊幫你裝了滿滿的紅茶。雖然那杯成本不到1元，但是她知道多幫你裝一些，你就會很開心的一直來光顧。
所以做網頁和買早餐到底有什麼關係？
別急別急，讓我繼續說下去，你可以繼續吸你的鐵板麵。
一般沒事在網路上閒逛的人，就是要買早餐的你。而在網路上看著這篇文章消磨大好青春的他們，就如你在買早餐一樣。昨天，你騎著小折（阿嬤也知道的Google Chrome，也就是上網的工具，屬於前端），來到巷口的早餐店（想要看的網址）。進到早餐店後，跟老闆娘（後端）點想要的早餐（資料or檔案）。如果老闆娘有聽到你的呼喊（request），那他就回給你一份早餐（response）。你開心的拿著早餐，坐在店裡慢慢吃，突然想到忘了點杯飲料（不要懷疑，也是資料or檔案），就再跟老闆娘叫了一杯。直到吃飽喝足了，便開心地離開早餐店（關掉網站）。
有稍微懂了嗎？上個圖吧。
前端就是你目前所看到的一切表象
當你進入任何網站的時候，會看到各式各樣的文字和花花綠綠的樣式。譬如某一個叫沒一村的傢伙又發了一篇無腦的文章，想要顯示給大家看，那他就要找前端工程師，因為前端工程師負責內容顯示。如果這個叫沒一村的傢伙，又想要讓他的文章有紅的喜氣，那這名可憐的前端工程師就要把他的文字上色。又譬如這個難搞的傢伙（我絕對沒有在指涉你老闆、你教授、你媽媽、你室友……）想要讓他的文章可以左右抖動，七進七出，那這個也是前端工程師所負責的。
所以你有沒有覺得前端工程師很可憐？
我好像大概懂前端該做些什麼了，那後端呢？
後端就是一家早餐店！還記得那些炫泡的文字和樣式嗎，存著這些文字和樣式的「檔案」全部都是「由後端給傳送給瀏覽器」的。也就是說，這些檔案是由前端工程師寫好，給後端工程師放在後端管理，而這個後端也就是俗稱的「網頁」伺服器（web server，加了一個網頁是要你記住「韓信」vs「趙信」，不過後面我都會簡稱伺服器，server）。
想像一下，如果這時你要登入信箱，去看看你的面試通知寄來了沒。你輸入了你的帳號密碼，誰來驗證你到底是不是真貨？辛苦的後端！
再想像一下，如果這時你登入了靠北交大，看到很多好笑的內容，這些資料存在哪裡？從哪裡來？辛苦的臉書後端！別忘了，小編只負責發文，這些資料最後存在辛苦的後端！
再想像一下，如果你覺得靠北交大非常好笑，像個屁孩一樣，在下面留言了很多「嘻嘻嘻、哈哈哈、哇哈哈、噗哈哈」，這些「哈哈」，由誰來存起來？辛苦的臉書後端！
所以你有沒有覺得後端工程師很可憐？
一下後端，一下前端，弄的我頭腦鈍鈍的。你可以再完整的告訴我，這一切的流程到底是怎麼一回事嗎？
好的，我也覺得你應該暈了。
當你連到google的時候，你看到的一切，帶有畫面和動畫的這些檔案，都是從伺服器傳送來的。不過，製作這些畫面的，都是前端工程師。70億人看到的，都會是同一個畫面，因為這些頁面都是前端工程師事先寫好的，該放什麼，大家都一樣，沒有任何不同。接著，你填入帳號密碼，按下發送，內容傳到伺服器。伺服器處理各個request和response，然後他會幫你做驗證，確定你可不可以登入。而這些工作，都是由後端工程師寫的程式執行的。回到主畫面，右上角寫著「嗨！XXX」，這個XXX叫什麼名字，也都是後端幫忙前端填上去的，而這些動態填上去的資料，都是存放在伺服器的資料庫（database）。
再強調一次，那些大家看起來都一樣的，是事先寫好的，也就是已經刻在html檔（先記一下這個名詞，它管網頁的文字內容）上了。這是屬於前端的範疇。至於後端，則會根據不同的人，顯示不同的內容和資料。
我好像聽到了一個很關鍵的名詞——資料庫（database）
哈，果然還是被敏銳的你給發現了。我口有一點渴，可以把你那特大杯的紅茶分我喝嗎？
好啊儘管喝。雖然你說的很有道理，但是我發現我和阿嬤的筆電，在水果日報的專欄上都顯示一樣的內容耶，這也是前端工程師事先寫好在html檔上的嗎？我怎麼覺得怪怪的？
看來你很有天份喔，你說的沒錯，這些東西當然不可能事先寫好在html檔上。如果是這樣的話，豈不是每一篇新聞就要重新弄一個新的html檔？
在這個情況下，我們需要一個資料庫，它的功能就是存放各個新聞、誰又對誰按了讚、誰又去誰那留了言……等這些資料。前端工程師處理的，只是顯示這些內容的板型喔！
還記得早餐故事嗎？當你來到一間早餐店，跟老闆娘要一個三明治，老闆娘指著桌上的三明治對你微笑。重點不是微笑！重點是這個放三明治的餐台，他就是一個資料庫。還記得冰櫃拿出的冷凍麵嗎？冰櫃也是個資料庫。這些食物放置點（資料庫），裡面有各式各樣的表格（table），而且一個表格內存放了同樣類型的東西，就好像餐台上的某一區都放著調味乳，某一區都放著三明治這種感覺。
回到資料庫本身，如果你是水果日報的後端工程師，那你的資料庫就要有一張table，裡面有一個欄（column）專門存放新聞。如果你要區分這個新聞是腥羶色或童叟皆宜，那你就還需要一欄，專門標示這則新聞的分類。資料庫裡的資料存放方式就和下圖大同小異。
酷，不過同一家早餐店為什麼要有不同的食物放置台？呃，我的意思是說，為什麼同一個伺服器要有不同的資料庫？
你找到早餐店模型的bug了！
沒錯，一般來說，一個伺服器，只會有一個資料庫，它存著所有這個網站所需要的資料。不過比較縝密的網站，會有多個資料庫。有的是跟在伺服器同一個主機上的，也有不少是備份在遠端的。就好像你媽媽在拿到你的成績單後，會先拿去影印個10份，是一樣的道理。這是為了防止資料庫出意外造成的損失，也是為了預防你對你的成績單做出不好的事。記住，資料庫出意外是非常嚴重的事！你的成績單出意外，也是非常嚴重的事！
真有趣，原來後端要處理這麼多事，那前端呢，他好像在旁邊涼很久了？
紅茶真好喝，我喝完了，杯子還你。
再讓我詳細說一次上網的過程，你就會清楚了。當瀏覽器連到一個網站，網站的後端便會傳給你一個html檔（此時後端可能已填好資料了，就像水果日報的新聞一樣）。再來，因為這個網站醜斃了，他需要一點裝飾，於是後台再給你一個css檔，免得被你嫌沒化妝不禮貌。如果你貪心一點，還需要一個js（javascript的簡稱，一個你以後會常看到的程式語言）檔來管理複雜的動畫和使用者互動，他也會給你一個。基本上是有求必應，你想要什麼，只要最先的html檔上有寫的，貼心的後端都會給你。以上這些後端給的東西，都是前端負責生出來的。
此外，因為我們的瀏覽器在一個視窗內只會有一份網頁內容，所以也只會有一份html檔。但是裝飾和動畫，都是想加多少就加多少的，所以後端傳來的css和js檔都可以超過一份。
動手操作一下
- 打開阿嬤筆電上的chrome
- 按下F12
- 點上標題的Network
- 隨意點一個你喜歡的網站
- 接著就會看到以下東西
由此我們可以知道html檔是最先載入的，這個檔寫著該導入哪個css和js檔。而之後的css js 圖片的載入順序則不一定，端視程式碼的先後順序而訂。此外，所有的resource都是同步載入（synchronous）的，也就是一個一個輪流載入的。
有興趣的話，也可以右鍵，按檢視原始碼，你應該會看到以下的東西，從這個我們可以看出瀏覽器會載入哪些css和js檔。
[code language=”html”]
<link rel="stylesheet" href="css/XXX.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
[/code]
然後呢，前端工程師就這樣？
沒了，前端工程師「主要」的工作就是做出能夠互相搭配的html、css、js檔。
所以你有沒有覺得前後端工程師很涼？
不是吧？這樣說來當一個前端工程師也太簡單了吧？
當然不可能囉，前端工程師也是很忙的！所以囉，這次先給個前後端的基本概念，下次再跟你提一些網路發展的歷史，以及一些前後端的基本技術，這樣你就會更懂前端工程師這個行業是怎麼興起的囉！
那我這個前端工程師也要去忙了88
嘿！瞧你聽的津津有味的，怎麼吃的滿嘴都是肉醬！
粉絲專頁——沒一村端筆記
https://www.facebook.com/noootownnotes/
關於我：
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：
Pingback: test | 沒一村生活點滴
Pingback: [前端連載] 了解網頁發展的脈絡(中)——JavaScript 和 Framework 解說 – 沒一村生活點滴
前顯易懂 而且挺有趣的 哈哈
真得很有趣~~謝謝你的分享~~^^
謝謝您的分享
你敘事的方式
讓前後端很好理解
偉大偉大 感謝你
喜歡有邏輯而且很前白的敘述方式! 謝謝你的分享
有趣又易懂!謝謝您的分享
謝謝~ 淺顯易懂!
有趣又易懂!謝謝您的分享