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 來講述它背後後端的運作原理。



8會員
18內容數
這裡是來自 高科大 資管系二年級的學生,希望能在學習的過程中,也分享這些知識給大家。
留言0
查看全部
發表第一個留言支持創作者!