WEB应用技术第四次作业
商品比价平台网站项目需求分析与数据库设计文档
一、项目基本情况
1、项目定位
本项目是基于 JSP+MySQL 开发的商品比价平台，属于 Web 入门实战项目，以商品价格查询、比价、用户管理为核心，兼顾普通用户使用与后台管理员运维。前端使用原生 HTML+CSS+JavaScript 实现界面布局与交互，后端基于 JDBC 完成数据库交互，重点实现用户体系、页面交互、数据增删改查（CRUD）功能，适合练习 JSP 动态网页开发、数据库连接、前后端数据流转、角色权限管控等基础技能。
平台主打 “追求更高性价比” 的核心理念，为用户提供商品浏览、价格参考服务，同时配套完整的用户注册登录、后台用户管理体系。
2、核心功能板块
网站整体分为前台用户端和后台管理端两大板块，整体功能划分如下：
- 用户账号板块：实现账号注册、账号登录、密码联动校验、个人信息查看功能，是平台基础身份体系。
- 前台首页板块：平台主入口，包含导航菜单、广告轮播、商品展示、商品搜索、商城跳转、底部版权等功能，是用户浏览商品的核心页面。
- 管理员后台板块：独立管理入口，提供用户数据全量管理，支持对平台注册用户进行新增、查询、修改、删除操作，维护平台用户数据。
3、用户角色与权限
本系统划分三类用户角色，不同角色拥有独立访问权限与操作权限，权限划分清晰：
（1）游客（未登录用户）
- 浏览权限：可直接访问网站首页，查看轮播广告、全部商品信息；
- 功能权限：可使用页面搜索功能、点击跳转商城；
- 账号相关：可进入登录页、注册页，完成账号注册与登录操作；
- 限制：无法进入个人信息页、无法访问管理员后台。
（2）普通注册用户（登录用户）
- 基础浏览：拥有游客全部权限，正常浏览首页商品、使用搜索与页面跳转功能；
- 账号管理：登录成功后可查看个人基础信息、安全密钥；
- 页面跳转：可通过首页导航进入历史价格、好价热榜、商城等拓展页面；
- 限制：无后台管理权限，无法进入管理员登录页与用户管理后台。
（3）管理员（最高权限）
- 独立登录：拥有专属管理员登录入口，使用独立账号密码登录后台；
- 用户查询：查看平台所有注册用户的完整信息（账号、密码、邮箱、电话、姓名、注册时间等）；
- 用户管理：对用户数据执行新增、修改、删除全操作，支持弹窗式表单编辑；
- 页面访问：可自由进出管理员后台、前台首页；
- 限制：仅负责用户数据运维，不参与前台商品业务操作。
4、整体工作流程
（1）普通用户使用流程
- 访问网站首页，未登录状态下以游客身份浏览商品、广告；
- 点击登录入口，进入用户登录页，输入账号、密码（账号输入后自动解锁密码输入框）；
- 登录校验：后端连接数据库验证账号密码，验证成功跳转网站首页；验证失败弹窗提示并返回登录页；
- 无账号用户，点击登录页注册链接，跳转用户注册页；
- 填写完整注册信息（账号、邮箱、密码、电话、姓名、国际区号等），提交表单；
- 后端接收数据并写入数据库，注册成功跳转个人信息展示页，查看个人资料；
- 从个人信息页返回首页，正常使用平台全部前台功能。
（2）管理员使用流程
- 从网站首页设置下拉菜单，点击「管理员拓展」进入管理员登录页；
- 输入预设管理员账号、密码，前端完成身份校验，登录成功进入用户管理后台；
- 后台自动查询数据库，展示全体注册用户列表；
- 管理员执行管理操作：
- 新增用户：点击新增按钮，弹出表单弹窗，填写信息提交，数据入库后自动刷新用户列表；
- 修改用户：点击单条数据的「修改」按钮，弹窗回显用户原有信息，编辑提交后更新数据库；
- 删除用户：点击「删除」按钮，弹出确认弹窗，确认后删除对应用户数据并刷新列表；
- 管理操作完成后，可返回网站首页。
5、前后端核心功能明细
（1）前端核心功能
- 页面布局与样式：采用 Flex 弹性布局，统一页面风格，添加阴影、圆角、悬停效果，界面美观；
- 动态轮播：登录页、首页均实现图片自动轮播动画；
- 表单交互
- 账号、密码联动：输入账号后密码框才可激活，账号清空则密码框禁用并清空；
- 密码显隐切换：注册页支持点击图标查看 / 隐藏密码；
- 前端非空校验：登录、注册、管理员表单添加基础输入校验，非法输入弹出提示；
- 弹窗组件：管理员后台使用模态弹窗，实现新增、修改、删除表单弹出与关闭；
- 导航与菜单：首页顶部导航栏、用户头像下拉菜单、按钮状态激活切换；
- 数据展示：表格分页式展示用户数据，表格行悬停高亮，提升浏览体验。
（2）后端核心功能（JSP+JDBC）
- 编码处理：统一设置 UTF-8 编码，解决页面中文乱码问题；
- 数据库连接：通过 JDBC 驱动连接 MySQL 数据库；
- 用户登录校验：查询
t_user表，比对账号密码，根据结果控制页面跳转； - 用户注册入库：接收注册表单参数，执行
INSERT语句新增用户数据； - 用户信息查询：后台读取
t_user全量数据，动态渲染 HTML 表格； - 用户数据维护：实现数据新增 (INSERT)、修改 (UPDATE)、删除 (DELETE)三大操作；
- 资源释放：规范关闭数据库连接、语句对象、结果集，避免资源占用；
- 页面重定向：数据操作完成后统一重定向页面，防止表单重复提交。
6、前端页面说明
项目核心页面共 6 个，为系统主要交互页面，页面功能简述如下：
- 普通用户登录页：左侧广告轮播、右侧登录表单，账号密码联动输入，提交跳转登录校验接口；
- 用户注册页：多字段注册表单，支持密码显隐、国际区号选择，提交完成账号注册；
- 网站首页：平台主页面，导航栏、搜索框、广告轮播、商品展示区、商城跳转入口；
- 个人信息展示页：展示注册用户账号、邮箱、安全密钥等个人资料，提供返回首页入口；
- 管理员登录页：独立简洁登录表单，前端校验管理员账号密码，登录进入后台；
- 管理员用户管理页：展示全量用户数据表格，弹窗实现用户增、删、改操作。
二、数据库设计
1、数据库基本信息
- 数据库名称：
login - 数据库字符集：
utf8mb4 - 排序规则：
utf8mb4_general_ci - 数据库引擎：InnoDB（支持事务、数据安全）
2、核心数据表设计
本项目共设计2 张核心数据表：用户主表t_user、管理员表t_manager，满足普通用户与管理员两类账号的数据存储需求。
（1）数据表 1：t_user（普通用户表）
存储所有前台注册用户的完整信息，为系统核心业务表。字段设计说明
表格
| 字段名 | 数据类型 | 约束 | 字段说明 |
|---|---|---|---|
| id | int | 主键、自增、非空 | 用户唯一编号 |
| username | varchar(50) | 唯一、非空 | 登录账号 |
| password | varchar(50) | 非空 | 登录密码 |
| varchar(100) | 非空 | 注册邮箱 | |
| phone | varchar(30) | 非空 | 手机号码 |
| countryCode | varchar(20) | 非空 | 国际电话区号 |
| lastName | varchar(30) | 非空 | 姓氏 |
| firstName | varchar(30) | 可空 | 名字（选填） |
| create_time | varchar(50) | 非空 | 账号创建时间 |
建表 SQL 语句
-- 创建数据库（若不存在） CREATE DATABASE IF NOT EXISTS login DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE login; -- 普通用户表 t_user CREATE TABLE IF NOT EXISTS t_user ( id INT PRIMARY KEY AUTO_INCREMENT COMMENT '用户ID，主键自增', username VARCHAR(50) NOT NULL UNIQUE COMMENT '登录账号', password VARCHAR(50) NOT NULL COMMENT '登录密码', email VARCHAR(100) NOT NULL COMMENT '用户邮箱', phone VARCHAR(30) NOT NULL COMMENT '手机号码', countryCode VARCHAR(20) NOT NULL COMMENT '国际区号', lastName VARCHAR(30) NOT NULL COMMENT '姓氏', firstName VARCHAR(30) DEFAULT NULL COMMENT '名字', create_time VARCHAR(50) NOT NULL COMMENT '账号创建时间' ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COMMENT = '普通用户信息表';（2）数据表 2：t_manager（管理员表）
存储后台管理员账号信息，用于管理员登录校验、权限区分。字段设计说明
表格
| 字段名 | 数据类型 | 约束 | 字段说明 |
|---|---|---|---|
| manager_id | int | 主键、自增、非空 | 管理员唯一编号 |
| manager_name | varchar(50) | 唯一、非空 | 管理员登录账号 |
| manager_pwd | varchar(50) | 非空 | 管理员登录密码 |
| create_time | varchar(50) | 非空 | 管理员账号创建时间 |
建表 SQL 语句
-- 管理员表 t_manager CREATE TABLE IF NOT EXISTS t_manager ( manager_id INT PRIMARY KEY AUTO_INCREMENT COMMENT '管理员ID，主键自增', manager_name VARCHAR(50) NOT NULL UNIQUE COMMENT '管理员登录账号', manager_pwd VARCHAR(50) NOT NULL COMMENT '管理员登录密码', create_time VARCHAR(50) NOT NULL COMMENT '账号创建时间' ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COMMENT = '管理员信息表'; -- 插入默认管理员账号（admin / 123456） INSERT INTO t_manager(manager_name, manager_pwd, create_time) VALUES ('admin', '123456', NOW());3、数据库关联说明
- 两张数据表相互独立，无外键关联：
t_user存储前台普通用户，t_manager存储后台管理员； - 所有账号名均设置唯一约束，保证账号不重复；
- 采用 InnoDB 引擎，保证数据增删改查操作的稳定性与安全性。
三、核心前端页面效果说明（附页面描述，可直接用于截图标注）
结合项目代码，对 6 个核心页面进行效果描述，可按照以下描述截取页面截图并标注：
页面 1：普通用户登录页（login (self).jsp）
- 页面布局：全屏背景图，居中白色登录大盒子，采用左右分栏设计；
- 左侧：占页面 50%，内置自动轮播广告海报，循环播放多张宣传图；
- 中间：灰色竖线分割左右区域；
- 右侧：登录表单区域，包含标题、账号输入框、密码输入框；
- 交互效果：账号未输入时密码框禁用，输入内容后解锁密码框；登录按钮、游客按钮、注册跳转链接；
- 风格：简约商务风，圆角 + 阴影样式，输入框聚焦变色。
页面 2：用户注册页（register.jsp）
- 页面布局：全屏背景图，居中白色注册容器，左右分栏；
- 左侧：固定 Logo 图片区域；
- 右侧：完整注册表单，依次包含账号、邮箱、密码（带显隐切换图标）、国际区号下拉选择、电话、姓氏、名字等表单项；
- 附加功能：第三方登录图标、服务条款勾选框、提交按钮；
- 交互：点击眼睛图标切换密码显示 / 隐藏，表单非空校验。
页面 3：网站首页（index.jsp）
- 页面布局：固定宽度白色主容器，顶部固定导航栏；
- 顶部：导航按钮（主页、查历史价、好价热榜、商城）、搜索框、用户头像、设置下拉菜单；
- 中部：全屏轮播广告图、分割栏、商品展示区（多行多列商品卡片，每张卡片包含商品图、名称、价格）；
- 底部：商城跳转链接、透明版权信息栏；
- 交互：导航按钮点击切换激活状态，下拉菜单悬停展开，图片自动轮播。
页面 4：个人信息展示页（showinfo.jsp）
- 页面布局：全屏背景图，居中白色信息容器，左右分栏 + 中间分割线；
- 左侧：品牌 Logo 图片；
- 右侧：欢迎语、默认头像 + 上传按钮、邮箱、安全密钥展示、文字提示、「进入首页」按钮；
- 功能：纯信息展示页面，仅提供返回首页跳转功能，样式简洁。
页面 5：管理员登录页（managerlogin.jsp）
- 页面布局：复用登录页背景图，居中独立白色登录卡片；
- 内容：标题「管理员登录」、管理员账号输入框、密码输入框、登录按钮；
- 交互：和普通登录页逻辑一致，账号输入后解锁密码框，前端校验账号密码；
- 特点：布局简洁，仅保留核心登录功能，无多余元素。
页面 6：管理员用户管理页（managerindex.jsp）
- 页面布局：白底主容器，顶部标题 +「新增用户」按钮，主体为数据表格；
- 表格：列包含序号、账号、密码、邮箱、电话、国家、名、姓、创建时间、操作；
- 操作列：「修改」「删除」两个操作链接；
- 弹窗功能：点击新增 / 修改 / 删除，分别弹出对应表单弹窗与确认弹窗；
- 交互：表格行悬停高亮，弹窗可关闭，表单提交后自动刷新数据列表。