Servlet+Filter+MySQL

Author Avatar
Euan 11月 16, 2019
  • 在其它设备中阅读本文章

实验目的

  • 理解Servlet和Filter的工作原理
  • 掌握Servlet和Filter的配置和使用
  • 掌握使用JDBC理解MySQL数据库
  • 能够使用JSP+Servlet+Filter+MySQL开发简单的Web

实验环境

  • Chrome
  • vscode
  • Eclipse
  • Tomcat
  • MySQL

实验内容

在实验1（欧莱雅主页）的基础上，实现欧莱雅网站访问的字符编码过滤器（即支持中文，可设置为utf-8），完善登录和注册功能（使用Servlet实现）。

（下面给出相应代码和实现的截图）

源代码

index.html

login.jsp

register.jsp

截图及其功能介绍

MVJV9x.png

图一 注册界面

MVJA41.png
MVJkNR.png
MVJPHJ.png
MVJFE9.png

图二 用户名/密码/确认密码/验证码为空提示错误并清除文本框内容和定位光标到文本框并刷新二维码

MVJZ36.png
MVJegK.png

图三 密码不一致/验证码提示错误并清除文本框内容和定位光标到文本框并刷新二维码

MVJmjO.png
MVJuuD.png

图四 注册时存在用户名显示错误并刷新该页面

MVJKDe.png
MVJMHH.png

图四 登录成功并跳转到登录界面

MVJlEd.png

图五 登录界面

MVJ1UA.png
MVJ34I.png
MVJGCt.png

图六 用户名/密码/验证码为空提示错误并清除文本框内容和定位光标到文本框并刷新二维码

MVJJ8P.png
MVJYgf.png

图七 用户名/密码错误提示错误并清除文本框内容和定位光标到文本框并刷新二维码

MVJtv8.png
MVJUKS.png

图八 登录成功并跳转到主页面页面

MVdKDf.png

图九 项目结构

图十 以上所有图片编码都是通过Fliter编码过滤器统一编码为UFT-8

源代码

web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xml>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>RegisterServlet</servlet-name>
    <servlet-class>exp4.servlet.RegisterServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>exp4.servlet.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RegisterServlet</servlet-name>
    <url-pattern>/RegisterServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/LoginServlet</url-pattern>
  </servlet-mapping>
  <filter>
  	<filter-name>EncodingFilter</filter-name>
	<filter-class>exp4.servlet.EncodingFilter</filter-class>
  </filter>
  <filter-mapping>
	<filter-name>EncodingFilter</filter-name>
	<url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=".\css\test1.css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>欧莱雅网站首页</title>
</head>
<body>

<!--HEADED-->
<div class="headed">
  <div class="top">
    <div class="logo">
      <img src="images/logo.png" />
    </div>
    <div class="top_nav">
      <div class="top_right">
        <a href="#"><img src="images/man.png" /><span class="man">型男手册</span></a>
        <a href="#"><img src="images/sina.png" /><span>微博互动</span></a>
        <a href="#"><img src="images/vidio.png" /><span>视频直播</span></a>
        <a href="#"><img src="images/Evaluation.png" /><span>测评中心</span></a>
      </div>
      <div class="login">
        <a href="register.html"><span>注册</span></a><a href="login.jsp"><span>登录</span></a>
      </div>
    </div>
  </div>
  <div class="nav">
    <div class="navleft">
      <ul> 
        <li><a href="#">护肤</a></li>
        <li><a href="#">护发</a></li>
        <li><a href="#">彩妆</a></li>
        <li><a href="#">染发</a></li>
        <li><a href="#">男士</a></li>
      </ul>
    </div>
    <div class="navright">
      <a href="#"><img src="images/buy.png" /><span class="buy">电子商城</span></a>
      <a href="#"><span>品牌故事</span></a>
      <a href="#"><span>会员专区</span></a>
    </div>
  </div>
</div>

