SpringBoot+Vue全栈电商项目开发实战

weixin_30527323

457人浏览 · 2026-07-26 15:37:27

weixin_30527323 · 2026-07-26 15:37:27 发布

1. 项目概述

这个基于SpringBoot+Vue的咖啡商城毕业设计项目，是一个典型的电商类全栈应用。作为计算机相关专业学生常见的选题方向，它完整覆盖了前后端分离架构的核心技术栈，同时具备商业项目的实用价值。

我在实际开发过程中发现，这类项目最能锻炼学生的工程能力——从数据库设计到API开发，从前端组件封装到部署上线，每个环节都需要考虑实际业务场景。不同于简单的CRUD练习，电商系统需要处理商品展示、购物车逻辑、订单状态流转等复杂业务场景，对理解企业级开发模式很有帮助。

2. 技术选型解析

2.1 后端技术栈

SpringBoot 2.7.x作为后端框架是经过深思熟虑的选择：

自动配置特性大幅减少XML配置
内嵌Tomcat简化部署流程
Starter依赖机制让整合MyBatis、Redis等组件变得简单
完善的文档和社区支持

数据库选用MySQL 8.0，主要考虑：

事务支持完善，适合电商场景
JSON字段类型便于存储商品规格等半结构化数据
与Spring Data JPA配合良好

提示：实际开发中建议使用Flyway进行数据库版本管理，比手动执行SQL更规范

2.2 前端技术栈

Vue 3.x + Element Plus的组合优势明显：

组合式API比Options API更灵活
Vite构建速度远超Webpack
Element Plus提供现成的表单、表格等业务组件
Pinia状态管理方案比Vuex更简洁

特别值得一提的是采用Axios进行HTTP请求封装时，需要统一处理：

// src/utils/request.js
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['Authorization'] = 'Bearer ' + getToken()
  }
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      return Promise.reject(new Error(res.message || 'Error'))
    }
    return res
  }
)

3. 核心功能实现

3.1 商品模块设计

商品表设计需要特别注意扩展性：

CREATE TABLE `product` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(64) NOT NULL COMMENT '商品名称',
  `category_id` bigint NOT NULL COMMENT '分类ID',
  `price` decimal(10,2) NOT NULL COMMENT '售价',
  `origin_price` decimal(10,2) DEFAULT NULL COMMENT '原价',
  `stock` int NOT NULL DEFAULT '0' COMMENT '库存',
  `specs` json DEFAULT NULL COMMENT '规格参数',
  `detail` text COMMENT '商品详情',
  `status` tinyint DEFAULT '1' COMMENT '状态',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

前端商品展示采用虚拟滚动优化性能：

<template>
  <el-table 
    :data="tableData"
    height="500"
    row-key="id"
    @row-click="handleRowClick"
  >
    <el-table-column prop="name" label="商品名称" />
    <el-table-column prop="price" label="价格" width="120" />
  </el-table>
</template>

<script setup>
import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  products,
  {
    itemHeight: 56,
  }
)
</script>

3.2 购物车实现

购物车数据结构设计要点：

本地存储未登录状态下的购物车数据
登录后合并本地和服务器数据
使用Redis缓存热门商品库存

关键Redis操作示例：

@Repository
public class CartRedisDao {
    private final RedisTemplate<String, Object> redisTemplate;
    
    public void addItem(Long userId, CartItem item) {
        redisTemplate.opsForHash().put(
            "user:cart:" + userId,
            item.getProductId().toString(),
            item
        );
    }
    
    public List<CartItem> getItems(Long userId) {
        return redisTemplate.opsForHash()
            .values("user:cart:" + userId)
            .stream()
            .map(obj -> (CartItem) obj)
            .collect(Collectors.toList());
    }
}

4. 项目部署方案

4.1 后端部署

推荐使用Docker Compose编排服务：

version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/conf:/etc/mysql/conf.d
    ports:
      - "3306:3306"
  
  redis:
    image: redis:6
    ports:
      - "6379:6379"
    volumes:
      - ./redis/data:/data
  
  app:
    build: .
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis

4.2 前端部署

Nginx配置示例：

server {
    listen       80;
    server_name  coffee-shop.example.com;
    
    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
    }
}

5. 开发经验分享

5.1 接口规范设计

建议采用统一的响应格式：

@Data
public class R<T> implements Serializable {
    private int code;
    private String msg;
    private T data;
    
    public static <T> R<T> ok(T data) {
        R<T> r = new R<>();
        r.setCode(200);
        r.setData(data);
        return r;
    }
    
    public static R<Void> error(int code, String msg) {
        R<Void> r = new R<>();
        r.setCode(code);
        r.setMsg(msg);
        return r;
    }
}

5.2 性能优化实践

启用MyBatis二级缓存：

<settings>
    <setting name="cacheEnabled" value="true"/>
</settings>

<cache eviction="LRU" flushInterval="60000" size="512"/>

前端图片懒加载：

<template>
  <img v-lazy="imgUrl" alt="">
</template>

<script>
import { Lazyload } from 'vant'
app.use(Lazyload, {
  loading: require('@/assets/loading.gif'),
  error: require('@/assets/error.png')
})
</script>

6. 常见问题排查

6.1 跨域问题解决方案

SpringBoot配置类示例：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*")
            .maxAge(3600);
    }
}

6.2 文件上传大小限制

需要在application.yml中配置：

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 20MB

对于大文件上传，建议采用分片上传方案：

// 前端分片逻辑
const chunkSize = 2 * 1024 * 1024 // 2MB
const chunks = Math.ceil(file.size / chunkSize)
for (let i = 0; i < chunks; i++) {
  const start = i * chunkSize
  const end = Math.min(file.size, start + chunkSize)
  const chunk = file.slice(start, end)
  await uploadChunk(chunk, i, file.name)
}

7. 项目扩展建议

支付接入：推荐使用支付宝沙箱环境进行测试
秒杀功能：Redis预减库存 + 消息队列异步处理
推荐系统：基于用户行为的协同过滤算法
数据大屏：ECharts可视化销售数据

我在实际开发中发现，使用Elasticsearch实现商品搜索能显著提升用户体验：

@Repository
public interface ProductRepository extends ElasticsearchRepository<Product, Long> {
    List<Product> findByNameOrDescription(String name, String description);
    
    @Query("{\"bool\": {\"must\": [{\"match\": {\"name\": \"?0\"}}]}}")
    Page<Product> findByName(String name, Pageable pageable);
}

这个项目虽然作为毕业设计，但完全达到了生产可用的标准。建议学弟学妹们在开发时多关注：