SpringBoot+Vue构建游戏电商平台实战

1. 项目背景与需求分析

作为一名长期从事电商系统开发的工程师，我最近完成了一个基于SpringBoot和Vue的仙剑七主题游戏商城项目。这个毕业设计选题源于当前游戏周边市场的快速增长趋势，以及传统实体店在商品展示和销售渠道上的局限性。

仙剑奇侠传作为国产单机游戏的经典IP，拥有庞大的粉丝群体和周边商品需求。但现有的销售渠道存在几个痛点：

1. 商品展示不直观，粉丝难以及时获取最新周边信息
2. 购买流程繁琐，特别是对于跨地域的粉丝
3. 缺乏统一的会员体系和积分机制
4. 管理员对商品和订单的管理效率低下

针对这些问题，我们设计的商城平台需要实现以下核心功能：

• 用户端：商品浏览、分类检索、购物车、订单管理、个人信息维护
• 管理端：用户管理、商品CRUD、分类管理、订单处理、数据统计
• 系统层：权限控制、安全认证、数据持久化、前后端分离架构

2. 技术选型与架构设计

2.1 技术栈决策

经过对多个技术方案的评估，最终确定的技术栈如下：

后端技术栈：

• SpringBoot 2.7.x：提供快速应用开发能力，内置Tomcat简化部署
• Spring Security：处理认证授权，实现RBAC权限模型
• MyBatis-Plus：简化数据库操作，提供强大的CRUD接口
• Redis：缓存热点数据，提升系统响应速度
• MySQL 8.0：关系型数据库，存储核心业务数据
• Swagger：API文档自动生成，便于前后端协作

前端技术栈：

• Vue 3.x：采用Composition API，提升代码组织性
• Element Plus：UI组件库，加速界面开发
• Axios：处理HTTP请求，实现前后端通信
• Vue Router：管理前端路由，实现SPA体验
• Pinia：状态管理，替代Vuex的轻量级方案

2.2 系统架构设计

系统采用经典的三层架构，但针对电商特点做了优化：

code复制┌───────────────────────────────────────┐
│               客户端层                 │
│  ┌───────────┐       ┌─────────────┐  │
│  │   PC Web   │       │ Mobile H5   │  │
│  └───────────┘       └─────────────┘  │
└───────────────────┬───────────────────┘
                    │ HTTP/HTTPS
                    ▼
┌───────────────────────────────────────┐
│               网关层                   │
│  ┌─────────────────────────────────┐  │
│  │           Nginx反向代理          │  │
│  └─────────────────────────────────┘  │
│  ┌─────────────────────────────────┐  │
│  │         Spring Cloud Gateway     │  │
│  └─────────────────────────────────┘  │
└───────────────────┬───────────────────┘
                    │
                    ▼
┌───────────────────────────────────────┐
│               应用层                   │
│  ┌───────────┐       ┌─────────────┐  │
│  │ 用户服务   │       │ 商品服务    │  │
│  └───────────┘       └─────────────┘  │
│  ┌───────────┐       ┌─────────────┐  │
│  │ 订单服务   │       │ 支付服务    │  │
│  └───────────┘       └─────────────┘  │
└───────────────────┬───────────────────┘
                    │
                    ▼
┌───────────────────────────────────────┐
│               数据层                   │
│  ┌───────────┐       ┌─────────────┐  │
│  │  MySQL     │       │   Redis     │  │
│  └───────────┘       └─────────────┘  │
│  ┌─────────────────────────────────┐  │
│  │         Elasticsearch           │  │
│  └─────────────────────────────────┘  │
└───────────────────────────────────────┘

提示：虽然毕业设计通常不需要完整的微服务架构，但采用清晰的服务划分有利于后续扩展。实际开发中可根据团队规模适当简化。

3. 核心功能实现细节

3.1 用户权限系统实现

权限控制采用RBAC（基于角色的访问控制）模型，数据库设计如下：

sql复制CREATE TABLE `sys_user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL COMMENT '登录名',
  `password` varchar(100) NOT NULL COMMENT '密码',
  `salt` varchar(20) DEFAULT NULL COMMENT '盐',
  `email` varchar(100) DEFAULT NULL COMMENT '邮箱',
  `mobile` varchar(20) DEFAULT NULL COMMENT '手机号',
  `status` tinyint DEFAULT '1' COMMENT '状态 0:禁用 1:正常',
  `create_time` datetime DEFA