采用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; }} |
