初探網頁前後端架構


Posted by saffran on 2020-06-13

簡化版的流程說明

情境:

為了報名一個活動,我現在要送出一個 google 的表單,從我按下「送出」,到「看到結果」,這之間發生了什麼事呢?

1. 我「提交表單」,也就是「送出一個 request」到「Google 的 server」

  • 「雲端」就是一個「看不到的 server」

2. 「Google 的 server」就會把我送出的表單資料,存到 database 裡面

3. 成功存到 database 裡面之後,「Google 的 server」就會回傳一個 response 到我的瀏覽器,這個 response 就是我最後看到的「填表成功」的頁面

稍微細節的流程說明

1. 是我指揮「Firefox 瀏覽器」送出 request 到「Google 的 server」

2. 「Google 的 server」就會把這個送出的表單資料,存到 database 裡面

3. 成功存到 database 裡面之後,「Google 的 server」就會回傳一個 response 到我的瀏覽器,這個 response 就是我最後看到的「填表成功」的頁面

  • Server 回傳的 response 就是一個 html 格式的檔案,瀏覽器接到 response 後就會把這個 html 檔案解析之後再顯示出來
  • 剛剛的那個表單(同樣也是一個 html 格式的檔案),用「檢視原始碼」來看就是這樣的一堆我們看不懂的東西,但是透過「瀏覽器」解析之後,就會是美美的表單畫面

更細節的流程說明

其實,送出 request 的並不是瀏覽器

首先要先了解,電腦可以分成幾個層次:

  1. 最底層:硬體(Hardware),像是:網路卡、CPU
  2. 在硬體之上,會有「作業系統(Operating System 簡稱 OS)」,像是:windows、mac
  3. 在 Operating System 之上,才會有「瀏覽器」,像是:Chrome、Firefox

所以,送出 request 的流程其實是:

1. 我在表單按下送出,叫「瀏覽器」送出 request

2. 「瀏覽器」叫「作業系統」送出 request

3. 「作業系統」叫「網路卡」送出 request,最終就是由「硬體裡面的網路卡」送出 request 到「Google 的 server」

就像是,
我跟朋友說「我有寄明信片給你」
但其實嚴格說起來「不是我寄的」,而是我把明信片投到郵筒後--> 郵差把明信片拿起來,轉交給另一個郵差--> 另一個郵差再把明信片送到我朋友的信箱--> 朋友把明信片拿出來
真正做「寄信」這個動作的是「郵差」,電腦裡面的「硬體」就是扮演這個「郵差」的角色

送出 request 後:

4. 送出 request 後,會先經過我家的網路--> 再經過社區的網路--> 再經過台灣的網路--> 再經過美國的網路,這個 request 才會抵達「Google 的 server」

5. 「Google 的 server」就會把這個表單資料,存到 database 裡面

6. 成功存到 database 裡面之後,「Google 的 server」回傳的 response 也是先傳到網路卡

7. 網路卡把 response 解析完之後,傳給作業系統

8. 作業系統把 response 解析完之後,傳給瀏覽器

9. 最後,瀏覽器才可以把畫面呈現出來

前後端的區別

綠線左側是「我看得到的頁面」--> 就是屬於「Front End」
綠線右側是「我看不到的,server 在處理的部分」--> 就是屬於「Back End」

前端

因此,現在要再把前端的「瀏覽器」拉出來看,瀏覽器可以分成這三個部分:

  • 網頁的內容就是 html
  • 負責裝飾的就是 css(排版、背景顏色、字體大小...)
    • 在 Firefox 選單點擊「檢視/頁面樣式/無樣式」就可以把 css 關掉,網頁就會用「純文字」顯示出來
  • 負責網頁功能(頁面互動、資料溝通)的是 JavaScript
    • 在網頁上寫的程式,一定都是 JavaScript

後端

以「Google 表單」的範例來說,我們要把 request 發送到 docs.google.com 這個網址去,但是,網路只認「IP 位置」
(docs.google.com 是“域名”)

因此,在發送 request 之前,

  1. 瀏覽器(網路卡)要先去問「DNS server」,問說「docs.google.com 的 IP 位置是什麼?」
  2. DNS server 就會回答說:「docs.google.com 的 IP 位置是 216.58.200.46」
  3. 網路卡就會把 request 發送到 216.58.200.46 這個 IP 位置的 server 去

用 Command Line 查詢 IP 位置

輸入指令 nslookup docs.google.com,就可以查詢到 docs.google.com 的 IP 位置是「216.58.200.46」(紅色箭頭處)

綠色箭頭處的是「我的 DNS server」的位置

後端的程式語言

負責處理從「Google server」之後的事情,就是後端負責的:
可以使用不同的程式語言,有 PHP, Ruby 等等

後端的系統架構

如果 Database 只有一台的話,這台掛掉,整個服務就掛掉了,

因此,會把資料都複寫到另一台 Database,一台掛了,就可以連到另一台,服務就不會中斷掉。

Request 和 Response 的概念

可以把「Request 和 Response」當作是一個封包(一種“信件”的格式),叫做 HTTP

在 Console 查看 Request 和 Response

在 Chrome 按右鍵「檢查」打開 Console,進入「Network」頁籤,重新整理後,就可以看到瀏覽器發出的所有 request

  • Request URL:對這個網域發送 request
  • 在 Response 可以看到回傳的回應(原始格式:html)
  • 在 Preview 可以看到「瀏覽器解析過後的畫面」(有搭配 css)

手機的前後端架構也是一樣的

前面講到的「前後端架構」,在桌機、手機上都是一樣的,只是差在:網頁的部分(下圖中的黑色框框),替換成手機

  1. 從手機的瀏覽器(app)--> 透過手機的作業系統--> 再透過手機的硬體,發送 request 給 server
  2. server 從 database 存取到資料後,回傳 response 到手機的硬體--> 手機的作業系統--> 最後,在手機的瀏覽器顯示畫面出來

因此,廣義的 Front end 其實包含「網頁、手機的 app」(前端就是:除了 server、database 的部分)


#前後端架構







Related Posts

CoderBridge x TechBridge 技術文章推廣計畫

CoderBridge x TechBridge 技術文章推廣計畫

Matplotlib / Pandas 資料分析繪圖顯示中文字體入門教學

Matplotlib / Pandas 資料分析繪圖顯示中文字體入門教學

今天台北歷史高溫39.7度 但我在台中吹冷氣

今天台北歷史高溫39.7度 但我在台中吹冷氣


Comments