iT邦幫忙

5

[C#][ASP.NET] Web API 開發心得 (2) - 網站的基本架構

今天要介紹網站的基本架構和組成元素,下面是我用小畫家畫的網站架構圖。
https://ithelp.ithome.com.tw/upload/images/20180319/20106865LdOqeQqH8b.jpg
左側網頁和APP這邊我們習慣稱為前端,右側伺服器和資料庫習慣稱為後端,前端工程師和後端工程師之名也由此而來。

跑在前端的程式有 HTMLCSSJavascript,HTML 負責網頁版面的結構,CSS 負責網頁的樣式呈現,Javascript 負責和使用者的互動和一些特效動畫,前端如果以 MVC 來看就是展示層 View,這裡的 MVC 並沒有指哪個框架只是一種概念。
後端的程式有很多種,ASP.NETPHPJSP 選一種喜歡的即可,後端主要功能是處理網站的核心商業邏輯,和資料庫的存取。

接著來看網站的運作方式,首先使用者在瀏覽器輸入網址,瀏覽器會向伺服器發送一個請求 Request,伺服器接收到後會依照請求內容去執行對應的程式,接著程式會透過 SQL 語法存取資料庫,取得資料後再將程式執行結果回傳給瀏覽器 Response,瀏覽器再將結果呈現給使用者。

在程式將執行結果回傳給瀏覽器這個部分,傳統的做法是每次的 Request 都在後端 Render HTML 然後瀏覽器接收後刷新畫面,這樣的做法有缺點,因為每個操作都會刷新頁面,所以會感覺畫面閃爍,使用者體驗不好,且刷新畫面也會造成 Javascript 被重置,局限了 Javascript 的發揮空間。

所以後來發展出了 AJAXSPA,AJAX 可以讓瀏覽器在背景送出請求,而不影響當前的網頁,收到伺服器回傳結果時再透過 Javascript 將資料更新到畫面上,而到了 SPA 時做得更徹底,以往 AJAX 還會搭配 Server Render HTML,到了 SPA 完全不 Server Render HTML,整個網站都用 AJAX 向後端取資料,前後端完全分離。

其實這樣做有很大的好處,傳統的後端 Render HTML 架構,因為程式都在後端,一不小心就會把 SQL、商業邏輯、畫面展示,都寫在一起,也就是常說的義大利麵型程式,這樣的程式會造成團隊分工和未來維護上的困難,而 SPA 先天就會把商業邏輯和展示層分離,後端 Web API 負責商業邏輯的處理,前端 Javascript 從後端取得 JSON 資料後,將資料呈現在畫面上,在團隊分工上,設計師可以專注於 HTML 和 JS,程式開發人員專注於商業邏輯,彼此之間可以持續維護各自的部分。

SPA 的發展和近幾年 APP 的需求大增也有關係,傳統的網頁 Server 回傳的是 HTML,而 APP 是看不懂 HTML 的,且 APP 的運作方式和網頁也不相同,所以 Server 端的核心程式無法重用,而如果採用 SPA 來開發網站,因為前後端溝通都是使用 API 且格式為 JSONXML,APP 很容易就可以串接,後端程式可以同時給網站和 APP 使用,達到後端核心邏輯共用的目的。

那上面提到的 JSON 和 XML 用途是什麼呢? 主要用於資料傳輸,試想後端程式從資料庫讀取出來的資料是在記憶體中的,可能是一個 DataTable 或 C# 物件,那該如何將這些資料傳送給瀏覽器並轉換成 Javascript 可以看得懂的物件呢? 畢竟 C# 和 JS 中間還隔著網際網路,JSON 和 XML 就是用來解決這個問題的,JSON 和 XML 是一串結構性的文字,所以可以很容易的在網路上傳輸,並作為兩種程式之間交換資料的媒介。

最後介紹一下,我自己常用的開發架構。
https://ithelp.ithome.com.tw/upload/images/20180319/20106865Vr4tQZvzi9.jpg
Web Form 負責產生基本的 HTML,瀏覽器載入 HTML 後,透過 AJAX 向後端 API 取得資料,API 的回傳格式統一使用 JSON,接收到資料後透過 AngularJS 和 JQuery 更新畫面,路由的部分沒有使用 AngularJS 的前端路由,頁面切換還是傳統的 URL,所以其實並不算完全的 SPA。

結語

今天就介紹到這裡,這篇沒有程式碼沒有實作,主要想介紹網站的基本架構和運作方式,給初學的朋友們,感謝大家觀看。


1 則留言

1
神Q超人
iT邦新手 4 級 ‧ 2018-03-19 09:42:52

我的注意力被小畫家畫出來的圖完全吸引住惹

哈哈哈,這麼誇張
/images/emoticon/emoticon37.gif

我要留言

立即登入留言