web-第四次课后作业

要求：撰写自己准备做的网站项目的需求分析和数据库设计文档。需要：

1、整个网站的功能、定位、用户角色和主要的工作流程说明

2、数据库表的设计（主要字段要设计好，最好是形成创建数据库表的sql语句。）

3、前端页面效果截图（主要的5-6个页面）

本项目使我根据上学期写的纯前端静态网站进行完善的，我让AI将其重构为 Vue 3 + Vite 的标准工程化单页面（SPA）布局。当时ProfileView.vue 的数据来自 Apifox Mock API，只能读取不能修改。现在我新建 Spring Boot 后端项目，通过 JDBC 连接 SQL Server，前端 Vue 通过 HTTP 调用 REST API。接入自己的 SQL Server 数据库，实现完整的增删查改（CRUD），并要求登录后才能操作数据。

罗德岛战术指挥中心 --- 项目文档

基于 Vue 3 + Spring Boot 的全栈个人网站项目，以游戏《明日方舟》为主题，实现干员数据管理、留言板、用户认证与审核工作流等核心功能。

一、项目基本情况

1、项目定位

专为 Web 全栈初学者设计的入门级实战项目。前端采用 Vue 3 组合式 API + Bootstrap 5 构建暗黑工业风格的响应式页面；后端采用 Spring Boot 3 + JDBC（SQL Server）提供 RESTful API，集成 JWT 认证与基于角色的访问控制。项目核心聚焦 CRUD 基础功能实现，同时引入审核工作流机制 ------ 普通用户的增删改操作需提交管理员审核后方可生效，兼顾功能完整性与安全性。

2、核心功能板块

网站包含 3 大核心内容板块：

首页（Home）：轮播图展示 + 游戏界面介绍卡片（抽卡、干员、主界面、集成战略、时装商店、终端），纯静态展示，访客可直接浏览。
干员档案（Profile）：干员数据表（编号、姓名、职业、身高、稀有度、所属势力），支持分页展示、关键词搜索。登录用户可新增/编辑/删除干员（需管理员审核），管理员可直接操作。
留言板（Guestbook）：左右分栏布局（图片 + 表单），任何人可提交留言（姓名、班级、学号、留言内容）。留言同样需管理员审核后方可公开展示。

3、用户角色与权限（三角色权限系统）

角色	权限说明
未登录用户（游客）	仅浏览：查看首页轮播、干员列表、已审核通过留言；支持注册、登录、游客一键浏览
普通注册用户（登录后）	基础浏览 + 干员增删改（提交审核）+ 查看自己提交的审核状态
管理员（最高权限）	全量浏览 + 干员直接增删改 + 审核干员变更（批准/拒绝）+ 留言审核（批准/拒绝）+ 用户管理（查看用户列表/提升为管理员）

4、前端与后端核心功能

4.1 用户模块

用户注册（用户名、密码、确认密码，前端基础校验）
用户登录（账号密码验证，JWT Token 会话保持）
游客模式（一键免登录浏览）
退出登录（清除 Token 与用户状态）
角色权限拦截（路由守卫拦截 /admin，API 层面 401/403 校验）

4.2 干员数据模块（全 CRUD + 审核工作流）

查询：分页展示干员列表（每页 30 条）、按姓名/职业/势力关键词搜索
新增：普通用户提交新增申请 → 管理员审核通过后入库；管理员直接入库
编辑：普通用户提交修改申请 → 管理员审核通过后更新；管理员直接更新
删除：普通用户提交删除申请 → 管理员审核通过后删除；管理员直接删除

4.3 审核模块

审核队列表（pending_changes）：记录所有待审核的增删改操作
干员审核：管理员查看待审核列表，支持批准/拒绝操作
留言审核：管理员查看待审核留言，支持批准/拒绝操作
审核状态管理：pending → approved / rejected

4.4 留言板模块

留言提交（姓名、班级、学号、留言内容，前端非空校验）
留言列表展示（仅展示已审核通过的留言）
管理员审核留言

4.5 数据校验

