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

閱讀時間約 4 分鐘

前言

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

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

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

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

資料來源:DELL-E 生成

資料來源:DELL-E 生成

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



前端後端是甚麼?

簡單舉例

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

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


還是不夠明確嗎?,我們來舉一個簡單的例子:

今天是難過的一天,寒假這麼快就結束了QQ,所以我才那麼愁眉苦臉。
資料來源:Canva 自行繪製

資料來源:Canva 自行繪製


根據這張圖,我來敘述一下這個流程:

【使用者】

  • 某一天你的朋友告訴了你,明天要開學了!

【後端】

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

【前端】

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

【後端】

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

【使用者】

  • 看見你難過的表情。


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



深入舉例

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

那麼,假設你今天是一個工程師:

資料來源:Canva 自行繪製

資料來源:Canva 自行繪製

【使用者】

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

【後端】

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

【資料庫】

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

【後端】

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

【前端】

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

【後端】

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

【使用者】

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


概念解析

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

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


前端三大要素


資料來源:Canva 自行繪製

資料來源:Canva 自行繪製

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


HTML

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

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

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


CSS

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

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

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


JavaScript

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

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

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

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


結語

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

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

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



12會員
18內容數
這裡是來自 高科大 資管系二年級的學生,希望能在學習的過程中,也分享這些知識給大家。
留言0
查看全部
發表第一個留言支持創作者!
咖啡因學習教室 的其他內容
本文將介紹如何從頭開始建立一個Django專案,包括安裝和設定,以及創建管理員帳戶和新的app。透過本文,你可以學習到建立自己的網頁的所有步驟和設定。
本篇文章探討了2024年的網頁製作工具和程式語言,以及如何透過這些工具來建立各種功能豐富的網頁。文章還介紹了IDE、Python和Chrome的安裝步驟,為讀者準備軟體。下一篇的主題將是介紹VS code的介面,讓讀者學會如何去操作並寫程式。
本文將介紹如何從頭開始建立一個Django專案,包括安裝和設定,以及創建管理員帳戶和新的app。透過本文,你可以學習到建立自己的網頁的所有步驟和設定。
本篇文章探討了2024年的網頁製作工具和程式語言,以及如何透過這些工具來建立各種功能豐富的網頁。文章還介紹了IDE、Python和Chrome的安裝步驟,為讀者準備軟體。下一篇的主題將是介紹VS code的介面,讓讀者學會如何去操作並寫程式。
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要,他們擁有豐富的經驗和技能,以提升客戶的在線存在感和業務成果。
Thumbnail
在數位時代,擁有一個設計良好且使用者友善的網站對學校來說至關重要,能夠有效地與學生、家長和更廣泛的社區進行溝通。學校網站作為一個數位樞紐,提供重要資訊、展示成就,並培養社群感。本文將探討學校網頁設計的重要性,主要元素和最佳實踐,以幫助學校打造引人入勝的線上存在感。
Thumbnail
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面,提供了對於WordPress在大品牌中使用的觀點和見解。
Thumbnail
WordPress 是一個開源的內容管理系統,提供了豐富的功能和擴展性,成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後,提供了一些常見問題解答。
Thumbnail
這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly,有助於讀者找到適合自己的網站製作工具。
Thumbnail
PHP是一個功能豐富且靈活的語言,用於開發動態和互動性強的網站。本文介紹了PHP的主要功能和用途,以及它的優點和特性。不論你是一個初學者還是一個專業的開發人員,PHP都是一個值得學習和使用的強大工具。
Thumbnail
建立一個優秀網站需要適當選擇並使用各種網頁素材。這些素材可包括圖片、圖示、音頻、視頻、字體和設計元素等。本篇文章詳細介紹了這些素材的重要性以及選擇和優化的建議。
Thumbnail
專業網頁設計服務能夠提升企業形象,增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
Thumbnail
本文介紹了 Google Analytics 4(GA4)示範帳戶的取得方式,並提供了幾種 GA4 分析小練習,讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習,旨在幫助讀者更熟悉 GA4 這個工具。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要,他們擁有豐富的經驗和技能,以提升客戶的在線存在感和業務成果。
Thumbnail
在數位時代,擁有一個設計良好且使用者友善的網站對學校來說至關重要,能夠有效地與學生、家長和更廣泛的社區進行溝通。學校網站作為一個數位樞紐,提供重要資訊、展示成就,並培養社群感。本文將探討學校網頁設計的重要性,主要元素和最佳實踐,以幫助學校打造引人入勝的線上存在感。
Thumbnail
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面,提供了對於WordPress在大品牌中使用的觀點和見解。
Thumbnail
WordPress 是一個開源的內容管理系統,提供了豐富的功能和擴展性,成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後,提供了一些常見問題解答。
Thumbnail
這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly,有助於讀者找到適合自己的網站製作工具。
Thumbnail
PHP是一個功能豐富且靈活的語言,用於開發動態和互動性強的網站。本文介紹了PHP的主要功能和用途,以及它的優點和特性。不論你是一個初學者還是一個專業的開發人員,PHP都是一個值得學習和使用的強大工具。
Thumbnail
建立一個優秀網站需要適當選擇並使用各種網頁素材。這些素材可包括圖片、圖示、音頻、視頻、字體和設計元素等。本篇文章詳細介紹了這些素材的重要性以及選擇和優化的建議。
Thumbnail
專業網頁設計服務能夠提升企業形象,增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
Thumbnail
本文介紹了 Google Analytics 4(GA4)示範帳戶的取得方式,並提供了幾種 GA4 分析小練習,讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習,旨在幫助讀者更熟悉 GA4 這個工具。