JSP 实现登录注册功能

JSP Model2案例

一、案例分析

JSP Model2 模型是一种 MVC 模式。由于 MVC 模式中的功能模块相互独立,并且使用该模式的软件具有极高飞可维护性、可拓展性和可复用性,因此,使用 MVC 开发模式的 Web 应用越来越受欢迎。接下来,按照 JSP Model2 的模型思想编写一个用户注册的程序,该程序中包含

两个 JSP 页面 register.jsp 和 logSuccess.jsp

一个 Servlet 类 ControllerServlet.java

两个 JavaBean 类 RegisterFormBean.java 和 Userbean.java

一个访问数据库的辅助类 DbUtil.java

 

关于各个程序组建的功能和相互之间工作关系如下所示:

(1) UserBean 是代表用户信息的 JavaBean,ControllerServlet 根据用户注册信息创建出一个 UserBean 对象中提取用户信息进行显示。

(2) RegisterFormBean 是封装注册表单信息的的 JavaBean,其内部定义的方法用于对从 ControllerServlet 中获取到的注册表单信息中的各个属性(也就是注册表单内的各个字段中所填写的数据)进行校验。

(3) DbUtil 是用于访问数据库的辅助类,它相当于一个 DAO (数据访问对象),在 DbUtil 类中封装一个 HashMap 对象来模拟数据库,HashMap 对象中的每一个元素即一个 UserBean 对象。

(4) ControllerServlet 是控制器,它负责处理用户的注册请求。如果注册成功,就会跳到 loginSuccess.jsp 页面;如果注册失败,重新跳回到 register.jsp 页面并显示错误信息。

(5) register.jsp 是显示用户注册表单的页面,它将注册请求的提交给 ControllerServlet 程序处理。

(6) loginSuccess.jsp 是用户登录成功后进入的页面,新注册成功的用户自动完成登录,直接进入 loginSuccess.jsp 页面

 

二、案例实现

1、编写 UserBean 类

  1. package com.liuyanzhao;
  2. /*
  3.  * @author LiuYanzhao
  4.  */
  5. public class UserBean {
  6.     private String name;
  7.     private String password;
  8.     private String email;
  9.     public String getName() {
  10.         return name;
  11.     }
  12.     public void setName(String name) {
  13.         this.name = name;
  14.     }
  15.     public String getPassword() {
  16.         return password;
  17.     }
  18.     public void setPassword(String password) {
  19.         this.password = password;
  20.     }
  21.     public String getEmail() {
  22.         return email;
  23.     }
  24.     public void setEmail(String email) {
  25.         this.email = email;
  26.     }
  27. }

2、编写 RegisterFormBean 类

  1. package com.liuyanzhao;
  2. import java.util.HashMap;
  3. import java.util.Map;
  4. /*
  5.  * @author LiuYanzhao
  6.  */
  7. public class RegisterFormBean {
  8.     private String name;
  9.     private String password;
  10.     private String password2;
  11.     private String email;
  12.     private Map<String, String> errors = new HashMap<String,String>();
  13.     public String getName() {
  14.         return name;
  15.     }
  16.     public void setName(String name) {
  17.         this.name = name;
  18.     }
  19.     public String getPassword() {
  20.         return password;
  21.     }
  22.     public void setPassword(String password) {
  23.         this.password = password;
  24.     }
  25.     public String getPassword2() {
  26.         return password2;
  27.     }
  28.     public void setPassword2(String password2) {
  29.         this.password2 = password2;
  30.     }
  31.     public String getEmail() {
  32.         return email;
  33.     }
  34.     public void setEmail(String email) {
  35.         this.email = email;
  36.     }
  37.     public void setErrors(Map<String, String> errors) {
  38.         this.errors = errors;
  39.     }
  40.     public boolean validate() {
  41.         boolean flag = true;
  42.         if(name == null || name.trim().equals("")) {
  43.             errors.put("name""请输入姓名");
  44.             flag = false;
  45.         }
  46.         if(password == null || password.trim().equals("")) {
  47.             errors.put("password""请输入密码");
  48.             flag = false;
  49.         } else if(password.length() > 12 || password.length() < 6) {
  50.             errors.put("password""请输入 6-12 个字符");
  51.             flag = false;
  52.         }
  53.         if(password != null && !password.equals(password2)) {
  54.             errors.put("password2""两次输入的密码不匹配");
  55.             flag = false;
  56.         }
  57.         if(email == null || email.trim().equals("")) {
  58.             errors.put("email""请输入邮箱");
  59.             flag = false;
  60.         } else if(!email.matches("[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9]+)+")) {
  61.             errors.put("email""邮箱格式错误");
  62.             flag = false;
  63.         }
  64.         return flag;
  65.     }
  66.     //向 Map 集合 error 中添加错误信息
  67.     public void setErrorMsg(String err,String errMsg) {
  68.         if((err != null) && (errMsg != null)) {
  69.             errors.put(err, errMsg);
  70.         }
  71.     }
  72.     //获取 errors 集合
  73.     public Map<String, String> getErrors() {
  74.         return errors;
  75.     }
  76. }

