Java Web实验八:按照JSP Model2思想实现注册功能

实验八   按照JSP Model2思想实现注册功能

一、实验目的

1. 熟悉JavaBean的应用;

2. 熟悉MVC设计模式的原理,并能在实际案例中应用;

3. 熟悉JSP Model2模型。

二、实验内容

按照JSP Model2模型思想编写一个用户注册程序,浏览器的显示结果如图所示:

在上图所示的表单中填写用户信息进行注册,如果注册的信息不符合表单验证规则,那么当单击“注册”按钮后,程序会再次跳回到注册页面,提示注册信息错误。例如,用户填写注册信息时,如果两次填写的密码不一致,并且邮箱格式错误,那么当单击“注册”按钮后,页面的显示结果如下图所示:

重新填写用户信息,如果用户信息全部填写正确,当单击“注册”按钮后,页面会自动跳转到用户成功登录页面,并显示出用户信息,如下图所示:

提示实验步骤如下:

  1. 创建两个JSP页面,注册页面register.jsp和注册成功提示信息页面loginSuccess.jsp;
  2. 负责处理用户注册的请求的Servlet类ControllerServlet;
  3. 两个JavaBean类,封装注册表单信息的JavaBean类RegisterFormBean和封装用户信息的JavaBean类UserBean;
  4. 一个访问模拟数据库的辅助类DBUtil,这些组件的关系如下图所示:

三、实验源代码、运行截图

ControllerServlet.java

package xxx;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;

public class ControllerServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.sendRedirect("register.jsp");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String confirmPassword = request.getParameter("confirmPassword");
        String email = request.getParameter("email");

        if (!password.equals(confirmPassword)) {
            request.setAttribute("error", "两次输入的密码不匹配");
        } else if (!isValidEmail(email)) {
           
            request.setAttribute("error", "邮箱格式错误");
        } else {
            // 假设DBUtil是数据库操作的工具类
            // 这里只是模拟,实际开发中需要调用DBUtil来存储用户信息
            UserBean userBean = new UserBean(username, password, email);
            // 假设存储用户信息成功
            request.setAttribute("username", username);
            request.setAttribute("email", email);

            request.getRequestDispatcher("loginSuccess.jsp").forward(request, response);
        }

        request.getRequestDispatcher("register.jsp").forward(request, response);
    }

    private boolean isValidEmail(String email) {
        String emailRegex = "^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+$";
        
        return email.matches(emailRegex);
    }
}

DBUtil.java

package xxx;

public class DBUtil {
    public static void storeUser(UserBean userBean) {
        // 假设用户信息已经成功存储
        System.out.println("User stored: " + userBean.getUsername());
    }
}

RegisterFormBean.java

package xxx;

public class RegisterFormBean {
    private String username;
    private String password;
    private String confirmPassword;
    private String email;

    public RegisterFormBean(String username, String password, String confirmPassword, String email) {
        this.username = username;
        this.password = password;
        this.confirmPassword = confirmPassword;
        this.email = email;
    }

    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 getConfirmPassword() {
        return confirmPassword;
    }

    public void setConfirmPassword(String confirmPassword) {
        this.confirmPassword = confirmPassword;
    }

    public String getEmail() {
        return email;
    }

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

UserBean.java

package xxx;

public class UserBean {
    private String username;
    private String password;
    private String email;

    public UserBean(String username, String password, String email) {
        this.username = username;
        this.password = password;
        this.email = email;
    }

    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 getEmail() {
        return email;
    }

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

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <servlet>
        <servlet-name>ControllerServlet</servlet-name>
        <servlet-class>xxx.ControllerServlet</servlet-class>

    </servlet>
    <servlet-mapping>
        <servlet-name>ControllerServlet</servlet-name>
        <url-pattern>/ControllerServlet</url-pattern>
    </servlet-mapping>


</web-app>

loginSuccess.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login successful</title>
</head>
<body>
<h1>恭喜你,登录成功</h1>
您的信息<br>
<p>您的姓名:<%= request.getAttribute("username") %><br>
    您的邮箱:<%= request.getAttribute("email") %>
    </p>
</body>
</html>

register.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        section h1 {
            text-align: center;
            margin-left: 90%;
            font-size: 2em;

        }
        .form-container {
            text-align: left;
            margin-left: 40%;
            vertical-align: middle; /* 垂直居中对齐 */
            display: inline-block; /* 使标签和输入框在同一行显示 */

        }
        .form-group {
            margin-bottom: 15px; /* 每个表单组之间的间距 */
        }



