web项目展示
一、核心页面及相关技术
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字符、两次密码一致校验、用户名唯一检查）
- 登录（拦截器保护）
- 退出
电影模块（需登录后使用）：
| 操作 | HTTP 方法 | URL |
|---|---|---|
| 列表 + 分页 + 类型筛选 | GET | /movie/index |
| 新增表单 | GET | /movie/toAdd |
| 新增提交 | POST | /movie/add |
| 编辑页面（数据自动回显） | GET | /movie/toEdit?id= |
| 编辑提交 | POST | /movie/update |
| 删除 | GET | /movie/delete?id= |
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
技术点：
| 技术 | 说明 |
|---|---|
| Bootstrap 5 | 响应式布局，max-width: 380px限制卡片宽度 |
| CSS 自定义属性 | :root { --primary, --accent, --gradient }统一主题色管理 |
| JSP 表达式 | ${pageContext.request.contextPath}动态获取应用根路径 |
| form POST | 传统表单提交到/login，服务端用 HttpSession 存登录状态 |
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阻止链接跳转。
三、效果展示
20260708_145410