3、编写 DBUtil 类

  1. package com.liuyanzhao;
  2. import java.util.HashMap;
  3. /*
  4.  * @author LiuYanzhao
  5.  */
  6. public class DBUtil {
  7.     //单例模式
  8.     private static DBUtil instance = new DBUtil();
  9.     private HashMap<String,UserBean> users = new HashMap<String,UserBean>();
  10.     private DBUtil() {
  11.         //向数据库(users)中存入两条数据
  12.         UserBean user1 = new UserBean();
  13.         user1.setName("Tom");
  14.         user1.setPassword("123456");
  15.         user1.setEmail("tom@gmail.com");
  16.         users.put("Tom", user1);
  17.         UserBean user2 = new UserBean();
  18.         user2.setName("jerry");
  19.         user2.setPassword("666666");
  20.         user2.setEmail("jerry@gmail.com");
  21.         users.put("jerry", user2);
  22.     }
  23.     public static DBUtil getInstance() {
  24.         return instance;
  25.     }
  26.     //获取数据库中(users)
  27.     public UserBean getUser(String userName) {
  28.         UserBean user = (UserBean)users.get(userName);
  29.         return user;
  30.     }
  31.     //向数据库(users)插入数据
  32.     public boolean insertUser(UserBean user) {
  33.         if(user == null) {
  34.             return false;
  35.         }
  36.         String userName = user.getName();
  37.         if(users.get(userName) != null) {
  38.             return false;
  39.         }
  40.         users.put(userName, user);
  41.         return true;
  42.     }
  43. }

4、编写 ControllerServlet 类

  1. package com.liuyanzhao;
  2. import java.io.IOException;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. /*
  8.  * @author LiuYanzhao
  9.  */
  10. public class ControllerServlet extends HttpServlet{
  11.     @Override
  12.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  13.         // TODO Auto-generated method stub
  14.         this.doPost(request, response);
  15.     }
  16.     @Override
  17.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  18.         //防止中文乱码
  19.         response.setContentType("text/html;charset=UTF-8");
  20.         String name = request.getParameter("name");
  21.         String password = request.getParameter("password");
  22.         String password2 = request.getParameter("password2");
  23.         String email = request.getParameter("email");
  24.         RegisterFormBean formBean = new RegisterFormBean();
  25.         formBean.setName(name);
  26.         formBean.setPassword(password);
  27.         formBean.setPassword2(password2);
  28.         formBean.setEmail(email);
  29.         if(!formBean.validate()) {
  30.             request.setAttribute("formBean", formBean);
  31.             request.getRequestDispatcher("/register.jsp").forward(request, response);
  32.             return;
  33.         }
  34.         UserBean userBean = new UserBean();
  35.         userBean.setName(name);
  36.         userBean.setPassword(password);
  37.         userBean.setEmail(email);
  38.         boolean b = DBUtil.getInstance().insertUser(userBean);
  39.         if(!b) {
  40.             request.setAttribute("DBMes""你注册的用户已存在");
  41.             request.setAttribute("formBean", formBean);
  42.             request.getRequestDispatcher("/register.jsp").forward(request, response);
  43.             return;
  44.         }
  45.         response.getWriter().print("恭喜你注册成功,3秒钟自动跳转");
  46.         request.getSession().setAttribute("userBean", userBean);
  47.         response.setHeader("refresh","3;url=loginSuccess.jsp");
  48.     }
  49. }

5、在 web.xml 添加映射

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <web-app xmlns="http://java.sun.com/xml/ns/javaee"
  3.   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  5.                       http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  6.   version="3.0"
  7.   metadata-complete="true">
  8.     <servlet>
  9.         <servlet-name>ControllerServlet</servlet-name>
  10.         <servlet-class>com.liuyanzhao.ControllerServlet</servlet-class>
  11.     </servlet>
  12.     <servlet-mapping>
  13.         <!-- 映射为 ControllerServlet -->
  14.         <servlet-name>ControllerServlet</servlet-name>
  15.         <url-pattern>/ControllerServlet</url-pattern>
  16.     </servlet-mapping>
  17. </web-app>