<!--PRODUCT-->
<div class="product">
      <a href="#"><img src="images/youthcode.png" /></a>
      <a href="#"><img src="images/shine.png" /></a>
      <a href="#"><img src="images/pure.png" /></a>
      <a href="#"><img src="images/brandnew.png" /></a>
      <a href="#"><img src="images/brand.png" /></a>
      <a href="#"><img src="images/beauty.png" /></a>
      <a href="#"><img src="images/loreal.png" /></a>
</div>
<!--footer-->
<div class="footer">
      <!--footer_left-->
      <div class="footer_left">  
           <input value="订阅电子期刊"/><a class="mail" href="#"><img src="images/infor.png" /></a>
      </div>
      <!--footer_middle-->
      <div class="footer_middle">
           <div class="footer_first">
           <a href="#"><span>联系我们</span></a>
           <a href="#"><span>销售网点</span></a>
           <a href="#"><span>网站地图</span></a>
           </div>
           <div class="footer_vip">
           <a href="#"><span>2013年会员积分况礼</span></a>
           <a href="#"><span>其它国家地区和网站</span><img src="images/sanjiao.png" /></a>
           </div>
           <div class="footer_phone">
             <p>巴黎欧莱雅顾客关怀中心：400-821-5098  会员积分兑礼服务热线：400-820-0660</p>
           </div>
           <div class="footer_copyright">
             <p>沪ICP备11031739号-1</p>
           </div>
      </div>
      <!--footer_right-->
      <div class="footer_right">
          <img src="images/logoparis.png" />
      </div>
</div>
</body>
</html>

login.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<%@ 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>
  <title>登录页面</title>
  <link rel="stylesheet" type="text/css" href=".\css\style.css" />
  <script language="javascript">
  var code;

  function createCode() {
  	var codeLength = 4;
  	var checkCode = document.getElementById("checkCode");
  	var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
  	var charIndex = Math.floor(Math.random() * 32);
  	code = selectChar[charIndex];
  	for (var i = 1; i < codeLength; i++) {
  		var charIndex = Math.floor(Math.random() * 32);
  		code += selectChar[charIndex];
  	}
  	if (code.length != codeLength) {
  		createCode();
  	}
  	document.getElementById("checkCode").value = code;
  }

  function loginValidate() {
  	var inputCode = document.getElementById("input1").value.toUpperCase();
  	var usrName = document.getElementById("usr").value;
  	var passWD = document.getElementById("pwd").value;
  	var passWD = document.getElementById("pwd").value;
  	if (usrName.length <= 0) {
      alert("很抱歉，用户名不能为空!");
      document.getElementById("usr").focus();
      createCode();
      return false;
    }
    if (passWD.length <= 0) {
      alert("很抱歉，密码不能为空!");
      document.getElementById("pwd").focus();
      createCode();
      return false;
  	}
    if (inputCode.length <= 0) {
        alert("请输入验证码！");
        createCode();
        document.getElementById("input1").focus();
        return false;
      } else if (inputCode != code) {
        alert("验证码输入错误！");
        createCode();
        document.getElementById("input1").value="";
        document.getElementById("input1").focus();
        return false;
      } else {
        if( passWD == assertpassWD) {
          <!--alert("注册成功！");-->
          <!--jump("index.html");-->
          return true;
        }

        else {
          alert("输入的密码不一致，请重新输入！");
          document.getElementById("assertpwd").value="";
          document.getElementById("assertpwd").focus();
          createCode();
          return false;
        }
      }
  }
  </script>
</head>

<body>
  <div  class="login1">
    <span class="login1_1">Login</span>
  </div>
  
  <form name="myform" method="post" action="LoginServlet" class="form-group" onsubmit="return loginValidate();"> 
  <div class="login2">
    <span class="login2_1">用户名：</span>
	<input type="text" name="username" id="usr" class="usr_name">
  </div>
  
  <div class="login3">
    <span class="login3_1">密&nbsp;码：</span>
	<input type="password" name="password" id="pwd" class="pass_word">
  </div>
  
  <div class="login4">
    <span class="login4_1">验证码：</span>
	<input type="text" id="input1" class="input_code">
    <input type="button" id="checkCode" class="codeJS" value="生成验证码" onclick="createCode()"/>
  </div>
  
  <div class="login5">
    <input type="submit" id="sumbitButton" value="登录"/>
  </div>
  </form>
  <script>
  var errori = '<%=request.getParameter("error")%>';
  if(errori=='yes'){
  	  alert("登陆失败");
  }
  </script>
