架構執行個體之Demo_JSP，架構demo_jsp
架構執行個體之Demo_JSP
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 parametersString username = request.getParameter("username");String password = request.getParameter("password");//check nullif (username == null || password == null) { response.sendRedirect("login.jsp");}//validateboolean 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 parametersString username = request.getParameter("username");String password1 = request.getParameter("password1");String password2 = request.getParameter("password2");String email = request.getParameter("email");//check nullif (username == null || password1 == null || password2 == null || !password1.equals(password2)) { response.sendRedirect("register.jsp");}//validateboolean 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
