（一）創建項目登錄頁
（二）實現數據顯示頁
（三）添加datagrid控件
（四）實現添加功能頁
（五）實現更新功能頁
（六）實現刪除功能頁
代碼連接：https://gitee.com/night_lack/easyui_jsp_jdbc/tree/dev/
創建項目
1、打開Eclipse，並創建web項目，項目名稱爲“easyuijspjdbc”，如下圖所示。
2、把連接mysql數據庫的mysql-connector-java-5.1.12-bin.jar包，複製到WebContext\WEB-INF\lib中，並把jar包添加到類庫中，如下圖所示。
3、在WebContent目錄中創建一個目錄,目錄名爲js。
4、把easyui所需的文件（themes目錄、jquery.min.js、jquery.easyui.min.js和easyui-lang-zh_CN.js）複製到項目中的WebContext\js目錄中。如下圖所示。
創建登錄頁面
1、我們在WebContent目錄中創建一個login.html頁面，該頁面是用戶easyui來完成頁面的佈局和組建，登錄窗口如下圖所示。
與該窗口對應的代碼如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄界面</title>
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
function send(){//當用於單擊登錄按鈕時，在客戶端進行處理函數
$('#ff').form('submit', {
url:"login.jsp" ,//當用於單擊提交按鈕時，把表單數據提交到後臺login.jsp進行處理
onSubmit: function(){
//在這裏可以對用戶輸入的信息進行驗證操作
if($("#name").val()==""){//判斷用戶名輸入框是否爲空，若爲空則提示用戶，並返回到登錄界面
$.messager.alert('錯誤','用戶名不能爲空');
return false;
}
if($("#pass").val()==""){//判斷密碼輸入框是否爲空，若爲空則提示用戶，並返回到登錄界面
$.messager.alert('錯誤','密碼不能爲空');
return false;
}
},
success:function(data){ //若提交成功則彈出對話框提示用戶
if(data.trim()==="登錄成功"){//判斷若檢測用戶合建成功，則跳轉到listlogin.html頁面中顯示用戶信息的頁面
window.location.href="listlogin.html"
}else{
$.messager.alert('提示',data); //登錄不成功則顯示登錄失敗。
}
}
});
}
$(function(){
$("#ff").dialog({ //定義一個彈出一個窗口
title: '登錄窗口', //窗口的標題
width: 280, //窗口的寬度
height: 140, //窗口的高度
closed: false, //窗口沒有顯示關閉按鈕
cache: false, //沒有設置緩衝
modal: true ,//設置窗口模式爲真的
buttons:[{ //爲窗口設置兩個按鈕，即登錄和重置兩個按鈕
text:'登錄',
handler:function(){//當單擊登錄按鈕時，調用send（）方法進行處理表單
send();
}
},{
text:'重置',
handler:function(){//當單擊重置按鈕所要執行的任務
$("#name").val("");
$("#pass").val("");
$("#name").focus();
}
}]
});
});
</script>
</head>
<body>
<form id="ff" method="post">
<table>
<tr>
<td>用戶名:</td>
<td><input name="name" id="name" type="text"></input></td>
</tr>
<tr>
<td>密 碼:</td>
<td><input name="pass" id="pass" type="password"></input></td>
</tr>
</table>
</form>
</body>
</html>
2、在項目中的WebContext目錄中創建服務器後臺處理程序login.jsp 用來處理java代碼。與之相對應的代碼如下 。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%! //
private static final String DBDRIVER = "org.gjt.mm.mysql.Driver";
// 採用mysql-connector-java-5.1.12-bin.jar作爲連接mysql數據庫時，使用的數據庫驅動類。
private static final String DBURL = "jdbc:mysql://localhost:3306/stsc";
// 採用mysql-connector-java-5.1.12-bin.jar作爲連接mysql數據庫時，使用的數據庫地址。
// 連接數據庫管理員，是mysql數據庫的系統管理員root
private static final String DBUSER = "root";
// 連接數據庫管理員登錄密碼,是在安裝mysql數據庫時，給定的密碼
private static final String DBPASS = "admin";
// 創建數據庫連接對象conn
private static Connection conn = null;
%>
<%
try {
// 加載mysql數據庫的驅動程
Class.forName(DBDRIVER);
// 獲取數據庫連接對象
conn = DriverManager.getConnection(DBURL, DBUSER, DBPASS);
//定義sql命令，用於從login數據表中記錄，
String sql="select id,name,pass from login where name=? and pass=?";
//創建執行sql命令的對象
PreparedStatement psta=conn.prepareStatement(sql);
psta.setString(1, request.getParameter("name"));//其中request.getParameter("name")是獲取從用戶提交的表單中name變量的值。作爲參數的值
psta.setString(2,request.getParameter("pass"));
ResultSet rs=psta.executeQuery();
if(rs.next()){
out.println("登錄成功");
}else{
out.println("登錄失敗");
}
// 關閉數據庫連接對象
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
%>