全栈《网页建设与设计》课程作业示例。系统涵盖游客浏览、会员订房、管理员审核、VR 沉浸式看房、房量统计等完整流程，可作为课堂演示、个人作品集或毕业设计的参考。

• 双端体验：游客/会员端 + 管理员后台，支持移动端自适应。
• 沉浸式展示：房型多媒体图集 & VR 模态窗口，支持视频和可滚动缩略图。
• 业务闭环：账户注册登录、VIP 折扣、入住/退房管理、房量曲线与审计日志。
• 数据可视化：Chart.js 绘制 14 天房态趋势，管理员实时掌握资源。
• SQLite 本地化：开箱即用的嵌入式数据库，自动建表与种子数据，适合课堂演示。

以下步骤假设你从未安装过 git/npm。整个流程在 Windows 10/11 的普通权限账户下即可完成。

1. 同时按下 Win + R，弹出“运行”窗口。
2. 输入 cmd 后回车，即可打开命令提示符（黑底白字）。
3. 可先输入 ver 查看系统版本，确保在 Windows 10 或 11 上。

1. 在浏览器访问 https://git-scm.com/download/win。
2. 下载默认的 64-bit 安装包，双击运行，一路点击 Next，保持默认选项。最后点击 Install，完成后 Finish。
3. 回到命令行，输入 git --version 验证安装成功，若能看到版本号（例如 git version 2.x.x）即可。

1. 打开 https://nodejs.org/en/download。
2. 选择 LTS（长期支持版）Windows 安装程序（.msi）。
3. 双击安装，保持默认配置。安装完成后重新开启命令行。
4. 运行以下命令确认版本：

   node -v
   npm -v

   若能显示版本号（例如 v20.x.x、10.x.x），表示 Node.js 与 npm 均已就绪。

1. 在命令行中，选择一个存放项目的目录。例如放到桌面：

   cd %USERPROFILE%\Desktop

2. 克隆公开仓库：

   git clone https://github.com/elpsykongloo/JLU2025WebDesign-HotelRoom.git

3. 进入项目文件夹：

   cd JLU2025WebDesign-HotelRoom

第一次启动前需要安装依赖模块，运行：

npm install

命令会读取 package.json 并下载所有必需包。若网速较慢，请耐心等待直至出现 added xx packages。

npm run seed

该命令会自动创建 data/hotel.db 并插入房型、账号、预订示例。若命令成功，会看到 Seed completed.。

npm run dev

执行后，终端会显示 Hotel Room Management server running on port 4000。保持窗口开启，打开浏览器访问：

• 前台（游客/会员端）：http://localhost:4000/
• 后台（管理员端）：http://localhost:4000/admin

终止服务：在命令行窗口按 Ctrl + C，选择 Y 或 Yes 即可结束。

• 端口被占用：如果 4000 端口冲突，修改 src/server/config.js 中 SERVER_PORT，或运行前关闭占用程序。
• 依赖安装失败：尝试执行 npm cache clean --force 后重新 npm install，或检查网络代理。
• 命令找不到：确保已重开命令行窗口（让 PATH 生效）。

技术栈选择理由：

• Node.js + Express：轻量、生态成熟，适合课程作业与快速迭代。
• better-sqlite3：零安装成本的嵌入式数据库，直接持久化到文件，便于拷贝演示。
• 原生 HTML/CSS/ES Modules：保持学习曲线友好；配合 Chart.js 提供数据可视化；VR 模态以原生 DOM + CSS 实现，突出设计思路。
• bcrypt + JWT：确保账户密码安全与鉴权规范。

所有示例数据在 npm run seed 时自动生成。若需重置，可删除 data/hotel.db 后重新执行该命令。

以下问题是《网页建设与设计》课程老师常见提问，建议提前准备要点与 Demo 环节。

1. 项目定位与需求分析

   • 目标用户：游客（浏览）、注册会员（预订）、酒店管理员（维护房态）。
   • 核心痛点：房型资源可视化、预订流程闭环、VIP 差异化服务。
   • 需求来源：课程要求 + 真实酒店业务抽象，强调“使用时间管理”。

2. 整体架构 & 技术栈选择

   • 前后端分离但同仓部署，Express 负责 API 与静态文件；前端使用原生技术以体现设计能力。
   • 选择 SQLite（better-sqlite3）的原因：零配置、适合教学、支持事务与 WAL 模式，性能优于 sqlite3 包。
   • 模块化服务层（service）增强可维护性，便于后续替换数据库或引入 ORM。

3. 数据库设计

   • 表结构：users、room_types、bookings、vip_discounts、room_inventory_audit。
   • 关键字段：房型 availability 通过日期计算得出而非冗余存储，避免并发问题。
   • 退房计费逻辑：以 12:00/14:00 为结算界限，计算 night 数；VIP 延迟退房不额外收费。

