1. 项目概述
这个基于Vue+SpringBoot的手机商城销售网站项目,是我去年为一个3C数码品牌开发的电商平台。整套系统采用前后端分离架构,前端使用Vue.js+Element UI构建响应式界面,后端基于SpringBoot+MyBatisPlus实现业务逻辑,数据库选用MySQL配合Redis缓存。项目上线后日均UV达到1.2万,峰值QPS约800,目前稳定运行9个月无重大故障。
提示:手机商城类项目需要特别注意移动端适配和支付安全,本文会重点讲解这两个模块的实现方案
2. 技术选型解析
2.1 前端技术栈
选择Vue 2.x版本而非Vue 3主要考虑两点:
- 项目启动时(2022年Q3)Vue 3生态尚未完全成熟
- 团队已有成熟的Vue 2组件库积累
具体技术组合:
- 基础框架:Vue 2.6 + Vue Router + Vuex
- UI组件库:Element UI 2.15(按需加载)
- 辅助工具:
- axios封装了带JWT验证的HTTP请求模块
- vee-validate处理表单验证
- vue-lazyload实现图片懒加载
- qrcode.vue生成支付二维码
javascript复制// 典型API请求示例
export function getProductList(params) {
return request({
url: '/api/product/list',
method: 'get',
params,
headers: { 'Authorization': 'Bearer ' + getToken() }
})
}
2.2 后端技术栈
SpringBoot版本选择2.7.x(现建议升级到3.x),主要组件包括:
- 核心框架:SpringBoot 2.7 + Spring Security
- 数据层:MyBatis-Plus 3.5 + Druid连接池
- 缓存:Redis 6(商品详情缓存+秒杀库存)
- 消息队列:RabbitMQ 3.9(订单超时取消)
- 其他:
- Hutool工具包
- Lombok
- MapStruct对象转换
java复制// 商品服务的缓存注解示例
@Cacheable(value = "product", key = "#id")
public ProductVO getProductDetail(Long id) {
return productMapper.selectDetailById(id);
}
3. 核心功能实现
3.1 商品模块设计
采用三级分类体系(手机→品牌→型号),数据库设计要点:
sql复制CREATE TABLE `product` (
`id` bigint NOT NULL AUTO_INCREMENT,
`category_id` int NOT NULL COMMENT '三级分类ID',
`name` varchar(100) NOT NULL,
`price` decimal(10,2) NOT NULL,
`stock` int NOT NULL DEFAULT '0',
`specs` json DEFAULT NULL COMMENT '规格参数JSON',
`status` tinyint DEFAULT '1' COMMENT '上下架状态',
PRIMARY KEY (`id`),
KEY `idx_category` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
前端实现商品筛选的典型方案:
- 价格区间滑动选择器
- 品牌多选标签
- 规格参数动态生成筛选项
- 综合排序(销量/价格/好评)
3.2 购物车与订单系统
购物车数据结构设计考虑:
- 未登录用户:localStorage临时存储
- 已登录用户:Redis Hash结构存储
java复制// 订单创建核心逻辑
public String createOrder(OrderDTO dto) {
// 1. 校验库存
checkStock(dto.getItems());
// 2. 扣减库存(Redis原子操作)
reduceStock(dto.getItems());
// 3. 生成订单(数据库事务)
Order order = buildOrder(dto);
orderMapper.insert(order);
// 4. 发送延迟消息(30分钟未支付自动取消)
rabbitTemplate.convertAndSend(
"order.delay.exchange",
"order.cancel",
order.getOrderNo(),
message -> {
message.getMessageProperties()
.setDelay(30 * 60 * 1000);
return message;
});
return order.getOrderNo();
}
4. 支付系统集成
4.1 微信支付对接
采用V2版API,主要流程:
- 前端调用统一下单接口
- 生成支付参数返回前端
- 前端调起微信支付
- 异步通知处理
安全措施:
- 接口签名验证
- 支付结果双重校验(异步通知+主动查询)
- 敏感信息加密存储
java复制// 支付结果回调处理
@PostMapping("/notify")
public String payNotify(HttpServletRequest request) {
Map<String, String> params = parseNotifyParams(request);
if (!wxPayService.verifyNotify(params)) {
return "FAIL";
}
String orderNo = params.get("out_trade_no");
Order order = orderService.getByNo(orderNo);
if (order == null || order.getStatus() != OrderStatus.UNPAID) {
return "FAIL";
}
orderService.paySuccess(orderNo, params);
return "SUCCESS";
}
4.2 对账系统设计
每日定时任务流程:
- 下载微信对账单
- 解析并比对本地订单
- 生成差异报告
- 异常订单人工处理
5. 性能优化实践
5.1 前端优化方案
-
图片处理:
- WebP格式替代PNG/JPG
- 七牛云CDN加速
- 懒加载+占位图
-
代码优化:
- 路由懒加载
- 组件按需引入
- Gzip压缩(nginx配置)
nginx复制# nginx配置示例
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1024;
5.2 后端优化措施
-
缓存策略:
- 商品详情:Redis缓存5分钟
- 分类信息:本地缓存2小时
- 热点数据:多级缓存
-
SQL优化:
- 避免SELECT *
- 复杂查询走索引覆盖
- 批量操作代替循环
java复制// 多级缓存示例
public ProductDetail getProductDetail(Long id) {
// 1. 查本地缓存
ProductDetail detail = localCache.get(id);
if (detail != null) return detail;
// 2. 查Redis
detail = redisTemplate.opsForValue().get("product:" + id);
if (detail != null) {
localCache.put(id, detail);
return detail;
}
// 3. 查数据库
detail = productMapper.selectDetail(id);
if (detail != null) {
redisTemplate.opsForValue().set(
"product:" + id,
detail,
5, TimeUnit.MINUTES);
}
return detail;
}
6. 安全防护方案
6.1 常见攻击防护
-
XSS防护:
- 前端:vue-dompurify-html过滤富文本
- 后端:Jackson配置HTML转义
-
CSRF防护:
- 同源检测
- 重要操作二次验证
-
SQL注入:
- 严格使用预编译语句
- MyBatis使用#{}语法
java复制// 错误的写法(存在注入风险)
@Select("SELECT * FROM user WHERE name = '${name}'")
List<User> findByName(@Param("name") String name);
// 正确的写法
@Select("SELECT * FROM user WHERE name = #{name}")
List<User> findByName(@Param("name") String name);
6.2 敏感数据保护
-
密码存储:
- BCrypt加密
- 盐值随机生成
-
数据传输:
- 全站HTTPS
- 敏感字段二次加密
-
日志脱敏:
- 手机号/银行卡号掩码处理
- 使用Log4j2替换PatternLayout
7. 部署架构设计
7.1 生产环境配置
服务器规格:
- 前端:Nginx ×2(负载均衡)
- 后端:4C8G ×3(SpringBoot应用)
- 数据库:MySQL 8.0 主从架构
- 缓存:Redis哨兵模式
容器化方案:
dockerfile复制# SpringBoot应用Dockerfile示例
FROM openjdk:11-jre
COPY target/app.jar /app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
7.2 监控系统搭建
-
基础监控:
- Prometheus + Grafana
- 采集指标:CPU/内存/磁盘/JVM
-
业务监控:
- 关键接口成功率
- 订单创建峰值
- 支付成功率
-
日志系统:
- ELK收集分析
- 错误日志告警
8. 踩坑经验总结
-
微信支付证书问题:
- 证书需要定期更新
- 不同API使用的证书可能不同
-
库存超卖问题:
- Redis+Lua实现原子操作
- 支付成功后异步扣库存
-
移动端适配坑点:
- iOS日期解析兼容问题
- 安卓键盘弹出遮挡表单
-
分页查询优化:
- 避免大偏移量
- 使用游标分页代替传统分页
sql复制-- 传统分页(偏移量大时性能差)
SELECT * FROM product ORDER BY id LIMIT 10000, 20;
-- 优化方案(基于最后ID查询)
SELECT * FROM product WHERE id > 10000 ORDER BY id LIMIT 20;
这个项目让我深刻体会到,电商系统开发中最大的挑战不是功能实现,而是如何保证系统在高并发下的稳定性和数据一致性。建议在开发初期就建立完善的监控体系,并定期进行压力测试。
