（一）創建項目登錄頁
（二）實現數據顯示頁
（三）添加datagrid控件
（四）實現添加功能頁
（五）實現更新功能頁
（六）實現刪除功能頁
代碼連接：https://gitee.com/night_lack/easyui_jsp_jdbc/tree/dev/
創建數據顯示頁面
1、在WebContext目錄中創建listlogin.html頁面，如下圖所示。
（1）在listlogin.html文件的<head>和</head>中引入easyui的樣式表和相關的函數庫，如下代碼
<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>
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
});
</script>
</head>
<body>
</body>
</html>
（2）在listlogin.html文件中的<body>和</body>中輸入如下的內容。作爲顯示數據表login的位置，
<div id="dg"></div>
（3）在$(function(){ });在左花括號中輸入如下代碼。
$('#dg').datagrid({
url:'listlogin.jsp', //這是處理數據的後臺程序 。該程序必須返回給我們所需要的json數據格式,如：
columns:[[ //columns是定義datagrid的表格頭
{field:'id',title:'編號',width:100}, //表格頭部的列標題 ，其中field的值id,必須與後臺程序返回的數據中存在id.
{field:'name',title:'用戶名',width:100},
{field:'pass',title:'密碼',width:100}
]]
});
listlogin.html文件的完整代碼如下：
<!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(){
//利用easyui的datagrid組件以表格方式顯示數據表login的內容
$('#dg').datagrid({
url:'listlogin.jsp', //這是處理數據的後臺程序
columns:[[ //columns是定義datagrid張愛玲折表格頭
{field:'id',title:'編號',width:100}, //表格頭部的列標題
{field:'name',title:'用戶名',width:100},
{field:'pass',title:'密碼',width:100}
]]
});
})
</script>
</head>
<body>
<div id="dg"></div>
</body>
</html>
2、在後臺服務器中創建listlogin.jsp文件，用於處理用戶的請求，並把數據表login中的所有記錄轉化爲json數據格式後，再傳給前臺頁面listlogin.html。在WebContext目錄中創建listlogin.jsp文件，如下圖所示。
listlogin.jsp文件的代碼如下。
<%@ 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";
private static final String DBURL="jdbc:mysql://localhost:3306/stsc";
private static final String DBUSER="root";
private static final String DBPASS="admin";
private static Connection conn=null;
%>
<%
try{
Class.forName(DBDRIVER);
conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS);
String sql="select id,name,pass from login";
PreparedStatement psta=conn.prepareStatement(sql);
ResultSet rs=psta.executeQuery();
//str是構建json格式的字符串，其中json數據格式爲：[{"id":1,"name":"admin","pass":"admin"},{"id":2,"name":"qin","pass":"qin"}]
String str="[";
while(rs.next()){//通過這個循環是把數據表中讀取到的記錄，逐條來構建成javascript對象{"id":1,"name":"admin","pass":"admin"}
if(str.length()>1){//湊數如不是第一個對象則要在對象後面加“,"
str+=",";
}
str+="{";
str+="\"id\":"+rs.getInt(1)+",\"name\":\""+rs.getString(2)+"\",\"pass\":\""+rs.getString(3)+"\"";
str+="}";
}
str+="]";
rs.close();//關閉rs
psta.close();
conn.close();
out.println(str);//向客戶端輸出json格式數據。
}catch(Exception e){
return ;
}
%>
listlogin.jsp文件主要完成連接到mysql數據庫stsc中把login數據表中所有記錄讀取出來，把記錄逐條轉換成javaScript的對象，然後把輸出到客戶端listlogin.html頁面中。運行listlogin.jsp得到如下圖所示的結果。
