1. 项目概述
这个手机商城销售网站项目采用了Vue.js作为前端框架，Spring Boot作为后端框架，是一个典型的前后端分离架构的电商系统。作为一名全栈开发者，我最近刚完成了一个类似的商业项目，想和大家分享一些实战经验和踩坑记录。
现代电商网站早已不是简单的商品展示平台，而是需要整合支付、物流、用户行为分析等复杂功能的系统工程。采用Vue+SpringBoot的组合，既能保证前端交互体验的流畅性，又能确保后端服务的高可用性。这个技术栈的选择在当前中小型电商项目中非常普遍，社区资源丰富，遇到问题也容易找到解决方案。
2. 技术选型分析
2.1 前端技术栈
Vue.js作为主流前端框架之一，在电商项目中表现出色。我们选择了Vue 3的组合式API写法，相比选项式API更灵活。配套使用了以下关键技术：
- Vue Router：处理前端路由，实现SPA体验
- Vuex/Pinia：状态管理，处理全局数据如用户登录状态、购物车
- Axios：封装HTTP请求，与后端API交互
- Element UI/Ant Design Vue：UI组件库，加速开发
- VeeValidate：表单验证，确保数据准确性
提示：Vue 3的Composition API需要一定的学习成本，但对于复杂电商系统来说，代码组织会更清晰。
2.2 后端技术栈
Spring Boot作为Java生态中最流行的框架，提供了快速开发企业级应用的能力。我们采用了以下技术组合：
- Spring Security：处理认证授权
- Spring Data JPA：数据库访问层
- Redis：缓存热点数据如商品详情、秒杀库存
- RabbitMQ：异步处理订单、消息通知等
- Swagger：API文档生成
数据库选择了MySQL 8.0，考虑到电商系统对事务的一致性和数据的完整性要求较高。
3. 核心功能模块设计
3.1 用户系统
用户模块采用了经典的RBAC模型，包含以下功能点：
- 注册登录：支持手机号+验证码、账号密码两种方式
- 权限控制：基于角色的权限管理系统
- 个人信息管理：头像上传、基本信息修改
- 地址管理：收货地址的CRUD操作
java复制// Spring Security配置示例
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/api/user/**").hasAnyRole("USER","ADMIN")
.antMatchers("/api/admin/**").hasRole("ADMIN")
.anyRequest().permitAll()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()));
}
}
3.2 商品系统
商品模块采用了分类+属性的设计模式：
- 商品分类：三级分类体系
- 商品属性：SKU+SPU模型
- 搜索功能：基于Elasticsearch实现
- 商品评价：带图评价、评分系统
前端商品展示特别需要注意图片懒加载和响应式设计，我们使用了Intersection Observer API来实现：
javascript复制// 图片懒加载指令
Vue.directive('lazy', {
mounted(el, binding) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
})
observer.observe(el)
}
})
3.3 订单系统
订单模块是电商系统的核心，我们设计了状态机来处理订单流转：
- 购物车：合并登录前后购物车商品
- 订单生成：预减库存、生成订单号
- 支付集成：对接支付宝、微信支付
- 订单状态：待支付、待发货、待收货、已完成
- 退款退货：逆向流程处理
java复制// 订单状态机示例
public enum OrderStatus {
INIT(0, "初始状态"),
PAID(1, "已支付"),
DELIVERED(2, "已发货"),
RECEIVED(3, "已收货"),
CLOSED(-1, "已关闭");
// 状态转换校验逻辑
public static boolean canChangeTo(OrderStatus current, OrderStatus target) {
// 具体校验逻辑...
}
}
4. 性能优化实践
4.1 前端性能优化
- 代码分割：按路由懒加载组件
- 图片优化：WebP格式+CDN加速
- 缓存策略：合理设置HTTP缓存头
- 减少重绘：使用CSS will-change属性
- 预加载关键资源：使用
4.2 后端性能优化
- 多级缓存：Redis+本地缓存+Caffeine
- 数据库优化：索引优化+读写分离
- 异步处理：消息队列解耦耗时操作
- 连接池调优：HikariCP参数配置
- JVM调优：根据压测结果调整参数
我们使用JMeter进行压力测试，模拟1000并发用户下单场景，通过优化使系统TPS从150提升到420。
5. 安全防护措施
5.1 常见攻击防护
- XSS：前端DOMPurify过滤，后端Jackson转义
- CSRF：SameSite Cookie+自定义Header校验
- SQL注入：预编译语句+ORM框架
- 越权访问：方法级权限注解
- 暴力破解：登录失败次数限制
5.2 数据安全
- 敏感数据加密：手机号、身份证号等
- 日志脱敏：防止敏感信息泄露
- HTTPS传输：全站SSL加密
- 数据备份：每日全量+增量备份
6. 部署架构设计
我们采用了容器化部署方案：
- 前端：Nginx+Docker部署静态资源
- 后端：Spring Boot应用打Jar包运行
- 数据库：MySQL主从架构
- 缓存：Redis哨兵模式
- 消息队列：RabbitMQ集群
- 监控：Prometheus+Grafana
bash复制# 示例Docker Compose配置
version: '3'
services:
frontend:
image: nginx:alpine
ports:
- "80:80"
volumes:
- ./dist:/usr/share/nginx/html
backend:
image: openjdk:11-jre
command: java -jar app.jar
ports:
- "8080:8080"
depends_on:
- redis
- mysql
7. 开发中的难点与解决方案
7.1 购物车同步问题
用户在未登录状态下添加商品到购物车，登录后需要合并临时购物车和用户购物车。我们采用以下方案：
- 未登录状态使用localStorage存储临时购物车
- 登录后发送合并请求到后端
- 后端根据商品ID合并数量
- 冲突处理：保留最大数量
7.2 高并发下单
秒杀场景下的库存超卖问题，我们采用Redis+Lua脚本实现原子操作：
lua复制-- 库存扣减Lua脚本
local stock = tonumber(redis.call('GET', KEYS[1]))
if stock <= 0 then
return 0
end
if stock >= tonumber(ARGV[1]) then
redis.call('DECRBY', KEYS[1], ARGV[1])
return 1
else
return 0
end
7.3 支付结果异步通知
支付平台回调可能存在的重复通知和验签问题：
- 保证接口幂等性：先查询订单状态再处理
- 严格验签：验证签名防止伪造请求
- 异步处理：收到通知后放入消息队列
- 超时补偿：定时任务检查未支付订单
8. 项目总结与改进方向
经过三个月的开发和优化，系统已经稳定运行。但在实际运营中，我们发现还有可以改进的地方：
- 增加推荐算法：基于用户行为的商品推荐
- 完善监控告警：业务指标监控+自动扩容
- 多语言支持：国际化方案
- 微服务改造：按业务拆分服务
这个项目让我深刻体会到，电商系统开发不仅仅是实现功能，更需要考虑性能、安全和可维护性。特别是在高并发场景下，每一个设计决策都会影响最终用户体验。