基于SpringBoot+Vue的手工艺品销售系统实现方案
一、系统架构设计
- 技术选型
- 前端:Vue3 + TypeScript + Element Plus/Ant Design Vue + Axios + Vue Router + Pinia
- 后端:SpringBoot 3.x + MyBatis-Plus + Spring Security + JWT + MySQL/PostgreSQL
- 中间件:Redis(缓存/分布式锁) + RabbitMQ(异步解耦,如订单超时处理)
- 存储:阿里云OSS/MinIO(图片/文件存储)
- 支付:支付宝沙箱/微信支付API
- 部署:Nginx(反向代理) + Docker(容器化) + Jenkins(CI/CD)
- 架构模式
- 前后端分离:通过RESTful API交互,前端独立部署,后端提供JSON数据。
- 分层设计:
- Controller层(接口定义) → Service层(业务逻辑) → DAO层(数据访问)
- 前端组件化开发,按功能模块划分路由。
二、核心功能模块
- 用户系统
- 功能:注册/登录(手机/邮箱验证)、第三方登录(微信/QQ)、JWT鉴权、个人中心(地址管理、收藏夹)。
- 安全设计:
- 密码加密存储(BCryptPasswordEncoder)。
- 关键操作(如支付)增加二次验证(短信/邮箱验证码)。
- 接口防刷(Redis记录请求频率)。
- 商品系统
- 功能:商品分类(多级树形结构)、商品详情(富文本描述)、商品搜索(Elasticsearch集成)、商品评价、库存管理。
- 技术实现:
- 图片上传采用OSS直传,前端获取临时签名。
- 商品详情页静态化(Redis缓存HTML片段)。
- 交易系统
- 购物车:Redis Hash结构存储(用户ID为Key,商品ID和数量为Field/Value)。
- 订单流程:
- 下单:预扣库存(Redis分布式锁防止超卖)→ 生成订单(状态:待支付)。
- 支付:对接支付宝/微信支付,异步回调更新订单状态。
- 超时处理:RabbitMQ延时队列自动取消未支付订单。
- 事务处理:Spring事务管理,保证库存扣减与订单创建一致性。
- 后台管理
- 功能模块:商品CRUD、订单管理(发货/退款)、数据统计(ECharts集成)、用户权限控制(RBAC模型)。
- 技术实现:
- 动态路由:基于用户角色返回可访问菜单。
- 数据导出:EasyExcel实现订单报表生成。
三、数据库设计(核心表)
表名 | 字段示例 | 说明 |
---|---|---|
user | id, username, password, phone… | 用户基本信息 |
product | id, name, price, stock, category_id… | 商品信息(关联分类表) |
order | order_id, user_id, total_amount, status… | 订单主表 |
order_item | order_id, product_id, quantity | 订单商品明细 |
cart | user_id, product_id, count | 购物车数据(Redis存储) |
四、关键代码实现示例
- SpringBoot集成JWT
// JWT工具类
public class JwtUtils {
private static final String SECRET = "your-secret-key";
public static String generateToken(UserDetails user) {
return Jwts.builder()
.setSubject(user.getUsername())
.setExpiration(new Date(System.currentTimeMillis() + 864000000))
.signWith(SignatureAlgorithm.HS512, SECRET)
.compact();
}
}
- Vue前端商品搜索(防抖优化)
import { debounce } from 'lodash-es';
const searchProducts = debounce(async (keyword) => {
const res = await axios.get('/api/products', { params: { q: keyword } });
productList.value = res.data;
}, 500); // 500ms防抖延迟
五、部署与优化
- 容器化部署
# SpringBoot Dockerfile示例
FROM openjdk:17
COPY target/*.jar /app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
- 性能优化
- Nginx配置Gzip压缩静态资源。
- 数据库读写分离(ShardingSphere-JDBC)。
- CDN加速商品图片访问。
六、扩展方向
- 移动端适配:Uniapp开发微信小程序版本。
- 社交功能:用户作品分享、手工艺制作教程社区。
- 智能推荐:基于用户行为(协同过滤算法)推荐商品。
注意事项:
- 支付接口需遵循PCI DSS安全标准,敏感数据(如银行卡号)禁止明文传输。
- 定期备份数据库(阿里云RDS自动备份+异地容灾)。
- 日志收集:ELK(Elasticsearch+Logstash+Kibana)监控系统运行状态。