本文最后更新于168 天前，其中的信息可能已经过时，如有错误请发送邮件到big_fw@foxmail.com
考核题目：实现一个简易在线商城前端页面
项目概述
学生需要独立完成一个简易在线商城的前端页面，包含商品展示、购物车功能和基本的交互效果。此项目旨在考核学生对HTML结构构建、CSS样式设计及JavaScript交互实现的能力。
一、功能需求
1. 页面结构（HTML）
- 创建完整的HTML5文档结构
- 实现以下主要板块：
- 顶部导航栏（包含网站Logo、导航链接、购物车图标）
- 商品展示区（网格布局展示商品）
- 商品详情模态框（点击商品时弹出）
- 购物车侧边栏（点击购物车图标时滑出）
- 页面页脚（版权信息等）
2. 样式设计（CSS）
- 使用CSS实现响应式布局（适配桌面端和移动端）
- 设计美观的商品卡片样式
- 实现购物车侧边栏的滑入滑出动画效果
- 商品详情模态框的遮罩和弹出效果
- 统一的配色方案和字体设置
3. 交互功能（JavaScript）
- 商品数据使用JavaScript数组或对象存储（至少6个商品）
- 实现以下功能：
- 点击商品卡片，弹出商品详情模态框
- 在商品详情模态框中可以调整购买数量并加入购物车
- 购物车侧边栏展示已选商品、数量、总价
- 购物车中可以增减商品数量或删除商品
- 实时计算购物车总金额
- 简单的表单验证（如数量不能小于1）
二、详细技术要求
1. HTML部分
- 语义化标签的正确使用（header, nav, main, section, footer等）
- 表单元素的合理使用（input, button, select等）
- 图片、图标等资源的引入
- 良好的代码结构和注释
2. CSS部分
- 使用Flexbox或Grid实现布局
- 媒体查询实现响应式设计
- CSS变量管理颜色、字体等样式值
- 过渡（transition）或动画（animation）效果
- 良好的代码组织和注释
3. JavaScript部分
- 使用原生JavaScript（不使用框架）
- DOM操作：选择元素、修改内容、样式和属性
- 事件处理：点击、输入、表单提交等
- 函数封装和模块化思想
- 数据操作：商品数据的增删改查
- 简单的本地存储（可选加分项）：刷新页面后购物车内容不丢失
三、评分标准（总分100分）
1. HTML结构（20分）
- 文档结构完整性（5分）
- 语义化标签的正确使用（5分）
- 代码规范与注释（5分）
- 无障碍性考虑（如alt属性）（5分）
2. CSS样式（30分）
- 视觉设计与美观度（10分）
- 响应式布局实现（10分）
- 动画与过渡效果（5分）
- 代码规范与组织（5分）
3. JavaScript功能（40分）
- 商品展示与交互（10分）
- 购物车功能完整性（15分）
- 代码逻辑与结构（10分）
- 错误处理与用户体验（5分）
4. 整体效果（10分）
- 项目完整性（5分）
- 代码提交规范（5分）
四、项目提交要求
- 提交内容：
- 完整的项目源代码（HTML、CSS、JS文件）
- 项目截图（至少3张，展示不同功能）
- 简单的说明文档（README.md，说明如何运行项目）
- 文件结构：
student-name-ecommerce/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── images/ （可选）
│ └── 项目用到的图片
└── README.md- 提交方式：
- 将整个项目文件夹打包为ZIP格式
- 命名为：
学号-姓名-商城项目.zip
五、注意事项（给学生的提醒）
- 从简单开始：先实现基础功能，再逐步添加复杂功能
- 注重代码质量：保持代码整洁、添加必要注释
- 测试充分：在不同设备和浏览器上测试页面效果
- 注意细节：交互反馈、错误处理等细节会影响用户体验
- 时间管理：合理分配时间，不要在前端样式上花费过多时间而忽略功能实现
- 寻求帮助：遇到困难时可以先尝试自己解决，确实无法解决时可以向老师提问
七、加分项（可选）
- 实现商品分类筛选功能（+5分）
- 添加商品搜索功能（+5分）
- 使用LocalStorage保存购物车数据（+5分）
- 实现商品评价功能（+5分）
- 添加页面加载动画或骨架屏（+5分）
八、考核目标说明
本次考核旨在评估学生对以下核心能力的掌握：
- HTML：结构化思维和语义化标签使用
- CSS：视觉设计、布局能力和响应式思维
- JavaScript：逻辑思维、DOM操作和事件处理
- 综合能力：问题分解、调试能力和项目规划
希望学生通过这个项目，将之前学到的零散知识整合成一个完整的应用，体验真实的前端开发流程。
祝各位同学顺利完成考核！
