李德哲1. 项目整体设计思路与核心价值
作为一名摸爬滚打多年的前端老炮，我深知大学生期末大作业的“潜规则”：既要体现技术含量，又不能过于复杂到难以收尾；既要功能完整，又要UI拿得出手。这个“车之家”购物商城项目，堪称是HTML+CSS+JavaScript三件套的完美练兵场，选题精准，落地性强。
1.1 为什么是“车之家”而不是“车商城”？
这其实是一个很聪明的定位。单纯叫“车商城”格局太小，显得只是一个卖货的页面。“车之家”这个名字自带社区感和品牌感，让整个项目一开始就站在了一个更高的维度——它不仅仅是商品展示，更像是一个汽车资讯与交易的综合平台。这种命名思路，在真实的项目立项中非常常见，一个好的项目名称，往往能决定评审老师的第一印象分。
从技术选型上看，选用纯原生三件套（HTML+CSS+JavaScript）而非框架（如Vue、React），对于大学生期末作业来说是明智之举。原因有三：第一，这是对前端基础最好的检验，没有任何框架的“黑盒”加持，每一个布局、每一个交互逻辑都需要自己亲手实现；第二，评审老师更倾向于看到学生对原生DOM操作、CSS盒模型、事件流这些基础知识的掌握程度，而不是看框架的熟练度；第三，后期如果想进阶，这个项目可以无缝迁移到任何框架上，基础架构的复用性极高。
1.2 项目整体架构拆解
这个项目本质上是一个“以汽车销售为核心，兼顾品牌展示与用户互动”的轻量级电商平台。从用户视角来看，它需要解决以下几个核心痛点：
- 快速浏览车辆信息，获取直观的价格和配置
- 能够按品牌、价格区间筛选车辆
- 查看车辆详情，包括大图、参数、口碑
- 将心仪的车辆加入购物车，管理购物车清单
- 模拟下单结算的完整流程
从技术实现角度，我把它拆解为四个核心模块：
| 模块名称 | 技术实现要点 | 核心功能 |
|---|---|---|
| 首页展示模块 | HTML结构 + CSS Flex/Grid布局 | 轮播图、品牌导航、推荐车型卡片 |
| 商品列表页 | JavaScript数组操作 + 动态渲染 | 筛选排序、分页、列表/网格切换 |
| 商品详情页 | DOM操作 + 事件委托 | 图片切换、参数展示、评价展示 |
| 购物车模块 | localStorage + 状态管理 | 增删改查、数量调整、价格计算 |
1.3 为什么这个项目值得做？
说句实在话，很多大学生做期末大作业喜欢走极端：要么是简单的静态页面，没有任何交互逻辑，看着就像大一新生作品；要么是试图用jQuery或者Bootstrap“抄近路”，结果代码写得比原生还乱，出了问题自己都看不懂。
“车之家”这个项目的好处在于，它覆盖了前端最核心的三个能力维度：
结构层（HTML）：需要合理的语义化标签，恰当的DOM结构设计，这对后续的CSS和JavaScript操作至关重要。很多同学在这一步就栽了跟头，标签嵌套混乱，class命名随意，导致后面写CSS时各种“选择器打架”。
表现层（CSS）：这里是大作业的“门面”。一个漂亮的商城页面，至少需要以下CSS能力：Flex或Grid布局实现响应式、CSS3动画提升细节体验（如悬浮效果、轮播切换）、伪类和伪元素处理特殊状态、媒体查询实现移动端适配。
行为层（JavaScript）：这是拉开分数差距的关键。DOM操作、事件处理、数组方法（map、filter、reduce）、数据持久化（localStorage），每一个都是期末作业的“必考点”。
我建议每一个做这个项目的同学，都把它当作一个“迷你全栈”项目来对待。虽然只是前端，但你要模拟出后端的数据交互逻辑，这对理解整个Web开发流程非常有帮助。很多同学毕业后去面试，被问到“你理解前端需要具备哪些能力”时，往往说不清楚。而这个项目，恰好能让你理清前端工作的核心链路。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心细节解析与实操要点
2.1 语义化HTML结构的构建艺术
很多人觉得HTML就是随便写写就行，反正最后能显示出来。这种想法大错特错。一个优秀的HTML结构，能让你的CSS和JavaScript工作事半功倍，更能体现你的专业素养。
以“车之家”的首页为例，我建议的DOM结构设计如下：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车之家 - 您身边的汽车商城</title>
<link rel="stylesheet" href="./styles/reset.css">
<link rel="stylesheet" href="./styles/index.css">
</head>
<body>
<!-- 头部区域：Logo + 导航 + 搜索 -->
<header class="header">
<div class="header__logo">车之家</div>
<nav class="header__nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link nav__link--active">首页</a></li>
<li class="nav__item"><a href="cars.html" class="nav__link">全部车型</a></li>
<li class="nav__item"><a href="brand.html" class="nav__link">品牌大全</a></li>
<li class="nav__item"><a href="cart.html" class="nav__link">购物车</a></li>
</ul>
</nav>
<div class="header__search">
<input type="text" class="search__input" placeholder="搜索车型、品牌...">
<button class="search__btn">搜索</button>
</div>
</header>
<!-- 主内容区 -->
<main class="main">
<!-- 轮播图区域 -->
<section class="banner">
<div class="banner__slider">
<!-- 轮播项 -->
</div>
<div class="banner__dots">
<!-- 指示器 -->
</div>
</section>
<!-- 品牌导航 -->
<section class="brands">
<h2 class="section__title">热门品牌</h2>
<div class="brands__grid">
<!-- 品牌卡片 -->
</div>
</section>
<!-- 推荐车型 -->
<section class="recommend">
<h2 class="section__title">推荐车型</h2>
<div class="cars__grid">
<!-- 车辆卡片 -->
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="footer">
<p>© 2024 车之家 版权所有</p>
</footer>
</body>
</html>
这里有几个关键点需要特别注意：
命名规范：采用BEM命名法（Block__Element--Modifier），这是目前业界最主流的CSS命名规范。它解决了两个痛点：一是避免class命名冲突，二是通过命名就能看出DOM的层级关系。比如 header__nav 表示header区块下的导航元素， nav__link--active 表示导航链接中的激活状态。
语义化标签：不要全篇都用 <div> 包裹。<header>、<main>、<section>、<footer> 这些语义化标签，不仅对SEO友好，更重要的是让你的代码结构一目了然。评审老师看到你的代码中用到了 <section> 而不是 <div class="section">，印象分会直接提升。
结构与样式分离：所有的样式都通过class来控制，不要在HTML中直接写style属性。这是一个基本的前端开发规范，但很多初学者的作业中，经常能看到 <div style="width: 100px; height: 100px;"> 这样的写法。这不仅难以维护，而且会让代码看起来非常业余。
2.2 CSS布局的黄金法则
在“车之家”项目中，CSS布局是重头戏。我推荐使用Flexbox + Grid的混合方案，既能保证兼容性，又能发挥各自的优势。
Flexbox适用场景：一维布局，如导航栏、商品卡片内部排列、轮播图横向滚动。
css复制/* 导航栏flex布局 */
.header__nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__list {
display: flex;
list-style: none;
gap: 24px; /* 现代浏览器都支持gap了，不用再写margin */
}
.nav__link {
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.nav__link:hover {
background-color: rgba(0, 0, 0, 0.05);
}
Grid适用场景：二维布局，如推荐车型的卡片网格、品牌展示区。
css复制/* 车型卡片网格 */
.cars__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
padding: 20px 0;
}
/* 品牌展示区 */
.brands__grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16px;
}
关于CSS布局，我踩过最大的坑就是“过度嵌套”。很多同学为了让页面看起来“整齐”，会写很多层嵌套的div，每个div都加了position: relative或者flex。结果就是代码变得极其复杂，性能也受影响。我的建议是：能用一层解决的问题，绝不用两层。
2.3 JavaScript交互的核心逻辑
JavaScript是“车之家”这个项目的灵魂。我见过太多大作业，CSS做得花里胡哨，但JavaScript只有个简单的轮播图，甚至轮播图都是复制粘贴的，根本没理解逻辑。
数据管理：这是整个项目的基础。推荐使用一个全局的JavaScript对象来管理所有数据：
javascript复制// 核心数据层
const carData = {
brands: [
{ id: 'bmw', name: '宝马', logo: './images/bmw.png' },
// 更多品牌...
],
cars: [
{
id: 'c001',
name: '宝马3系 2024款',
brand: 'bmw',
price: 299900,
image: './images/car-bmw-3.jpg',
specs: {
engine: '2.0T 184马力',
transmission: '8挡手自一体',
drive: '前置后驱'
},
description: '经典传承，运动基因...',
rating: 4.5,
stock: 10
},
// 更多车型...
],
cart: [] // 购物车数据
};
这种数据驱动的方式，最大的好处是数据和视图分离。当数据发生变化时，只需要重新渲染对应的视图部分，而不需要操作大量的DOM元素。
渲染函数：核心渲染逻辑，采用函数式编程思想：
javascript复制// 渲染车型卡片列表
function renderCarList(cars) {
const container = document.querySelector('.cars__grid');
if (!cars.length) {
container.innerHTML = '<p class="empty-state">暂无符合条件的车型</p>';
return;
}
container.innerHTML = cars.map(car => `
<div class="car-card" data-car-id="${car.id}">
<div class="car-card__image">
<img src="${car.image}" alt="${car.name}" loading="lazy">
<span class="car-card__tag">${car.brand === 'bmw' ? '热销' : '推荐'}</span>
</div>
<div class="car-card__info">
<h3 class="car-card__name">${car.name}</h3>
<p class="car-card__price">¥${car.price.toLocaleString()}</p>
<div class="car-card__actions">
<button class="btn btn--primary" onclick="addToCart('${car.id}')">加入购物车</button>
<button class="btn btn--outline" onclick="viewDetail('${car.id}')">查看详情</button>
</div>
</div>
</div>
`).join('');
}
这里需要特别注意事件处理的方式。我见过很多同学在渲染函数里用 onclick 属性，虽然能用，但不够优雅。更好的做法是使用事件委托：
javascript复制// 事件委托处理点击事件
document.querySelector('.cars__grid').addEventListener('click', function(e) {
const target = e.target;
if (target.classList.contains('btn--primary')) {
const carId = target.closest('.car-card').dataset.carId;
addToCart(carId);
} else if (target.classList.contains('btn--outline')) {
const carId = target.closest('.car-card').dataset.carId;
viewDetail(carId);
}
});
事件委托的好处是显而易见的：当数据变化重新渲染DOM后，不需要重新绑定事件。这一点在频繁更新列表的场景下，对性能的提升非常明显。
3. 实操过程与核心环节实现
3.1 完整项目实施流程
我建议按照以下步骤来搭建“车之家”商城，这个流程是我多年带项目总结出来的黄金节奏，可以避免80%的返工问题。
第一步：项目初始化（1小时）
创建项目目录结构：
code复制car-home/
├── index.html # 首页
├── cars.html # 车型列表页
├── detail.html # 详情页
├── cart.html # 购物车页
├── styles/
│ ├── reset.css # 重置样式
│ ├── common.css # 公共样式
│ ├── index.css # 首页样式
│ ├── cars.css # 列表页样式
│ ├── detail.css # 详情页样式
│ └── cart.css # 购物车样式
├── scripts/
│ ├── data.js # 数据层
│ ├── utils.js # 工具函数
│ ├── index.js # 首页逻辑
│ ├── cars.js # 列表页逻辑
│ ├── detail.js # 详情页逻辑
│ └── cart.js # 购物车逻辑
└── images/ # 图片资源
第二步：公共样式开发（2小时）
先写reset.css，清除浏览器默认样式差异。这是很多同学忽略的一步，但写完之后你会发现，跨浏览器的表现一致多了。
css复制/* reset.css */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
list-style: none;
}
第三步：数据层开发（1小时）
在data.js中构建完整的数据模型。这里我建议用真实的数据来填充，至少要有20-30辆车的详细数据，这样页面看起来才丰富。数据可以从真实的汽车网站获取，但要注意版权问题，建议自己编写虚构数据。
第四步：首页模块开发（4小时）
首页是门面，需要投入最多的精力。主要包括：
- 轮播图：自动播放 + 手动切换 + 指示器联动
- 品牌导航：网格布局 + 悬浮效果
- 推荐车型：动态渲染 + 筛选功能
第五步：列表页和详情页（3小时）
- 列表页：筛选排序 + 分页逻辑
- 详情页：大图切换 + 参数展示 + 评价系统
第六步：购物车模块（2小时）
- 增删改查 + 数量调整 + 价格计算
- 数据持久化（localStorage）
3.2 轮播图从零实现
轮播图是期末大作业的“标配”，但很多同学只会用现成的插件。我建议你亲手实现一个，这是理解JavaScript定时器和DOM操作的绝佳练习。
javascript复制class Carousel {
constructor(container, options = {}) {
this.container = container;
this.slides = container.querySelectorAll('.slide');
this.dots = container.querySelectorAll('.dot');
this.currentIndex = 0;
this.interval = options.interval || 3000;
this.autoPlay = options.autoPlay !== false;
this.timer = null;
this.init();
}
init() {
// 绑定事件
this.container.querySelector('.prev').addEventListener('click', () => this.prev());
this.container.querySelector('.next').addEventListener('click', () => this.next());
this.dots.forEach((dot, index) => {
dot.addEventListener('click', () => this.goTo(index));
});
// 自动播放
if (this.autoPlay) {
this.startAutoPlay();
}
}
goTo(index) {
// 边界处理
if (index < 0) index = this.slides.length - 1;
if (index >= this.slides.length) index = 0;
// 更新状态
this.currentIndex = index;
// 移动轮播
this.slides.forEach((slide, i) => {
slide.style.transform = `translateX(${(i - index) * 100}%)`;
});
// 更新指示器
this.dots.forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
}
prev() { this.goTo(this.currentIndex - 1); }
next() { this.goTo(this.currentIndex + 1); }
startAutoPlay() {
this.timer = setInterval(() => this.next(), this.interval);
}
stopAutoPlay() {
clearInterval(this.timer);
this.timer = null;
}
}
// 使用示例
const banner = new Carousel(document.querySelector('.banner'), {
interval: 4000,
autoPlay: true
});
这里的核心逻辑是：通过 transform: translateX() 来控制轮播的位置，而不是用 left 或者 margin-left，因为transform的性能更好，不会触发重排（reflow）。
3.3 购物车与数据持久化
购物车系统是展示JavaScript逻辑能力的最佳场景。这里我重点讲解状态管理和数据持久化。
javascript复制// 购物车管理模块
const CartManager = {
// 获取购物车数据
getCart() {
const cart = localStorage.getItem('carHomeCart');
return cart ? JSON.parse(cart) : [];
},
// 保存购物车数据
saveCart(cart) {
localStorage.setItem('carHomeCart', JSON.stringify(cart));
},
// 添加商品
addItem(carId, quantity = 1) {
const cart = this.getCart();
const existingItem = cart.find(item => item.carId === carId);
if (existingItem) {
existingItem.quantity += quantity;
} else {
cart.push({
carId,
quantity,
addedTime: Date.now()
});
}
this.saveCart(cart);
this.updateUI();
},
// 移除商品
removeItem(carId) {
let cart = this.getCart();
cart = cart.filter(item => item.carId !== carId);
this.saveCart(cart);
this.updateUI();
},
// 更新数量
updateQuantity(carId, quantity) {
const cart = this.getCart();
const item = cart.find(item => item.carId === carId);
if (item) {
item.quantity = Math.max(1, quantity);
this.saveCart(cart);
this.updateUI();
}
},
// 计算总价
getTotal() {
const cart = this.getCart();
const cars = carData.cars; // 从全局数据获取车辆信息
return cart.reduce((total, item) => {
const car = cars.find(c => c.id === item.carId);
return total + (car ? car.price * item.quantity : 0);
}, 0);
},
// 获取购物车数量
getCount() {
const cart = this.getCart();
return cart.reduce((count, item) => count + item.quantity, 0);
},
// 更新UI（更新购物车角标等）
updateUI() {
const count = this.getCount();
const badge = document.querySelector('.cart-badge');
if (badge) {
badge.textContent = count > 0 ? count : '';
badge.style.display = count > 0 ? 'flex' : 'none';
}
}
};
这里有几个重要细节：
数据序列化：localStorage只能存储字符串，所以需要 JSON.stringify 和 JSON.parse 进行转换。很多同学在这一步会忘记，导致数据存进去取不出来。
深拷贝问题：从localStorage取出的数据是经过序列化再反序列化的，所以不会与原数据有引用关系。这一点在购物车这种场景下非常有用，可以避免数据污染。
性能优化：每次操作购物车都调用 updateUI 方法，更新角标数量。这里要注意，不要频繁操作DOM，最好用防抖（debounce）来处理。
4. 常见问题与排查技巧实录
4.1 布局错乱问题
现象：在不同屏幕尺寸下，页面布局错乱，元素重叠或间距异常。
排查思路：
- 检查是否引入了reset.css，清除浏览器默认margin/padding
- 检查Flexbox容器的
flex-wrap属性是否设置为wrap - 检查Grid容器的
grid-template-columns是否使用了响应式单位（如fr、auto-fill） - 检查图片是否设置了
max-width: 100%，防止图片撑破容器
解决方案：
css复制/* 基础响应式布局 */
.cars__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
/* 针对小屏幕 */
@media (max-width: 768px) {
.cars__grid {
grid-template-columns: 1fr;
}
.header__nav {
display: none; /* 移动端隐藏导航，用汉堡菜单代替 */
}
}
4.2 轮播图卡顿问题
现象：轮播切换时出现明显的卡顿、闪烁。
排查思路：
- 检查是否使用了
transition属性，如果没有，切换会瞬间完成，没有动画效果 - 检查是否使用了
transform而不是left来做动画 - 检查图片资源是否过大，导致加载缓慢
- 检查
requestAnimationFrame是否与setInterval冲突
解决方案：
css复制/* 使用硬件加速 */
.slide {
will-change: transform;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
4.3 购物车数据不更新
现象：添加商品后，购物车页面不显示新数据，或者移除商品后数据依然存在。
排查思路：
- 检查
localStorage是否被正确调用，在浏览器控制台输入localStorage.getItem('carHomeCart')查看数据 - 检查数据是否在页面加载时重新读取了
- 检查
addItem方法中saveCart是否被调用 - 检查多个页面之间是否共享同一个
localStoragekey
解决方案：
javascript复制// 页面加载时重新读取数据
document.addEventListener('DOMContentLoaded', function() {
CartManager.updateUI();
renderCartItems();
});
// 确保所有页面使用相同的localStorage key
const CART_KEY = 'carHomeCart';
4.4 事件绑定失效问题
现象：动态生成的按钮点击没有反应。
排查思路：
- 检查是否使用了事件委托，而不是直接绑定到动态元素
- 检查事件绑定的时机，是否在DOM生成之前绑定了
- 检查控制台是否有JavaScript错误，导致后续代码不执行
- 检查事件冒泡是否被
stopPropagation阻止了
解决方案：
javascript复制// 使用事件委托绑定到静态父元素
document.querySelector('.cars__grid').addEventListener('click', function(e) {
if (e.target.matches('.btn--primary')) {
// 处理点击
}
});
4.5 常见问题速查表
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 页面加载时样式闪烁 | CSS加载顺序问题 | 将CSS放在head中，确保在DOM渲染前加载 |
| 图片加载慢 | 图片未压缩或尺寸过大 | 使用图片压缩工具，设置loading="lazy" |
| 滚动性能差 | 大量DOM操作或重排 | 使用文档片段(documentFragment)批量添加DOM |
| 本地存储数据丢失 | 未处理JSON序列化异常 | 使用try-catch包裹JSON.parse |
| 页面跳转后状态丢失 | 未使用localStorage持久化 | 每次页面加载时从localStorage读取数据 |
| 移动端点击延迟 | 未设置touch-action | 设置touch-action: manipulation |
4.6 独家避坑技巧
技巧一：字体图标的使用
不要用图片来做图标，推荐使用Font Awesome或者Material Icons这类字体图标库。它们体积小、支持缩放、颜色可自定义，而且不会因为屏幕分辨率变化而模糊。
技巧二：表单验证的时机
在做购物车下单的模拟表单时，验证逻辑不要在提交时才触发，而是在用户输入时实时验证。这能让用户体验更好，也能避免提交时才发现一堆错误。
技巧三：控制台调试技巧
善用 console.table() 来查看数组数据，比 console.log() 直观得多。同时，用 debugger 语句可以暂停代码执行，逐行检查变量状态，这是排查复杂逻辑问题的利器。
技巧四：代码注释规范
在关键逻辑处添加注释，尤其是复杂的数据处理和算法部分。这些注释不仅是为了让评审老师看懂，更是为了自己以后回顾时能快速理解。我的习惯是：每个函数至少写一个注释说明输入输出，每个复杂逻辑至少写一个注释说明思路。
4.7 性能优化建议
对于期末大作业来说，性能优化可能不是评审的重点，但如果你能做一些优化，绝对能加分。
图片懒加载：不要一次性加载所有图片，只加载视口范围内的图片。可以使用Intersection Observer API来实现。
javascript复制// 图片懒加载
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
images.forEach(img => observer.observe(img));
资源合并与压缩：将多个CSS文件合并成一个，多个JavaScript文件合并成一个。虽然对于期末作业来说，可能不需要打包工具，但至少可以手动合并。
减少DOM操作：在批量渲染数据时，先构建好HTML字符串，然后用 innerHTML 一次性插入，而不是逐个创建元素并插入。
5. 经验总结与扩展思路
5.1 我的实操心得
做这个项目最大的感受是：“看起来简单，做起来全是细节”。很多同学在开始写代码之前，以为自己已经想清楚了所有逻辑，但真正动手才发现，一个简单的轮播图就有那么多边界情况需要处理。
我个人觉得，这个项目最值得花时间打磨的是三个点：
数据的组织：数据是前端项目的灵魂。一个清晰、合理的数据结构，能让后续的渲染、筛选、排序等操作变得异常简单。我建议在设计数据时，多考虑一下“未来的扩展性”——比如，现在只有车辆的图片和价格，但未来可能需要增加“颜色”、“配置”等属性，当前的数据结构是否支持？
用户体验的细节：好的用户体验不是功能有多强大，而是细节有多到位。比如，加入购物车时有一个微小的动画反馈，商品数量变化时总价实时更新，空购物车时显示友好的提示...这些细节看似不起眼，但能让用户感觉到“这个页面是用心的”。
代码的可维护性：代码写得漂亮，不光是为了装逼，更是为了自己以后能看懂。命名规范、模块划分、注释清晰，这些习惯一旦养成，受益终身。
5.2 可以扩展的方向
如果你完成基础版本后还有余力，可以考虑以下几个扩展方向：
后端对接：将数据模拟改成真实的API调用，学习fetch或者axios，实现前后端分离。这能让你更接近真实的工作场景。
用户系统：增加登录注册功能，实现购物车数据与用户账号绑定，而不是只存在本地。
订单系统：完善订单管理流程，包括下单、支付、发货、收货等状态流转。
搜索功能：实现全文搜索，支持按品牌、价格、配置等多维度搜索。
数据可视化：用图表展示车辆销售数据、用户评价分布等，可以引入Chart.js或者ECharts。
5.3 最后分享一个小技巧
在提交作业前，一定要做一次完整的“用户流程测试”。从首页开始，模拟一个用户的完整操作路径：浏览首页 -> 点击推荐车型 -> 查看详情 -> 加入购物车 -> 继续购物 -> 进入购物车 -> 调整数量 -> 结算。每个环节都检查一遍，确保没有遗漏的边界情况。
很多同学就是因为没有做这一步，导致在演示时，某个按钮点击了没反应，或者某个页面跳转到了空白页，非常影响评分。
最后，记得给你的项目添加一个README文件，说明项目的技术栈、功能模块、运行方式。这不仅是好习惯，也能让评审老师快速了解你的项目全貌。