采用Java Web所实现的MVC结构图如下,其中控制器部分采用Servlet来实现,模型部分采用JavaBean来实现,而大部分的视图采用Jsp页面来实现。
思想基础
JSP+JavaBean两层结构工作原理应该是比较熟悉的,也比较好理解。
但是有一点必须要清楚就是用户通过浏览器来发送网页的请求,此请求到达服务器后在服务器端查找对应的网页,如果是首次请求(第二次就不用解释执行了),对于JSP来说要生成Servlet,然后通过Servlet引擎来执行 Servlet,把调用JavaBean的结果嵌入到页面中返回给用户的浏览器。
JSP+JavaBean+Servlet三层结构的实质是多了一个Controller:Servlet来分发客户端浏览器的请求。如果把起控制器作用的Servlet的作用理解为对客户端的请求进行预处理对理解Servlet将有很大的帮助。通过web.xml配置文件可以找到用户请求和特定的 Servlet的对应关系,每个Servlet都有一个特定的Servlet对象与之对应,所以说处理用户请求的就是一个继承自HttpServlet的 Servlet对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
﹤!-- JSPC servlet mappings start --﹥
﹤servlet﹥
﹤servlet-name﹥ms1﹤/servlet-name﹥
﹤servlet- class ﹥news.FirstAction﹤/servlet- class ﹥
﹤/servlet﹥
﹤servlet﹥
﹤servlet-name﹥ms2﹤/servlet-name﹥
﹤servlet- class ﹥news.DetailAction﹤/servlet- class ﹥
﹤/servlet﹥
﹤!-- JSPC servlet mappings end --﹥
﹤servlet-mapping﹥
﹤servlet-name﹥ms1﹤/servlet-name﹥
﹤url-pattern﹥/newsmain﹤/url-pattern﹥
﹤/servlet-mapping﹥
﹤servlet-mapping﹥
﹤servlet-name﹥ms2﹤/servlet-name﹥
﹤url-pattern﹥/newsDetail﹤/url-pattern﹥
﹤/servlet-mapping﹥
|
如上面所示的摘自web.xml的一段配置servlet,第一部分主要用来配置 Servlet与具体的Servlet对象关联,第二部分主要用来配置请求由哪个Servlet处理,Servlet名字的关联,处理请求就与具体 Servlet处理对象关联起来,比如说,客户端浏览器发来/newsmain的请求,它由ms1 servlet进行处理,通过ms1就能找到相对应的serlet对象news.FirstAction,即 /newsmain-﹥ms1-﹥news.FirstAction,这也就是配置文件的意义所在。到现在懂得了用户/newsmain请求会被news.FirstAction类的对象进行处理,所以说,要看懂程序就要看懂FirstAction的作用是什么就行了。比如说下面是 FirstAction的一个实现。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
public final class FirstAction extends HttpServlet {
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
DB db = new DB();
HttpSession session = req.getSession();
try {
session.setAttribute(Constants.NEWS_LIST_KEY, News
.SearchNewsTitle(db));
} catch (Exception e) {
e.printStackTrace();
}
db.close();
String target = "/P43_News/newsMain.jsp" ;
resp.sendRedirect(target);
}
}
|
通过这个实现可以看到,当服务器收到客户端请求执行 News.SearchNewsTitle(db)的操作,然后把返回值通过session.setAttribute放到session里,然后通过 resp.sendRedirect(target)间接转移到newsMain.jsp,这样在newsMain.jsp里通过 session.getAttribute函数就可以得到在存储在session里的对应值。
回过头来就容易看出JSP+JavaBean工作原理和JSP+JavaBean+Servlet工作原理的不同了,两层结构必须把预处理放在JSP中进行,比如说 News.SearchNewsTitle(db),三层结构先把预处理在Servlet里进行了,然后相当于把这个处理结果通过Session返回给 JSP,让JSP更关注于界面的显示。
登陆注册模块需求
1 注册
1.1 用户的注册表单(用户名,密码,邮箱,昵称,验证码)
1.2 提交注册:要做(用户名,密码,邮箱,昵称,验证码)的校验。
1.2.1 用户名,密码,邮箱,昵称是在客户端浏览器完成的,通过JS来实现。
1.2.2 验证码的是要在服务器端的程序完成的。
2.如果注册表单的校验通过, 那么就进行业务逻辑的判断。
2.1 如果用户已经存在, 告诉用户错误信息。
2.2 如果邮箱已经存在, 告诉用户错误信息。
2.3 如果都不存在 .则进行第3步。
3. 将用户的信息 保存到数据库中
4. 注册 成功, 跳转到 登录 页面
5. 登陆
5.1 将用户的登陆信息发送到后台进行验证
5.2 如果验证成功,则跳转到首页
5.3 如果跳转失败,则跳转到登陆页面,并提示错误信息。
项目目录结构
项目的源码分成四个包文件,分别用来存取模型,视图,控制器和工具类,具体文件如下:
对于视图,我们定义三个JSP页面,如下所示:
定义视图
login.jsp页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<%@ page language= "java" contentType= "text/html; charset=UTF-8"
pageEncoding= "UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<title>登录的表单</title>
</head>
<body>
<font color= "red" >${message }</font>
<a href= "regist.jsp" >注册新账号</a>
<form action= "${pageContext.request.contextPath }/login" method= "post" >
用户名:<input type= "text" name= "username" ><br/>
密码:<input type= "password" name= "password" ><br/>
<input type= "submit" value= "登录" >
</form>
</body>
</html>
|
index.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
|
<%@ page language= "java" contentType= "text/html; charset=UTF-8"
pageEncoding= "UTF-8" %>
<%@ taglib uri= "http://java.sun.com/jsp/jstl/core" prefix= "c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<title>Insert title here</title>
</head>
<body>
<font color= "red" >${message }</font>
<%
if (request.getSession().getAttribute( "username" )== null )
{
response.sendRedirect( "login.jsp" );
}
else {
%>
<font color= "red" > "欢迎您:" <%=request.getSession().getAttribute( "username" ).toString() %></font>
<%
}
%>
</body>
</html>
|
regist.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" contentType= "text/html; charset=UTF-8"
pageEncoding= "UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<title>用户注册的表单</title>
<script type= "text/javascript" >
function changeImage(){
document.getElementById( "image" ).src= "${pageContext.request.contextPath }/checkimage?" + new Date().getTime()
}
function validateForm(){
// 做 用户名 , 密码, 邮箱, 昵称的校验
var username= document.getElementById( "username" ).value;
if (username== "" ){
alert( "用户名 不能为空" );
return false ;
}
var password= document.getElementById( "password" ).value;
if (password== "" ){
alert( "密码 不能为空" );
return false ;
}
var repassword= document.getElementById( "repassword" ).value;
if (password!=repassword){
alert( "密码 必须 一致 " );
return false ;
}
var nickname= document.getElementById( "nickname" ).value;
if (nickname== "" ){
alert( "昵称 不能为空" );
return false ;
}
// ^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$
var email= document.getElementById( "email" ).value;
if (email.match( "^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$" )== null ){
alert( "邮箱地址 不正确 " );
return false ;
}
}
</script>
</head>
<body>
<h3>用户注册的表</h3>
<font color= "red" >${message }</font>
<form action= "${pageContext.request.contextPath }/regist" onsubmit= "return validateForm();" method= "post" >
<table border= "1" >
<tr>
<td>用户名</td>
<td>
<input type= "text" name= "username" id= "username1" v>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type= "password" name= "password" id= "password" >
</td>
</tr>
<tr>
<td>请确认密码</td>
<td>
<input type= "password" name= "repassword" id= "repassword" >
</td>
</tr>
<tr>
<td>昵称</td>
<td>
<input type= "text" name= "nickname" id= "nickname" >
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type= "text" name= "email" id= "email" >
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type= "text" name= "checkcode" >
<img src= "${pageContext.request.contextPath }/checkimage"
style= "cursor: pointer;" id= "image" onclick= "changeImage();" >
</td>
</tr>
<tr>
<td></td>
<td>
<input type= "submit" value= "注册" >
</td>
</tr>
</table>
</form>
</body>
</html>
|
定义模型
User模型:
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
|
package com.vs2022.model;
public class User {
private String username;
private String password;
private String nickname;
private String email;
// alt+shft+ s // 弹出 覆盖 方法的 对话框 。
public String getUsername() {
return username;
}
public void setUsername(String username) {
this .username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this .password = password;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this .nickname = nickname;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this .email = email;
}
}
|
UserOperation模型
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
|
package com.vs2022.model;
import com.vs2022.utils.DBUtil;
public class UserOperation {
public final static int USERNAMEEXIST= 1 ;
public final static int EMAILEXIST= 2 ;
public final static int SUCCESS= 3 ;
public final static int FAIL= 4 ;
public int regist(User user){
DBUtil db = new DBUtil();
if (db.serchUserName(user.getUsername())){
// 说明 用户名 已经存在了
return USERNAMEEXIST;
}
if (db.serchEmail(user.getEmail())){
// 说明邮箱已经存在
return EMAILEXIST;
}
// 如果 走到 这里, 则说明 ,邮箱 用户名都不存咋, 那么 就让其注册 . 添加 到数据库中
db.updateUser(user);
return SUCCESS;
}
public int login(User user) {
DBUtil db = new DBUtil();
if (db.loginSuccess(user.getUsername(), user.getPassword())){
// 说明 找到 了用户 名 和密码 都正确的
return SUCCESS;
}
return FAIL;
}
}
|
CheckCode模型
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
|
package com.vs2022.model;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Hashtable;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class CheckCode {
private String getRandomString() {
int ranNum = ( int ) (Math.random() * 9000 ) + 1000 ;
return ranNum + "" ;
}
public void getCode( int width, int height, HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
// 在内存中创建图象
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g=image.getGraphics(); //创建Graphics对象,其作用相当于画笔
g.setColor(Color.getColor( "F8F8F8" ));
g.fillRect( 0 , 0 , width, height); //绘制背景
Font mfont= new Font( "楷体" ,Font.BOLD, 16 ); //定义字体样式
g.setFont(mfont); //设置字体
g.setColor(Color.RED);
//生成随机数
String rans=getRandomString();
//将随机数写入会话
HttpSession session = request.getSession();
session.setAttribute( "check" , rans);
//将随机数写入图片
g.drawString(rans, 5 , 20 );
// 图象生效
g.dispose();
//输出图像
ImageIO.write(image, "JPEG" , response.getOutputStream());
}
}
|
定义控制器
LoginServlet类
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
|
package com.vs2022.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.vs2022.model.User;
import com.vs2022.model.UserOperation;
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 完成 登录的 逻辑
String username = request.getParameter( "username" );
String password = request.getParameter( "password" );
User user = new User();
user.setUsername(username);
user.setPassword(password);
// 调用 业务功能 javabean 类 去实现 登录的 具体 业务逻辑
UserOperation us = new UserOperation();
// 返回值 ?
int i = us.login(user);
if (i== 4 ){
// 说明 登录失败 ,用户名 或 密码错误
request.setAttribute( "message" , "用户名或密码错误" );
request.getRequestDispatcher( "login.jsp" ).forward(request, response);
} else {
// 登录 成功 , 跳转到网站的 首页, 用 重定向
// 将username 存入到 session 域中
request.getSession().setAttribute( "username" , username);
response.sendRedirect( "index.jsp" );
//request.getRequestDispatcher("index.jsp").forward(request, response);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
|
RegistServlet类
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
|
package com.vs2022.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sun.org.apache.commons.beanutils.BeanUtils;
import com.vs2022.model.User;
import com.vs2022.model.UserOperation;
public class RegistServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 解决 post 方式 的乱码
request.setCharacterEncoding( "UTF-8" );
// 完成验证码的校验
String checkcode = request.getParameter( "checkcode" );
String check_code_session = (String) request.getSession().getAttribute( "check" );
if (checkcode== null ||!checkcode.equals(check_code_session)){
// 说明 验证码 输入 不正确
request.setAttribute( "message" , "验证码输入不正确" );
request.getRequestDispatcher( "regist.jsp" ).forward(request, response);
return ;
}
// 如果 走到 了 这里, 则说明 所有的 校验 都通过 ,就 要 调用 涉及 到 处理 业务逻辑 了
User user = new User();
// beanUtils 完成 数据的 封装 到 java bean 对象 中 ,apache 基金会的 一个 开源的jar的 实现。
try {
// 前提 : javabean的 字段名 必须 要 与 表单中提交 过来 的 值 的 key 一致, 否则 不能 完成 封装 .
BeanUtils.populate(user, request.getParameterMap());
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException( "对不起, 封装数据失败 " );
}
// 所以 又 会 设计 一个 新的 java bean 类来 实现 业务逻辑
UserOperation us = new UserOperation();
try {
int feedBack = us.regist(user);
if (feedBack==UserOperation.EMAILEXIST){
// 说明 邮箱 已经存在
request.setAttribute( "message" , "邮箱已经存在 " );
request.getRequestDispatcher( "regist.jsp" ).forward(request, response);
} else if (feedBack==UserOperation.USERNAMEEXIST){
// 说明 用户名已经存在
request.setAttribute( "message" , "用户名 已经存在 " );
request.getRequestDispatcher( "regist.jsp" ).forward(request, response);
} else {
// 说明 注册 成功 , 跳转到 登录 页面 . 要用 重定向
response.sendRedirect( "login.jsp" );
}
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException( "添加 失败 " );
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
|
CheckImageServlet类
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
|
package com.vs2022.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.vs2022.model.CheckCode;
public class CheckImageServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//禁用缓存,每次访问此页面,都重新生成
response.setHeader( "Pragma" , "No-cache" );
response.setHeader( "Cache-Control" , "no-cache" );
response.setDateHeader( "Expires" , 0 );
response.setContentType( "image/jpeg" );
int width= 40 ;
int height= 30 ;
//生成验证码的匿名对象,并生成验证码
new CheckCode().getCode(width,height,request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
|
定义工具类
DBUtil类
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
|
package com.vs2022.utils;
import java.sql.*;
import com.vs2022.model.User;
public class DBUtil {
boolean bInited = false ;
// 加载驱动
public void initJDBC() throws ClassNotFoundException {
// 加载MYSQL JDBC驱动程序
Class.forName( "com.mysql.jdbc.Driver" );
bInited = true ;
System.out.println( "Success loading Mysql Driver!" );
}
public Connection getConnection() throws ClassNotFoundException,
SQLException {
if (!bInited) {
initJDBC();
}
// 连接URL为 jdbc:mysql//服务器地址/数据库名
// 后面的2个参数分别是登陆用户名和密码
Connection conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/数据库" , "用户名" , "密码" );
return conn;
}
public boolean loginSuccess(String userName, String password) {
boolean returnValue = false ;
String sql = "SELECT * FROM user where username=? and password=?" ;
Connection conn = null ;
PreparedStatement ps= null ;
int i= 0 ;
try {
conn = getConnection();
ps=conn.prepareStatement(sql);
ps.setString( 1 , userName);
ps.setString( 2 , password);
ResultSet rs=ps.executeQuery();
if (rs.next()){
returnValue= true ;
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return returnValue;
}
public boolean updateUser(User user) {
boolean flag= false ;
int i= 0 ;
Connection conn= null ;
PreparedStatement ps= null ;
String sql= "insert into user (username,password,nickname,email) values(?,?,?,?)" ;
try {
conn = getConnection();
ps=conn.prepareStatement(sql);
ps.setString( 1 , user.getUsername()); //对占位符设置值,占位符顺序从1开始,第一个参数是占位符的位置,第二个参数是占位符的值。
ps.setString( 2 , user.getPassword());
ps.setString( 3 , user.getNickname());
ps.setString( 4 , user.getEmail());
i=ps.executeUpdate();
if (i> 0 ){
flag= true ;
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return flag;
}
public boolean serchUserName(String userName){
boolean returnValue = false ;
String sql = "SELECT * FROM user where username=?" ;
Connection conn = null ;
PreparedStatement ps= null ;
try {
conn = getConnection();
ps=conn.prepareStatement(sql);
ps.setString( 1 , userName);
ResultSet rs=ps.executeQuery();
if (rs.next()){
returnValue= true ;
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return returnValue;
}
public boolean serchEmail(String email){
boolean returnValue = false ;
String sql = "SELECT * FROM user where email=?" ;
Connection conn = null ;
PreparedStatement ps= null ;
int i= 0 ;
try {
conn = getConnection();
ps=conn.prepareStatement(sql);
ps.setString( 1 , email);
ResultSet rs=ps.executeQuery();
if (rs.next()){
returnValue= true ;
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return returnValue;
}
}
|