JavaWeb 連接 MySQL 資料庫完整實戰 (MVC + EasyUI)

本文以 MVC 架構示範 JavaWeb 連接 MySQL 完成 CRUD 與分頁查詢，前端採用 EasyUI DataGrid 呈現，涵蓋資料庫建表、JDBC 連線池、DAO、Servlet 控制器、JSP 頁面完整代碼。

1. 資料庫準備

建立 users 表：id (PK), user_name, display_name, pwd，預先插入測試資料。

2. 連線工具類 (DBConnection)

public class DBConnection {
    private static final String URL = "jdbc:mysql://localhost/jokertest?useUnicode=true&characterEncoding=utf-8";
    private static final String USER = "root", PASS = "*****";
    public static Connection getConnection() { /* Class.forName + DriverManager.getConnection */ }
    public static void closeConnection() { /* 關閉連線 */ }
}

3. DAO 層 (UserDao)

使用 PreparedStatement 防注入，封裝增刪改查與分頁：

public List selectPage(int from, int rows) { /* LIMIT from, rows */ }
public int selectCount() { /* SELECT COUNT(1) */ }

4. Servlet 控制器 (UserServlet)

根據 action 參數分派：select (分頁 JSON)、add、update、delete。回傳 EasyUI 需要的 {total, rows} 格式。

5. 前端頁面 (main.jsp + EasyUI)

• 引入 easyui.css, jquery.min.js, jquery.easyui.min.js。
• <table id="dg" class="easyui-datagrid"> 宣告欄位、分頁、工具列 (新增/編輯/刪除)。
• JS 邏輯：beginEdit/endEdit/rejectChanges 控制行編輯狀態，AJAX 呼叫 Servlet 完成持久化。

6. 運作截圖驗證

文中附有新增、刪除、編輯前後的 DataGrid 截圖，確認功能正常。

專案結構建議

com.joker.web
 ├─ db (DBConnection)
 ├─ dao (UserDao)
 ├─ entity (User)
 ├─ servlet (UserServlet)
 └─ WebContent (main.jsp, css, js)