15天从0到1：Vue全栈电商实战——构建高性能锤子商城

2026-01-17 09:01:51作者：宣利权Counsellor

引言：为什么你需要这个全栈项目？

你是否还在为找不到完整的Vue电商实战项目而烦恼？作为前端开发者，理论学习后最缺的就是真实场景的项目经验。本文将带你从零开始，基于Vue+Node+MongoDB技术栈，构建一个功能完整的锤子商城应用。通过这个项目，你将掌握：

Vue全家桶（Vue2+Vuex+Vue Router）在实际项目中的最佳实践
前端状态管理与复杂业务逻辑处理
全栈开发中的前后端数据交互
电商核心流程（登录、商品展示、购物车、下单、支付）实现
项目部署与性能优化技巧

项目架构总览

技术栈选型

技术领域	选用技术	版本	核心作用
前端框架	Vue	2.x	构建用户界面
状态管理	Vuex	3.x	管理应用状态
路由管理	Vue Router	3.x	页面路由控制
网络请求	Axios	0.21.x	前后端数据交互
样式预处理器	Sass	1.32.x	CSS模块化开发
后端服务	Node.js	14.x	提供API接口
数据库	MongoDB	4.x	存储应用数据
构建工具	Webpack	4.x	项目打包构建

系统架构流程图

flowchart TD
    Client[用户浏览器] --> |HTTP请求| Nginx[Nginx反向代理]
    Nginx --> |静态资源| FrontEnd[Vue前端应用]
    Nginx --> |API请求| BackEnd[Node.js后端服务]
    BackEnd --> Database[MongoDB数据库]
    BackEnd --> |数据抓取| Spider[爬虫服务]
    FrontEnd --> |状态管理| Vuex[Vuex Store]
    FrontEnd --> |路由控制| VueRouter[Vue Router]

项目结构详解

目录结构

vue-mall/
├── config/                 # 项目配置文件
│   ├── dev.env.js          # 开发环境变量
│   ├── index.js            # 主配置文件
│   └── prod.env.js         # 生产环境变量
├── src/                    # 源代码目录
│   ├── api/                # API请求模块
│   ├── assets/             # 静态资源
│   ├── common/             # 公共组件
│   ├── components/         # 业务组件
│   ├── page/               # 页面组件
│   ├── router/             # 路由配置
│   ├── store/              # Vuex状态管理
│   └── utils/              # 工具函数
├── static/                 # 静态资源文件
├── package.json            # 项目依赖
└── README.md               # 项目说明

核心模块解析

1. 路由设计（src/router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
const Index = resolve => require(['/page/index'], resolve)
const Login = resolve => require(['/page/Login/login'], resolve)
const Home = resolve => require(['/page/Home/home'], resolve)
const GoodS = resolve => require(['/page/Goods/goods'], resolve)
const goodsDetails = resolve => require(['/page/Goods/goodsDetails'], resolve)
const Cart = resolve => require(['/page/Cart/cart'], resolve)
const order = resolve => require(['/page/Order/order'], resolve)
const user = resolve => require(['/page/User/user'], resolve)
// ...其他页面组件

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Index,
      name: 'index',
      redirect: '/home',
      children: [
        {path: 'home', component: Home},
        {path: 'goods', component: GoodS},
        {path: 'goodsDetails', name: 'goodsDetails', component: goodsDetails}
      ]
    },
    // ...其他路由配置
    {path: '*', redirect: '/home'}
  ]
})

2. 状态管理（src/store/index.js）

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'

Vue.use(Vuex)

const state = {
  userInfo: null, // 用户信息
  cartList: [], // 购物车列表
  // ...其他状态
}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

核心功能实现

1. 用户认证流程

用户认证是电商应用的基础功能，本项目实现了完整的登录/注册流程：

