前后端分离：前端Vue.js + 后端Spring Boot
技术选型：
- 前端：Vue 2.x + Vue Router + Vuex + Axios + Element UI
- 后端：Spring Boot 2.x + MyBatis-Plus + Spring Security + JWT
- 数据库：MySQL 8.0 + Redis（缓存）
- 其他：RabbitMQ（异步消息）、OSS（图片存储）、Swagger（API文档）

架构图

   ┌──────────────┐       ┌──────────────┐
   │   Vue前端     │<─HTTP─>│ Spring Boot  │
   │ (用户/管理端)  │       │   后端API    │
   └──────────────┘       └──────┬───────┘
                              ├─MySQL
                              ├─Redis
                              └─RabbitMQ

二、功能模块划分

1. 用户端功能

首页展示：轮播图、热门车型推荐、搜索栏
车辆浏览：分类筛选（品牌/价格/车型）、排序、详情页（参数/图片/库存）
用户中心：注册/登录（JWT）、个人信息管理、订单历史
购物流程：加入购物车、下单结算、模拟支付（支付宝沙箱）、订单状态跟踪
在线咨询：站内消息/留言板

2. 管理端功能

车辆管理：CRUD操作、批量导入/导出、库存管理
订单管理：订单查询、状态修改（待付款/已发货/已完成）、退款处理
用户管理：用户列表、权限控制（RBAC）
数据统计：ECharts可视化（销量趋势、用户画像）
营销管理：优惠券发放、限时活动配置

三、技术实现细节

1. 前端实现

项目初始化

  vue create car-sales-frontend
  vue add element-ui  # 集成Element UI

核心页面
Home.vue：首页展示搜索框与推荐车辆
CarList.vue：车辆列表与筛选组件（使用Vuex管理状态）
CarDetail.vue：车辆详情页（图片轮播组件+库存校验）
OrderCheckout.vue：订单结算页（调用支付宝沙箱API）
API调用

  // axios封装示例（src/api/request.js）
  const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000,
    headers: { 'Authorization': 'Bearer ' + getToken() }
  });

2. 后端实现

Spring Boot配置

  @SpringBootApplication
  @EnableSwagger2
  @MapperScan("com.carsales.mapper")
  public class CarSalesApplication { ... }

核心功能实现
JWT鉴权：JwtAuthenticationFilter过滤请求，验证Token有效性
车辆服务： @RestController @RequestMapping("/api/car") public class CarController { @Autowired private CarService carService;@GetMapping("/list") public Result listCars(@RequestParam Map<String, Object> params) { Page<Car> page = carService.queryPage(params); return Result.ok(page); }}
订单服务：使用RabbitMQ异步处理超时订单（延迟队列）
数据库设计

  -- 车辆表
  CREATE TABLE `car` (
    `id` BIGINT PRIMARY KEY,
    `brand` VARCHAR(50) COMMENT '品牌',
    `model` VARCHAR(50) COMMENT '型号',
    `price` DECIMAL(10,2) COMMENT '价格',
    `stock` INT COMMENT '库存',
    `cover_image` VARCHAR(255) COMMENT '封面图（OSS路径）'
  );

  -- 订单表（分库分表可扩展）
  CREATE TABLE `order` (
    `id` VARCHAR(32) PRIMARY KEY COMMENT '订单号',
    `user_id` BIGINT,
    `car_id` BIGINT,
    `status` TINYINT COMMENT '0-待支付 1-已支付 2-已取消',
    `total_amount` DECIMAL(10,2)
  );