HTML 大作业NEW

FootStyle鞋类电商

FootStyle 鞋类电商 PC 端演示站，原生 HTML+CSS+JS 单页应用，含商品展示、购物车、下单结算、订单查询与登录注册，localStorage 模拟存储，无需后端。

评分:4.8/5.0

销量:26

发布:6/15/2026

难度:L1 入门级

获取完整源码

演示视频仅作效果参考。完整源码、项目说明与运行答疑，请私聊沟通（适合毕业设计 / 课程设计 / 课设参考）。

获取完整源码观看演示视频

✓含项目说明文档，便于对照学习

✓可本地运行，适合课设演示

✓沟通获取后可咨询运行问题

项目封面

项目概览

FootStyle 是一款面向 PC 端的时尚鞋类电商演示网站，采用原生 HTML5、CSS3 与 JavaScript（ES6+）以单页应用形式组织，通过 localStorage 模拟购物车、用户与订单数据持久化。涵盖首页商品展示、详情页、购物车管理、下单结算、我的订单及登录注册等完整购物流程，适合作为毕业设计中原生 JavaScript SPA 开发、电商业务流程与前端数据存储的练习项目。

项目说明

FootStyle鞋类电商

项目简介

FootStyle 是一款面向 PC 端的时尚鞋类电商演示网站，采用纯前端技术实现，无需后端服务即可运行。项目以单页面应用（SPA）形式组织，通过原生 HTML、CSS、JavaScript 完成商品展示、购物车、下单结算、订单查询及用户登录注册等完整购物流程，数据持久化使用浏览器 localStorage 模拟存储。

技术栈

类别	技术
页面结构	HTML5
样式	CSS3（CSS 变量、Grid 布局、响应式设计）
交互逻辑	原生 JavaScript（ES6+）
数据存储	localStorage（购物车、用户、订单）
运行方式	浏览器直接打开 `index.html`

功能介绍

1. 首页

顶部 Banner 宣传区，展示品牌主视觉
热门商品网格列表，展示 6 款鞋类商品（名称、价格、图片）
支持「查看详情」与「加入购物车」快捷操作
顶部导航栏固定（sticky），可随时切换页面

2. 商品详情

展示商品大图、名称、价格、详细描述
数量选择器（增减按钮），可指定购买数量
一键加入购物车，并实时更新头部购物车角标

3. 购物车

展示已添加商品（图片、名称、单价、数量）
支持修改商品数量、删除单品
自动计算并显示购物车总价
头部购物车图标显示商品总件数角标
点击「结算」进入下单流程（需先登录）

4. 下单结算

填写收货信息：姓名、手机号、地址、城市、邮编
选择支付方式：支付宝、微信支付、银行卡
右侧订单摘要实时展示商品明细与合计金额
提交订单后自动清空购物车，并跳转至「我的订单」

5. 我的订单

按时间倒序展示历史订单列表
每条订单包含：订单号、下单时间、订单状态、商品明细、订单总额
默认订单状态为「待发货」

6. 用户登录 / 注册

登录 / 注册 Tab 切换，同一页面完成两种操作
注册：用户名、邮箱、密码，邮箱唯一性校验
登录：邮箱 + 密码验证，成功后显示欢迎语
登录后头部显示用户名与「退出」按钮
结算下单前强制要求登录

7. 页面导航

单页应用架构，通过 data-page 属性切换视图，无页面刷新
包含页面：首页、商品详情、购物车、结算、我的订单、登录注册

商品数据

项目内置 6 款鞋类商品，涵盖运动鞋、高跟鞋、休闲鞋、靴子等品类：

ID	商品名称	价格	分类
1	经典款白色运动鞋	¥599	运动鞋
2	时尚黑色高跟鞋	¥799	高跟鞋
3	简约休闲小白鞋	¥399	休闲鞋
4	冬季保暖短靴	¥899	靴子
5	复古慢跑鞋	¥699	运动鞋
6	优雅尖头高跟鞋	¥899	高跟鞋

本地存储说明

localStorage 键名	用途
`cart`	购物车商品列表
`users`	注册用户数据
`currentUser`	当前登录用户
`orders`	历史订单记录

文件夹目录

pc-shop/
├── index.html              # 项目主入口（HTML 结构 + CSS 样式 + JavaScript 逻辑）
├── images/                 # 商品与页面图片资源
│   ├── shoes_1.png         # 首页 Banner 背景图
│   ├── shoes_2.png         # 经典款白色运动鞋
│   ├── shoes_3.png         # 时尚黑色高跟鞋
│   ├── shoes_4.png         # 简约休闲小白鞋
│   ├── shoes_5.png         # 复古慢跑鞋
│   ├── shoes_6.png         # 冬季保暖短靴
│   └── shoes_7.png         # 优雅尖头高跟鞋
├── 演示材料/               # 项目演示相关素材
│   └── 演示视频.mp4        # 功能演示录屏
└── 项目说明.md             # 本说明文档