</body>
  
</html>

register.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE html>
<html>
<head>
  <title>注册页面</title>
  <link rel="stylesheet" type="text/css" href=".\css\style1.css" />
  <script language="javascript">
  var code;

  function createCode() {
  	var codeLength = 4;
  	var checkCode = document.getElementById("checkCode");
  	var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
  	var charIndex = Math.floor(Math.random() * 32);
  	code = selectChar[charIndex];
  	for (var i = 1; i < codeLength; i++) {
  		var charIndex = Math.floor(Math.random() * 32);
  		code += selectChar[charIndex];
  	}
  	if (code.length != codeLength) {
  		createCode();
  	}
  	document.getElementById("checkCode").value = code;
  }

  function registerValidate() {
  	var inputCode = document.getElementById("input1").value.toUpperCase();
  	var usrName = document.getElementById("usr").value;
    var passWD = document.getElementById("pwd").value;
    var assertpassWD = document.getElementById("assertpwd").value;
  	if (usrName.length <= 0) {
      alert("很抱歉，用户名不能为空!");
      document.getElementById("usr").focus();
      createCode();
      return false;
    }
    if (passWD.length <= 0) {
      alert("很抱歉，密码不能为空!");
      document.getElementById("pwd").focus();
      createCode();
      return false;
    }

    if (assertpassWD.length <= 0) {
      alert("很抱歉，确认密码不能为空!");
      document.getElementById("assertpwd").focus();
      createCode();
      return false;
    }
    
    if (inputCode.length <= 0) {
      alert("请输入验证码！");
      createCode();
      document.getElementById("input1").focus();
      return false;
    } else if (inputCode != code) {
      alert("验证码输入错误！");
      createCode();
      document.getElementById("input1").value="";
      document.getElementById("input1").focus();
      return false;
    } else {
      if( passWD == assertpassWD) {
        <!--alert("注册成功！");-->
        <!--jump("index.html");-->
        return true;
      }

      else {
        alert("输入的密码不一致，请重新输入！");
        document.getElementById("assertpwd").value="";
        document.getElementById("assertpwd").focus();
        createCode();
        return false;
      }
    }
  }
</script>
</head>
<body>
  <div  class="login1">
    <span class="login1_1">Register</span>
  </div>
  <form name="myform" method="post" action="RegisterServlet" onsubmit="return registerValidate();">
  <div class="login2">
    <span class="login2_1">&nbsp;请输入用户名：</span>
	<input type="text" name="username" id="usr" class="usr_name">
  </div>
  
  <div class="login3">
    <span class="login3_1">&nbsp;&nbsp;请输入密码：</span>
	<input type="password" name="userpwd" id="pwd" class="pass_word">
  </div>

  <div class="login6">
    <span class="login6_1">请再次输入密码：</span>
	<input type="password" name="assertpassword" id="assertpwd" class="pass_word">
  </div>
  
  <div class="login4">
    <span class="login4_1">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</span>
	<input type="text" id="input1" class="input_code">
    <input type="button" id="checkCode" class="codeJS" value="生成验证码" onclick="createCode()"/>
  </div>
  
  <div class="login5">
    <input type="submit" id="registerButton" value="注册"/>
  </div>
  </form>
  <script>
  var errori = '<%=request.getParameter("error")%>';
  if(errori=='yes'){
  	  alert("登陆失败");
  }
  </script>
</body>
</html>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
*{ font-size:12px; font-family:"瀹嬩綋"; color:black;margin:0 auto;}

