JSP 顯示數據庫數據表完整實戰：從 DAO 到前端渲染的 MVC 經典模式

整體架構圖

JSP (View) → Servlet/Controller → DAO → Database
     ↑___________ 渲染 HTML Table ___________↓

DAO 層：通用查詢封裝

public class AccountDAO {
    public List<Account> selectAll() {
        String sql = "SELECT aname, sex, age FROM account";
        try (Connection conn = DBUtil.getConn();
             PreparedStatement ps = conn.prepareStatement(sql);
             ResultSet rs = ps.executeQuery()) {
            List<Account> list = new ArrayList<>();
            while (rs.next()) {
                Account acc = new Account();
                acc.setAname(rs.getString("aname"));
                acc.setSex(rs.getString("sex"));
                acc.setAge(rs.getInt("age"));
                list.add(acc);
            }
            return list;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }
}

JSP 頁面：JSTL + EL 表達式渲染 (推薦)

<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<table class="data-table">
    <thead>
        <tr><th>用戶名稱</th><th>用戶性別</th><th>用戶年齡</th></tr>
    </thead>
    <tbody>
        <c:forEach items="${accountList}" var="acc">
            <tr>
                <td>${acc.aname}</td>
                <td>${acc.sex == 'm' ? '男' : '女'}</td>
                <td>${acc.age}</td>
            </tr>
        </c:forEach>
    </tbody>
</table>

Controller 僅需 request.setAttribute("accountList", dao.selectAll()); 轉發到 JSP。

傳統 Scriptlet 寫法 (維護舊項目參考)

<% 
    AccountDAO dao = new AccountDAO();
    List<Account> list = dao.selectAll();
    for (int i = 0; i < list.size(); i++) {
        Account acc = list.get(i);
%>
    <tr>
        <td><%= acc.getAname() %></td>
        <td><%= "m".equals(acc.getSex()) ? "男" : "女" %></td>
        <td><%= acc.getAge() %></td>
    </tr>
<% } %>

⚠️ Scriptlet 混合 HTML 維護困難，新項目強制使用 JSTL/EL 或模板引擎 (Thymeleaf/FreeMarker)。

進階：帶操作列的管理型列表

<c:forEach items="${teachers}" var="t" varStatus="vs">
    <tr>
        <td><input type="checkbox" value="${t.tno}" /></td>
        <td>${vs.index + 1}</td> <!-- 序號 -->
        <td>${t.tname}</td>
        <td>${t.tsex}</td>
        <td>${t.prof}</td>
        <td>${t.depart}</td>
        <td>${t.tbirthday}</td>
        <td>
            <a href="view?id=${t.tno}">查看</a> |
            <a href="edit?id=${t.tno}">修改</a> |
            <a href="delete?id=${t.tno}" onclick="return confirm('確定刪除？')">刪除</a>
        </td>
    </tr>
</c:forEach>

分頁擴展：PageHelper / 手寫分頁

// Controller
int pageNum = Integer.parseInt(request.getParameter("pageNum") != null ? request.getParameter("pageNum") : "1");
int pageSize = 10;
PageHelper.startPage(pageNum, pageSize);
List<Teacher> list = teacherDao.findAll();
PageInfo<Teacher> pageInfo = new PageInfo<>(list);
request.setAttribute("pageInfo", pageInfo);

JSP 端渲染分頁條：${pageInfo.pageNum}、${pageInfo.pages}、${pageInfo.hasNextPage} 等。

圖片對比驗證

動態 JSP 與靜態 HTML 渲染效果完全一致，證明數據綁定正確。

最佳實踐總結

1. DAO 只負責 CRUD，不處理業務邏輯。
2. Service 層管理事務，Controller 僅做參數校驗與視圖分發。
3. JSP 禁用 Scriptlet，全面拥抱 JSTL + EL + CSS 框架 (Bootstrap/Layui)。
4. 大數據量必須分頁，避免一次性載入導致 OOM 或頁面卡死。
5. 輸出變量用 ${fn:escapeXml(str)} 防 XSS 攻擊。