SpringBoot+Vue医疗电商系统开发实战
1. 项目概述
这个基于SpringBoot+Vue的医疗用品销售网站项目，是我去年指导的一个计算机专业本科毕业设计的完整实现方案。整套系统采用前后端分离架构，后端使用SpringBoot+MyBatis技术栈，前端采用Vue+ElementUI框架，实现了医疗用品的在线展示、购物车管理、订单处理等核心电商功能。
特别说明：本文提供的代码和设计方案已经过实际毕业答辩验证，包含完整的数据库设计文档、接口文档和部署指南，适合作为Java全栈开发的实战参考项目。
2. 技术选型解析
2.1 后端技术栈
SpringBoot 2.7.12版本 + MyBatis-Plus 3.5.3 + MySQL 8.0：
- 选用SpringBoot而非传统SSM框架，主要考虑其自动配置特性可以快速搭建项目
- MyBatis-Plus的代码生成器功能大幅减少了基础CRUD代码量
- 数据库采用MySQL社区版，因其在中小型电商系统中的稳定表现
2.2 前端技术栈
Vue 2.6 + ElementUI 2.15 + Axios：
- Vue2版本成熟稳定，配套生态完善
- ElementUI提供现成的Admin模板和组件库
- 采用axios处理HTTP请求，配合拦截器实现权限控制
3. 核心功能实现
3.1 商品管理模块
数据库设计关键表：
CREATE TABLE `product` ( `id` int NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL COMMENT '商品名称', `category_id` int NOT NULL COMMENT '分类ID', `price` decimal(10,2) NOT NULL COMMENT '售价', `stock` int NOT NULL DEFAULT '0' COMMENT '库存', `medical_license` varchar(50) DEFAULT NULL COMMENT '医疗器械备案号', `status` tinyint NOT NULL DEFAULT '1' COMMENT '状态', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;后端接口示例（SpringBoot）：
@RestController @RequestMapping("/api/product") public class ProductController { @Autowired private ProductService productService; @GetMapping("/list") public Result list(@RequestParam Map<String,Object> params){ PageUtils page = productService.queryPage(params); return Result.ok().put("page", page); } }3.2 购物车系统
前端Vue组件关键逻辑：
// 购物车数量增减 changeCartNum(id, num) { this.$axios.post('/cart/update', { id: id, num: num }).then(res => { this.getCartList() }) }Redis缓存设计：
- 使用Hash结构存储用户购物车数据
- Key格式：cart:{userId}
- Field：productId
- Value：商品数量
4. 特色功能实现
4.1 医疗资质验证
在商品上架时增加医疗资质审核流程：
public Result addProduct(ProductDTO dto) { // 验证医疗器械备案号 if(!medicalLicenseService.validate(dto.getMedicalLicense())){ return Result.error("医疗器械备案号无效"); } // ...其他逻辑 }4.2 订单状态机设计
采用状态模式实现订单流转：
public interface OrderState { void pay(Order order); void cancel(Order order); void deliver(Order order); } @Component @Scope("prototype") public class UnpaidState implements OrderState { @Override public void pay(Order order) { order.setState(OrderStatusEnum.PAID.getCode()); // 支付成功逻辑 } }5. 部署指南
5.1 后端部署
- 打包命令：
mvn clean package -DskipTests- 启动参数配置：
# application-prod.properties server.port=8080 spring.datasource.url=jdbc:mysql://localhost:3306/medical_mall?useSSL=false5.2 前端部署
Nginx配置示例：
server { listen 80; server_name mall.example.com; location / { root /usr/share/nginx/html/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; } }6. 常见问题解决方案
6.1 跨域问题
SpringBoot解决方案：
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .maxAge(3600); } }6.2 文件上传大小限制
调整SpringBoot配置：
spring.servlet.multipart.max-file-size=10MB spring.servlet.multipart.max-request-size=10MB7. 项目优化建议
- 缓存策略优化：
- 商品详情页加入Redis缓存
- 使用Spring Cache注解简化缓存逻辑
- 搜索功能增强：
- 集成Elasticsearch实现商品搜索
- 增加医疗用品专业术语同义词库
- 安全加固：
- 增加SQL注入过滤器
- 敏感操作加入日志审计
开发心得：医疗类电商系统要特别注意资质验证和库存管理，我们在测试阶段就发现了如果没有严格的库存校验，会导致超卖问题。最终通过Redis分布式锁+数据库乐观锁双重保障解决了这个问题。