从零搭建商城系统前端：技术选型与核心架构实践-平芜编程栈

1. 引言

随着电商业务的蓬勃发展，商城系统的前端开发已成为 Web 开发领域的热门方向。一个功能完善、体验流畅的商城前端，不仅需要处理复杂的商品展示、购物车、订单流程，还要兼顾性能优化、多端适配和良好的开发维护体验。本文将带你从零开始，梳理商城系统前端开发的核心技术选型、项目架构设计以及关键模块的实现思路，帮助你快速搭建一个可扩展、高性能的商城前端项目。

2. 技术栈选型

在开始编码之前，选择一套合适的技术栈至关重要。以下是当前主流的商城前端技术选型方案：

框架：React 18+ 或 Vue 3。两者生态成熟，社区活跃，都适合构建复杂的单页应用（SPA）。React 的 Hooks 和 Vue 3 的组合式 API 都能很好地管理组件状态。
状态管理：React 生态推荐 Zustand 或 Redux Toolkit；Vue 生态推荐 Pinia。用于管理全局的用户信息、购物车数据、商品分类等。
路由：React Router v6 或 Vue Router 4。实现页面间的导航，如首页、商品列表、商品详情、购物车、结算页等。
UI 组件库：Ant Design Mobile 或 Vant。它们提供了丰富的电商常用组件，如商品卡片、轮播图、导航栏、表单等，能大幅提升开发效率。
HTTP 请求：Axios。封装统一的请求拦截器（如添加 Token）和响应拦截器（如统一错误处理）。
构建工具：Vite。相比 Webpack，Vite 拥有更快的冷启动和热更新速度，非常适合现代前端项目。
CSS 方案：Tailwind CSS 或 CSS Modules。Tailwind 的原子化 CSS 能快速构建自定义样式，而 CSS Modules 则提供了良好的样式隔离。

3. 项目架构设计

一个清晰的目录结构是项目可维护性的基础。推荐采用以下分层架构：

src/ ├── api/ # API 接口层 │ ├── modules/ # 按业务模块划分（如 product.js, cart.js, order.js） │ └── request.js # Axios 实例与拦截器配置 ├── assets/ # 静态资源（图片、字体、样式） ├── components/ # 公共组件 │ ├── common/ # 通用组件（如 Loading、Empty、ErrorBoundary） │ └── business/ # 业务组件（如 ProductCard、CartItem、AddressPicker） ├── hooks/ # 自定义 Hooks（如 useAuth、useCart） ├── layouts/ # 布局组件（如 MainLayout、BlankLayout） ├── pages/ # 页面组件 │ ├── Home/ # 首页 │ ├── ProductList/ # 商品列表 │ ├── ProductDetail/ # 商品详情 │ ├── Cart/ # 购物车 │ ├── Checkout/ # 结算页 │ └── Order/ # 订单中心 ├── router/ # 路由配置 ├── store/ # 全局状态管理 ├── types/ # TypeScript 类型定义（如果使用 TS） ├── utils/ # 工具函数（如格式化价格、时间、防抖节流） └── App.vue / App.jsx # 根组件

核心设计原则：

模块化：将 API、组件、页面按业务功能拆分，降低耦合。
单一职责：每个组件、每个 Hook 只负责一件事。
可复用性：将通用逻辑（如请求、权限校验）抽象到公共层。

4. 核心模块实现

4.1 用户认证模块

用户登录与鉴权是商城系统的第一道门槛。通常采用 JWT（JSON Web Token）方案。

// api/request.js (Axios 封装示例)importaxiosfrom'axios';import{getToken,removeToken}from'@/utils/auth';constrequest=axios.create({baseURL:import.meta.env.VITE_API_BASE_URL,timeout:10000,});// 请求拦截器：自动携带 Tokenrequest.interceptors.request.use((config)=>{consttoken=getToken();if(token){config.headers.Authorization=`Bearer${token}`;}returnconfig;},(error)=>Promise.reject(error));// 响应拦截器：统一处理 401 未授权request.interceptors.response.use((response)=>response.data,(error)=>{if(error.response?.status===401){removeToken();window.location.href='/login';}returnPromise.reject(error);});exportdefaultrequest;

4.2 商品列表与搜索

商品列表页通常需要支持分类筛选、关键词搜索、排序和分页。

// api/modules/product.jsimportrequestfrom'@/api/request';exportfunctiongetProductList(params){returnrequest.get('/products',{params});}// 使用示例（React Hooks）// const { data, loading } = useQuery(['products', filters], () => getProductList(filters));

关键点：

使用useDebounce对搜索关键词进行防抖处理，避免频繁请求。
分页参数（page,pageSize）由后端返回总条数，前端控制分页器显示。

4.3 购物车管理

购物车是商城中最复杂的交互模块之一，涉及增删改查、数量加减、选中状态切换以及价格实时计算。

// store/cartStore.js (以 Zustand 为例)import{create}from'zustand';constuseCartStore=create((set,get)=>({items:[],// 添加商品addItem:(product)=>{constitems=get().items;constexisting=items.find(item=>item.id===product.id);if(existing){set({items:items.map(item=>item.id===product.id?{...item,quantity:item.quantity+1}:item),});}else{set({items:[...items,{...product,quantity:1,checked:true}]});}},// 切换选中状态toggleCheck:(id)=>{set({items:get().items.map(item=>item.id===id?{...item,checked:!item.checked}:item),});},// 计算选中商品总价gettotalPrice(){returnget().items.filter(item=>item.checked).reduce((sum,item)=>sum+item.price*item.quantity,0);},}));

4.4 订单结算流程

结算页需要整合收货地址、商品清单、优惠券、支付方式等多个模块。建议将结算数据统一提交到后端，由后端生成订单号并返回支付参数。

// 提交订单exportfunctionsubmitOrder(orderData){returnrequest.post('/orders',orderData);}

前端在收到订单创建成功后，根据后端返回的支付参数（如微信支付prepay_id）调起支付 SDK。

5. 性能优化策略

商城页面通常包含大量图片和列表数据，性能优化是重中之重。

图片懒加载：使用IntersectionObserver或第三方库（如react-lazyload）实现图片懒加载，减少首屏加载资源。
虚拟列表：对于商品列表、订单列表等长列表，使用虚拟滚动技术（如react-window或vue-virtual-scroller）只渲染可视区域内的 DOM 节点。
路由懒加载：利用框架的动态导入特性（React.lazy或 Vue 的defineAsyncComponent）按需加载页面组件。
CDN 加速：将静态资源（图片、字体、第三方库）上传至 CDN，减少服务器压力。
缓存策略：对不常变动的数据（如商品分类、品牌列表）使用本地缓存（localStorage或IndexedDB），减少 API 请求。