4. 前端交互与界面设计

   • 视觉：蓝色系主调、圆角卡片、逐层阴影符合现代酒店品牌气质。
   • 交互：VR 模态支持键盘 ESC 关闭、滚轮滚动、缩略图切换。移动端栅格自动折行。
   • 数据与呈现分离：通过 fetch API 获取 JSON，确保后端更换不影响 UI。

5. 安全与鉴权

   • 密码采用 bcrypt 加盐 Hash；JWT Token 设定 2 小时过期。
   • 管理员路由使用 authenticate + authorizeRoles('admin') 中间件双层校验。
   • 前端对关键操作（取消订单）增加确认提示，避免误操作。

6. 测试与调试

   • 手工测试用例：注册登录、重复预约、房量不足、入住/退房流程、折扣计算。
   • 自动化建议：后续可使用 Jest + Supertest 编写 API 测试；前端可引入 Playwright 做端到端模拟。

7. 扩展与优化思路

   • 接入第三方支付或短信通知。
   • 增加房型内容管理（图集上传、Markdown 描述）。
   • 引入角色权限更多细分（前台客服、财务等）。
   • 使用 React/Vue 重写前端，以组件化增强复用，同时保留原生版本作为教学对比。

8. 演示顺序建议

   1. 游客浏览 → VR 看房。
   2. 以示例 VIP 登陆 → 创建预订 → 查看订单列表。
   3. 切换管理员账号 → 查看待处理订单 → 执行入住/退房 → 查看房量曲线自动更新。
   4. 后台房量调整 → 前台刷新房型卡片 → 数据联动。
   5. 强调安全、扩展性以及设计亮点。

9. 答辩 Tips

   • 准备系统架构图、数据库 ER 图、流程图。
   • 说明时间管理策略与 VIP 差异化逻辑（对题目“以中午 12 点为界”的响应）。
   • 强调自己在前端设计/后端逻辑/数据建模的具体贡献。
   • 若团队合作，讲清分工、协作方式（Git 分支、Issue、PR 流程）。

将下列 Prompt 粘贴到你的 AI（如 Cursor、GitHub Copilot Chat、Claude 等），即可快速生成个性化版本。请根据实际需求调整姓名/学号/主题。

你现在扮演全栈工程师 + 设计总监。请在保持系统功能稳定的前提下，对“星旅酒店 · 客房管理系统”代码仓库做深度定制。新的主人公信息如下：
- 姓名：张三
- 学号：55221401

任务要求（务必全部满足）：
1. **个人信息替换**：将项目内所有与“米饭不是配菜”或原作者相关的文案、变量、注释、页脚等替换为张三及其学号信息（中英文均要搜索）。
2. **视觉与品牌重塑**：
   - 改用全新配色方案（例如暖色调或暗黑主题），确保前后台配色一致，但风格与原作明显不同。
   - 调整字体、卡片样式、按钮圆角、背景纹理等，让老师一眼就看出是全新设计。
   - 替换首页头图、房型图集、VR 预览素材，可使用本地占位图或新的在线图源。
3. **前端表现形式创新**：
   - 在首页新增至少一个展示区块（例如“客户评价”或“特色服务”），包含真实排版与数据。
   - 在管理员后台新增一个统计/设置面板（例如“入住周报”或“VIP 等级配置”），即使是静态占位，也要有合理的数据结构。
4. **数据库与种子数据扩展**：
   - 扩充房型、用户、预订等种子数据，新增至少 3 个房型和 5 个测试账号（含不同角色/会员等级）。
   - 为新房型准备匹配的图片/视频链接，保证 VR 组件正常运行。
   - 调整 `VIP_DISCOUNTS`、`SAMPLE_BOOKINGS` 等配置，使演示时更“真实多样”。
5. **功能保持稳定**：修改后的系统必须能够：
   - 正常 `npm install` / `npm run seed` / `npm run dev`；
   - 前后台页面均可访问，预订流程无报错；
   - 管理员仍可执行入住、退房、房量调整。
6. **必要文档更新**：
   - 在 README 中更新新主题、新账号信息和定制亮点。
   - 写明张三是项目负责人，描述其角色职责。
7. **提交说明**：列出所有修改文件及主要变更点，方便后续手工验证。

动手前先给出行动计划，逐步执行并在关键步骤输出简洁的确认信息。若某些资产（如新图片）需要下载，请优先使用公共图源或给出生成建议。

• 部署到云端：例如使用 Railway / Render / Vercel（自带 Node 环境 + SQLite）。
• 单元测试：为 services/ 编写 Jest 测试，确保入住/退房逻辑稳定。
• 多语言支持：提取界面文案，使用 i18n 工具或 JSON 配置实现中英切换。
• 性能优化：前端引入资源懒加载、图片占位符；后端对热门接口做缓存。
• 可访问性：增加 ARIA 标签、键盘导航支持，满足更高质量的设计要求。

祝你答辩顺利，也欢迎在 GitHub 上为项目点亮 Star ⭐，或提交 Issue/PR 与我们交流改进思路！