SpringBoot+Vue免税商城系统开发实战

1. 项目概述

免税商品优选购物商城管理平台是一个典型的B2C电商系统，采用前后端分离架构。前端使用Vue.js框架实现响应式用户界面，后端基于SpringBoot构建RESTful API服务，数据存储采用MySQL关系型数据库。这个项目特别适合作为计算机相关专业的毕业设计或课程设计选题，因为它涵盖了现代Web开发的主流技术栈，同时业务场景具有实际应用价值。

我在实际开发中发现，这类电商系统虽然业务逻辑相对标准化，但在权限控制、支付对接、商品管理等模块存在不少技术难点需要攻克。平台实现了用户注册登录、商品分类展示、购物车管理、订单处理等核心功能，并针对免税商品的特殊业务规则（如海关申报、税率计算等）做了定制开发。

2. 技术架构解析

2.1 后端技术选型

SpringBoot 2.7.x作为后端框架，主要基于以下考虑：

• 自动配置特性大幅减少XML配置
• 内嵌Tomcat服务器简化部署
• 完善的Starter生态（如spring-boot-starter-data-jpa）
• 与Spring Security天然集成

数据库选用MySQL 8.0，关键配置参数：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/duty_free?useSSL=false&serverTimezone=UTC
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true

2.2 前端技术方案

Vue 3.x + Element Plus组件库构成前端主体：

• 采用Composition API编写组件
• Vue Router实现前端路由控制
• Axios处理HTTP请求
• Pinia状态管理替代Vuex

典型页面结构示例：

html复制<template>
  <el-container>
    <el-header><navbar /></el-header>
    <el-main>
      <router-view />
    </el-main>
    <el-footer>©2023 DutyFree</el-footer>
  </el-container>
</template>

3. 核心功能实现

3.1 用户认证模块

采用JWT+Spring Security实现认证授权：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .sessionManagement()
            .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

3.2 商品管理模块

实现商品CRUD及分类树形结构：

java复制@Entity
public class Product {
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String name;
    private BigDecimal price;
    private Integer stock;
    
    @ManyToOne
    @JoinColumn(name = "category_id")
    private Category category;
    
    // getters & setters
}

3.3 订单处理流程

状态机设计模式处理订单生命周期：

java复制public enum OrderStatus {
    PENDING_PAYMENT,
    PAID,
    SHIPPED,
    DELIVERED,
    CANCELLED
}

@Service
public class OrderService {
    @Transactional
    public Order createOrder(Cart cart) {
        Order order = new Order();
        // 扣减库存
        cart.getItems().forEach(item -> {
            productService.reduceStock(item.getProductId(), item.getQuantity());
        });
        return orderRepository.save(order);
    }
}

4. 数据库设计

4.1 主要表结构

用户表(users)：

sql复制CREATE TABLE `users` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `created_at` datetime NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

商品表(products)：

sql复制CREATE TABLE `products` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `description` text,
  `price` decimal(10,2) NOT NULL,
  `stock` int NOT NULL,
  `category_id` bigint NOT NULL,
  `image_url` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `idx_category` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

5. 项目部署方案

5.1 开发环境配置

1. 后端运行：

bash复制mvn spring-boot:run -Dspring-boot.run.profiles=dev

2. 前端运行：

bash复制npm install
npm run serve

5.2 生产环境部署

使用Docker Compose编排服务：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: duty_free
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
  
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
  
  frontend:
    build: ./frontend
    ports:
      - "80:80"
  
volumes:
  mysql_data:

6. 常见问题解决

6.1 跨域问题处理

后端配置CORS：

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

6.2 性能优化建议

1. 数据库层面：

• 添加合适的索引
• 使用连接池配置（如HikariCP）
• 对大表进行分库分表

2. 缓存策略：

java复制@Cacheable(value = "products", key = "#id")
public Product getProductById(Long id) {
    return productRepository.findById(id).orElse(null);
}

7. 项目扩展方向

1. 支付对接：集成支付宝/微信支付SDK
2. 海关申报：开发报关信息自动生成功能
3. 数据分析：使用ELK栈实现用户行为分析
4. 微服务改造：将系统拆分为商品服务、订单服务等独立模块

实际开发中我发现，商品图片上传功能需要特别注意文件大小限制和格式校验。以下是我优化后的文件上传配置：

java复制@Bean
public MultipartConfigElement multipartConfigElement() {
    MultipartConfigFactory factory = new MultipartConfigFactory();
    factory.setMaxFileSize(DataSize.ofMegabytes(5));
    factory.setMaxRequestSize(DataSize.ofMegabytes(10));
    return factory.createMultipartConfig();
}