body{ margin:0; background-color:#DCDCDC;}
input{ border:none;}

.login1 {
	background-image:url(../images/sky.jpg);
	width:400px;
	height:120px;
	overflow:hidden;
	text-align:center;
	line-height: 120px;
	letter-spacing:10px;
	margin-bottom:2px;
}

.login1_1 {
	font-size:60px;
	font-weight:bold;
	color:#FFA500;
}

.login2 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login2_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.usr_name {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login3 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login3_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.pass_word {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login4 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	//letter-spacing:10px;
	margin-bottom:1px;
}

.login4_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.input_code {
	padding-top:3px;
	height:20px;
	width:70px;
}

.codeJS {
	background-color:#E6E6FA;
	padding-top:5px;
	height:24px;
	width:70px;
	font-style:italic;
	font-size:12px;
	font-weight:bold;
	color:#D2691E;
}

.login5 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	letter-spacing:10px;
}

.login5 input {
	background-color:#6495ED;
	font-size:18px;
	padding-left:16px;
	letter-spacing:10px;
	font-weight:bold;
	color:red;
}

style1.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
*{ font-size:12px; font-family:"瀹嬩綋"; color:black;margin:0 auto;}

body{ margin:0; background-color:#DCDCDC;}
input{ border:none;}

.login1 {
	background-image:url(../images/sky.jpg);
	width:400px;
	height:120px;
	overflow:hidden;
	text-align:center;
	line-height: 120px;
	letter-spacing:10px;
	margin-bottom:2px;
}

.login1_1 {
	font-size:60px;
	font-weight:bold;
	color:#FFA500;
}

.login2 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login2_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.usr_name {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login3 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login3_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.pass_word {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login6 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login6_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.pass_word {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login4 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	//letter-spacing:10px;
	margin-bottom:1px;
}

.login4_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.input_code {
	padding-top:3px;
	height:20px;
	width:70px;
}

.codeJS {
	background-color:#E6E6FA;
	padding-top:3px;
	height:24px;
	width:70px;
	font-style:italic;
	font-size:12px;
	font-weight:bold;
	color:#D2691E;
}

.login5 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	letter-spacing:10px;
}

.login5 input {
	background-color:#6495ED;
	font-size:18px;
	padding-left:16px;
	letter-spacing:10px;
	font-weight:bold;
	color:red;
}

test1.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*閲嶇疆锛屼篃灏辨槸娓呯悊涓嶅共鍑�鐨勬爣绛�*/
*{ font-size:12px; font-family:"瀹嬩綋"; color:#444;margin:0 auto;}/*鏄叡鐢ㄧ殑鎰忔��*/

body{ margin:0; background:#161616;}

a{ text-decoration:none; display:block; color:#FFF;}

img{ border:none; display:block}

ul li{list-style:none; margin:0; padding:0;}

input{ border:none;}

/*椤堕儴*/
.headed{width:952px;height:140px;}  /*杩欎釜鏄潡鐨勬暣浣撻珮*/
.top{height:87px;overflow:hidden;}  /*杩欎釜top鏄寚LOGO鍜宼op_nav,overflow鏄孩鍑虹殑鎰忔�濓紝杩欎釜灏辨槸瀛愮骇婧㈠嚭鍚庣埗绾х殑濡備綍鎺у埗婧㈠嚭閮ㄥ垎锛熸敞锛氳鎶妎verflow鍔犵粰鐖剁骇*/
.top_nav{width:726px;height:87px;float:right;}/*杩欎釜鏄浉瀵规祴璇勪腑蹇冿紝瑙嗛鐩存挱绛夛紝鐩稿logo灏辫鍚戝彸娴姩*/
.logo{float:left;}/*logo鐩稿灏辫鍚戝乏娴姩*/ 
.top_right{width:726px;
           float:right;
           margin-left:7px;
           }
.top_right a{float:right;
             width:92px;
             height:22px;   
             color:#FFF;
             padding-top:10px;
             }
.top_right img{float:left; padding-left:18px;}
.top_right span{ color:#FFF;
                 float:right;
                 width:52px;
                 margin-top:4px;}
.top_right .man{ color:#f88c00;} 
.top_right span:hover{ color:#F93;}
.login{float:right;height:55px; padding-top:20px;width:726px;}
.login a{float:right; margin-left:5px;}

.nav{width:952px;height:102px;}
.navleft{ float:left;width:400px; }
.navleft ul{ padding-left:0; list-style:none; margin-left:0;}
.navleft li{float:left; padding-right:30px; padding-top:20px;}
.navleft a{ color:#999;}
.navright{float:right;width:525px; padding-top:20px;}
.navright a{float:right; margin-left:50px;}
.navright img{float:left;}
.buy{ color:#c0973d;}
/*浜у搧绯诲垪灞曠ず*/
.product a{ padding-bottom:40px;}

.footer{height:154px; width:952px; margin-top:25px}
.footer_left{width:173px; height:153px;float:left; }
.footer_left input{ background:#282828; width:147px; height:24px;}
.footer_left .mail{float:right;}

.footer_middle{  float:left; width:640px;}
.footer_first {width:480px;}
.footer_first a{ float:left; width:80px; border-right:1px solid #FFF;color:#FFF;}
.footer_first span{  margin-left:14px;color:#FFF;}
.footer_vip{ float:left;}
.footer_vip a{ padding-left:15px; float:left;}
.footer_vip span{ color:#FFF;}
.footer_vip img{float:right;}

.footer_phone {width:480px; text-align: center; height:12px; padding-top:14px;} 
.footer_phone {margin-top:10px;}
.footer_copyright p{ padding-top:24px; text-align:center;}
.footer_right{ float:right;}

StudentDAO.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
package exp4.dao;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
 
 
public class StudentDAO {
    //链接数据库
    public Connection getConnection(){
    	    // 数据库连接对象
            Connection conn = null;
            //JDBC驱动
            String driverName="com.mysql.jdbc.Driver";
            // 数据库连接地址
            String connectionString="jdbc:mysql://localhost:3306/test?"+"user=root&password=Xyt123456&useUnicode=true&characterEncoding=utf-8";
            try{
            	//加载驱动
                Class.forName(driverName);
              //通过DriverManager类的getConenction方法指定三个参数,连接数据库
                conn=DriverManager.getConnection(connectionString);
                //conn.close();
            }catch(ClassNotFoundException e){
                e.printStackTrace();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return conn;
    }
    //用户登录
    public StudentPO doLogin(String username,String userpwd) throws SQLException{
       //定义SQL语句
    	String sql="select * from test where loginname=? and loginpwd=?";
        //获取连接
        Connection conn = getConnection();
        
        PreparedStatement ps = null;  //向数据库中发送数据集
        ResultSet rs = null;          //接受返回的数据集对象-结果集
        StudentPO sp = null;          //将传回的行封装为列对象
        try {
            ps=conn.prepareStatement(sql);//  创建一个Statement对象
            ps.setString(1, username); //向sql语句的问号添加数据
            ps.setString(2, userpwd);
            //返回结果集
            rs = ps.executeQuery();
            /*用Connection接口的createStatement()方法获得Statement对象传递Sql语句
             * 用它的ExecuteQuery()方法获取单个ResultSet对象.
             * String Sql = "select * from login";
             *stt = conn.createStatement();
             *set = stt.executeQuery(Sql);
            */
            
            //获取数据，遍历结果集，将数据封装到集合中
            while(rs.next()){
                sp = new StudentPO();
                sp.setUserName(rs.getString("loginname"));/*********/
                sp.setUserPwd(rs.getString("loginpwd"));    
            }
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
//            rs.close();
            ps.close();
             conn.close();
        }
        
        return sp;
    }
    
    public int executeNonQuery(String sql,Object[]args) throws SQLException{
        Connection conn = getConnection();
        PreparedStatement ps=null;
        int result=0;
        try {
            ps = conn.prepareStatement(sql);
            
            if(args!=null){
                for(int i=0;i<args.length;i++){
                    System.err.println("2T   "+args[i]);
                    ps.setObject(i+1, args[i]);
                }
            }
            result=ps.executeUpdate();//返回执行成功的记录的条数 int
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            ps.close();
            conn.close();
        }
        return result;
    }
    //用户注册
    public int add(String name,String loginpwd) throws SQLException{
        String sql="insert into test (loginname,loginpwd) values(?,?)";
        
        Object[] args={name,loginpwd};
        for(int i=0;i<1;i++)
        System.err.println("1T   "+args[i]);
        int result=executeNonQuery(sql, args);
        
        return result;
    }
    
    //封装数据集
    public List<StudentPO> queryAllStudent() throws SQLException{
        String sql="select * from test";
        Connection conn = getConnection();
        
        PreparedStatement ps = null;
        ResultSet rs = null;
        List<StudentPO> list = new ArrayList<StudentPO>();
        try {
            ps=conn.prepareStatement(sql);
            
            rs = ps.executeQuery();
            //遍历结果集，将数据封装到集合中
            
            while(rs.next()){
                String username = rs.getString("loginname");
                String userpwd = rs.getString("loginpwd");
            
                
                StudentPO sp = new StudentPO();
                sp.setUserName(username);
                sp.setUserPwd(userpwd);
                
                list.add(sp);
            }
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            rs.close();
            ps.close();
            conn.close();
        }
        
        return list;
    }
    //注册检索
    public List<StudentPO> queryStudentById(String username) throws SQLException{
        String sql="select * from test where loginname="+username;
        Connection conn = getConnection();
        
        PreparedStatement ps = null;
        ResultSet rs = null;
        List<StudentPO> list = new ArrayList<StudentPO>();
        try {
            ps=conn.prepareStatement(sql);
            
            rs = ps.executeQuery();
            //遍历结果集，将数据封装到集合中
            
            while(rs.next()){
                String usernames = rs.getString("loginname");
                String userpwd = rs.getString("loginpwd");
                
                StudentPO sp = new StudentPO();
                sp.setUserName(usernames);
                sp.setUserPwd(userpwd);
                
                list.add(sp);
            }
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            rs.close();
            ps.close();
            conn.close();
        }
        return list;
    }
}

StudentPO.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package exp4.dao;
 
public class StudentPO {
    private String userName;
    private String userPwd;
    public String getUserPwd() {
        return userPwd;
    }
    public void setUserPwd(String userpwd) {
        this.userPwd = userpwd;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    
}

EncodingFliter.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
package exp4.servlet;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Map;
 
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;
import javax.servlet.http.HttpServletResponse;
/**
 * 统一编码
 * @author zyh
 *
 */
public class EncodingFilter implements Filter {
 
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		// TODO Auto-generated method stub
 
	}
 
	@Override
	public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
		//1.强转
		HttpServletRequest request=(HttpServletRequest) req;
		HttpServletResponse response=(HttpServletResponse) resp;
		
		//2.放行
		chain.doFilter(new MyRequest(request), response);
	}
 
	@Override
	public void destroy() {
		// TODO Auto-generated method stub
 
	}
 
}
class MyRequest extends HttpServletRequestWrapper{
	private HttpServletRequest request;
	private boolean flag=true;
	
	
	public MyRequest(HttpServletRequest request) {
		super(request);
		this.request=request;
	}
	
	@Override
	public String getParameter(String name) {  
		if(name==null || name.trim().length()==0){
			return null;
		}
		String[] values = getParameterValues(name);
		if(values==null || values.length==0){
			return null;
		}
		
		return values[0];
	}
	
	@Override
	/**
	 * hobby=[eat,drink]
	 */
	public String[] getParameterValues(String name) {
		if(name==null || name.trim().length()==0){
			return null;
		}
		Map<String, String[]> map = getParameterMap();
		if(map==null || map.size()==0){
			return null;
		}
		
		return map.get(name);
	}
	
	@Override
	/**
	 * map{ username=[tom],password=[123],hobby=[eat,drink]}
	 */
	public Map<String,String[]> getParameterMap() {  
		
		/**
		 * 首先判断请求方式
		 * 若为post  request.setchar...(utf-8)
		 * 若为get 将map中的值遍历编码就可以了
		 */
		String method = request.getMethod();
		if("post".equalsIgnoreCase(method)){
			try {
				request.setCharacterEncoding("utf-8");
				return request.getParameterMap();
			} catch (UnsupportedEncodingException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else if("get".equalsIgnoreCase(method)){
			Map<String,String[]> map = request.getParameterMap();
			if(flag){
				for (String key:map.keySet()) {
					String[] arr = map.get(key);
					//继续遍历数组
					for(int i=0;i<arr.length;i++){
						//编码
						try {
							arr[i]=new String(arr[i].getBytes("iso8859-1"),"utf-8");
						} catch (UnsupportedEncodingException e) {
							e.printStackTrace();
						}
					}
				}
				flag=false;
			}
			//需要遍历map 修改value的每一个数据的编码
			
			return map;
		}
		
		return super.getParameterMap();
	}
	
}

LoginServlet.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package exp4.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;


import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import exp4.dao.StudentDAO;
import exp4.dao.StudentPO;

public class LoginServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    	 request.setCharacterEncoding("utf-8");        
	        String username=request.getParameter("username");
	        String userpwd=request.getParameter("password");
        
        StudentDAO sd = new StudentDAO();
        try {
        	StudentPO sp=sd.doLogin(username, userpwd);;
            if(sp==null){
            	response.sendRedirect("/exp4/login.jsp?error=yes");
            }else{
                request.setAttribute("student", sp);
                request.getRequestDispatcher("/index.html").forward(request, response);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

RegisterServlet.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
package exp4.servlet;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import exp4.dao.StudentDAO;
import exp4.dao.StudentPO;
 
public class RegisterServlet extends HttpServlet{
    /*
     * HttpServlet中有两个方法需要我们自己重写
     * 需要在web.xml文件中进行注册
     */
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
    	 System.err.println("进入POST");
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        //1.接受客户端数据
        //按照客户端调教数据的name-value的形式来提取数据
        String username = req.getParameter("username");
        String userpwd=req.getParameter("userpwd");
        //2.使用JDBC，将数据添加到数据库中
        StudentDAO sd = new StudentDAO();
        //3.HttpServletResponse对象
        //将HTML代码以数据流的形式响应给客户端
        //客户端使用IE浏览器来解析响应的HTML数据流
        
        //获得一个输出流对象
//        PrintWriter out = resp.getWriter();
//        
//        out.println("<html>");
//        out.println("<head>");
//        out.println("<meta http-equiv='content-type' content='text/html; charset=UTF-8'>");
//        out.println("</head>");
//        out.println("<body>");
        
        
        try {
        	System.out.print("username:"+username);
        	List<StudentPO> list=sd.queryStudentById(username);
        	System.out.print("list:"+list);
        	
            int result=sd.add(username,userpwd);
            System.err.println(result);
            if(list !=null && !list.isEmpty()) {
            	resp.sendRedirect("/exp4/register.jsp?error=yes");
                System.out.println("添加失败2");
            }else{
            	if(result>0){
                    //1.站内跳转,请求转发
                    //只能转发网站内部的资源
                    //转发的是同一个请求和响应对象
                    req.getRequestDispatcher("/login.jsp").forward(req, resp);
                    
                    //2.重定向跳转
                    //可以请求外部资源
                    //由于是客户端重新发起的请求，所以请求和响应对象不是同一个
                    //resp.sendRedirect("/webDemo/success.jsp");
                    
                    //out.println("添加成功");
                    }
                	else{
                    	resp.sendRedirect("/exp4/register.jsp?error=yes");
                    	System.out.println("添加失败1");
                    }
            }
        } catch (SQLException e) {
        	resp.sendRedirect("/exp4/register.jsp?error=yes");
        	System.out.println("添加失败3");
        }
    }
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);
    }
    
}

实验心得

这次实验花费的时间很长，主要是把实验一的登录注册尽可能做的完整，通过jsp调用servlet，servlet返回参数，以及onsubmit参数使提交表单前进行输入框的检测等，通过fliter对全局url的统一编码过滤。总之这次实验学到了很多。也开始感受到了java的魅力（以前一直用的python）

本文使用 CC BY-NC-SA 3.0 中国大陆 协议许可
具体请参见 知识共享协议
本文链接：https://zyhang8.github.io/2019/11/16/javaweb-exp4/