後台配置驅動前台頁面：從硬編碼 JSP 標籤到動態佈局管理

專案初期將導航、新聞、標題列表等模組封裝為 JSP 自訂標籤，直接寫死在頁面上。隨著需求變更，行銷/運營團隊希望能在後台管理介面「拖拉拽、開關、排序」模組，無需修改程式碼重新部署。本文梳理實現路徑。

核心架構：資料驅動視圖

將「頁面由哪些模組組成、順序為何、各模組參數」全部存入資料庫，前台渲染時讀取配置動態組裝。

資料表設計範例

CREATE TABLE page_layout (
    id          BIGINT PRIMARY KEY,
    page_key    VARCHAR(64) NOT NULL,       -- 如 'home', 'category_123'
    module_id   VARCHAR(64) NOT NULL,       -- 對應標籤名稱，如 'nav', 'news_list'
    sort_order  INT DEFAULT 0,
    params      JSON,                       -- 模組參數：{ "title": "最新消息", "limit": 10 }
    enabled     BOOLEAN DEFAULT TRUE,
    UNIQUE KEY uk_page_module (page_key, module_id)
);

實作步驟

1. 後台管理介面：提供頁面配置 CRUD，支援拖曳排序、開關模組、編輯 JSON 參數。
2. 快取層：配置讀取頻率高、變更低，建議用 Redis 快取 page_key → List<ModuleConfig>，TTL 1 小時或手動失效。
3. Controller/Service：查詢配置 → 依序渲染各模組片段。
4. 前台渲染（JSP/Thymeleaf/Freemarker）：遍歷模組清單，動態 <@taglib prefix="m" module="${mod.moduleId}" /> 或 th:replace 片段。

關鍵技術點

• 標籤/片段化：每個模組對應一個獨立片段檔，便於獨立開發與快取。
• 參數化：同一模組（如新聞列表）可在不同頁面傳入不同參數（分類、筆數、樣式）。
• 權限控管：後台配置介面需角色權限，防止誤操作導致首頁版面錯亂。
• 版本/回滾：重要頁面配置建議保留歷史版本，支援一鍵回滾。

進階：頁面區塊化

若頁面結構複雜（多欄、側邊欄、輪播區），可引入 區塊 概念：

page_layout: page_key, region (header/left/main/right/footer), module_id, sort_order, params

前台先按 region 分組渲染，再在 region 內按 sort_order 排序。

結語

從「寫死標籤」到「後台配置驅動」，本質是將版面結構資料化。雖增加初期開發成本，但長遠看能大幅降低迭代成本、賦能業務團隊自主運營，是中大型專案必經的架構演進。