1、開發工具和開發環境
開發工具: MyEclipse10,JDK1.6.0_13(32位),Tomcat7.0(32位),mysql5.7.13
開發環境:WIN10
2、Demo_JSP實現功能
用戶登錄、用戶注冊、退出登錄。
3、Demo_JSP使用技術
本實例使用了JSP、JDBC來實現用戶登錄、用戶注冊和退出登錄功能。系統架構圖如圖一所示:

圖一:Demo_JSP系統架構圖
下面請看圖二(Demo_JSP中JSP文件間邏輯關系圖):

圖二:Demo_JSP中JSP文件間邏輯關系圖
4、具體實現
(1)在MyEclipse中新建一個Web project項目,並命名為Demo_JSP;
(2)向Demo_JSP項目中導入mysql-connector-java-5.1.6-bin.jar,這個包是實現Java連接數據庫功能的包(不會導入包的同學,可以百度喲);
附:mysql-connector-java-5.1.6-bin.jar百度雲下載鏈接:http://pan.baidu.com/s/1i5psdDF 密碼:meyg
(3)在Demo_JSP項目中新建以下JSP文件:
1)login.jsp,用戶登錄的首頁界面,代碼如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登錄界面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form name="form1" action="login_action.jsp" method="post">
<table width="200" border="1">
<tr>
<td colspan="2">登錄窗口</td>
</tr>
<tr>
<td>用戶名</td>
<td><input type="text" name="username" size="10"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password" size="10"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="登錄"> <a
href="register.jsp">注冊新用戶</a></td>
</tr>
</table>
</form>
</body>
</html>
2)login_action.jsp,接收login.jsp頁面中用戶輸入的用戶名和密碼,通過JDBC實現登錄認證,具體代碼如下:
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<%@ include file="inc.jsp"%>
<%
//get parameters
String username = request.getParameter("username");
String password = request.getParameter("password");
//check null
if (username == null || password == null) {
response.sendRedirect("login.jsp");
}
//validate
boolean isValid = false;
String sql = "select * from userInfo where username='"+username+"' and password='"+password+"'";
try {
Class.forName(drv).newInstance();
Connection conn = DriverManager.getConnection(url, usr, pwd);
Statement stm = conn.createStatement();
ResultSet rs = stm.executeQuery(sql);
if(rs.next())isValid = true;
rs.close();
stm.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
out.println(e);
} finally {
}
if (isValid) {
session.setAttribute("username", username);
response.sendRedirect("welcome.jsp");
} else {
response.sendRedirect("login.jsp");
}
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'login_action.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
</body>
</html>
3)inc.jsp,存放數據庫連接的地址,具體代碼如下:
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<%
String drv = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/library_system";
String usr = "root";
String pwd = "root";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'inc.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
This is my JSP page. <br>
</body>
</html>
4)welcome.jsp,用戶登錄成功后的主界面,具體代碼如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'welcome.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<table width="100%">
<tr>
<td><img src="images/picture_01.png"></td>
<td><img src="images/picture_03.jpg" width="600" height="120"></td>
</tr>
<tr>
<td colspan="2">
<hr>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><a href="welcome.jsp">Main</a></td>
</tr>
<tr>
<td><a href="menu1.jsp">Menu1</a></td>
</tr>
<tr>
<td><a href="menu2.jsp">Menu2</a></td>
</tr>
<tr>
<td><a href="menu3.jsp">Menu3</a></td>
</tr>
<tr>
<td><a href="menu4.jsp">Menu4</a></td>
</tr>
<tr>
<td><a href="menu5.jsp">Menu5</a></td>
</tr>
<tr>
<td><a href="menu6.jsp">Menu6</a></td>
</tr>
<tr>
<td><a href="menu7.jsp">Menu7</a></td>
</tr>
<tr>
<td><a href="menu8.jsp">Menu8</a></td>
</tr>
</table>
</td>
<td>
<form name="form1" action="logout.jsp" method="post">
<table width="200" border="1">
<tr>
<td colspan="2">登錄成功</td>
</tr>
<tr>
<td>歡迎你,</td>
<td><%=(String) session.getAttribute("username")%></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="退出"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
5)loginout.jsp,用戶退出登錄,返回登錄主界面,具體代碼如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
session.removeAttribute("username");
response.sendRedirect("login.jsp");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'logout.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
</body>
</html>
6)register.jsp,實現用戶注冊界面,具體代碼如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'register.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form name="form1" action="register_action.jsp" method="post">
<table width="200" border="1">
<tr>
<td colspan="2">注冊窗口</td>
</tr>
<tr>
<td>用戶名</td>
<td><input type="text" name="username" size="10"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password1" size="10"></td>
</tr>
<tr>
<td>確認密碼</td>
<td><input type="password" name="password2" size="10"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" size="10"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="登錄"> <a
href="login.jsp">返回</a></td>
</tr>
</table>
</form>
</body>
</html>
7)register_action.jsp,通過JDBC實現注冊,並把數據寫入數據庫,具體代碼如下:
<%@ include file="inc.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
//get parameters
String username = request.getParameter("username");
String password1 = request.getParameter("password1");
String password2 = request.getParameter("password2");
String email = request.getParameter("email");
//check null
if (username == null || password1 == null || password2 == null || !password1.equals(password2)) {
response.sendRedirect("register.jsp");
}
//validate
boolean isValid = false;
String sql = "select * from userInfo where username='"+username+"'";
try {
Class.forName(drv).newInstance();
Connection conn = DriverManager.getConnection(url, usr, pwd);
Statement stm = conn.createStatement();
ResultSet rs = stm.executeQuery(sql);
if(!rs.next()) {
sql = "insert into userInfo(username,password,mail) values('"+username+"','"+password1+"','"+email+"')";
stm.execute(sql);
isValid = true;
}
rs.close();
stm.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
out.println(e);
}
if (isValid) {
response.sendRedirect("login.jsp");
} else {
response.sendRedirect("register.jsp");
}
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'register_action.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
</body>
</html>
5、運行結果展示
(1)在瀏覽器中輸入http://localhost:8080/Demo_JSP/login.jsp,將出現如下圖三所示:

圖三:登錄界面
(2)點擊注冊新用戶,將會出現如下圖四所示:

圖四:注冊界面
(3)注冊成功后,會自動返回到登錄界面,然后輸入用戶名和密碼,點擊登錄將出現如下圖五所示:

圖五:登錄后的welcome.jsp界面
附:Demo_JSP項目實例源碼百度雲下載鏈接:http://pan.baidu.com/s/1mifI8nI 密碼:j3wp; 本實例所使用數據庫建表sql語句文件下載鏈接:http://pan.baidu.com/s/1eS0n9aM 密碼:7ttd