6、编写 register.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <title>用户注册</title>
  8.     <style>
  9.         h3 {
  10.             margin-left:100px;
  11.         }
  12.         #outer {
  13.             width:750px;
  14.         }
  15.         span {
  16.             color:#ff0000;
  17.         }
  18.         div {
  19.             height:20px;
  20.             margin-bottom:10px;
  21.         }
  22.         .ch {
  23.             width:80px;
  24.             text-align:right;
  25.             float:left;
  26.             padding-right:5px;
  27.         }
  28.         .ip {
  29.             width:500px;
  30.             float:left;
  31.         }
  32.         .ip > input {
  33.             margin-right:20px;
  34.         }
  35.         #bt {
  36.             margin-left:50px;
  37.         }
  38.         #bt > input {
  39.             margin-right:30px;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <form action="ControllerServlet" method="post">
  45.         <h3>用户注册</h3>
  46.         <div id="outer">
  47.             <div>
  48.                 <div class="ch">姓名:</div>
  49.                 <div class="ip">
  50.                     <input type="text" name="name" value="${formBean.name}" />
  51.                     <span>${formBean.errors.name}${DBMes}</span>
  52.                 </div>
  53.             </div>
  54.             <div>
  55.                 <div class="ch">密码:</div>
  56.                 <div class="ip">
  57.                     <input type="text" name="password" />
  58.                     <span>${formBean.errors.password} </span>
  59.                 </div>
  60.             </div>
  61.             <div>
  62.                 <div class="ch">确认密码:</div>
  63.                 <div class="ip">
  64.                     <input type="text" name="password2" />
  65.                     <span>${formBean.errors.password2} </span>
  66.                 </div>
  67.             </div>
  68.             <div>
  69.                 <div class="ch">邮箱:</div>
  70.                 <div class="ip">
  71.                     <input type="text" name="email" value="${formBean.email}" />
  72.                     <span>${formBean.errors.email}</span>
  73.                 </div>
  74.             </div>
  75.             <div id="bt">
  76.                 <input type="reset" value="重置" />
  77.                 <input type="submit" value="注册" />
  78.             </div>
  79.         </div>
  80.     </form>
  81. </body>
  82. </html>

7、编写 loginSuccess.jsp 类

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>登录成功</title>
  8. </head>
  9. <body>
  10.     <%
  11.         if(session.getAttribute("userBean") == null) {
  12.     %>
  13.     <jsp:forward page="register.jsp" />
  14.     <%
  15.             return;
  16.         }
  17.     %>
  18.     <jsp:useBean id="userBean" class="com.liuyanzhao.UserBean" scope="session" />
  19.     <div id="main">
  20.         <div id="welcome">恭喜你,登录成功</div>
  21.         <hr />
  22.         <h3>你的信息</h3>
  23.         <div>
  24.             <ul>
  25.                <li>您的姓名:${userBean.name} </li>
  26.                <li>您的邮箱:${userBean.email} </li>
  27.             </ul>
  28.         </div>
  29.     </div>
  30. </body>
  31. </html>

 

三、运行程序

启动 Tomcat 服务器

1、在地址栏输入 http://localhost:8080/JspModel2Demo/register.jsp

可以看到如下图所示

JSP 实现登录注册功能

2、测试 未填

JSP 实现登录注册功能JSP 实现登录注册功能

 

3、测试两次密码不一致

JSP 实现登录注册功能JSP 实现登录注册功能

 

4、测试 账号已存在

JSP 实现登录注册功能

JSP 实现登录注册功能

 

 

5、在地址栏输入 http://localhost:8080/JspModel2Demo/loginSuccess.jsp

直接访问登录成功页面,因为我们的 loginSuccess.jsp 里判断了是否有 session,如果没有的话,会转发 register.jsp 里的内容,如图

JSP 实现登录注册功能

 

6、如果输入正确的话

JSP 实现登录注册功能

点击注册按钮,可以看到如下页面

JSP 实现登录注册功能

3秒钟后出现如下页面

JSP 实现登录注册功能

 

 

本文链接:https://liuyanzhao.com/5198.html

 

  • 微信
  • 赶快加我聊天吧
  • weinxin
  • 博客交流群
  • 海纳百川,大家来水
  • weinxin
言曌

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: