J2EE 之easyUI+jsp+JDBC模式（一）

（一）创建项目登录页

（二）实现数据显示页

（三）添加datagrid控件

（四）实现添加功能页

（五）实现更新功能页

（六）实现删除功能页

创建项目

1、打开Eclipse，并创建web项目，项目名称为“easyuijspjdbc”，如下图所示。

J2EE 之easyUI+jsp+JDBC模式（一）

2、把连接mysql数据库的mysql-connector-java-5.1.12-bin.jar包，复制到WebContext\WEB-INF\lib中，并把jar包添加到类库中，如下图所示。

J2EE 之easyUI+jsp+JDBC模式（一）

3、在WebContent目录中创建一个目录,目录名为js。

4、把easyui所需的文件（themes目录、jquery.min.js、jquery.easyui.min.js和easyui-lang-zh_CN.js）复制到项目中的WebContext\js目录中。如下图所示。

J2EE 之easyUI+jsp+JDBC模式（一）

创建登录页面

1、我们在WebContent目录中创建一个login.html页面，该页面是用户easyui来完成页面的布局和组建，登录窗口如下图所示。

J2EE 之easyUI+jsp+JDBC模式（一）

与该窗口对应的代码如下。

<!DOCTYPE html>

<html>

<head>

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>

<table>

<tr>

</tr>

<tr>

</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();

}

J2EE 之easyUI+jsp+JDBC模式（一）

相关推荐