sequenceDiagram
    participant 用户
    participant 前端
    participant 后端
    participant 数据库
    
    用户->>前端: 输入账号密码
    前端->>后端: 发送登录请求(POST /api/user/login)
    后端->>数据库: 查询用户信息
    数据库-->>后端: 返回用户数据
    后端->>后端: 验证密码
    alt 验证成功
        后端-->>前端: 返回用户信息+token
        前端->>前端: 存储用户信息到Vuex
        前端->>前端: 存储token到Cookie
        前端-->>用户: 跳转到首页
    else 验证失败
        后端-->>前端: 返回错误信息
        前端-->>用户: 显示登录失败提示
    end

登录实现代码（src/page/Login/login.vue）：

<template>
  <div class="login-container">
    <div class="login-box">
      <h2>锤子商城</h2>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <input 
            type="text" 
            v-model="username" 
            placeholder="请输入用户名" 
            required
          >
        </div>
        <div class="form-group">
          <input 
            type="password" 
            v-model="password" 
            placeholder="请输入密码" 
            required
          >
        </div>
        <button type="submit" class="login-btn">登录</button>
        <div class="login-link">
          <router-link to="/register">还没有账号？立即注册</router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { login } from '../../api/user'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      login({
        username: this.username,
        password: this.password
      }).then(res => {
        if (res.status === 0) {
          // 登录成功，存储用户信息
          this.$store.commit('RECORD_USERINFO', {info: res.result})
          // 跳转到首页
          this.$router.push('/')
        } else {
          this.$toast(res.msg)
        }
      })
    }
  }
}
</script>

2. 商品展示与搜索

商品展示是电商平台的核心功能，本项目实现了商品列表、商品详情和搜索功能：

商品列表组件（src/page/Goods/goods.vue）核心代码：

<template>
  <div class="goods-container">
    <div class="search-box">
      <input 
        type="text" 
        v-model="keyword" 
        placeholder="搜索商品..."
      >
      <button @click="searchGoods">搜索</button>
    </div>
    
    <div class="goods-list">
      <div class="goods-item" v-for="item in goodsList" :key="item.id">
        <router-link :to="'/goodsDetails?id=' + item.id">
          <img v-lazy="item.image" alt="商品图片">
          <h3>{{ item.name }}</h3>
          <p class="price">¥{{ item.price }}</p>
          <button @click.stop="addToCart(item)">加入购物车</button>
        </router-link>
      </div>
    </div>
    
    <div class="loading" v-if="loading">
      <img src="/static/images/load.gif" alt="加载中">
    </div>
  </div>
</template>

<script>
import { getGoodsList, searchGoods } from '../../api/goods'

export default {
  data() {
    return {
      goodsList: [],
      keyword: '',
      page: 1,
      loading: false
    }
  },
  mounted() {
    this.getGoodsList()
  },
  methods: {
    getGoodsList() {
      this.loading = true
      getGoodsList({
        page: this.page,
        size: 10
      }).then(res => {
        this.loading = false
        if (res.status === 0) {
          this.goodsList = [...this.goodsList, ...res.result.list]
          this.page++
        }
      })
    },
    searchGoods() {
      if (!this.keyword.trim()) return
      
      this.loading = true
      searchGoods({
        keyword: this.keyword,
        page: 1,
        size: 10
      }).then(res => {
        this.loading = false
        if (res.status === 0) {
          this.goodsList = res.result.list
        }
      })
    },
    addToCart(item) {
      this.$store.dispatch('addCart', {
        goodsId: item.id,
        goodsName: item.name,
        goodsPrice: item.price,
        goodsImage: item.image,
        quantity: 1
      })
      this.$toast('加入购物车成功')
    }
  }
}
</script>

3. 购物车功能

购物车是电商平台的关键功能，负责临时存储用户想购买的商品：

stateDiagram-v2
    [*] --> 空购物车
    
    空购物车 --> 有商品: 添加商品
    有商品 --> 有商品: 添加商品
    有商品 --> 有商品: 修改数量
    有商品 --> 有商品: 删除商品
    有商品 --> 空购物车: 删除所有商品
    
    state 有商品 {
        [*] --> 未选择
        未选择 --> 已选择: 勾选商品
        已选择 --> 未选择: 取消勾选
        已选择 --> 已选择: 修改数量
        未选择 --> 未选择: 修改数量
    }

