前言

2022 年 12 月開發的 Line 點餐系統，當時的技術架構為：

  • Server：.NET 6 + Razor Pages + SQL Server
  • Client：Bootstrap 5 + Vue.js
  • Admin：Vite + Vue 3 (純前端)

直到 2025 年，該系統僅供特定的 2~3 家店家使用，且未對外開放其他店家使用。

近期因閒暇時間較多，加上 AI 開發工具崛起，決定對系統進行大改重構，完善功能，目標是將系統對外開放運營，並提供引導式設定讓店家可以在後台快速上手。

重構重點

準備在原有的基礎上，優化底層架構並增加店家後台功能。

  1. 技術換血
    預計汰除原有的 Razor Pages + Vue.js，改用全現代化前端架構：

    • Framework: Next.js
    • Language: TypeScript
    • Style: Tailwind CSS

  2. 功能升級

    • 全面支援 RWD 響應式設計
    • 優化店家 SEO
    • 新增「自取外帶」與「店內用餐」模式
    • 使用者上傳菜單照片，透過AI解析匯入系統
    • 一鍵發布圖文選單到Line官方帳號
    • 出單機串接提示
    • 購物車狀態同步優化 (解決跨裝置/跨瀏覽器問題)
    • 多分店支援
    • 優化 LINE Login 轉導體驗 (消除轉跳白屏、加速載入)
    • 金流設定 & 金流報表優化
    • 出單機設定 & 出單機報表優化

  3. 後端重構

    • 升級目標：.NET 6 -> .NET 10 (預計採用最新版以獲得最佳效能)
    • 架構優化：將原本 Service 層與 DB 查詢混雜的邏輯抽離，導入 Repository Pattern 或依照 Clean Architecture 原則重新分層。
    • API 效能：針對高併發的點餐場景進行優化 (e.g., Redis Cache, Async/Await 徹底落實)。
    • 資料庫：SQL Server 索引優化與正規化調整。

系統架構對比 (System Architecture)

為了讓未來維護更輕鬆，這次重構在架構上做了很大的調整，從原本的單體式混合架構，轉向職責分明的多層式架構。

🚫 改版前：耦合過重 (Legacy)

舊版架構中，Razor Pages 負責了大部分的邏輯，而 Service 層常常直接參照 DB Context，導致邏輯與資料存取緊密耦合，難以測試。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
graph TD
    User((消費者))
    Admin((店家管理員))
    Line((Line App))
    
    subgraph "Server (.NET 6)"
        RP["Razor Pages<br>(UI + Controller)"]
        CTRL["Web API Controller"]
        SVC["Service Layer<br>(Business Logic + DB Query)"]
        EF[Entity Framework Core]
    end

    subgraph "Frontend"
        Vue["Vue 3 + Vite<br>(店家後台 SPA)"]
    end
    
    DB[(SQL Server)]
    
    User --> Line
    Line --> RP
    Admin --> Vue
    Vue --> CTRL
    RP --> SVC
    CTRL --> SVC
    SVC --> EF
    EF --> DB
    
    %% Style
    style RP fill:#f9f,stroke:#333
    style CTRL fill:#512bd4,stroke:#fff,color:#fff
    style SVC fill:#ff9,stroke:#333
    style Vue fill:#42b883,stroke:#333

✅ 改版後：職責分離 (Refactored)

新版架構引入了 Repository Pattern 與 BFF (Backend for Frontend) 的概念。

  • Next.js 作為 BFF，處理前端路由與輕量級邏輯。
  • API Layer 專注於提供資料，不處理 UI 邏輯。
  • Service Layer 只負責商業邏輯驗證。
  • Repository Layer 專心處理資料庫連線與查詢。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
graph TD
    User((消費者))
    Admin((店家管理員))
    Line((Line App))
    Web((Web 瀏覽器))
    
    subgraph "Frontend"
        Next["Next.js<br>(點餐頁面 SSR)"]
        Vue["Vue 3 + Vite<br>(店家後台 SPA)"]
    end

    subgraph "Backend (.NET 10)"
        API[Web API Controller]
        Logic["Service Layer<br>(Business Logic)"]
        Redis[(Redis Cache)]
        Repo["Repository Layer<br>(Data Access)"]
    end
    
    DB[(SQL Server)]
    
    User --> Line
    User --> Web
    Line --> Next
    Web --> Next
    Admin --> Vue
    Next --> API
    Vue --> API
    API --> Logic
    Logic --> Redis
    Redis -->|Cache Miss| Repo
    Repo --> DB
    
    %% Style
    style Next fill:#61dafb,stroke:#333
    style Vue fill:#42b883,stroke:#333
    style API fill:#512bd4,stroke:#fff,color:#fff
    style Logic fill:#2d79c7,stroke:#fff,color:#fff
    style Redis fill:#dc382d,stroke:#fff,color:#fff
    style Repo fill:#00947e,stroke:#fff,color:#fff

結語

這次重構的目標很明確：讓系統更好維護、更容易擴展、提供店家引導式設定、也更有機會對外運營。
後續會針對各個優化項目（如 AI 辨識菜單、購物車優化等）單獨撰寫文章！