架构实例之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/loading.gif' data-original="images/picture_01.png"></td>    <td><img src='/images/loading.gif' data-original="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，将出现如下图三所示：