        .form-group label {
            display: inline-block; /* 使得标签成为行内块级元素 */
            width: 100px; /* 标签宽度,确保对齐 */
            text-align: right; /* 文本右对齐 */
            margin-left: -50px;
            vertical-align: top; /* 与输入框顶部对齐 */
        }
        .form-group input,
        .form-group select {
            vertical-align: middle; /* 与标签垂直居中对齐 */
            margin-left: 10px; /* 左侧间距,以便与标签分隔开 */
        }




    </style>
</head>
<body>
<div class="form-container">
    <h1>用户注册</h1>
    <form action="ControllerServlet" method="post">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>
        <div class="form-group">
            <label for="confirmPassword">确认密码:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="text" id="email" name="email" placeholder="请输入邮箱" required>
        </div>



        <input type="submit" value="注册">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" value="重置">

</form>
</div>
<% if (request.getAttribute("error") != null) { %>
<p style="color: red; text-align: center;"><%= request.getAttribute("error") %></p>
<% } %>
</body>
</html>

好的,我来给你详细解答一下。 首先,按照要求在 MySQL 数据库中创建一个名为 user 的表,该表至少应该包含以下字段: - id:用户 ID,是一个自增长的整数; - username:用户名,是一个字符串; - password:密码,是一个字符串; - email:电子邮件,是一个字符串; - phone:电话号码,是一个字符串。 其次,在 IntelliJ IDEA 中创建一个 Maven Web 项目。在项目中,创建一个名为 com.example 的包(你可以根据自己的需要自定义包名),并在该包中创建一个名为 User 的 Java 类,用于表示用户实体。 ```java package com.example; public class User { private int id; private String username; private String password; private String email; private String phone; public User() {} public User(String username, String password, String email, String phone) { this.username = username; this.password = password; this.email = email; this.phone = phone; } // 省略 getter 和 setter 方法 } ``` 然后,我们需要编写一个 JDBC 访问数据库的通用工具类,可以使用 JdbcUtils 工具类来简化我们的代码。 ```java package com.example; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; public class JdbcUtils { private static final String URL = "jdbc:mysql://localhost:3306/mydb?useSSL=false"; private static final String USERNAME = "root"; private static final String PASSWORD = "password"; static { try { Class.forName("com.mysql.jdbc.Driver"); } catch (ClassNotFoundException e) { e.printStackTrace(); } } public static Connection getConnection() throws SQLException { return DriverManager.getConnection(URL, USERNAME, PASSWORD); } public static void close(Connection conn, PreparedStatement ps, ResultSet rs) { try { if (rs != null) { rs.close(); } if (ps != null) { ps.close(); } if (conn != null) { conn.close(); } } catch (SQLException e) { e.printStackTrace(); } } } ``` 接下来,我们需要创建一个名为 register.jspJSP 页面,用于接收用户注册信息,并使用 EL(Expression Language)读取提示信息。下面是一个简单的示例: ```jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <html> <head> <title>用户注册</title> </head> <body> <h1>用户注册</h1> <form action="register" method="post"> <table> <tr> <td>用户名:</td> <td><input type="text" name="username" value="${user.username}"></td> <td><c:if test="${not empty errors.username}"><fmt:message key="${errors.username}"/></c:if></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" value="${user.password}"></td> <td><c:if test="${not empty errors.password}"><fmt:message key="${errors.password}"/></c:if></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="confirmPassword" value="${user.confirmPassword}"></td> <td><c:if test="${not empty errors.confirmPassword}"><fmt:message key="${errors.confirmPassword}"/></c:if></td> </tr> <tr> <td>电子邮件:</td> <td><input type="text" name="email" value="${user.email}"></td> <td><c:if test="${not empty errors.email}"><fmt:message key="${errors.email}"/></c:if></td> </tr> <tr> <td>电话号码:</td> <td><input type="text" name="phone" value="${user.phone}"></td> <td><c:if test="${not empty errors.phone}"><fmt:message key="${errors.phone}"/></c:if></td> </tr> <tr> <td colspan="3"><input type="submit" value="注册"></td> </tr> </table> </form> </body> </html> ``` 接着,我们需要创建一个名为 RegisterFormBean 的 Java 类,用于表单验证。该类需要包含以下属性: - username:用户名,是一个字符串; - password:密码,是一个字符串; - confirmPassword:确认密码,是一个字符串; - email:电子邮件,是一个字符串; - phone:电话号码,是一个字符串。 ```java package com.example; public class RegisterFormBean { private String username; private String password; private String confirmPassword; private String email; private String phone; public RegisterFormBean() {} public RegisterFormBean(String username, String password, String confirmPassword, String email, String phone) { this.username = username; this.password = password; this.confirmPassword = confirmPassword; this.email = email; this.phone = phone; } // 省略 getter 和 setter 方法 } ``` 在 RegisterFormBean 类中,我们需要编写一个名为 validate 的方法,用于验证表单数据是否合法。如果表单数据不合法,则该方法应该返回一个包含错误提示信息的 Map 对象。 ```java package com.example; import java.util.HashMap; import java.util.Map; import java.util.regex.Pattern; public class RegisterFormBean { // 省略其他代码 public Map<String, String> validate() { Map<String, String> errors = new HashMap<>(); if (username == null || username.trim().equals("")) { errors.put("username", "用户名不能为空"); } if (password == null || password.trim().equals("")) { errors.put("password", "密码不能为空"); } if (confirmPassword == null || confirmPassword.trim().equals("")) { errors.put("confirmPassword", "确认密码不能为空"); } if (!password.equals(confirmPassword)) { errors.put("confirmPassword", "两次输入的密码不一致"); } if (email == null || email.trim().equals("")) { errors.put("email", "电子邮件不能为空"); } else if (!Pattern.matches("\\w+@\\w+\\.\\w+", email)) { errors.put("email", "电子邮件格式不正确"); } if (phone == null || phone.trim().equals("")) { errors.put("phone", "电话号码不能为空"); } else if (!Pattern.matches("\\d{11}", phone)) { errors.put("phone", "电话号码格式不正确"); } return errors; } } ``` 接下来,我们需要编写一个名为 RegisterServlet 的 Java 类,用于处理用户注册请求。在该类中,我们需要实现 doPost 方法,该方法应该完成以下任务: - 从 request 对象中获取用户提交的注册信息; - 对注册信息进行表单验证; - 如果表单数据无误,则将注册信息插入到 MySQL 数据库中; - 将注册成功的用户信息存储到 request 对象中,并将请求转发到 registerSuccess.jsp 页面。 ```java package com.example; 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 java.io.IOException; import java.util.Map; @WebServlet(name = "RegisterServlet", urlPatterns = {"/register"}) public class RegisterServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 从 request 对象中获取用户提交的注册信息 String username = request.getParameter("username"); String password = request.getParameter("password"); String confirmPassword = request.getParameter("confirmPassword"); String email = request.getParameter("email"); String phone = request.getParameter("phone"); // 构造 RegisterFormBean 对象 RegisterFormBean formBean = new RegisterFormBean(username, password, confirmPassword, email, phone); // 对注册信息进行表单验证 Map<String, String> errors = formBean.validate(); if (errors.isEmpty()) { // 如果表单数据无误,则将注册信息插入到 MySQL 数据库中 User user = new User(username, password, email, phone); try { Connection conn = JdbcUtils.getConnection(); PreparedStatement ps = conn.prepareStatement("INSERT INTO user (username, password, email, phone) VALUES (?, ?, ?, ?)"); ps.setString(1, user.getUsername()); ps.setString(2, user.getPassword()); ps.setString(3, user.getEmail()); ps.setString(4, user.getPhone()); ps.executeUpdate(); ps.close(); conn.close(); } catch (SQLException e) { e.printStackTrace(); } // 将注册成功的用户信息存储到 request 对象中,并将请求转发到 registerSuccess.jsp 页面 request.setAttribute("user", user); request.getRequestDispatcher("/registerSuccess.jsp").forward(request, response); } else { // 如果表单数据有误,则将错误提示信息存储到 request 对象中,并将请求转发到 register.jsp 页面 request.setAttribute("errors", errors); request.setAttribute("user", formBean); request.getRequestDispatcher("/register.jsp").forward(request, response); } } } ``` 最后,我们需要创建一个名为 registerSuccess.jspJSP 页面,用于显示注册成功的用户信息。下面是一个简单的示例: ```jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用户注册成功</title> </head> <body> <h1>用户注册成功</h1> <p>您已经成功注册了一个新用户,以下是您的注册信息:</p> <table> <tr> <td>用户名:</td> <td>${user.username}</td> </tr> <tr> <td>密码:</td> <td>${user.password}</td> </tr> <tr> <td>电子邮件:</td> <td>${user.email}</td> </tr> <tr> <td>电话号码:</td> <td>${user.phone}</td> </tr> </table> </body> </html> ``` 好了,以上就是按照 JSP Model 2思想实现用户注册功能的全部步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值