架构实例之Demo_JSP

时间:2022-06-13 19:05:43

架构实例之Demo_JSP

1、开发工具和开发环境

      开发工具: MyEclipse10JDK1.6.0_13(32)Tomcat7.032位),mysql5.7.13

     开发环境:WIN10

2、Demo_JSP实现功能

     用户登录、用户注册、退出登录。

3、Demo_JSP使用技术

    本实例使用了JSPJDBC来实现用户登录、用户注册和退出登录功能。系统架构图如图一所示:

架构实例之Demo_JSP

图一:Demo_JSP系统架构图

     下面请看图二(Demo_JSP中JSP文件间逻辑关系图):

架构实例之Demo_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文件:

        1login.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,将出现如下图三所示:

 架构实例之Demo_JSP

图三:登录界面

(2)点击注册新用户,将会出现如下图四所示:

 架构实例之Demo_JSP

图四:注册界面

 

(3)注册成功后,会自动返回到登录界面,然后输入用户名和密码,点击登录将出现如下图五所示:

 架构实例之Demo_JSP

图五:登录后的welcome.jsp界面

 

附:Demo_JSP项目实例源码百度云下载链接:http://pan.baidu.com/s/1mifI8nI 密码:j3wp;   本实例所使用数据库建表sql语句文件下载链接:http://pan.baidu.com/s/1eS0n9aM 密码:7ttd