### Java Web 蛋糕商城第一章：注册页面实现
#### 1. 创建Maven项目结构
为了构建一个完整的Java Web应用程序，通常会采用Maven来管理项目的依赖关系。对于蛋糕商城项目而言，首先需要设置好基本的POM文件配置。
```xml
<project xmlns="http
://maven.apache.org/POM/4.0.0"
xmlns
:xsi="http
://www.w3.org/2001/XMLSchema-instance"
xsi
:schemaLocation="http
://maven.apache.org/POM/4.0.0 http
://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<!-- 基本信息 -->
<groupId>com.cake.shop</groupId>
<artifactId>CakeShopWebApp</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<!-- 依赖库 -->
<dependencies>
<!-- Servlet API -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<!-- JSP 和 JSTL 支持 -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.2</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
</project>
```
#### 2. 设计数据库表单模型
针对用户注册功能，设计相应的MySQL数据表`users`用于存储用户的账户信息：
```sql
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100),
password CHAR(60), -- 使用bcrypt算法加密后的密码长度固定为60字符
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```
#### 3. 编写Servlet处理请求
编写专门负责接收前端提交的数据并完成相应业务逻辑操作的服务端控制器——RegisterServlet.java
:
```java
@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取参数
String username = request.getParameter("username");
String email = request.getParameter("email");
String rawPassword = request.getParameter("password");
try {
// 密码哈希化
BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
String encodedPassword = encoder.encode(rawPassword);
// 插入新记录至数据库
Connection conn = DatabaseUtil.getConnection(); // 自定义工具类获取连接对象
PreparedStatement pstmt = null;
String sql = "INSERT INTO users(username,email,password) VALUES (?, ?, ?)";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, username);
pstmt.setString(2, email);
pstmt.setString(3, encodedPassword);
int affectedRows = pstmt.executeUpdate();
if (affectedRows > 0){
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/WEB-INF/
views/registerSuccess.jsp");
dispatcher.forward(request,response);
}
} finally {
closeResources(pstmt,conn); // 关闭资源方法同样来自自定义工具类
}
} catch (SQLException e) {
throw new ServletException(e.getMessage());
}
}
}
```
#### 4. 构建JSP
视图层模板
最后一步是在`src/main/webapp/WEB-INF/
views/`目录下创建名为`registerForm.jsp`的文件作为用户界面部分：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册账号 | Cake Shop</title>
<link rel="stylesheet" href="https
://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
<style type="text/css">
body { padding-top
:7%; background-color
:#f8f9fa;}
.container-fluid{max-width
:400px;margin
:auto;text-align
:center;}
.form-control
:focus {border-color
:#dc3545;box-shadow
:none;}
.btn-primary,.btn-secondary{width
:100%;}
</style>
</head>
<body>
<div class="container-fluid">
<h2>欢迎来到Cake Shop!</h2><br/>
<form action="${pageContext.request.contextPath}/register" method="post">
<div class="mb-3">
<label for="exampleInputEmail1">邮箱地址
:</label>
<input name="email" required autocomplete="off" placeholder="请输入您的电子邮箱..." class="form-control"/><br/>
</div>
<div class="mb-3">
<label for="exampleInputUsername">用户名
:</label>
<input name="username" required pattern="[A-Za-z\d]{4,}" title="至少四个字母或数字." maxlength="20" placeholder="请设定登录名..." class="form-control"/><br/>
</div>
<div class="mb-3">
<label for="exampleInputPassword1">密码
:</label>
<input type="password" name="password" required minlength="6" placeholder="最少六位数的安全密钥..." class="form-control"/><br/>
</div>
<button type="submit" class="btn btn-success">立即注册</button> <small>已有账号？</small><a href="#">点击这
里登陆。</a>
</form>
</div>
<script src="https
://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https
://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https
://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```
本文详细介绍了Django的视图层，包括路由参数、返向解析、重定向、返回JSON数据、Request与Response对象的使用、请求元信息META、GET与POST请求的处理、自定义错误页面以及HTTP状态码的含义。通过实例展示了如何定义和使用这些概念，帮助读者深入理解Django的视图功能。
最低0.47元/天 解锁文章
扫一扫
1670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
