一、核心页面及相关技术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?id1.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 methodget提交到/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种类型各有独立配色 */通过classcell-type type-${movie.type}动态匹配颜色。(5 行入场动画styleanimation: fadeUp 0.3s ${s.index * 0.04}s both;varStatuss提供行索引每行延迟 0.04 秒形成逐行淡入效果。(6) 快速添加弹窗Bootstrap Modaldata-bs-togglemodal触发弹窗弹窗内嵌form methodpost action/movie/add纯表单提交无 JavaScript提交后整页重定向(7) 删除确认a href/movie/delete?id${movie.id} onclickreturn confirm(确定要删除《${movie.title}》吗)删除/a浏览器原生confirm()弹窗点取消则return false阻止链接跳转。三、效果展示20260708_145410