商品比价平台网站项目需求分析与数据库设计文档一、项目基本情况1、项目定位本项目是基于 JSPMySQL 开发的商品比价平台属于 Web 入门实战项目以商品价格查询、比价、用户管理为核心兼顾普通用户使用与后台管理员运维。前端使用原生 HTMLCSSJavaScript 实现界面布局与交互后端基于 JDBC 完成数据库交互重点实现用户体系、页面交互、数据增删改查CRUD功能适合练习 JSP 动态网页开发、数据库连接、前后端数据流转、角色权限管控等基础技能。平台主打 “追求更高性价比” 的核心理念为用户提供商品浏览、价格参考服务同时配套完整的用户注册登录、后台用户管理体系。2、核心功能板块网站整体分为前台用户端和后台管理端两大板块整体功能划分如下用户账号板块实现账号注册、账号登录、密码联动校验、个人信息查看功能是平台基础身份体系。前台首页板块平台主入口包含导航菜单、广告轮播、商品展示、商品搜索、商城跳转、底部版权等功能是用户浏览商品的核心页面。管理员后台板块独立管理入口提供用户数据全量管理支持对平台注册用户进行新增、查询、修改、删除操作维护平台用户数据。3、用户角色与权限本系统划分三类用户角色不同角色拥有独立访问权限与操作权限权限划分清晰1游客未登录用户浏览权限可直接访问网站首页查看轮播广告、全部商品信息功能权限可使用页面搜索功能、点击跳转商城账号相关可进入登录页、注册页完成账号注册与登录操作限制无法进入个人信息页、无法访问管理员后台。2普通注册用户登录用户基础浏览拥有游客全部权限正常浏览首页商品、使用搜索与页面跳转功能账号管理登录成功后可查看个人基础信息、安全密钥页面跳转可通过首页导航进入历史价格、好价热榜、商城等拓展页面限制无后台管理权限无法进入管理员登录页与用户管理后台。3管理员最高权限独立登录拥有专属管理员登录入口使用独立账号密码登录后台用户查询查看平台所有注册用户的完整信息账号、密码、邮箱、电话、姓名、注册时间等用户管理对用户数据执行新增、修改、删除全操作支持弹窗式表单编辑页面访问可自由进出管理员后台、前台首页限制仅负责用户数据运维不参与前台商品业务操作。4、整体工作流程1普通用户使用流程访问网站首页未登录状态下以游客身份浏览商品、广告点击登录入口进入用户登录页输入账号、密码账号输入后自动解锁密码输入框登录校验后端连接数据库验证账号密码验证成功跳转网站首页验证失败弹窗提示并返回登录页无账号用户点击登录页注册链接跳转用户注册页填写完整注册信息账号、邮箱、密码、电话、姓名、国际区号等提交表单后端接收数据并写入数据库注册成功跳转个人信息展示页查看个人资料从个人信息页返回首页正常使用平台全部前台功能。2管理员使用流程从网站首页设置下拉菜单点击「管理员拓展」进入管理员登录页输入预设管理员账号、密码前端完成身份校验登录成功进入用户管理后台后台自动查询数据库展示全体注册用户列表管理员执行管理操作新增用户点击新增按钮弹出表单弹窗填写信息提交数据入库后自动刷新用户列表修改用户点击单条数据的「修改」按钮弹窗回显用户原有信息编辑提交后更新数据库删除用户点击「删除」按钮弹出确认弹窗确认后删除对应用户数据并刷新列表管理操作完成后可返回网站首页。5、前后端核心功能明细1前端核心功能页面布局与样式采用 Flex 弹性布局统一页面风格添加阴影、圆角、悬停效果界面美观动态轮播登录页、首页均实现图片自动轮播动画表单交互账号、密码联动输入账号后密码框才可激活账号清空则密码框禁用并清空密码显隐切换注册页支持点击图标查看 / 隐藏密码前端非空校验登录、注册、管理员表单添加基础输入校验非法输入弹出提示弹窗组件管理员后台使用模态弹窗实现新增、修改、删除表单弹出与关闭导航与菜单首页顶部导航栏、用户头像下拉菜单、按钮状态激活切换数据展示表格分页式展示用户数据表格行悬停高亮提升浏览体验。2后端核心功能JSPJDBC编码处理统一设置 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数据表 1t_user普通用户表存储所有前台注册用户的完整信息为系统核心业务表。字段设计说明表格字段名数据类型约束字段说明idint主键、自增、非空用户唯一编号usernamevarchar(50)唯一、非空登录账号passwordvarchar(50)非空登录密码emailvarchar(100)非空注册邮箱phonevarchar(30)非空手机号码countryCodevarchar(20)非空国际电话区号lastNamevarchar(30)非空姓氏firstNamevarchar(30)可空名字选填create_timevarchar(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数据表 2t_manager管理员表存储后台管理员账号信息用于管理员登录校验、权限区分。字段设计说明表格字段名数据类型约束字段说明manager_idint主键、自增、非空管理员唯一编号manager_namevarchar(50)唯一、非空管理员登录账号manager_pwdvarchar(50)非空管理员登录密码create_timevarchar(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页面布局白底主容器顶部标题 「新增用户」按钮主体为数据表格表格列包含序号、账号、密码、邮箱、电话、国家、名、姓、创建时间、操作操作列「修改」「删除」两个操作链接弹窗功能点击新增 / 修改 / 删除分别弹出对应表单弹窗与确认弹窗交互表格行悬停高亮弹窗可关闭表单提交后自动刷新数据列表。四、示例图
WEB应用技术第四次作业
商品比价平台网站项目需求分析与数据库设计文档一、项目基本情况1、项目定位本项目是基于 JSPMySQL 开发的商品比价平台属于 Web 入门实战项目以商品价格查询、比价、用户管理为核心兼顾普通用户使用与后台管理员运维。前端使用原生 HTMLCSSJavaScript 实现界面布局与交互后端基于 JDBC 完成数据库交互重点实现用户体系、页面交互、数据增删改查CRUD功能适合练习 JSP 动态网页开发、数据库连接、前后端数据流转、角色权限管控等基础技能。平台主打 “追求更高性价比” 的核心理念为用户提供商品浏览、价格参考服务同时配套完整的用户注册登录、后台用户管理体系。2、核心功能板块网站整体分为前台用户端和后台管理端两大板块整体功能划分如下用户账号板块实现账号注册、账号登录、密码联动校验、个人信息查看功能是平台基础身份体系。前台首页板块平台主入口包含导航菜单、广告轮播、商品展示、商品搜索、商城跳转、底部版权等功能是用户浏览商品的核心页面。管理员后台板块独立管理入口提供用户数据全量管理支持对平台注册用户进行新增、查询、修改、删除操作维护平台用户数据。3、用户角色与权限本系统划分三类用户角色不同角色拥有独立访问权限与操作权限权限划分清晰1游客未登录用户浏览权限可直接访问网站首页查看轮播广告、全部商品信息功能权限可使用页面搜索功能、点击跳转商城账号相关可进入登录页、注册页完成账号注册与登录操作限制无法进入个人信息页、无法访问管理员后台。2普通注册用户登录用户基础浏览拥有游客全部权限正常浏览首页商品、使用搜索与页面跳转功能账号管理登录成功后可查看个人基础信息、安全密钥页面跳转可通过首页导航进入历史价格、好价热榜、商城等拓展页面限制无后台管理权限无法进入管理员登录页与用户管理后台。3管理员最高权限独立登录拥有专属管理员登录入口使用独立账号密码登录后台用户查询查看平台所有注册用户的完整信息账号、密码、邮箱、电话、姓名、注册时间等用户管理对用户数据执行新增、修改、删除全操作支持弹窗式表单编辑页面访问可自由进出管理员后台、前台首页限制仅负责用户数据运维不参与前台商品业务操作。4、整体工作流程1普通用户使用流程访问网站首页未登录状态下以游客身份浏览商品、广告点击登录入口进入用户登录页输入账号、密码账号输入后自动解锁密码输入框登录校验后端连接数据库验证账号密码验证成功跳转网站首页验证失败弹窗提示并返回登录页无账号用户点击登录页注册链接跳转用户注册页填写完整注册信息账号、邮箱、密码、电话、姓名、国际区号等提交表单后端接收数据并写入数据库注册成功跳转个人信息展示页查看个人资料从个人信息页返回首页正常使用平台全部前台功能。2管理员使用流程从网站首页设置下拉菜单点击「管理员拓展」进入管理员登录页输入预设管理员账号、密码前端完成身份校验登录成功进入用户管理后台后台自动查询数据库展示全体注册用户列表管理员执行管理操作新增用户点击新增按钮弹出表单弹窗填写信息提交数据入库后自动刷新用户列表修改用户点击单条数据的「修改」按钮弹窗回显用户原有信息编辑提交后更新数据库删除用户点击「删除」按钮弹出确认弹窗确认后删除对应用户数据并刷新列表管理操作完成后可返回网站首页。5、前后端核心功能明细1前端核心功能页面布局与样式采用 Flex 弹性布局统一页面风格添加阴影、圆角、悬停效果界面美观动态轮播登录页、首页均实现图片自动轮播动画表单交互账号、密码联动输入账号后密码框才可激活账号清空则密码框禁用并清空密码显隐切换注册页支持点击图标查看 / 隐藏密码前端非空校验登录、注册、管理员表单添加基础输入校验非法输入弹出提示弹窗组件管理员后台使用模态弹窗实现新增、修改、删除表单弹出与关闭导航与菜单首页顶部导航栏、用户头像下拉菜单、按钮状态激活切换数据展示表格分页式展示用户数据表格行悬停高亮提升浏览体验。2后端核心功能JSPJDBC编码处理统一设置 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数据表 1t_user普通用户表存储所有前台注册用户的完整信息为系统核心业务表。字段设计说明表格字段名数据类型约束字段说明idint主键、自增、非空用户唯一编号usernamevarchar(50)唯一、非空登录账号passwordvarchar(50)非空登录密码emailvarchar(100)非空注册邮箱phonevarchar(30)非空手机号码countryCodevarchar(20)非空国际电话区号lastNamevarchar(30)非空姓氏firstNamevarchar(30)可空名字选填create_timevarchar(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数据表 2t_manager管理员表存储后台管理员账号信息用于管理员登录校验、权限区分。字段设计说明表格字段名数据类型约束字段说明manager_idint主键、自增、非空管理员唯一编号manager_namevarchar(50)唯一、非空管理员登录账号manager_pwdvarchar(50)非空管理员登录密码create_timevarchar(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页面布局白底主容器顶部标题 「新增用户」按钮主体为数据表格表格列包含序号、账号、密码、邮箱、电话、国家、名、姓、创建时间、操作操作列「修改」「删除」两个操作链接弹窗功能点击新增 / 修改 / 删除分别弹出对应表单弹窗与确认弹窗交互表格行悬停高亮弹窗可关闭表单提交后自动刷新数据列表。四、示例图
