MVC 架構模式實戰與 JavaBean 分頁元件設計

前言

MVC (Model-View-Controller) 是架構層級模式，內含策略、組合、聚合等多種設計模式。Struts 框架即為其經典實作。本文示範自製 MVC 架構核心機制：單一入口 Servlet (Front Controller)、動作對應表、介面統一，並設計可重用的 JavaBean 分頁元件。

自製 MVC 核心架構

1. 動作路由表

使用 Hashtable 映射動作名稱至 JSP 路徑，集中管理導航。

2. 統一動作介面

public interface Action {
    void execute(HttpServlet servlet, HttpServletRequest request, HttpServletResponse response);
}

所有處理類實作此介面，便於工廠統一調度。

3. 前端控制器

web.xml 僅映射一個 Servlet，依請求參數 action 分派至對應處理類：

<servlet>
  <servlet-name>dispatcher</servlet-name>
  <servlet-class>com.example.DispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>dispatcher</servlet-name>
  <url-pattern>*.do</url-pattern>
</servlet-mapping>

JavaBean 分頁元件三層設計

1. 資料 Bean (listuser_bean)

public class ListUserBean {
    private String name, pass;
    // getter/setter 省略
}

2. 分頁邏輯類 (listuser_page)

• 封裝連線、Statement、ResultSet
• 核心方法 getPage(int pageNo, int pageSize, String sql)：

public ListUserBean[] getPage(int intpage, int intpagecount, String sql) {
    // 1. 取得總筆數 (rs.last() + getRow())
    // 2. 計算總頁數、修正頁碼
    // 3. 定位至起始列 (absolute)
    // 4. 讀取 pageSize 筆資料填入 Bean 陣列
    // 5. 設定總筆數、總頁數供前端顯示
}

3. 動作類 (listuser) 串聯前後端

• 從請求取得 intpage、intpagecount 參數
• 呼叫 listuser_page.getPage() 取得資料陣列
• 輸出資料與分頁導航連結 (JavaScript 表單提交)

// 前端分頁導航生成片段
out.println("<script>function check(f,v){f.intpage.value=v;f.submit();}</script>");
out.println("<form action='/main?action=listuser' method='post' name='theform'>");
out.println("<input type='hidden' name='intpage'>");
out.println("<a href='javascript:check(theform,"+(intpage+1)+");'>next</a>");
out.println("<a href='javascript:check(theform,"+(intpage-1)+");'>back</a>");
out.println("</form>");

完整類別碼結構

geezer_Model.geezer_user.ListUserBean       // 資料 Bean
geezer_Model.geezer_user.ListUserPage       // 分頁邏輯
geezer_Model.geezer_user.ListUserAction     // 實作 Geezer_Action 介面
geezer_controller.Geezer_Action             // 統一介面

設計優缺點分析

現代化建議

1. 採用成熟框架 (Spring MVC, Struts2) 替代自製 Dispatcher
2. 分頁查詢使用 MyBatis/Hibernate 內建分頁或 PageHelper 外掛
3. 前後端分離：Controller 回傳 JSON，前端 Vue/React 渲染分頁組件