一、核心页面及相关技术

1.1 三层架构

┌──────────────────────────────────────────────┐ │ 表现层 (Presentation) │ │ controller/ 包 │ │ MovieController · LoginController │ │ 职责：接收HTTP请求、参数校验、返回视图/重定向 │ ├──────────────────────────────────────────────┤ │ 业务层 (Business) │ │ service/ 包 │ │ MovieService · UserService │ │ 职责：业务逻辑编排、分页处理、登录验证、注册查重 │ ├──────────────────────────────────────────────┤ │ 持久层 (Persistence) │ │ mapper/ 包 + resources/mapper/*.xml │ │ MovieMapper · UserMapper │ │ 职责：数据库 CRUD 操作、SQL 执行 │ ├──────────────────────────────────────────────┤ │ 数据库 │ │ MySQL → movie_db 数据库 │ │ 表：movie（电影）、users（用户） │ └──────────────────────────────────────────────┘

1.2 项目结构总览

拦截器由AI辅助润色

d:\myweb2\1\ ├── pom.xml ← Maven依赖配置 ├── sql\init.sql ← 数据库建表 + 初始数据 ├── .vscode\launch.json ← VS Code 调试配置 └── src\main\ ├── resources\ │ ├── application.yml ← Spring Boot 全局配置 │ └── mapper\ │ ├── MovieMapper.xml ← 电影表 SQL 映射 │ └── UserMapper.xml ← 用户表 SQL 映射 ├── webapp\ ← JSP 前端页面 │ ├── login.jsp ← 登录页 │ ├── register.jsp ← 注册页 │ ├── index.jsp ← 电影列表主页（核心页面） │ ├── addMovie.jsp ← 添加电影页 │ └── editMovie.jsp ← 编辑电影页 └── java\com\movie\ ├── MovieApplication.java ← 启动入口 ├── entity\ │ ├── Movie.java ← 电影实体 │ └── User.java ← 用户实体 ├── mapper\ │ ├── MovieMapper.java ← 电影 DAO 接口 │ └── UserMapper.java ← 用户 DAO 接口 ├── service\ │ ├── MovieService.java ← 电影业务逻辑 │ └── UserService.java ← 用户业务逻辑 ├── controller\ │ ├── MovieController.java ← 电影页面控制（表单提交+跳转） │ ├── LoginController.java ← 登录/注册控制 │ └── GlobalExceptionHandler.java ← 全局异常兜底 ├── config\ │ └── WebConfig.java ← 拦截器注册 └── interceptor\ └── LoginInterceptor.java ← 登录状态检查

1.3 功能模块

用户模块：

• 注册（用户名≥3字符、密码≥4字符、两次密码一致校验、用户名唯一检查）
• 登录（拦截器保护）
• 退出

电影模块（需登录后使用）：

1.4 请求流程（以"新增电影"为例）

用户在 addMovie.jsp 填写表单 │ POST /movie/add ▼ LoginInterceptor.preHandle() → 检查 session.loginUser → 已登录，放行 │ ▼ MovieController.add() → @RequestParam 接收表单字段 → 组装 Movie 对象 → 调用 movieService.add(movie) → RedirectAttributes 传成功消息 → return "redirect:/movie/index" │ ▼ MovieService.add() → 调用 movieMapper.insert(movie) → 返回受影响行数 │ ▼ MovieMapper.xml → INSERT INTO movie (...) ↓ MySQL

二、核心界面及相关技术

2.1 登录页 — login.jsp

技术点：

2.2 注册页 — register.jsp

技术点：

• 粉色渐变主题（与登录页区分）
• 三个输入框验证逻辑在LoginController.doRegister()中服务端执行
• 注册成功跳回登录页，Model 传递msg属性显示"注册成功，请登录"

2.3 电影列表主页 — index.jsp（最核心页面）

截图描述：顶部导航栏 + 欢迎语 + 工具栏（类型筛选/计数/快速添加按钮）+ 电影数据表格 + 底部分页栏 + 弹窗表单。

技术点详解：

(1) 导航栏效果

background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* 背景模糊 */ position: sticky; top: 0; /* 滚动时固定在顶部 */

(2) 渐变色品牌文字

background: var(--gradient); -webkit-background-clip: text; /* 背景裁剪到文字 */ -webkit-text-fill-color: transparent; /* 文字变透明，露出渐变底色 */

(3) 类型筛选 + 分页

• 筛选是 GET 表单（<form method="get">），提交到/movie/index?type=科幻
• 分页是<a>链接携带page和type参数
• PageHelper 插件自动在 SQL 末尾加LIMIT，不需要手写

(4) 类型彩色标签

.type-剧情 { background: #eef0ff; color: #6c5ce7; } .type-动作 { background: #ffeaea; color: #d63031; } .type-喜剧 { background: #fff8e0; color: #e17055; } /* 8种类型各有独立配色 */

通过class="cell-type type-${movie.type}"动态匹配颜色。

(5） 行入场动画

style="animation: fadeUp 0.3s ${s.index * 0.04}s both;"

varStatus="s"提供行索引，每行延迟 0.04 秒，形成逐行淡入效果。

(6) 快速添加弹窗（Bootstrap Modal）

• data-bs-toggle="modal"触发弹窗
• 弹窗内嵌<form method="post" action="/movie/add">
• 纯表单提交，无 JavaScript，提交后整页重定向

(7) 删除确认

<a href="/movie/delete?id=${movie.id}" onclick="return confirm('确定要删除《${movie.title}》吗？')">删除</a>

浏览器原生confirm()弹窗，点取消则return false阻止链接跳转。

三、效果展示