企业官网建设流程全解析

HTML5+CSS3+JavaScript 实战：WEB 电商主题网站设计与实现（商城前台静态演示版）

一、前言

电子商务几乎是每一个学 Web 开发的人都绕不开的题目：它业务链条完整，覆盖了浏览、检索、下单、结算、订单跟踪等一整套流程，又对页面布局和交互细节有相当高的要求，因此长期被当作前端综合练习的经典题材。这次带来的项目是一个 WEB 电商主题网站——「惠选商城」，定位是面向普通消费者的综合类在线商城，覆盖数码、服饰、家居、美妆、食品五个品类，二十四种商品样本数据。

与常见的后台管理系统不同，这个项目的重心放在商城前台的完整购物动线上：从首页的运营位轮播、楼层化商品陈列，到商品检索与筛选、商品详情、购物车合并结算，再到订单列表与状态流转，形成了一个可以完整走通的用户旅程。整个站点以纯静态方式实现，不需要安装任何服务端环境，把源码目录里的 index.html 用浏览器打开即可体验全部功能。

需要说明的是，这是一个演示版本：为了做到开箱即用，数据层用浏览器本地存储（localStorage）模拟，注册登录、购物车、订单等数据都只保存在当前浏览器中，刷新或换浏览器后需要重新演示。文章下文会按技术栈、功能设计、数据设计、系统演示的顺序展开，供做课程设计、综合实践或前端练习的同学参考。

二、技术栈与整体架构

项目采用最经典的前端三件套组合：

• HTML5：负责页面结构，六个页面均为语义化标签组织，单页独立入口，页间通过 URL 参数传递状态（如商品 id、分类、搜索关键词）；
• CSS3：负责视觉呈现，全部样式集中在一个 style.css 中，使用了 CSS 变量统一主题色、Grid 布局做商品网格、Flex 布局做导航与工具条，轮播动画用原生 transition/animation 实现，未引入任何第三方样式库；
• JavaScript（ES6）：负责交互逻辑与数据层，拆分为 products-data.js（商品样本数据）、app.js（公共逻辑：会话、购物车、订单、页头页脚渲染）与页面内联脚本三层。

整体架构可以概括为「三页层 + 一数据层」：页面层（首页、商品列表、商品详情、登录注册、购物车、我的订单六个入口）通过 app.js 暴露的统一接口读写本地存储，商品基础数据则由静态 JS 文件常驻内存。这样的分层让每个页面只关心自己的渲染逻辑，公共的登录态、购物车角标、页头搜索框都由 app.js 统一注入，改一处即可全局生效。

值得一提的是体验细节：购物车角标数量在加购后即时刷新；未登录状态下点结算会toast提示并跳转登录页，登录成功后自动回到原流程；这些小交互都是纯前端状态机，不依赖任何接口。

布局适配方面，页面以 1180px 为标准栅格宽度，在小屏下通过媒体查询把商品网格从五列降为三列、详情页改为上下堆叠，保证常见的笔记本与平板打开时不出现横向滚动条。主题层面，全部颜色收敛为 CSS 变量，主色、文字色、背景色、圆角与阴影各占一个变量，想整体换个风格只需要改文件顶部十来行定义，维护成本很低。

三、功能设计

系统按「游客 — 注册用户」两种角色划分功能。游客可以浏览首页运营位、按分类或关键词检索商品、查看商品详情；注册用户在此基础上可以登录，进行加购、合并结算、生成订单、确认收货等完整购物操作。

商品列表页承担检索与筛选职责：顶部分类胶囊（全部/数码/服饰/家居/美妆/食品）与搜索关键词可叠加过滤，右侧提供综合排序、销量优先、价格升降四种排序方式，结果区以五列卡片网格呈现，每张卡片包含商品图区、名称、现价与原价、销量与品类标签，价格与折扣信息一眼可辨。

商品详情页是转化链路的核心：左侧为主图区与缩略图组（可切换预览），右侧依次是标题卖点、价格盒（现价、原价、立减金额、已售数量）、数量选择器与操作按钮区。点击「加入购物车」即写入本地购物车并刷新角标；点「立即下单」则先校验登录态，再自动加购并跳转购物车，减少了一步操作。

