[C#][ASP.NET] Web API 开发心得 (2) - 网站的基本架构

今天要介绍的是网站的基本架构和组成元素，下面是我製作的网站架构图。

左侧网页和APP这边我们习惯称为前端，右侧伺服器和资料库习惯称为后端，前端工程师和后端工程师之名也由此而来。

跑在前端的程式有 HTML、CSS、Javascript，HTML 负责网页版面的结构，CSS 负责网页的样式呈现，Javascript 负责和使用者的互动和一些特效动画，前端如果以 MVC 来看就是展示层 View，这里的 MVC 并没有指哪个框架只是一种概念。
后端的程式有很多种，ASP.NET、PHP、JSP 选一种喜欢的即可，后端主要功能是处理网站的核心商业逻辑，和资料库的存取。

接着来看网站的运作方式，首先使用者在浏览器输入网址，浏览器会向伺服器发送一个请求 Request，伺服器接收到后会依照请求内容去执行对应的程式，接着程式会透过 SQL 语法存取资料库，取得资料后再将程式执行结果回传给浏览器 Response，浏览器再将结果呈现给使用者。

在程式将执行结果回传给浏览器这个部分，传统的做法是每次的 Request 都在后端 Render HTML 然后浏览器接收后刷新画面，这样的做法有缺点，因为每个操作都会刷新页面，所以会感觉画面闪烁，使用者体验不好，且刷新画面也会造成 Javascript 被重置，局限了 Javascript 的发挥空间。

所以后来发展出了 AJAX 和 SPA，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 且格式为 JSON 或 XML，APP 很容易就可以串接，后端程式可以同时给网站和 APP 使用，达到后端核心逻辑共用的目的。

那上面提到的 JSON 和 XML 用途是什么呢? 主要用于资料传输，试想后端程式从资料库读取出来的资料是在记忆体中的，可能是一个 DataTable 或 C# 物件，那该如何将这些资料传送给浏览器并转换成 Javascript 可以看得懂的物件呢? 毕竟 C# 和 JS 中间还隔着网际网路，JSON 和 XML 就是用来解决这个问题的，JSON 和 XML 是一串结构性的文字，所以可以很容易的在网路上传输，并作为两种程式之间交换资料的媒介。

最后介绍一下，我自己常用的开发架构。

Web Form 负责产生基本的 HTML，浏览器载入 HTML 后，透过 AJAX 向后端 API 取得资料，API 的回传格式统一使用 JSON，接收到资料后透过 AngularJS 和 JQuery 更新画面，路由的部分没有使用 AngularJS 的前端路由，页面切换还是传统的 URL，所以其实并不算完全的 SPA。

结语

今天就介绍到这里，这篇没有程式码没有实作，主要想介绍网站的基本架构和运作方式，给初学的朋友们，感谢大家观看。