從 WinForms 到 Web 之二：前後端分離架構

Sun, 10 May 2026 00:00:00 +0800

如果說 MVC 是「後端包辦一切」，那前後端分離就是「後端只管資料，前端只管畫面」；兩者最根本的差異在於渲染發生的位置：

── MVC ──────────────────────────────────────────────
瀏覽器 ──請求──▶ 後端（組好 HTML）──▶ 瀏覽器（顯示）
── 前後端分離 ────────────────────────────────────────
瀏覽器 ──請求──▶ 後端（回傳 JSON）──▶ 瀏覽器（自行渲染）

後端不再負責產生 HTML，它只提供結構化的資料（通常是 JSON）；畫面要長什麼樣子，完全是前端的責任。

用 ASP.NET Core Web API 來說明

後端：只負責資料，不碰畫面

 1[ApiController]
 2[Route("api/[controller]")]
 3public class ProductsController : ControllerBase
 4{
 5 private readonly AppDbContext _db;
 6 public ProductsController(AppDbContext db) => _db = db;
 7
 8 [HttpGet]
 9 public async Task<IActionResult> GetAll()
10 {
11 var products = await _db.Products.ToListAsync();
12 return Ok(products); // 純 JSON，沒有 HTML
13 }
14
15 [HttpPost]
16 public async Task<IActionResult> Create(ProductDto dto)
17 {
18 // 驗證邏輯、商業規則...
19 var product = new Product { Name = dto.Name, Price = dto.Price };
20 _db.Products.Add(product);
21 await _db.SaveChangesAsync();
22 return CreatedAtAction(nameof(GetAll), new { id = product.Id }, product);
23 }
24}

後端回傳的是這樣的 JSON：

從 WinForms 到 Web 之一：認識 MVC 架構

Sat, 09 May 2026 00:00:00 +0800

公司有一套已運行多年的內部管理系統，原本是 Windows Forms 應用程式，現在決定整個搬到 Web 平台；新系統起初以 ASP.NET MVC + Razor Page 為主架構，同時也有部分功能採用 Web API 的形式，形成了一種混搭的局面；這讓我開始思考這兩種做法的本質差異是什麼？在什麼情況下應該選哪一種？在討論這個問題之前，得先把 MVC 架構弄清楚。

MVC 是什麼？

MVC 是一種將應用程式切分成三個層次的架構模式：

Model：應用程式的核心，負責管理資料、業務規則與邏輯，獨立於使用者介面
View：資料的視覺呈現，在 ASP.NET 中就是 Razor Page（.cshtml）
Controller：中間協調者，接收使用者輸入、呼叫 Model 處理、再選擇適合的 View 回應

這三層緊密協作，最關鍵的特點是：整個渲染過程發生在伺服器端，瀏覽器只負責顯示已經組好的 HTML。

瀏覽器 ──請求──▶ Controller ──呼叫──▶ Model（業務邏輯 + 資料存取）
│ │
│ ▼
│ DB / Repository
│ │
│◀────── 資料 ───────────┘
│
▼ 傳遞資料
View（Razor Page）
│
瀏覽器 ◀──完整 HTML──┘

用 ASP.NET Core MVC 來說明

一個典型的 MVC 流程如下：

.NET on 愷的大冒險 Kai's Adventure

從 WinForms 到 Web 之二：前後端分離架構

用 ASP.NET Core Web API 來說明

從 WinForms 到 Web 之一：認識 MVC 架構

MVC 是什麼？

用 ASP.NET Core MVC 來說明