戴文渊期末大作业这个环节，最难的不是写代码，而是不知道从哪里开始。如果你打开编辑器只看到一片空白，脑子里转着“要做一个电子器件商城”却理不出头绪，那这篇内容就是给你准备的。我会用HTML、CSS、JavaScript三个维度，把一个完整的电子器件购物商城拆成具体页面、具体模块、具体代码，从页面骨架到购物车逻辑一路过一遍。不仅告诉你每段代码干什么，还会解释为什么这么写、踩过哪些坑。
先说一下这篇内容的覆盖面：一个完整的商城项目，通常包括首页、商品列表页、商品详情页、购物车页面这几个核心页面。考虑到期末大作业的时间成本和答辩需求，我会以“一个index.html + 数据驱动渲染 + localStorage本地存储”为主线，做出来既能跑得流畅，也方便在答辩时讲清楚逻辑。就算你的课程要求多页跳转，这套思路改造成多页面结构也不难，我会在对应位置把改法一并说清楚。
1. 项目蓝图：先把商城拆成一张页面地图再动手
1.1 别做“五张页面各做各的”，要在一张图里想清楚串法
很多同学做大作业的习惯是：先写一个首页，写完再说。结果首页写完了，发现要加详情页，代码结构没留余地，后面全在打补丁。做商城这种项目，第一步不是打开编辑器，而是拿出一张纸，把“用户会点什么、点了之后去哪”画出来。
我建议把商城拆成这几个页面角色：
| 页面 | 核心职责 | 主要功能点 |
|---|---|---|
| 首页（index.html） | 品牌展示+分流入口 | 导航栏、轮播图、商品分类、推荐商品、页脚 |
| 商品列表页（list.html） | 展示分类商品 | 分类筛选、价格排序、商品卡片 |
| 商品详情页（detail.html） | 展示单个商品信息 | 商品图片、参数、加入购物车 |
| 购物车页（cart.html） | 管理已选商品 | 数量加减、单选全选、金额合计 |
如果你选的题目是“电子器件商城”，商品分类可以这样拆：开发板、传感器、无线模块、显示模块、电源模块、电子工具。这个分类本身也在向老师传递一个信息——你有意识地组织过商品体系，而不是随机罗列。
页面之间的串联方式要提前定好：导航栏每个分类项，跳转到 list.html?category=传感器；商品卡片点击，跳转到 detail.html?id=3；加入购物车成功后，通过 location.href 跳到购物车页。URL参数传值这个知识点，在答辩时几乎必被问到，所以千万别只是“能用”，要能讲清楚。
1.2 数据先行：数组模拟数据库，页面只是数据的“展示层”
商城项目最核心的思维转变是：数据要和页面分离。大学生最容易犯的错是把商品信息一个个硬编码在HTML标签里，好像首页写两个商品、列表页再写一遍，这会让代码冗余、后期改价格要改好几个地方。
正确做法是，把商品数据集中放在一个 JavaScript 数组中，页面通过遍历数组来动态生成。这个数组就是一个“内存数据库”，商品数据长这样：
javascript复制const products = [
{ id: 1, name: 'STM32F103C8T6 最小系统板', category: '开发板', price: 19.9, oldPrice: 29.9, sales: 326, rating: 4.8, image: 'img/stm32.jpg', desc: '基于ARM Cortex-M3内核，主频72MHz' },
{ id: 2, name: 'ESP8266 WiFi 模块', category: '无线模块', price: 12.5, oldPrice: 18.0, sales: 410, rating: 4.6, image: 'img/esp8266.jpg', desc: '支持串口转WiFi，可远程控制' },
{ id: 3, name: 'HC-SR04 超声波测距模块', category: '传感器', price: 6.8, oldPrice: 8.5, sales: 523, rating: 4.9, image: 'img/hcsr04.jpg', desc: '2cm-400cm非接触式距离测量' },
// 继续扩充到 12~16 个商品
];
每条数据的字段名要尽量规范：id 唯一标识、name 商品名、category 所属分类、price 现价、oldPrice 原价（做划线价）、sales 销量（做排序）、rating 评分、image 图片路径、desc 简要描述。
当商品数据独立成一个数组之后，后续所有功能都围绕这一个数组转：筛选是对数组做 filter，排序是对数组做 sort，详情页是根据 id 用 find 找到指定商品。页面上的所有变化，本质上都是“重新渲染数组”。
1.3 目录结构：从第一天就按照规范建文件夹
我见过太多学生把JS、CSS、图片全部平铺在一个文件夹里，文件名还是 新建文本文档(2).txt。这会在答辩演示时给老师留下非常不好的印象。合理的目录结构应该是分层的：
text复制electronics-mall/
├── index.html # 首页
├── list.html # 商品列表页
├── detail.html # 商品详情页
├── cart.html # 购物车页
├── css/
│ ├── common.css # 全局公共样式（变量、重置、导航、页脚）
│ └── index.css # 首页专属样式
├── js/
│ ├── data.js # 商品数据数组
│ ├── common.js # 公共逻辑：导航高亮、购物车角标
│ ├── index.js # 首页逻辑：轮播、推荐商品渲染
│ ├── list.js # 列表页逻辑：筛选、排序、渲染
│ ├── detail.js # 详情页逻辑：根据URL参数展示商品
│ └── cart.js # 购物车逻辑：增删改查、金额计算
└── img/ # 图片资源
命名规范也统一一下：文件名一律小写英文，单词之间用短横线连接。JS文件职责分离，“数据”“公共逻辑”“页面专属逻辑”分开写，这样答辩的时候你能清清楚楚地说出“这是数据层、这是公共组件、这是页面业务逻辑”——光是这一点，就比大多数同学高一个段位。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 从“能看”到“耐看”：CSS布局与样式打磨
2.1 Flex布局：一份能说清原理的排版方案
CSS布局是大作业最容易“翻车”的地方，也是老师重点看的地方。很多同学还在用 float 一行行飘，飘完还得用 clearfix 清理浮动，又麻烦又容易出问题。我强烈建议直接上 Flex布局，一是代码量少，二是在答辩时你能讲清楚“容器和项目”的关系，这本身就是加分点。
拿顶部导航栏举例，结构是这样的：
html复制<header class="navbar">
<div class="logo">芯选商城</div>
<nav class="menu">
<a href="index.html">首页</a>
<a href="list.html?category=开发板">开发板</a>
<a href="list.html?category=传感器">传感器</a>
<a href="list.html?category=无线模块">无线模块</a>
</nav>
<div class="search-box">
<input type="text" placeholder="搜索电子器件">
<button>搜索</button>
</div>
<div class="cart-icon">
<a href="cart.html">购物车<span id="cartBadge">0</span></a>
</div>
</header>
对应CSS：
css复制.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
height: 60px;
background: #1a1a2e;
position: sticky;
top: 0;
z-index: 999;
}
.menu {
d