1. 项目概述
智汇电脑商城购物系统是一个基于SpringBoot+Vue框架开发的B2C电商平台，专为中小型电脑销售商设计的线上销售解决方案。作为一名有多年Java全栈开发经验的工程师，我在实际项目中发现许多传统电脑零售商缺乏专业的线上销售渠道，这正是我开发这套系统的初衷。
系统采用前后端分离架构，后端使用SpringBoot框架提供RESTful API接口，前端采用Vue.js构建响应式用户界面，数据库选用MySQL 8.0进行数据存储。这种技术组合在当前企业级应用开发中非常流行，既能保证系统性能，又能提高开发效率。
2. 系统架构设计
2.1 技术选型分析
选择SpringBoot作为后端框架主要基于以下考虑：
- 自动配置特性大幅减少了XML配置
- 内嵌Tomcat服务器简化了部署流程
- 丰富的Starter依赖可以快速集成常用组件
- Actuator模块提供了完善的系统监控能力
Vue.js作为前端框架的优势在于：
- 响应式数据绑定简化了DOM操作
- 组件化开发提高了代码复用率
- Vue Router实现了流畅的单页应用体验
- Vuex提供了集中式状态管理方案
2.2 系统分层架构
系统采用经典的四层架构设计：
code复制┌───────────────────────────────────────┐
│ 用户层 │
│ (PC浏览器/移动设备) │
└───────────────┬───────────────────────┘
│ HTTP/HTTPS
┌───────────────▼───────────────────────┐
│ 展示层 │
│ (Vue.js + Element UI) │
└───────────────┬───────────────────────┘
│ RESTful API
┌───────────────▼───────────────────────┐
│ 业务层 │
│ (SpringBoot + MyBatis) │
└───────────────┬───────────────────────┘
│ JDBC
┌───────────────▼───────────────────────┐
│ 数据层 │
│ (MySQL 8.0 + Redis缓存) │
└───────────────────────────────────────┘
3. 核心功能实现
3.1 用户认证模块
采用JWT(JSON Web Token)实现无状态认证，关键代码如下：
java复制// JWT工具类
public class JwtUtil {
private static final String SECRET = "your-secret-key";
private static final long EXPIRATION = 86400000; // 24小时
public static String generateToken(UserDetails userDetails) {
return Jwts.builder()
.setSubject(userDetails.getUsername())
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + EXPIRATION))
.signWith(SignatureAlgorithm.HS512, SECRET)
.compact();
}
public static String getUsernameFromToken(String token) {
return Jwts.parser()
.setSigningKey(SECRET)
.parseClaimsJws(token)
.getBody()
.getSubject();
}
}
前端将获取到的Token存储在localStorage中，并在每次请求时通过Authorization头传递：
javascript复制// 请求拦截器
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});
3.2 商品管理模块
商品表设计遵循数据库第三范式，主要字段包括：
sql复制CREATE TABLE `product` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL COMMENT '商品名称',
`category_id` int NOT NULL COMMENT '分类ID',
`brand` varchar(50) DEFAULT NULL COMMENT '品牌',
`spec` varchar(200) DEFAULT NULL COMMENT '规格',
`price` decimal(10,2) NOT NULL COMMENT '售价',
`stock` int NOT NULL DEFAULT '0' COMMENT '库存',
`sales` int DEFAULT '0' COMMENT '销量',
`image_url` varchar(255) DEFAULT NULL COMMENT '主图URL',
`detail` text COMMENT '商品详情',
`status` tinyint DEFAULT '1' COMMENT '状态(1-上架,0-下架)',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_category` (`category_id`),
KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
商品搜索功能使用Elasticsearch实现全文检索，提高查询效率：
java复制@Service
public class ProductSearchServiceImpl implements ProductSearchService {
@Autowired
private RestHighLevelClient elasticsearchClient;
@Override
public SearchResponse searchProducts(String keyword, int page, int size) throws IOException {
SearchRequest searchRequest = new SearchRequest("products");
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
// 构建多字段查询
BoolQueryBuilder boolQuery = QueryBuilders.boolQuery()
.should(QueryBuilders.matchQuery("name", keyword).boost(2))
.should(QueryBuilders.matchQuery("brand", keyword))
.should(QueryBuilders.matchQuery("spec", keyword));
sourceBuilder.query(boolQuery)
.from((page - 1) * size)
.size(size)
.timeout(new TimeValue(60, TimeUnit.SECONDS));
searchRequest.source(sourceBuilder);
return elasticsearchClient.search(searchRequest, RequestOptions.DEFAULT);
}
}
3.3 购物车与订单模块
购物车设计考虑并发场景，使用Redis保证数据一致性：
java复制@Service
public class CartServiceImpl implements CartService {
@Autowired
private RedisTemplate<String, Object> redisTemplate;
@Override
public void addToCart(Long userId, Long productId, int quantity) {
String key = "cart:" + userId;
// 使用Hash结构存储购物车商品
redisTemplate.opsForHash().put(key, productId.toString(), quantity);
// 设置过期时间
redisTemplate.expire(key, 30, TimeUnit.DAYS);
}
@Override
@Transactional
public Order checkout(Long userId, ShippingAddress address) {
// 1. 从Redis获取购物车
Map<Object, Object> cartItems = redisTemplate.opsForHash()
.entries("cart:" + userId);
// 2. 创建订单
Order order = new Order();
order.setUserId(userId);
order.setStatus(OrderStatus.PENDING_PAYMENT);
// ...其他字段设置
// 3. 扣减库存(使用乐观锁)
for (Map.Entry<Object, Object> entry : cartItems.entrySet()) {
Long productId = Long.parseLong(entry.getKey().toString());
int quantity = Integer.parseInt(entry.getValue().toString());
int affectedRows = productMapper.reduceStock(productId, quantity);
if (affectedRows == 0) {
throw new BusinessException("商品库存不足");
}
OrderItem item = new OrderItem();
item.setProductId(productId);
item.setQuantity(quantity);
// ...其他字段设置
order.addItem(item);
}
// 4. 保存订单
orderMapper.insert(order);
// 5. 清空购物车
redisTemplate.delete("cart:" + userId);
return order;
}
}
4. 系统优化实践
4.1 性能优化方案
-
缓存策略：
- 使用Redis缓存热门商品数据
- 实现二级缓存(Caffeine + Redis)
- 商品详情页静态化
-
数据库优化：
- 合理设计索引
- 读写分离
- 分库分表(订单表按用户ID哈希分片)
-
前端优化：
- 图片懒加载
- 组件按需加载
- 使用CDN加速静态资源
4.2 安全防护措施
-
接口安全：
- 参数校验(使用Hibernate Validator)
- SQL注入防护(MyBatis使用#{}占位符)
- XSS防护(前端使用DOMPurify过滤)
-
支付安全：
- 支付密码二次验证
- 交易限额控制
- 敏感操作日志记录
-
数据安全：
- 敏感字段加密存储
- 定期数据备份
- 数据库审计日志
5. 部署与运维
5.1 生产环境部署
推荐使用Docker Compose进行容器化部署：
yaml复制version: '3.8'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
MYSQL_DATABASE: mall
volumes:
- mysql_data:/var/lib/mysql
ports:
- "3306:3306"
networks:
- mall-network
redis:
image: redis:6.2
ports:
- "6379:6379"
volumes:
- redis_data:/data
networks:
- mall-network
elasticsearch:
image: docker.elastic.co/elasticsearch/elasticsearch:7.14.0
environment:
- discovery.type=single-node
volumes:
- es_data:/usr/share/elasticsearch/data
ports:
- "9200:9200"
networks:
- mall-network
backend:
build: ./backend
depends_on:
- mysql
- redis
- elasticsearch
ports:
- "8080:8080"
environment:
- SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/mall
- SPRING_REDIS_HOST=redis
networks:
- mall-network
frontend:
build: ./frontend
ports:
- "80:80"
networks:
- mall-network
volumes:
mysql_data:
redis_data:
es_data:
networks:
mall-network:
driver: bridge
5.2 监控与告警
- SpringBoot Actuator：暴露健康检查端点
- Prometheus + Grafana：实现指标监控
- ELK Stack：集中日志管理
- Sentry：错误追踪与告警
6. 开发经验分享
6.1 常见问题解决
- 跨域问题：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.maxAge(3600);
}
}
- 分布式锁实现：
java复制public boolean tryLock(String lockKey, long expireTime) {
return redisTemplate.opsForValue()
.setIfAbsent(lockKey, "locked", expireTime, TimeUnit.SECONDS);
}
public void unlock(String lockKey) {
redisTemplate.delete(lockKey);
}
6.2 性能调优技巧
- MyBatis批量插入优化：
xml复制<insert id="batchInsert" parameterType="java.util.List">
INSERT INTO order_item (order_id, product_id, quantity)
VALUES
<foreach collection="list" item="item" separator=",">
(#{item.orderId}, #{item.productId}, #{item.quantity})
</foreach>
</insert>
- 接口响应缓存：
java复制@Cacheable(value = "products", key = "#id")
public Product getProductById(Long id) {
return productMapper.selectById(id);
}
7. 项目扩展方向
-
微服务化改造：
- 按业务拆分为商品服务、订单服务、用户服务等
- 使用Spring Cloud Alibaba实现服务治理
- 引入消息队列处理异步任务
-
移动端适配：
- 开发微信小程序版本
- 实现APP推送通知
- 增加扫码购功能
-
智能推荐系统：
- 基于用户行为的协同过滤推荐
- 热门商品排行榜
- 个性化首页展示
这个电脑商城系统从技术选型到架构设计都遵循了当前主流的最佳实践，在实际开发过程中，特别要注意商品库存的一致性和订单支付的可靠性处理。系统采用的技术栈成熟稳定，扩展性强，适合作为计算机专业学生的毕业设计项目，也完全可以用于实际商业场景。