购物车页采用表格化布局：每行支持勾选、数量增减、单项删除，底部有全选、已选种类统计、金额合计与去结算按钮。结算时只取勾选项生成订单，订单号按时间戳生成，随后清空对应购物车项并跳转订单页，整个链路与真实商城的行为一致。

我的订单页以卡片列表展示历史订单：卡片头部是订单号、下单时间、下单账号与状态标签（已支付·待发货 / 已完成），中部是商品摘要与实付金额，底部按状态渲染不同操作——待发货订单可「确认收货」流转为已完成，已完成订单可以查看评价入口，完整模拟了订单生命周期。

四、数据设计

原论文中该系统按 MySQL 关系型数据库做设计，规划了用户表、商品表、购物车表、订单表与订单明细表，通过外键关联表达「用户—购物车—商品」「订单—订单明细」的关系。演示版在保留这套实体模型思路的前提下，把持久化介质替换为浏览器的 localStorage，按「键—JSON 值」的形式组织：

• hx_users：用户数组，元素含用户名、密码、注册时间，注册时做重名校验；
• hx_session：当前登录会话，记录用户名与登录时间，页头据此渲染欢迎语与退出入口；
• hx_cart：购物车数组，元素含商品 id、数量、勾选状态，数量增减与全选都作用在这份数据上；
• hx_orders：订单数组，订单内冗余了商品快照（名称、图标、单价、数量），即使样本数据调整，历史订单金额也不会失真。

这套「实体模型不变、存储引擎替换」的做法，对教学演示特别友好：一方面所有数据结构一目了然，打开源码就能读懂，甚至可以直接在浏览器控制台里查看每一步操作后数据的变化过程；另一方面将来若要升级为真实后端，只需把 app.js 中读写 localStorage 的 store 模块替换为接口调用，页面层代码几乎不用动，这也是分层设计带来的直接好处。

五、系统演示

商城首页：顶部运营轮播位按 4 秒自动切换，鼠标悬停暂停，底部指示条可手动定位；轮播下方是四项服务保障条（发货时效保障、正品保障、七天无理由、新人礼包），再往下按「热销推荐、数码专区、居家生活」三个楼层陈列商品，每层五张卡片，销量数据一目了然。

登录与注册：双 Tab 切换的卡片式表单，注册时实时校验用户名格式（3-16 位字母数字下划线）、密码长度与两次一致性，注册成功自动登录；登录态同步到页头，右上角显示欢迎语并可随时退出。

购物车与结算：勾选商品后底部实时计算合计金额，点「去结算」生成订单并清空对应购物车项，全程有 toast 反馈操作结果。

我的订单：订单按时间倒序排列，状态标签区分「已支付·待发货」与「已完成」，待发货订单点「确认收货」即完成状态流转，形成购物闭环。

六页走下来，一个普通消费者从逛店到成交的完整动线就演示完了，页面在 1280 宽度下布局稳定，常用宽度笔记本打开即可直接演示。

六、小结

这个 WEB 电商主题网站把电商前台最核心的几条链路——检索、详情、购物车、订单——用纯前端方式完整实现了一遍：技术上没有引入任何构建工具与第三方库，三个 JS 文件加一份全局样式就撑起了六页应用，适合作为前端入门到进阶的综合练习案例，也适合作为课程设计、综合实践环节的演示载体。

从工程角度看，它有两个值得借鉴的点：一是「页面层—公共逻辑层—数据层」的分层结构，让换存储引擎、改主题样式都只需动一处；二是订单数据冗余商品快照的处理思路，这是真实电商系统里非常常见的保数据一致的手段。后续如果有兴趣，还可以在此基础上扩展商品收藏、地址簿、模拟优惠券等模块，或者把数据层替换成真实接口，演进为全栈项目。

以上就是本项目的全部内容，如果你在做类似的前端项目或者对实现细节有疑问，欢迎评论区交流。

WEB电商主题网站商城前台源码 静态演示版（前端综合练习/课程设计）