（一）创建项目登录页
（二）实现数据显示页
（三）添加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();
}
%>