前端校验：用户名密码格式、确认密码一致性、表单非空校验
后端校验：JWT Token 有效性验证、角色权限拦截
权限校验：路由守卫 + API 拦截双重保障，禁止越权操作

5、前端技术要求

采用 Vue 3 Composition API（<script setup>） + Vue Router 4 实现 SPA 单页应用
采用 Vite 6 作为构建工具，支持 HMR 热更新与 Proxy 代理
采用 Bootstrap 5 UI 框架，实现响应式布局（适配电脑、平板、手机）
全局自定义暗黑工业风 + 源石科技美学设计令牌体系（CSS 变量驱动）
使用 Google Fonts（Orbitron + Noto Sans SC）打造科幻感字体体系
集成 Font Awesome 6 图标库
页面包含：首页、登录/注册页、干员档案页（表格+分页）、留言板页（表单+列表）、管理员后台页（Tab 切换：用户管理 / 干员审核 / 留言审核）
全局动画：六边形装饰浮动、卡片入场交错动画、按钮 hover 光效、表格 hover 高亮

二、技术架构

1、前端技术栈

技术	版本	用途
Vue	3.5.13	核心框架（Composition API）
Vue Router	4.5.1	SPA 路由管理
Vite	6.3.5	构建工具与开发服务器
Bootstrap	5.3.5	响应式 UI 框架
@popperjs/core	2.11.8	Bootstrap 弹出层依赖
Font Awesome	6.7.2	图标库

2、后端技术栈

技术	版本	用途
Spring Boot	3.2.0	核心框架
Spring Boot JDBC	3.2.0	数据库访问（JdbcTemplate）
MS SQL Server JDBC	12.10.0	SQL Server 数据库驱动
jjwt (io.jsonwebtoken)	0.12.3~0.12.6	JWT Token 签发与校验
Java	17	运行环境
Maven	-	项目构建

3、项目结构

复制代码

个人网页/
├── index.html                      # 入口 HTML
├── vite.config.js                  # Vite 配置（端口3000，API代理至8080）
├── package.json                    # 前端依赖
├── src/                            # 前端源码
│   ├── main.js                     # 入口：挂载 Vue、Router、Bootstrap
│   ├── App.vue                     # 根组件：NavBar + router-view + FooterBar
│   ├── router/index.js             # 路由配置（含导航守卫）
│   ├── utils/auth.js               # 认证工具：Token管理、角色判断、authFetch
│   ├── assets/styles/global.css    # 全局暗黑风格样式 + CSS设计令牌
│   ├── components/
│   │   ├── NavBar.vue              # 导航栏（响应式、角色感知）
│   │   └── FooterBar.vue           # 页脚
│   └── views/
│       ├── HomeView.vue            # 首页：轮播图 + 卡片展示
│       ├── LoginView.vue           # 登录/注册（模式切换）
│       ├── ProfileView.vue         # 干员档案：表格 + 分页 + 搜索 + CRUD模态框
│       ├── GuestbookView.vue       # 留言板：表单提交 + 留言列表
│       └── AdminView.vue           # 管理员面板：用户管理/干员审核/留言审核
├── backend/                        # 后端源码（Spring Boot）
│   ├── pom.xml                     # Maven 配置
│   └── src/main/
│       ├── resources/application.properties  # 数据库/JWT配置
│       └── java/com/personal/
│           ├── Application.java              # Spring Boot 启动类
│           ├── config/CorsConfig.java        # CORS 跨域配置
│           ├── util/JwtUtil.java             # JWT 工具类
│           ├── dto/                          # 数据传输对象
│           │   ├── LoginRequest.java         # 登录请求
│           │   ├── LoginResponse.java        # 登录响应
│           │   └── RegisterRequest.java      # 注册请求
│           ├── model/                        # 数据模型
│           │   ├── Agent.java                # 干员实体
│           │   ├── User.java                 # 用户实体
│           │   ├── PendingChange.java        # 待审核变更实体
│           │   └── GuestbookMessage.java     # 留言实体
│           ├── service/                      # 业务逻辑层
│           │   ├── AuthService.java          # 认证服务
│           │   ├── AgentService.java         # 干员数据服务
│           │   └── GuestbookService.java     # 留言板服务
│           └── controller/                   # 控制器层
│               ├── AuthController.java       # /api/auth/* 认证接口
│               ├── AgentController.java      # /api/agents/* 干员CRUD接口
│               ├── ApprovalController.java   # /api/approvals/* 审核接口
│               ├── AdminController.java      # /api/admin/* 管理员接口
│               └── GuestbookController.java  # /api/guestbook/* 留言板接口
├── database.sql                    # 数据库初始化脚本
├── migrate.sql                     # 干员表字段迁移脚本（rarity、faction）
├── migrate_role.sql                # 用户角色字段迁移脚本
├── approval_migrate.sql            # 审核队列表迁移脚本
├── guestbook_migrate.sql           # 留言表迁移脚本
├── insert_30.sql                   # 追加30条干员数据
└── public/img/                     # 静态图片资源（轮播图、卡片图、logo等）

