2024 網頁x人因xDjango 實務課程 02 前後端概念
前言
當我剛開始接觸這個領域的時候，經常會看到有人在討論：
- 到底要做前端還是後端工程師呢？
- 後端工程師賺的比前端工程師多？
- 前端工程師轉後端工程師？
等等，我先說我對於各個職業沒有任何的歧視，我都沒有 前端 比 後端 糟的這個想法喔！但這些是真實我在接觸的時候，經常會看到的 PTT 討論主題，或是一些部落格的內容。
兩者都有自己的專業與難度，因此我認為 前端 與 後端 都是很重要的職業。那前端與後端到底是什麼呢？我們今天來一探究竟吧。
資料來源：DELL-E 生成
整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。
前端後端是甚麼？
簡單舉例
其實前端後端的概念並不難，甚至還能帶到人的身上來看，如果以人的來介紹的話，前端後端就像是：
前端：一個人的外觀
後端：一個人的腦袋，負責思考。
還是不夠明確嗎？，我們來舉一個簡單的例子：
今天是難過的一天，寒假這麼快就結束了QQ，所以我才那麼愁眉苦臉。
資料來源：Canva 自行繪製
根據這張圖，我來敘述一下這個流程：
【使用者】
- 某一天你的朋友告訴了你，明天要開學了！
【後端】
- 你接收到了 開學 這個資訊。
- 於是你開始思考這件事情，得出的結論是你會難過，並決定擺出難過的表情。
【前端】
- 收到要擺出難過的表情的資訊。
- 設計好當你擺出難過的表情的樣子
【後端】
- 收到 接下來應該要呈現的樣子
- 開始擺出這樣子的表情
【使用者】
- 看見你難過的表情。
從這整個流程你可以看出，一個完整的資訊接收與傳遞，前端與後端是怎麼作協調的。接著，我們將以學校網址，做更深入的舉例。
深入舉例
接著，讓我們加入資料庫這個概念，資料庫其實就是包含了很多資料的地方，讓後端可以隨時調資料，以傳送給網頁。
那麼，假設你今天是一個工程師：
資料來源：Canva 自行繪製
【使用者】
- 有一位學生，輸入了學校首頁的網址，並且按了 enter 鍵。
- 電腦發送 request 的網頁請求給網站伺服器
【後端】
- 收到來自學生輸入的網址
- 你的電腦後端辨別出這個網址對應到的是學校首頁。
- 為這個首頁準備今天的焦點新聞
- 跟資料庫要求本日的焦點新聞
【資料庫】
- 找到所有的焦點新聞
- 只取今天的焦點新聞
- 把這些焦點新聞的內容傳給後端
【後端】
- 收到今天的焦點新聞內容
- 整理好後傳給前端的首頁
【前端】
- 收到焦點新聞的內容
- 處理好排版問題後，回傳完整內容的網頁給後端
【後端】
- 收到應該要傳給使用者的完整網頁
- 傳送完整網頁給使用者
【使用者】
- 收到完整網頁的內容(此時為程式碼)
- 瀏覽器將程式碼化為有圖有文的網頁
- 使用者看見首頁內容
概念解析
相信到這邊，大家對於前後端的原理，以及傳送流程應該很清楚了。
- 前端其實就是負責來撰寫網頁的外觀與內容。
- 後端其實就是負責根據使用者的網址，給予相對應的網頁，並準備好這些網頁需要的資料。
前端三大要素
資料來源：Canva 自行繪製
講到前端，不得不提這三大要素。前端到底是怎麼由這三個要素來組成的？讓我們接下來繼續看下去吧。
HTML
對於網頁來說，HTML 就是一個敘述了這個網站架構的文件。
這個網頁的標題是什麼？
這個網頁包含什麼文字？
這個網頁包含了什麼圖片？
而這些，都將定義在 HTML 當中。可以說是，使用者看見的網頁，極大部分內容都在 HTML 當中撰寫好了。
CSS
當然，一個網頁不管是文字也好，或是圖片也好，一定會大小顏色的不同吧！而這些，都定義在 CSS 當中。
文章的標題必須是 24 px 大小
內容的文字必須是 新細明體
圖片都是 200 * 200 px
CSS 能夠指定某些標籤，定義其美編。像是上述的文章、內容、圖片，都可以被寫成某個標籤，讓 CSS 指定這個標籤的色彩外觀。
JavaScript
可是，一個網頁如果只有文字跟圖片，感覺還是不夠诶。想想看喔，如果你建好了有各個文章的 Dcard，但是你卻沒有發文的功能。這樣子，每次你想要有出現新的文章的時候，都還要手動去 HTML 裡面新增這些文章。但，其實不用這麼麻煩。
JS 能夠讓你可以在其裡頭撰寫程式碼，藉此撰寫出許多的功能，比方說：
Dcard 發文章的功能
部落格切換頁面的功能
股票分析的功能
任何你想像到的一切，都可以在這裡實現。但請注意！程式碼還是主要在後端實現， JS主要還是負責更改外觀樣貌的。這是因為，前端的所有東西(HTML、CSS、JS)都是可以讓使用者看見的，因此你如果在這邊撰寫大量程式碼，或許就會讓其他有心人士盜走這些內容，嚴重可能甚至會對你的伺服器造成威脅。
結語
感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！
今天我們學習到了，前後端是怎麼運作的，也學到了前端的三大要素，最後則了解了後端以及其不同的後端有甚麼不同。
接下來，我們即將學到，透過 Django 來講述它背後後端的運作原理。
