（一）创建项目登录页
（二）实现数据显示页
（三）添加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得到如下图所示的结果。
