2024 網頁x人因xDjango 實務課程 02 前後端概念

前言

當我剛開始接觸這個領域的時候，經常會看到有人在討論：

• 到底要做前端還是後端工程師呢？
• 後端工程師賺的比前端工程師多？
• 前端工程師轉後端工程師？

等等，我先說我對於各個職業沒有任何的歧視，我都沒有 前端 比 後端 糟的這個想法喔！但這些是真實我在接觸的時候，經常會看到的 PTT 討論主題，或是一些部落格的內容。

兩者都有自己的專業與難度，因此我認為 前端 與 後端 都是很重要的職業。那前端與後端到底是什麼呢？我們今天來一探究竟吧。

整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。

前端後端是甚麼？

簡單舉例

其實前端後端的概念並不難，甚至還能帶到人的身上來看，如果以人的來介紹的話，前端後端就像是：

前端：一個人的外觀
後端：一個人的腦袋，負責思考。

還是不夠明確嗎？，我們來舉一個簡單的例子：

今天是難過的一天，寒假這麼快就結束了QQ，所以我才那麼愁眉苦臉。

根據這張圖，我來敘述一下這個流程：

【使用者】

• 某一天你的朋友告訴了你，明天要開學了！

【後端】

• 你接收到了 開學 這個資訊。
• 於是你開始思考這件事情，得出的結論是你會難過，並決定擺出難過的表情。

【前端】

• 收到要擺出難過的表情的資訊。
• 設計好當你擺出難過的表情的樣子

【後端】

• 收到 接下來應該要呈現的樣子
• 開始擺出這樣子的表情

【使用者】

• 看見你難過的表情。

從這整個流程你可以看出，一個完整的資訊接收與傳遞，前端與後端是怎麼作協調的。接著，我們將以學校網址，做更深入的舉例。

深入舉例

接著，讓我們加入資料庫這個概念，資料庫其實就是包含了很多資料的地方，讓後端可以隨時調資料，以傳送給網頁。

那麼，假設你今天是一個工程師：

【使用者】

• 有一位學生，輸入了學校首頁的網址，並且按了 enter 鍵。
• 電腦發送 request 的網頁請求給網站伺服器

【後端】

• 收到來自學生輸入的網址
• 你的電腦後端辨別出這個網址對應到的是學校首頁。
• 為這個首頁準備今天的焦點新聞
• 跟資料庫要求本日的焦點新聞

【資料庫】

• 找到所有的焦點新聞
• 只取今天的焦點新聞
• 把這些焦點新聞的內容傳給後端

【後端】

• 收到今天的焦點新聞內容
• 整理好後傳給前端的首頁

【前端】

• 收到焦點新聞的內容
• 處理好排版問題後，回傳完整內容的網頁給後端

【後端】

• 收到應該要傳給使用者的完整網頁
• 傳送完整網頁給使用者

【使用者】

• 收到完整網頁的內容(此時為程式碼)
• 瀏覽器將程式碼化為有圖有文的網頁
• 使用者看見首頁內容

概念解析

相信到這邊，大家對於前後端的原理，以及傳送流程應該很清楚了。

• 前端其實就是負責來撰寫網頁的外觀與內容。
• 後端其實就是負責根據使用者的網址，給予相對應的網頁，並準備好這些網頁需要的資料。

前端三大要素

講到前端，不得不提這三大要素。前端到底是怎麼由這三個要素來組成的？讓我們接下來繼續看下去吧。

HTML

對於網頁來說，HTML 就是一個敘述了這個網站架構的文件。

這個網頁的標題是什麼？
這個網頁包含什麼文字？
這個網頁包含了什麼圖片？

而這些，都將定義在 HTML 當中。可以說是，使用者看見的網頁，極大部分內容都在 HTML 當中撰寫好了。

CSS

當然，一個網頁不管是文字也好，或是圖片也好，一定會大小顏色的不同吧！而這些，都定義在 CSS 當中。

文章的標題必須是 24 px 大小
內容的文字必須是 新細明體
圖片都是 200 * 200 px

CSS 能夠指定某些標籤，定義其美編。像是上述的文章、內容、圖片，都可以被寫成某個標籤，讓 CSS 指定這個標籤的色彩外觀。

JavaScript

可是，一個網頁如果只有文字跟圖片，感覺還是不夠诶。想想看喔，如果你建好了有各個文章的 Dcard，但是你卻沒有發文的功能。這樣子，每次你想要有出現新的文章的時候，都還要手動去 HTML 裡面新增這些文章。但，其實不用這麼麻煩。

JS 能夠讓你可以在其裡頭撰寫程式碼，藉此撰寫出許多的功能，比方說：

Dcard 發文章的功能
部落格切換頁面的功能
股票分析的功能

任何你想像到的一切，都可以在這裡實現。但請注意！程式碼還是主要在後端實現， JS主要還是負責更改外觀樣貌的。這是因為，前端的所有東西(HTML、CSS、JS)都是可以讓使用者看見的，因此你如果在這邊撰寫大量程式碼，或許就會讓其他有心人士盜走這些內容，嚴重可能甚至會對你的伺服器造成威脅。

結語

感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！

今天我們學習到了，前後端是怎麼運作的，也學到了前端的三大要素，最後則了解了後端以及其不同的後端有甚麼不同。

接下來，我們即將學到，透過 Django 來講述它背後後端的運作原理。