Web表单处理实例：博客注册用户

最新推荐文章于 2021-12-09 22:23:48 发布

天码营

最新推荐文章于 2021-12-09 22:23:48 发布

阅读量390

点赞数

分类专栏：天码营教程 Java Web开发全栈工程师之路文章标签： web表单 jsp web前端开发

本文链接：https://blog.csdn.net/sinat_30389651/article/details/50688777

版权

天码营教程同时被 2 个专栏收录

82 篇文章 1 订阅

订阅专栏

Java Web开发全栈工程师之路

43 篇文章 2 订阅

订阅专栏

Web表单实例由David发表在天码营

我们已经了解了Web表单处理的关键概念，接下来我们就以博客注册用户表单为例来回顾应用我们之前学过的知识。

存储用户信息

到目前为止，我们尚未学习任何数据存储的知识，在本节中我们将用户注册的信息存放在内存中（即Java程序中的某个变量）。首先看看用户注册表单需要填写的信息：

在博客系统中，用户信息包括：

用户名——用户的唯一标识符，每一个用户的用户名必须不同
密码——用户登录的密码凭证
电子邮箱
用户博客的标题
用户博客的描述、简介
用户头像URL

根据此可以设计User类来表示用户对象：

public class User {

    private long id;
    private String username;
    private String password;
    private String avatar = "images/default-avatar.jpeg";
    private String title;
    private String email;
    private String description;

    public User(String username, String password, String email, String title, String description) {
        this.username = username;
        this.password = password;
        this.email = email;
        this.title = title;
        this.description = description;
    }
}

这里用户头像我们暂时使用默认值。需要把头像图片保存为WebContent/images/default-avatar.jpeg。

博客系统中可能有多个用户，我们使用一个List来保存它，List作为Data类的静态变量存在于内存中：

public class Data {
    public static List<User> users = new ArrayList<>();
    static {
        users.add(new User("luoruici", "password", "a@b.com", "Ruici", "Ruici's Blog"));
    }

    public static User getByUsername(String username) {
        return users.stream()
                .filter(e -> e.getUsername().equals(username))
                .findFirst()
                .orElse(null);
    }
}

Data类中还向用户列表中添加了一个新用户用作测试，另外提供了一个函数——根据username查找用户，这个函数在后面会经常被调用。

处理用户表单

处理用户表单的Servlet主要做这样几件事情：

获取表单数据
对表单数据进行校验
如果校验成功，向用户列表中添加一个新的对象，并返回成功提示信息到浏览器；如果校验失败，直接将错误信息返回到表单界面，让用户重新填写。

具体处理代码如下：

@WebServlet("/account/signup")
public class RegisterController extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String email = req.getParameter("email");
        String title = req.getParameter("title");
        String description = req.getParameter("description");

        if (username != null && !username.isEmpty() && Data.getByUsername(username) != null) {
            req.setAttribute("usernameExist", true);
            RequestDispatcher dispatcher = req.getRequestDispatcher("/jsp/register.jsp");
            dispatcher.forward(req, resp);
        } else {
            User user = new User(username, password, email, title, description);
            Data.users.add(user);
            RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/templates/registerResult.jsp");
            dispatcher.forward(req, resp);
        }
    }
}

其中Data.getByUsername(username) != null表明用户名已经存在，此时应该将请求转发给register.jsp也就是注册表单页面，同时告知用户名已经存在。那么register.jsp中也应该加入相应的处理代码：

<div class="error">
<c:if test="${usernameExist}">
  <ul>
    <li>用户名已经存在</li>
  </ul>
</c:if>
</div>

当然这部分代码只是对username这一个字段的校验，其他字段可以根据业务需求写出类似的校验代码，这里就不一一赘述了。

如果表单数据通过校验，则用户列表中会新添加一个用户，此时渲染registerResult.jsp页面，告知用户已经注册成功：

<html>
<head>
  <%@include file="common/head.jsp" %>
</head>
<body>
<%@include file="common/userNav.jsp" %>
<div class="container">
  <h2 class="page-header">注册成功</h2>
  <p>
    注册成功！请<a href="account/login">登录</a>。
  </p>
</div>
<%@include file="common/footer.jsp" %>
</body>
</html>

更多文章请访问天码营网站