SpringBoot+Vue构建精品水果电商平台实战

1. 项目概述与背景

最近在帮朋友搭建一个精品水果电商平台时，我选择了SpringBoot+Vue这套前后端分离的技术栈。这个组合在中小型电商项目中表现非常出色，既能保证开发效率，又能满足性能需求。整个系统从零开始搭建到上线部署，前后花了约三周时间，期间踩了不少坑也积累了不少经验。

为什么选择精品水果这个垂直领域？根据我的市场调研，普通水果电商已经是一片红海，但高品质、特色化的精品水果市场仍有很大发展空间。这类产品客单价高，消费者对购物体验要求也更高，正好可以发挥前后端分离架构的优势。

2. 技术选型解析

2.1 后端技术栈

SpringBoot 2.7.x作为后端框架是我的首选。相比传统的SSM架构，SpringBoot的自动配置和起步依赖让项目搭建变得极其简单。我特别看重它内嵌Tomcat的特性，这让部署变得非常方便。

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

• 成熟稳定，社区支持完善
• 对事务的支持完全满足电商需求
• JSON类型支持方便存储商品扩展属性

数据访问层使用MyBatis-Plus 3.5.x而不是原生MyBatis，因为：

• 内置通用Mapper和Service减少重复代码
• 强大的条件构造器简化复杂查询
• 代码生成器可以快速生成基础CRUD代码

2.2 前端技术栈

Vue 3.x + Element Plus的组合让前端开发效率大幅提升。相比React，Vue的学习曲线更平缓，模板语法对后端开发者也更友好。

选择Pinia作为状态管理库而不是Vuex，因为：

• 更简单的API设计
• 更好的TypeScript支持
• 模块化设计更符合现代前端工程思想

3. 数据库设计与优化

3.1 核心表结构

用户表(user_info)的设计有几个关键点：

sql复制CREATE TABLE `user_info` (
  `user_id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL COMMENT '登录名',
  `password_hash` varchar(100) NOT NULL COMMENT 'BCrypt加密密码',
  `email` varchar(100) DEFAULT NULL,
  `phone_number` varchar(20) DEFAULT NULL,
  `avatar_url` varchar(255) DEFAULT NULL COMMENT '头像URL',
  `status` tinyint DEFAULT '1' COMMENT '0-禁用 1-正常',
  `register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `last_login` datetime DEFAULT NULL,
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `idx_username` (`username`),
  KEY `idx_phone` (`phone_number`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

商品表(product_detail)特别注意了索引设计：

sql复制CREATE TABLE `product_detail` (
  `product_id` bigint NOT NULL AUTO_INCREMENT,
  `product_name` varchar(100) NOT NULL,
  `category_id` bigint NOT NULL,
  `price` decimal(10,2) NOT NULL COMMENT '销售价',
  `cost_price` decimal(10,2) DEFAULT NULL COMMENT '成本价',
  `stock` int NOT NULL DEFAULT '0',
  `sold_count` int DEFAULT '0' COMMENT '销量',
  `description` text,
  `detail_html` text COMMENT '商品详情HTML',
  `main_image` varchar(255) NOT NULL COMMENT '主图URL',
  `sub_images` json DEFAULT NULL COMMENT '副图JSON数组',
  `specs` json DEFAULT NULL COMMENT '规格参数',
  `is_hot` tinyint DEFAULT '0' COMMENT '是否热销',
  `status` tinyint DEFAULT '1' COMMENT '0-下架 1-上架',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `update_time` datetime NOT