全栈实战：Vue.js 3.x与Express构建电商系统

2026年3月14日 互联网

一、技术选型与项目定位

在全栈开发领域，Vue.js 3.x凭借其组合式API和响应式系统革新，成为构建现代化单页应用的首选框架；Express框架则以轻量级和高度可扩展性，成为服务端开发的行业标准。本书以电商系统为载体，通过”用户端-服务端-管理端”三端协同开发模式，系统讲解如何整合这两项技术实现全栈能力。

项目架构采用分层设计理念：前端基于Vue 3的Composition API构建组件化界面，通过Pinia实现状态集中管理；后端使用Express框架搭建RESTful API服务，集成MySQL数据库与JWT认证机制；通信层采用Axios实现前后端数据交互，配合CORS中间件解决跨域问题。这种架构既保证了开发效率，又具备良好的可维护性。

二、前端开发核心模块

1. 组件化开发实践

项目采用”原子设计”理念构建UI组件库，将通用按钮、表单控件等拆分为基础组件，通过Props和插槽实现灵活复用。例如商品卡片组件：

  1. <template>
  2.   <div class="product-card">
  3.     <img :src="product.image" :alt="product.name">
  4.     <h3>{{ product.name }}</h3>
  5.     <div class="price">¥{{ product.price }}</div>
  6.     <button @click="addToCart">加入购物车</button>
  7.   </div>
  8. </template>
  10. <script setup>
  11. defineProps({
  12.   product: Object
  13. });
  14. const emit = defineEmits(['add-to-cart']);
  15. const addToCart = () => emit('add-to-cart');
  16. </script>

通过组合式API的setup()语法糖，将业务逻辑与模板解耦，提升代码可测试性。

2. 路由与状态管理

使用Vue Router 4.x实现动态路由配置，结合路由守卫实现权限控制：

  1. const routes = [
  2.   {
  3.     path: '/dashboard',
  4.     component: Dashboard,
  5.     meta: { requiresAuth: true },
  6.     children: [
  7.       { path: 'products', component: ProductList },
  8.       { path: 'orders', component: OrderManagement }
  9.     ]
  10.   }
  11. ];
  13. router.beforeEach((to, from, next) => {
  14.   const isAuthenticated = checkAuth();
  15.   if (to.meta.requiresAuth && !isAuthenticated) next('/login');
  16.   else next();
  17. });

Pinia状态管理通过defineStore创建全局状态仓库，实现购物车数据的跨组件共享：

  1. export const useCartStore = defineStore('cart', {
  2.   state: () => ({ items: [] }),
  3.   actions: {
  4.     addItem(product) {
  5.       this.items.push(product);
  6.     },
  7.     removeItem(id) {
  8.       this.items = this.items.filter(item => item.id !== id);
  9.     }
  10.   }
  11. });

3. 网络请求封装

基于Axios创建请求拦截器，统一处理JWT认证和错误响应：

  1. const apiClient = axios.create({
  2.   baseURL: '/api',
  3.   timeout: 5000
  4. });
  6. apiClient.interceptors.request.use(config => {
  7.   const token = localStorage.getItem('token');
  8.   if (token) config.headers.Authorization = `Bearer ${token}`;
  9.   return config;
  10. });
  12. apiClient.interceptors.response.use(
  13.   response => response.data,
  14.   error => {
  15.     if (error.response.status === 401) {
  16.       router.push('/login');
  17.     }
  18.     return Promise.reject(error);
  19.   }
  20. );

三、后端服务实现

1. Express中间件架构

项目采用”洋葱模型”中间件架构，通过app.use()注册中间件链：

  1. // 日志中间件
  2. app.use((req, res, next) => {
  3.   console.log(`${req.method} ${req.url}`);
  4.   next();
  5. });
  7. // JWT验证中间件
  8. const authenticate = (req, res, next) => {
  9.   const token = req.headers.authorization?.split(' ')[1];
  10.   if (!token) return res.sendStatus(401);
  12.   jwt.verify(token, SECRET_KEY, (err, user) => {
  13.     if (err) return res.sendStatus(403);
  14.     req.user = user;
  15.     next();
  16.   });
  17. };
  19. // 路由分组
  20. app.use('/api/auth', authRoutes);
  21. app.use('/api/products', authenticate, productRoutes);

