您的位置：首页 > Web前端 > JavaScript

JSP 实现登录注册功能

2017-10-29 22:44 316 查看

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 类

package com.liuyanzhao;

/*
* @author LiuYanzhao
*/
public class UserBean {
    private String name;
    private String password;
    private String email;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }

}

2、编写 RegisterFormBean 类

package com.liuyanzhao;

import java.util.HashMap;
import java.util.Map;

/*
* @author LiuYanzhao
*/
public class RegisterFormBean {
    private String name;
    private String password;
    private String password2;
    private String email;
    private Map<String, String> errors = new HashMap<String,String>();

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getPassword2() {
        return password2;
    }

    public void setPassword2(String password2) {
        this.password2 = password2;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public void setErrors(Map<String, String> errors) {
        this.errors = errors;
    }

    public boolean validate() {
        boolean flag = true;
        if(name == null || name.trim().equals("")) {
            errors.put("name", "请输入姓名");
            flag = false;
        }

        if(password == null || password.trim().equals("")) {
            errors.put("password", "请输入密码");
            flag = false;
        } else if(password.length() > 12 || password.length() < 6) {
            errors.put("password", "请输入 6-12 个字符");
            flag = false;
        }
        if(password != null && !password.equals(password2)) {
            errors.put("password2", "两次输入的密码不匹配");
            flag = false;
        }

        if(email == null || email.trim().equals("")) {
            errors.put("email", "请输入邮箱");
            flag = false;
        } else if(!email.matches("[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9]+)+")) {
            errors.put("email", "邮箱格式错误");
            flag = false;
        }

        return flag;
    }

    //向 Map 集合 error 中添加错误信息
    public void setErrorMsg(String err,String errMsg) {
        if((err != null) && (errMsg != null)) {
            errors.put(err, errMsg);
        }
    }

    //获取 errors 集合
    public Map<String, String> getErrors() {
        return errors;
    }

}

3、编写 DBUtil 类

package com.liuyanzhao;

import java.util.HashMap;

/*
* @author LiuYanzhao
*/
public class DBUtil {
    //单例模式
    private static DBUtil instance = new DBUtil();
    private HashMap<String,UserBean> users = new HashMap<String,UserBean>();
    private DBUtil() {
        //向数据库(users)中存入两条数据
        UserBean user1 = new UserBean();
        user1.setName("Tom");
        user1.setPassword("123456");
        user1.setEmail("tom@gmail.com");
        users.put("Tom", user1);

        UserBean user2 = new UserBean();
        user2.setName("jerry");
        user2.setPassword("666666");
        user2.setEmail("jerry@gmail.com");
        users.put("jerry", user2);
    }

    public static DBUtil getInstance() {
        return instance;
    }

    //获取数据库中(users)
    public UserBean getUser(String userName) {
        UserBean user = (UserBean)users.get(userName);
        return user;
    }

    //向数据库(users)插入数据
    public boolean insertUser(UserBean user) {
        if(user == null) {
            return false;
        }
        String userName = user.getName();
        if(users.get(userName) != null) {
            return false;
        }
        users.put(userName, user);
        return true;
    }
}

4、编写 ControllerServlet 类

package com.liuyanzhao;

import java.io.IOException;

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

/*
* @author LiuYanzhao
*/
public class ControllerServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //防止中文乱码
        response.setContentType("text/html;charset=UTF-8");
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        String password2 = request.getParameter("password2");
        String email = request.getParameter("email");
        RegisterFormBean formBean = new RegisterFormBean();
        formBean.setName(name);
        formBean.setPassword(password);
        formBean.setPassword2(password2);
        formBean.setEmail(email);
        if(!formBean.validate()) {
            request.setAttribute("formBean", formBean);
            request.getRequestDispatcher("/register.jsp").forward(request, response);
            return;
        }
        UserBean userBean = new UserBean();
        userBean.setName(name);
        userBean.setPassword(password);
        userBean.setEmail(email);
        boolean b = DBUtil.getInstance().insertUser(userBean);
        if(!b) {
            request.setAttribute("DBMes", "你注册的用户已存在");
            request.setAttribute("formBean", formBean);
            request.getRequestDispatcher("/register.jsp").forward(request, response);
            return;
        }
        response.getWriter().print("恭喜你注册成功,3秒钟自动跳转");
        request.getSession().setAttribute("userBean", userBean);
        response.setHeader("refresh","3;url=loginSuccess.jsp");
    }
}

5、在 web.xml 添加映射

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

    <servlet>
        <servlet-name>ControllerServlet</servlet-name>
        <servlet-class>com.liuyanzhao.ControllerServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        
        <servlet-name>ControllerServlet</servlet-name>
        <url-pattern>/ControllerServlet</url-pattern>
    </servlet-mapping>

</web-app>

6、编写 register.jsp

<%@ 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>
    <style>
        h3 {
            margin-left:100px;
        }
        #outer {
            width:750px;
        }
        span {
            color:#ff0000;
        }
        div {
            height:20px;
            margin-bottom:10px;
        }
        .ch {
            width:80px;
            text-align:right;
            float:left;
            padding-right:5px;
        }
        .ip {
            width:500px;
            float:left;
        }
        .ip > input {
            margin-right:20px;
        }
        #bt {
            margin-left:50px;
        }
        #bt > input {
            margin-right:30px;
        }

    </style>
</head>
<body>
    <form action="ControllerServlet" method="post">
        <h3>用户注册</h3>
        <div id="outer">
            <div>
                <div class="ch">姓名:</div>
                <div class="ip">
                    <input type="text" name="name" value="${formBean.name}" />
                    <span>${formBean.errors.name}${DBMes}</span>
                </div>
            </div>
            <div>
                <div class="ch">密码:</div>
                <div class="ip">
                    <input type="text" name="password" />
                    <span>${formBean.errors.password} </span>
                </div>
            </div>
            <div>
                <div class="ch">确认密码:</div>
                <div class="ip">
                    <input type="text" name="password2" />
                    <span>${formBean.errors.password2} </span>
                </div>
            </div>
            <div>
                <div class="ch">邮箱:</div>
                <div class="ip">
                    <input type="text" name="email" value="${formBean.email}" />
                    <span>${formBean.errors.email}</span>
                </div>
            </div>
            <div id="bt">
                <input type="reset" value="重置" />
                <input type="submit" value="注册" />
            </div>
        </div>
    </form>
</body>
</html>

7、编写 loginSuccess.jsp 类

<%@ 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>
    <%
        if(session.getAttribute("userBean") == null) {
    %>
    <jsp:forward page="register.jsp" />
    <%
            return;
        }
    %>
    <jsp:useBean id="userBean" class="com.liuyanzhao.UserBean" scope="session" />
    <div id="main">
        <div id="welcome">恭喜你，登录成功</div>
        <hr />
        <h3>你的信息</h3>
        <div>
            <ul>
               <li>您的姓名：${userBean.name} </li>
               <li>您的邮箱：${userBean.email} </li>
            </ul>
        </div>
    </div>
</body>
</html>