MISSION BRIEFING
前端课程实训，猫咖主题静态站
完成方式
Solo
单人项目，从设计到实现全链路独立完成。
技术栈
Vanilla
原生 HTML、CSS 以及 JavaScript，符合课程“不用框架”要求。
状态管理
LocalStorage
用本地存储模拟登录态与核心数据持久化。
核心模块
4
点单、预约、个人中心以及留言板形成完整体验闭环。
交互重点
流程化
把“浏览→下单与预约→查看记录”做成清晰路径。
设计取向
校园化
结合学校特色与猫咖场景，让主题更具体。
SCREEN TOUR
项目展示
点击图片可放大查看
页面列表
点击缩略图切换；点击右侧大图可放大查看
当前预览
点击图片可放大查看；放大后支持：滚轮缩放 · 拖拽平移 · ←/→ 切图 · Esc 关闭
首页展示 - 包含Banner轮播和特色导航
项目概述
“广科猫咖”是一个偏“可逛、可点、可预约、可互动”的前端静态项目。它的灵感来自我在校期间经常看到校园里有很多小猫，同时“前端开发课程设计”的要求是为一家咖啡店制作网站来检验学习成果。于是我把广东科技学院的校园气质、咖啡店场景以及猫咪元素融合在一起，做出了一个结构清晰、交互完整的小站点，用来呈现我对页面布局、表单校验以及本地状态管理等基础能力的掌握情况。
技术栈
CORE
核心技术
- HTML5
- CSS3
- JavaScript
FEATURES
功能实现
- 动态轮播
- 表单验证
- LocalStorage
开发过程
开发过程大致按设计、开发、测试以及答辩这几步来推进。
- 1
任务分析
我先依据课程实训指导书把需求与得分点逐项拆出来，并确定以“猫咖”作为主题方向，核心模块囊括首页展示、餐点点单、猫咪预约以及用户互动等内容。
- 2
设计阶段
在视觉设计上，我借助 DALL-E 与 Photoshop 完成 Logo 与轮播图素材，并把整套风格与色调先统一好，确保后续编码阶段可以围绕同一套视觉语言去推进。
- 3
编码实现
鉴于课程要求不能使用框架，我选用原生 HTML5 与 CSS3 搭建页面骨架与通用样式，再配合 JavaScript 去把交互做出来，比如猫咪预约流程与留言板功能，并借助 LocalStorage 做关键数据的本地持久化。
- 4
测试答辩
在交付前我对各功能模块做了较全面的测试，并围绕易用性与响应速度做小幅优化。最后通过现场一对一演示与讲解，把项目的设计思路以及技术实现亮点完整呈现出来。
功能亮点
- 导航栏与轮播图展示
- 限时秒杀并带倒计时功能
- 登录与注册表单验证
- 本地存储用户信息
- 商品分类与详情展示
- 购物车管理与结算流程
- 猫咪信息展示与图片放大预览
- 时间选择与预约提交
- 用户信息与订单查看
- 账户设置管理
- 留言发布与展示功能
- 删除功能与时间戳显示