尧图网站建设 
简介这是一份面向网页设计初学者与K12教学场景的前端实战项目源码以仿小米商城为蓝本帮助学习者在真实页面结构中掌握HTML、CSS与JavaScript的协同开发方式。项目完整呈现了导航栏、商品展示区、详情页、订单页、个人中心等典型电商模块适合作为期末作业参考或课堂案例。压缩包共1062个文件约33.81MB其中png、jpg、webp、gif等图片资源占主体用于商品图与页面素材css与html文件负责样式与结构搭建js文件实现交互逻辑另含字体、图标及项目配置等辅助文件。目前已有212人学习下载。通过研读与修改这套代码读者可理解盒模型、Flex布局、响应式设计及事件监听、DOM操作等核心知识点并借助清晰的目录结构快速定位页面模块锻炼从静态布局到动态交互的完整开发能力。1. 仿小米商城项目到底在仿什么从一张期末作业需求拆到可交付的代码结构很多同学接到「基于 Htmlcssjs 的仿小米商城项目源代码」这个题目时第一反应是去搜一份现成源码改改交差结果打开压缩包发现首页轮播图是写死的图片、购物车点了没反应、商品列表靠手写十几行 div 堆出来答辩时老师一句「你这个数据从哪来的」就卡住了。这个标题真正要交付的不是「长得像小米」而是一套用原生 Htmlcssjs 把电商首页、商品列表、详情页、购物车这条主链路串起来的静态站点并且代码结构要经得起翻看。它适合两类人一是网页设计期末需要交作业的学生二是刚学完三件套想找一个完整项目练手的人。核心难点不在视觉还原而在用 js 把「数据驱动渲染」这件事做出来哪怕数据是写死在数组里的。下面按我实际带人做这类作业的顺序把结构、实现、参数和踩坑一次讲清。2. 先定目录和数据结构仿小米商城源代码怎么组织才不像一坨2.1 页面清单与文件目录的对应关系仿小米商城的页面不算多但每个页面之间要有跳转关系否则老师点两下就发现是孤岛。我一般会先列一张页面清单再倒推目录结构。常见做法是首页、商品列表页、商品详情页、购物车页、登录页五个页面加上一个公共的 css 和 js 目录。页面文件作用依赖的公共资源index.html首页含轮播、分类导航、推荐商品base.css、index.jslist.html商品列表支持分类筛选base.css、list.jsdetail.html商品详情含规格选择和加入购物车base.css、detail.jscart.html购物车含数量增减和合计base.css、cart.jslogin.html登录表单做本地校验base.css、login.js目录上我习惯这样分根目录放 html 文件css 文件夹放 base.css重置样式和公共变量和各页面独立样式js 文件夹放公共的 common.js比如格式化价格、读取本地存储和各页面逻辑images 放商品图和图标。这样分的好处是老师问「你这个样式写在哪」你能直接指出来而不是所有东西塞进一个 style 标签。2.2 商品数据用数组还是 json 文件这是新手最容易翻车的地方。很多人把商品信息直接写在 html 里改一个价格要翻三个文件。正确做法是抽出一份数据源。因为纯静态项目没有后端我一般用两种方式一是直接在 js 里写一个 goods 数组二是单独建一个 goods.json 用 fetch 读取。前者简单但数据多了文件臃肿后者更接近真实项目但需要本地起服务直接双击打开 html 会因为跨域读不到 json。// js/data.js 商品数据源字段命名统一方便后续渲染复用 const goodsList [ { id: 1001, // 商品唯一标识加购物车时靠它去重 name: 小米手机 14, // 商品名称渲染到列表和详情 price: 3999, // 价格用数字存渲染时再格式化避免字符串拼接出错 img: images/phone1.jpg, // 主图路径相对 html 文件的位置 category: phone, // 分类标识列表页筛选靠它 desc: 骁龙处理器徕卡影像 // 简短描述详情页展示 }, { id: 1002, name: 小米平板 6, price: 1899, img: images/pad1.jpg, category: pad, desc: 11 英寸 2.8K 屏 } ];这段代码的关键是字段设计。id 必须唯一后面购物车增删改查全靠它price 存数字不存「3999」这种字符串否则算总价时要做一堆截取category 用来做列表页的分类筛选值要和导航里的>/* css/base.css 公共变量与重置 */ :root { --main-color: #ff6700; /* 小米橙按钮和价格都用它 */ --text-color: #333; /* 正文颜色 */ --border-color: #e0e0e0; /* 卡片描边 */ --radius: 8px; /* 统一圆角改一处全站生效 */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; color: var(--text-color); } .price { color: var(--main-color); font-weight: bold; }这里 box-sizing 设成 border-box 是血泪经验不设的话你给卡片加 padding 宽度就会撑破布局调半天调不明白。css 变量兼容性现在没问题老师也不会挑这个。注意 base.css 要在每个 html 的 head 里最先引入页面自己的样式放后面这样权重和覆盖顺序才对。3. 首页与列表页的 js 渲染把写死的 div 换成数据驱动3.1 轮播图的定时切换与指示点联动首页轮播是仿小米的门面但很多人写成一张静态图。用原生 js 做轮播的核心就三件事图片容器位移、定时器切换、指示点同步。我一般用 transform 位移而不是改 left性能更好也不容易出玄学问题。// js/index.js 轮播逻辑 const slides document.querySelectorAll(.slide); // 所有轮播项 const dots document.querySelectorAll(.dot); // 指示点 let current 0; // 当前索引 let timer null; // 定时器句柄方便清除 function goTo(index) { // 边界处理最后一张切回第一张 current (index slides.length) % slides.length; // 用 transform 整体位移每张宽度 100% document.querySelector(.slide-wrap).style.transform translateX(-${current * 100}%); // 指示点高亮同步 dots.forEach((d, i) d.classList.toggle(active, i current)); } function startAuto() { timer setInterval(() goTo(current 1), 3000); // 3 秒一张 } // 鼠标移入暂停移出继续这是常见交互要求 document.querySelector(.banner).addEventListener(mouseenter, () clearInterval(timer)); document.querySelector(.banner).addEventListener(mouseleave, startAuto); startAuto();逻辑说明goTo 里用取模运算处理边界比写 if else 判断最后一张干净。参数上 3000 是切换间隔作业里 3 到 5 秒都行太快显得晃。注意定时器一定要在鼠标移入时清掉否则用户想点指示点的时候图自己跑了体验很差。指示点点击事件里记得先 clearInterval 再 goTo不然会和自动播放打架。3.2 商品列表的循环渲染与分类筛选列表页是检验你会不会数据驱动的地方。不要手写十个商品卡片而是拿到 goodsList 后循环生成 html 字符串再插入。// js/list.js 渲染商品列表 const listBox document.querySelector(.goods-list); function render(list) { // map 生成 html 片段join 拼成字符串比 createElement 简洁 listBox.innerHTML list.map(item div classgoods-card>// js/detail.js 解析 url 参数并渲染详情 const params new URLSearchParams(location.search); const id Number(params.get(id)); // 取到 id 并转成数字 const goods goodsList.find(g g.id id); // 在数据源里找到对应商品 if (!goods) { // 找不到就提示避免页面空白让人以为坏了 document.querySelector(.detail-box).innerHTML p商品不存在/p; } else { document.querySelector(.detail-box).innerHTML img src${goods.img} alt${goods.name} h2${goods.name}/h2 p classprice${goods.price}/p button classadd-cart>// js/cart.js 购物车读写 const CART_KEY mi_cart; // 存储键名加前缀避免和其他项目冲突 // 读取购物车没有就返回空数组 function getCart() { return JSON.parse(localStorage.getItem(CART_KEY)) || []; } // 写入购物车 function saveCart(cart) { localStorage.setItem(CART_KEY, JSON.stringify(cart)); } // 加入购物车已存在则数量加一不存在则新增 function addToCart(id) { const cart getCart(); const item cart.find(c c.id id); if (item) { item.count 1; } else { cart.push({ id: id, count: 1 }); } saveCart(cart); renderCart(); // 加完立即刷新界面 }参数说明CART_KEY 加 mi_ 前缀是习惯避免同域名下多个项目互相覆盖。localStorage 只能存字符串所以存取都要 JSON 转换忘了 parse 会拿到字符串没法用。count 存数量而不是存整个商品对象是为了数据源改了价格后购物车能跟着更新如果存了价格快照改价就对不上了。4.2 购物车渲染与数量增减购物车页面要把 id 还原成商品信息再算小计和总计。// js/cart.js 渲染购物车 function renderCart() { const cart getCart(); const box document.querySelector(.cart-list); let total 0; if (cart.length 0) { box.innerHTML p classempty购物车还是空的/p; document.querySelector(.total).textContent 0; return; } box.innerHTML cart.map(c { const goods goodsList.find(g g.id c.id); // 用 id 还原商品 const subtotal goods.price * c.count; // 小计 total subtotal; // 累加总计 return div classcart-item img src${goods.img} alt${goods.name} span${goods.name}/span span classprice${goods.price}/span button classminus>// js/cart.js 结算校验 document.querySelector(.checkout).addEventListener(click, () { const cart getCart(); if (cart.length 0) { alert(购物车是空的先去挑点东西吧); return; } // 登录状态用 localStorage 里的标记判断 const isLogin localStorage.getItem(mi_login) 1; if (!isLogin) { alert(请先登录); location.href login.html; return; } alert(下单成功演示); });登录标记在 login.js 里校验通过后写入值用字符串 1读取时也要按字符串比用 而不是 避免类型转换带来的意外。这套校验虽然简单但答辩时能说清「为什么空购物车不能结算」就够了。5. 避坑与排查仿小米商城源代码最常见的五个翻车点5.1 图片路径写错导致整页裂图现象本地打开 html 图片全裂控制台一堆 404。原因路径写成了绝对路径或者大小写和实际文件名不一致Windows 不区分大小写但传到服务器或换 Mac 就出问题。解决统一用相对路径图片文件名全小写引用时和文件名逐字对上改完在浏览器控制台 Network 面板确认每张图都是 200。5.2 事件绑定在渲染之前导致点击没反应现象商品卡片的点击事件不生效或者只有第一页能点。原因js 在 head 里执行时 dom 还没生成querySelectorAll 拿到空集合。解决把 script 放到 body 末尾或者用 DOMContentLoaded 包一层再或者用事件委托绑在父容器上。我一般直接放 body 末尾最省事。5.3 localStorage 数据格式不对导致购物车报错现象刷新后购物车页面直接白屏控制台报 JSON 解析错误。原因之前存进去的不是合法 json或者手动改过 localStorage。解决getCart 里加 try catch解析失败就返回空数组并清掉脏数据别让一个坏数据把整个页面搞崩。5.4 轮播定时器和手动切换打架现象点了指示点之后图片乱跳或者切换速度越来越快。原因每次 startAuto 都新建定时器旧的没清多个定时器叠加。解决startAuto 开头先 clearInterval(timer)保证同一时间只有一个定时器在跑。5.5 价格用浮点数计算出现小数误差现象购物车总计出现 3999.0000000001 这种。原因js 浮点数精度问题。解决价格以分为单位存整数或者渲染时用 toFixed(2) 格式化。作业里用 toFixed(2) 就够但要知道这是显示层补救不是根治。6. 让作业多拿两分的进阶技巧用 fetch 加载数据与响应式收尾如果你想让这份仿小米商城源代码看起来比同学高一档可以把写死的 goodsList 抽成 goods.json用 fetch 异步加载。这样数据源和逻辑彻底分离老师问起来你能讲清楚「为什么真实项目不把数据写死在 js 里」。做法是建一个 goods.json内容就是那个数组然后// js/data.js 改为异步加载 async function loadGoods() { try { const res await fetch(data/goods.json); // 路径相对 html 文件 if (!res.ok) throw new Error(加载失败); return await res.json(); } catch (e) { console.error(商品数据加载失败, e); return []; // 失败返回空数组页面降级显示 } }注意 fetch 读本地文件在 file:// 协议下会被浏览器拦截必须用本地服务打开比如在项目目录执行 python -m http.server 8000然后访问 localhost:8000。这一步很多同学不知道双击 html 发现数据出不来就以为代码错了其实是协议问题。参数上端口 8000 随意别和系统占用的冲突就行。另一个加分点是响应式。仿小米的页面在手机上会挤成一团加一段媒体查询就能改善。我一般断点设在 768px小于这个宽度时商品列表从四列变两列导航折叠成汉堡菜单。媒体查询写在 base.css 末尾按 max-width 从大到小排列避免覆盖混乱。/* 响应式小屏两列 */ media (max-width: 768px) { .goods-list { grid-template-columns: repeat(2, 1fr); } .banner { height: 180px; } }最后说个我自己的习惯每做完一个页面先在浏览器里把窗口从宽拖到窄看有没有横向滚动条有就说明某个元素宽度写死了。这个动作花不了十秒但能提前发现大部分布局问题比答辩时被老师当场拖窗口强。这套结构我前后带过几届人做按这个顺序走基本不会卡在某个点上出不来。希望帮到你。本文还有配套的精品资源点击获取 仿小米商城源代码：基于Html+css+js的电商项目实战与避坑指南
简介这是一份面向网页设计初学者与K12教学场景的前端实战项目源码以仿小米商城为蓝本帮助学习者在真实页面结构中掌握HTML、CSS与JavaScript的协同开发方式。项目完整呈现了导航栏、商品展示区、详情页、订单页、个人中心等典型电商模块适合作为期末作业参考或课堂案例。压缩包共1062个文件约33.81MB其中png、jpg、webp、gif等图片资源占主体用于商品图与页面素材css与html文件负责样式与结构搭建js文件实现交互逻辑另含字体、图标及项目配置等辅助文件。目前已有212人学习下载。通过研读与修改这套代码读者可理解盒模型、Flex布局、响应式设计及事件监听、DOM操作等核心知识点并借助清晰的目录结构快速定位页面模块锻炼从静态布局到动态交互的完整开发能力。1. 仿小米商城项目到底在仿什么从一张期末作业需求拆到可交付的代码结构很多同学接到「基于 Htmlcssjs 的仿小米商城项目源代码」这个题目时第一反应是去搜一份现成源码改改交差结果打开压缩包发现首页轮播图是写死的图片、购物车点了没反应、商品列表靠手写十几行 div 堆出来答辩时老师一句「你这个数据从哪来的」就卡住了。这个标题真正要交付的不是「长得像小米」而是一套用原生 Htmlcssjs 把电商首页、商品列表、详情页、购物车这条主链路串起来的静态站点并且代码结构要经得起翻看。它适合两类人一是网页设计期末需要交作业的学生二是刚学完三件套想找一个完整项目练手的人。核心难点不在视觉还原而在用 js 把「数据驱动渲染」这件事做出来哪怕数据是写死在数组里的。下面按我实际带人做这类作业的顺序把结构、实现、参数和踩坑一次讲清。2. 先定目录和数据结构仿小米商城源代码怎么组织才不像一坨2.1 页面清单与文件目录的对应关系仿小米商城的页面不算多但每个页面之间要有跳转关系否则老师点两下就发现是孤岛。我一般会先列一张页面清单再倒推目录结构。常见做法是首页、商品列表页、商品详情页、购物车页、登录页五个页面加上一个公共的 css 和 js 目录。页面文件作用依赖的公共资源index.html首页含轮播、分类导航、推荐商品base.css、index.jslist.html商品列表支持分类筛选base.css、list.jsdetail.html商品详情含规格选择和加入购物车base.css、detail.jscart.html购物车含数量增减和合计base.css、cart.jslogin.html登录表单做本地校验base.css、login.js目录上我习惯这样分根目录放 html 文件css 文件夹放 base.css重置样式和公共变量和各页面独立样式js 文件夹放公共的 common.js比如格式化价格、读取本地存储和各页面逻辑images 放商品图和图标。这样分的好处是老师问「你这个样式写在哪」你能直接指出来而不是所有东西塞进一个 style 标签。2.2 商品数据用数组还是 json 文件这是新手最容易翻车的地方。很多人把商品信息直接写在 html 里改一个价格要翻三个文件。正确做法是抽出一份数据源。因为纯静态项目没有后端我一般用两种方式一是直接在 js 里写一个 goods 数组二是单独建一个 goods.json 用 fetch 读取。前者简单但数据多了文件臃肿后者更接近真实项目但需要本地起服务直接双击打开 html 会因为跨域读不到 json。// js/data.js 商品数据源字段命名统一方便后续渲染复用 const goodsList [ { id: 1001, // 商品唯一标识加购物车时靠它去重 name: 小米手机 14, // 商品名称渲染到列表和详情 price: 3999, // 价格用数字存渲染时再格式化避免字符串拼接出错 img: images/phone1.jpg, // 主图路径相对 html 文件的位置 category: phone, // 分类标识列表页筛选靠它 desc: 骁龙处理器徕卡影像 // 简短描述详情页展示 }, { id: 1002, name: 小米平板 6, price: 1899, img: images/pad1.jpg, category: pad, desc: 11 英寸 2.8K 屏 } ];这段代码的关键是字段设计。id 必须唯一后面购物车增删改查全靠它price 存数字不存「3999」这种字符串否则算总价时要做一堆截取category 用来做列表页的分类筛选值要和导航里的>/* css/base.css 公共变量与重置 */ :root { --main-color: #ff6700; /* 小米橙按钮和价格都用它 */ --text-color: #333; /* 正文颜色 */ --border-color: #e0e0e0; /* 卡片描边 */ --radius: 8px; /* 统一圆角改一处全站生效 */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; color: var(--text-color); } .price { color: var(--main-color); font-weight: bold; }这里 box-sizing 设成 border-box 是血泪经验不设的话你给卡片加 padding 宽度就会撑破布局调半天调不明白。css 变量兼容性现在没问题老师也不会挑这个。注意 base.css 要在每个 html 的 head 里最先引入页面自己的样式放后面这样权重和覆盖顺序才对。3. 首页与列表页的 js 渲染把写死的 div 换成数据驱动3.1 轮播图的定时切换与指示点联动首页轮播是仿小米的门面但很多人写成一张静态图。用原生 js 做轮播的核心就三件事图片容器位移、定时器切换、指示点同步。我一般用 transform 位移而不是改 left性能更好也不容易出玄学问题。// js/index.js 轮播逻辑 const slides document.querySelectorAll(.slide); // 所有轮播项 const dots document.querySelectorAll(.dot); // 指示点 let current 0; // 当前索引 let timer null; // 定时器句柄方便清除 function goTo(index) { // 边界处理最后一张切回第一张 current (index slides.length) % slides.length; // 用 transform 整体位移每张宽度 100% document.querySelector(.slide-wrap).style.transform translateX(-${current * 100}%); // 指示点高亮同步 dots.forEach((d, i) d.classList.toggle(active, i current)); } function startAuto() { timer setInterval(() goTo(current 1), 3000); // 3 秒一张 } // 鼠标移入暂停移出继续这是常见交互要求 document.querySelector(.banner).addEventListener(mouseenter, () clearInterval(timer)); document.querySelector(.banner).addEventListener(mouseleave, startAuto); startAuto();逻辑说明goTo 里用取模运算处理边界比写 if else 判断最后一张干净。参数上 3000 是切换间隔作业里 3 到 5 秒都行太快显得晃。注意定时器一定要在鼠标移入时清掉否则用户想点指示点的时候图自己跑了体验很差。指示点点击事件里记得先 clearInterval 再 goTo不然会和自动播放打架。3.2 商品列表的循环渲染与分类筛选列表页是检验你会不会数据驱动的地方。不要手写十个商品卡片而是拿到 goodsList 后循环生成 html 字符串再插入。// js/list.js 渲染商品列表 const listBox document.querySelector(.goods-list); function render(list) { // map 生成 html 片段join 拼成字符串比 createElement 简洁 listBox.innerHTML list.map(item div classgoods-card>// js/detail.js 解析 url 参数并渲染详情 const params new URLSearchParams(location.search); const id Number(params.get(id)); // 取到 id 并转成数字 const goods goodsList.find(g g.id id); // 在数据源里找到对应商品 if (!goods) { // 找不到就提示避免页面空白让人以为坏了 document.querySelector(.detail-box).innerHTML p商品不存在/p; } else { document.querySelector(.detail-box).innerHTML img src${goods.img} alt${goods.name} h2${goods.name}/h2 p classprice${goods.price}/p button classadd-cart>// js/cart.js 购物车读写 const CART_KEY mi_cart; // 存储键名加前缀避免和其他项目冲突 // 读取购物车没有就返回空数组 function getCart() { return JSON.parse(localStorage.getItem(CART_KEY)) || []; } // 写入购物车 function saveCart(cart) { localStorage.setItem(CART_KEY, JSON.stringify(cart)); } // 加入购物车已存在则数量加一不存在则新增 function addToCart(id) { const cart getCart(); const item cart.find(c c.id id); if (item) { item.count 1; } else { cart.push({ id: id, count: 1 }); } saveCart(cart); renderCart(); // 加完立即刷新界面 }参数说明CART_KEY 加 mi_ 前缀是习惯避免同域名下多个项目互相覆盖。localStorage 只能存字符串所以存取都要 JSON 转换忘了 parse 会拿到字符串没法用。count 存数量而不是存整个商品对象是为了数据源改了价格后购物车能跟着更新如果存了价格快照改价就对不上了。4.2 购物车渲染与数量增减购物车页面要把 id 还原成商品信息再算小计和总计。// js/cart.js 渲染购物车 function renderCart() { const cart getCart(); const box document.querySelector(.cart-list); let total 0; if (cart.length 0) { box.innerHTML p classempty购物车还是空的/p; document.querySelector(.total).textContent 0; return; } box.innerHTML cart.map(c { const goods goodsList.find(g g.id c.id); // 用 id 还原商品 const subtotal goods.price * c.count; // 小计 total subtotal; // 累加总计 return div classcart-item img src${goods.img} alt${goods.name} span${goods.name}/span span classprice${goods.price}/span button classminus>// js/cart.js 结算校验 document.querySelector(.checkout).addEventListener(click, () { const cart getCart(); if (cart.length 0) { alert(购物车是空的先去挑点东西吧); return; } // 登录状态用 localStorage 里的标记判断 const isLogin localStorage.getItem(mi_login) 1; if (!isLogin) { alert(请先登录); location.href login.html; return; } alert(下单成功演示); });登录标记在 login.js 里校验通过后写入值用字符串 1读取时也要按字符串比用 而不是 避免类型转换带来的意外。这套校验虽然简单但答辩时能说清「为什么空购物车不能结算」就够了。5. 避坑与排查仿小米商城源代码最常见的五个翻车点5.1 图片路径写错导致整页裂图现象本地打开 html 图片全裂控制台一堆 404。原因路径写成了绝对路径或者大小写和实际文件名不一致Windows 不区分大小写但传到服务器或换 Mac 就出问题。解决统一用相对路径图片文件名全小写引用时和文件名逐字对上改完在浏览器控制台 Network 面板确认每张图都是 200。5.2 事件绑定在渲染之前导致点击没反应现象商品卡片的点击事件不生效或者只有第一页能点。原因js 在 head 里执行时 dom 还没生成querySelectorAll 拿到空集合。解决把 script 放到 body 末尾或者用 DOMContentLoaded 包一层再或者用事件委托绑在父容器上。我一般直接放 body 末尾最省事。5.3 localStorage 数据格式不对导致购物车报错现象刷新后购物车页面直接白屏控制台报 JSON 解析错误。原因之前存进去的不是合法 json或者手动改过 localStorage。解决getCart 里加 try catch解析失败就返回空数组并清掉脏数据别让一个坏数据把整个页面搞崩。5.4 轮播定时器和手动切换打架现象点了指示点之后图片乱跳或者切换速度越来越快。原因每次 startAuto 都新建定时器旧的没清多个定时器叠加。解决startAuto 开头先 clearInterval(timer)保证同一时间只有一个定时器在跑。5.5 价格用浮点数计算出现小数误差现象购物车总计出现 3999.0000000001 这种。原因js 浮点数精度问题。解决价格以分为单位存整数或者渲染时用 toFixed(2) 格式化。作业里用 toFixed(2) 就够但要知道这是显示层补救不是根治。6. 让作业多拿两分的进阶技巧用 fetch 加载数据与响应式收尾如果你想让这份仿小米商城源代码看起来比同学高一档可以把写死的 goodsList 抽成 goods.json用 fetch 异步加载。这样数据源和逻辑彻底分离老师问起来你能讲清楚「为什么真实项目不把数据写死在 js 里」。做法是建一个 goods.json内容就是那个数组然后// js/data.js 改为异步加载 async function loadGoods() { try { const res await fetch(data/goods.json); // 路径相对 html 文件 if (!res.ok) throw new Error(加载失败); return await res.json(); } catch (e) { console.error(商品数据加载失败, e); return []; // 失败返回空数组页面降级显示 } }注意 fetch 读本地文件在 file:// 协议下会被浏览器拦截必须用本地服务打开比如在项目目录执行 python -m http.server 8000然后访问 localhost:8000。这一步很多同学不知道双击 html 发现数据出不来就以为代码错了其实是协议问题。参数上端口 8000 随意别和系统占用的冲突就行。另一个加分点是响应式。仿小米的页面在手机上会挤成一团加一段媒体查询就能改善。我一般断点设在 768px小于这个宽度时商品列表从四列变两列导航折叠成汉堡菜单。媒体查询写在 base.css 末尾按 max-width 从大到小排列避免覆盖混乱。/* 响应式小屏两列 */ media (max-width: 768px) { .goods-list { grid-template-columns: repeat(2, 1fr); } .banner { height: 180px; } }最后说个我自己的习惯每做完一个页面先在浏览器里把窗口从宽拖到窄看有没有横向滚动条有就说明某个元素宽度写死了。这个动作花不了十秒但能提前发现大部分布局问题比答辩时被老师当场拖窗口强。这套结构我前后带过几届人做按这个顺序走基本不会卡在某个点上出不来。希望帮到你。本文还有配套的精品资源点击获取