2. MySQL数据库集成

使用Sequelize ORM实现数据模型定义和CRUD操作：

  1. const { DataTypes } = require('sequelize');
  2. const sequelize = new Sequelize('mysql://user:pass@localhost:3306/ecommerce');
  4. const Product = sequelize.define('Product', {
  5.   id: { type: DataTypes.UUID, defaultValue: DataTypes.UUIDV4, primaryKey: true },
  6.   name: { type: DataTypes.STRING, allowNull: false },
  7.   price: { type: DataTypes.DECIMAL(10,2), allowNull: false }
  8. });
  10. // 关联查询示例
  11. const getProductsWithCategories = async () => {
  12.   return await Product.findAll({
  13.     include: [{
  14.       model: Category,
  15.       as: 'categories'
  16.     }]
  17.   });
  18. };

3. 订单处理逻辑

实现完整的订单生命周期管理，包括状态机设计和事务处理：

  1. router.post('/orders', authenticate, async (req, res) => {
  2.   const transaction = await sequelize.transaction();
  3.   try {
  4.     const cartItems = await CartItem.findAll({
  5.       where: { userId: req.user.id },
  6.       transaction
  7.     });
  9.     const order = await Order.create({
  10.       userId: req.user.id,
  11.       total: calculateTotal(cartItems),
  12.       status: 'PROCESSING'
  13.     }, { transaction });
  15.     await Promise.all(cartItems.map(item => 
  16.       OrderItem.create({
  17.         orderId: order.id,
  18.         productId: item.productId,
  19.         quantity: item.quantity
  20.       }, { transaction })
  21.     ));
  23.     await CartItem.destroy({ where: { userId: req.user.id }, transaction });
  24.     await transaction.commit();
  25.     res.status(201).json(order);
  26.   } catch (error) {
  27.     await transaction.rollback();
  28.     res.status(500).json({ error: 'Order creation failed' });
  29.   }
  30. });

四、部署与运维方案

1. 容器化部署

使用Docker Compose实现开发环境快速搭建：

  1. version: '3.8'
  2. services:
  3.   frontend:
  4.     build: ./frontend
  5.     ports:
  6.       - "8080:80"
  7.     depends_on:
  8.       - backend
  9.   backend:
  10.     build: ./backend
  11.     environment:
  12.       - DB_HOST=db
  13.       - DB_PORT=3306
  14.     depends_on:
  15.       - db
  16.   db:
  17.     image: mysql:8.0
  18.     environment:
  19.       MYSQL_ROOT_PASSWORD: rootpass
  20.       MYSQL_DATABASE: ecommerce
  21.     volumes:
  22.       - db-data:/var/lib/mysql
  23. volumes:
  24.   db-data:

2. 监控告警体系

集成主流日志服务实现请求监控：

  1. // 自定义日志中间件
  2. app.use((req, res, next) => {
  3.   const start = Date.now();
  4.   res.on('finish', () => {
  5.     const duration = Date.now() - start;
  6.     logService.info({
  7.       method: req.method,
  8.       url: req.url,
  9.       status: res.statusCode,
  10.       duration: `${duration}ms`
  11.     });
  12.   });
  13.   next();
  14. });

五、学习资源配套

本书提供完整项目源码仓库，包含：

  1. 分阶段代码提交历史，便于对照学习
  2. 30小时配套教学视频，覆盖关键技术点
  3. 自动化测试用例集，包含单元测试与E2E测试
  4. 部署脚本与运维文档，支持一键部署到主流云平台

通过系统学习本书内容，开发者可掌握从组件开发到服务部署的全栈技能，具备独立开发商业级电商系统的能力。配套资源特别设计的”错误处理实验室”模块，通过模拟20种常见开发陷阱，帮助读者提升问题排查能力。

最新文章