三、数据库核心表设计

1、干员表（agents）

字段名	类型	说明
id	INT (自增, 主键)	干员编号
name	NVARCHAR(50)	干员姓名
career	NVARCHAR(50)	职业（术师、近卫、狙击、重装、医疗、先锋、辅助、特种）
height	DECIMAL(5,2)	身高（cm）
rarity	INT (默认 1)	稀有度（1~6 星）
faction	NVARCHAR(50)	所属势力（罗德岛、龙门、企鹅物流、喀兰贸易等）

2、用户表（users）

字段名	类型	说明
id	INT (自增, 主键)	用户 ID
username	NVARCHAR(50) (唯一)	用户名
password	NVARCHAR(100)	密码
role	NVARCHAR(10) (默认 'user')	角色：user 普通用户 / admin 管理员

3、审核队列表（pending_changes）

字段名	类型	说明
id	INT (自增, 主键)	审核记录 ID
agent_id	INT (可空)	目标干员 ID（新建时为 NULL）
action_type	NVARCHAR(10)	操作类型：create / update / delete
name	NVARCHAR(50)	干员姓名
career	NVARCHAR(50)	干员职业
height	DECIMAL(5,2)	干员身高
rarity	INT	干员稀有度
faction	NVARCHAR(50)	干员所属势力
submitted_by	NVARCHAR(50)	提交者用户名
submitted_at	DATETIME	提交时间
status	NVARCHAR(10) (默认 'pending')	审核状态：pending / approved / rejected
reviewed_by	NVARCHAR(50) (可空)	审核者用户名
reviewed_at	DATETIME (可空)	审核时间

4、留言表（guestbook_messages）

字段名	类型	说明
id	INT (自增, 主键)	留言 ID
name	NVARCHAR(50)	留言者姓名
class_name	NVARCHAR(50)	班级
student_id	NVARCHAR(30)	学号
message	NVARCHAR(2000)	留言内容
created_at	DATETIME	提交时间
status	NVARCHAR(10) (默认 'pending')	审核状态：pending / approved / rejected

四、API 接口设计

1、认证接口 `/api/auth/*`

方法	路径	说明	认证
POST	/api/auth/register	用户注册	无
POST	/api/auth/login	用户登录，返回 JWT Token + role	无

2、干员接口 `/api/agents/*`

方法	路径	说明	认证
GET	/api/agents	获取所有干员列表	无
GET	/api/agents/{id}	获取单个干员详情	无
POST	/api/agents	创建干员	Bearer Token（管理员）
PUT	/api/agents/{id}	更新干员	Bearer Token（管理员）
DELETE	/api/agents/{id}	删除干员	Bearer Token（管理员）

3、审核接口 `/api/approvals/*`

方法	路径	说明	认证
GET	/api/approvals	获取待审核列表	Bearer Token（管理员）
GET	/api/approvals/count	获取待审核数量	Bearer Token（管理员）
POST	/api/approvals	提交审核申请	Bearer Token（普通用户）
PUT	/api/approvals/{id}/approve	批准审核	Bearer Token（管理员）
PUT	/api/approvals/{id}/reject	拒绝审核	Bearer Token（管理员）