购物车状态管理（src/store/mutations.js）：

import * as types from './mutation-types'

const mutations = {
  // 添加商品到购物车
  [types.ADD_CART](state, { goodsId, goodsName, goodsPrice, goodsImage, quantity }) {
    let cartItem = state.cartList.find(item => item.goodsId === goodsId)
    
    if (cartItem) {
      // 如果商品已存在，增加数量
      cartItem.quantity += quantity
    } else {
      // 如果商品不存在，添加新商品
      state.cartList.push({
        goodsId,
        goodsName,
        goodsPrice,
        goodsImage,
        quantity,
        selected: true
      })
    }
    
    // 持久化到localStorage
    localStorage.setItem('cartList', JSON.stringify(state.cartList))
  },
  
  // 修改购物车商品数量
  [types.CHANGE_CART_QUANTITY](state, { goodsId, quantity }) {
    let cartItem = state.cartList.find(item => item.goodsId === goodsId)
    if (cartItem) {
      cartItem.quantity = quantity
      localStorage.setItem('cartList', JSON.stringify(state.cartList))
    }
  },
  
  // 删除购物车商品
  [types.DELETE_CART_ITEM](state, goodsId) {
    state.cartList = state.cartList.filter(item => item.goodsId !== goodsId)
    localStorage.setItem('cartList', JSON.stringify(state.cartList))
  },
  
  // 切换商品选中状态
  [types.TOGGLE_CART_SELECTED](state, goodsId) {
    let cartItem = state.cartList.find(item => item.goodsId === goodsId)
    if (cartItem) {
      cartItem.selected = !cartItem.selected
      localStorage.setItem('cartList', JSON.stringify(state.cartList))
    }
  }
  
  // ...其他购物车相关mutation
}

export default mutations

4. 下单与支付流程

下单支付是电商平台的核心业务流程，本项目实现了从购物车到支付成功的完整流程：

flowchart TD
    A[购物车] --> |选择商品并结算| B[确认订单]
    B --> |填写收货地址| C[选择支付方式]
    C --> |提交订单| D[创建订单记录]
    D --> E{支付方式}
    E --> |支付宝| F[调用支付宝API]
    E --> |微信支付| G[调用微信支付API]
    F --> H[支付结果回调]
    G --> H
    H --> |支付成功| I[更新订单状态]
    H --> |支付失败| J[提示支付失败]
    I --> K[显示支付成功页面]
    J --> B

项目部署与优化

开发环境搭建

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/vu/vue-mall

# 进入项目目录
cd vue-mall

# 安装依赖
npm install

# 启动开发服务器
npm run dev

生产环境部署

项目部署采用Nginx反向代理，实现前后端分离部署：

前端打包：

# 构建生产环境资源
npm run build

Nginx配置（nginx.conf）：

server {
    listen 80;
    server_name mall.example.com;
    
    # 前端静态资源
    location / {
        root /var/www/vue-mall/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # 后端API代理
    location /api {
        proxy_pass http://127.0.0.1:3333;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    
    # 图片等静态资源缓存
    location ~ .*\.(jpg|jpeg|png|gif|ico|css|js)$ {
        root /var/www/vue-mall/dist;
        expires 30d;
    }
}

启动Nginx：

# 检查配置文件
nginx -t

# 重启Nginx
nginx -s reload

性能优化策略

前端性能优化
- 使用Vue-Lazyload实现图片懒加载
- 路由懒加载减少初始加载时间
- 合理使用keep-alive缓存页面
- 使用localStorage缓存不常变化的数据
后端性能优化
- 数据库索引优化
- API接口缓存
- 分页查询减少数据传输量
- 使用PM2进行Node.js进程管理