4、管理员接口 `/api/admin/*`

方法	路径	说明	认证
GET	/api/admin/users	获取所有用户列表	Bearer Token（管理员）
PUT	/api/admin/users/{id}	修改用户角色	Bearer Token（管理员）

5、留言板接口 `/api/guestbook/*`

方法	路径	说明	认证
GET	/api/guestbook	获取已审核通过留言列表	无
POST	/api/guestbook	提交留言	无
GET	/api/guestbook/admin	获取所有留言（管理员）	Bearer Token（管理员）
PUT	/api/guestbook/{id}/approve	批准留言	Bearer Token（管理员）
PUT	/api/guestbook/{id}/reject	拒绝留言	Bearer Token（管理员）

五、路由设计

路径	名称	组件	权限
`/`	home	HomeView.vue	公开
`/login`	login	LoginView.vue	公开（支持 ?mode=register 切换注册模式）
`/profile`	profile	ProfileView.vue	公开（仅浏览）/ 登录后可操作
`/guestbook`	guestbook	GuestbookView.vue	公开（浏览+提交）
`/admin`	admin	AdminView.vue	管理员专属（路由守卫 + 组件内双重校验）

六、设计风格说明

项目采用暗黑工业风 + 明日方舟源石科技美学设计语言：

配色：深色背景（#060b14）+ 青蓝主色调（#00d4ff）+ 琥珀色辅助（#f0a500）+ 红绿状态色
字体：Orbitron（英文/标题，科幻感）+ Noto Sans SC（中文正文）
纹理：全局 CSS 网格线 + SVG 噪点叠加，模拟终端屏幕质感
形状：六边形装饰、斜切按钮（clip-path）、顶部发光线条
动效：卡片 hover 上浮 + 光晕、按钮 hover 填充动画、表格行 hover 高亮、页面入场淡入上移动画
图标：六边形符号 ⬡ / 菱形符号 ◆ 作为装饰元素

七、快速启动

1、数据库准备

在 SQL Server 中依次执行以下 SQL 脚本：

bash 复制代码

1. database.sql          # 创建数据库、agents 表、users 表、预置数据
2. migrate.sql           # 为 agents 表添加 rarity 和 faction 字段
3. migrate_role.sql      # 为 users 表添加 role 字段
4. approval_migrate.sql  # 创建 pending_changes 审核队列表
5. guestbook_migrate.sql # 创建 guestbook_messages 留言表
6. insert_30.sql         # （可选）追加 30 条干员数据

2、启动后端

bash 复制代码

cd backend
mvn spring-boot:run
# 后端运行在 http://localhost:8080

3、启动前端

bash 复制代码

npm install
npm run dev
# 前端运行在 http://localhost:3000，API 请求自动代理至 8080

4、测试账号

角色	用户名	密码
管理员	admin	123456

八、前端网页展示

还有待完善

web-第四次课后作业

罗德岛战术指挥中心 --- 项目文档

一、项目基本情况

1、项目定位

2、核心功能板块

3、用户角色与权限（三角色权限系统）

4、前端与后端核心功能

4.1 用户模块

4.2 干员数据模块（全 CRUD + 审核工作流）

4.3 审核模块

4.4 留言板模块

4.5 数据校验

5、前端技术要求

二、技术架构

1、前端技术栈

2、后端技术栈

3、项目结构

三、数据库核心表设计

1、干员表（agents）

2、用户表（users）

3、审核队列表（pending_changes）

4、留言表（guestbook_messages）

四、API 接口设计

1、认证接口 /api/auth/*

2、干员接口 /api/agents/*

3、审核接口 /api/approvals/*

4、管理员接口 /api/admin/*

5、留言板接口 /api/guestbook/*

五、路由设计

六、设计风格说明

七、快速启动

1、数据库准备

2、启动后端

3、启动前端

4、测试账号

八、前端网页展示

1、认证接口 `/api/auth/*`

2、干员接口 `/api/agents/*`

3、审核接口 `/api/approvals/*`

4、管理员接口 `/api/admin/*`

5、留言板接口 `/api/guestbook/*`