1. 项目概述欢迪迈手机商城系统技术全景这个基于Java技术栈的手机商城系统是我去年带队为某3C零售品牌交付的线上销售平台。系统采用前后端分离架构后端基于SpringBootMyBatis实现业务逻辑前端使用VueElementUI构建管理后台MySQL作为核心数据存储。上线后支撑日均3万订单量峰值QPS达到800是典型的B2C电商解决方案。从技术选型来看这套组合拳在中小型电商项目中非常具有代表性SpringBoot的快速开发特性完美适配互联网项目的迭代节奏MyBatis的灵活SQL编写满足电商复杂的查询需求VueElementUI的组合则让管理后台开发效率提升40%以上。特别在促销活动期间这套架构展现了良好的弹性扩展能力。2. 技术架构深度解析2.1 后端技术栈设计SpringBoot 2.7版本作为基础框架其自动配置机制大幅减少了XML配置。我们特别优化了以下配置# 应用启动端口 server.port8088 # MyBatis配置 mybatis.mapper-locationsclasspath:mapper/*.xml mybatis.type-aliases-packagecom.handimai.model # 启用事务管理 spring.transaction.default-timeout30s数据库连接池选用HikariCP这是目前性能最好的Java连接池实现。在application.yml中配置了连接池参数spring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 1800000特别注意连接池大小设置需要根据实际DB服务器配置调整一般建议(maximum-pool-size) (CPU核心数 * 2) 有效磁盘数2.2 前端架构设计采用Vue 2.6 ElementUI 2.15的组合通过vue-cli 4搭建项目骨架。关键目录结构如下src/ ├── api/ # 接口定义 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # Vuex状态管理 ├── utils/ # 工具类 └── views/ # 页面组件在main.js中全局引入ElementUI并配置按需加载import Vue from vue import { Button, Table, Form } from element-ui Vue.use(Button) Vue.use(Table) Vue.use(Form)3. 核心功能模块实现3.1 商品管理模块采用三级分类设计手机→品牌→型号数据库表结构如下CREATE TABLE product ( id bigint(20) NOT NULL AUTO_INCREMENT, category_id int(11) NOT NULL COMMENT 三级分类ID, name varchar(100) NOT NULL, subtitle varchar(200) DEFAULT NULL, price decimal(10,2) NOT NULL, stock int(11) NOT NULL DEFAULT 0, status tinyint(4) DEFAULT 1 COMMENT 1-在售 0-下架, create_time datetime NOT NULL, PRIMARY KEY (id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;后端接口采用RESTful风格设计RestController RequestMapping(/api/product) public class ProductController { Autowired private ProductService productService; GetMapping(/{id}) public ResultProductDetailVO getDetail(PathVariable Long id) { return Result.success(productService.getDetail(id)); } PostMapping(/list) public ResultPageInfoProductVO getList(RequestBody ProductQueryDTO query) { return Result.success(productService.queryByPage(query)); } }3.2 购物车与订单系统购物车采用Redis Hash结构存储Key设计为cart:{userId}field为商品IDvalue为JSON格式的购物项数据。订单状态机设计如下public enum OrderStatus { UNPAID(0, 待支付), PAID(1, 已支付), SHIPPED(2, 已发货), COMPLETED(3, 已完成), CANCELLED(4, 已取消); // 省略构造函数和getter }订单创建时采用分布式锁防止重复提交public String createOrder(OrderCreateDTO dto) { String lockKey order:lock: dto.getUserId(); try { // 尝试获取锁有效期3秒 boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, 1, 3, TimeUnit.SECONDS); if (!locked) { throw new BusinessException(操作太频繁请稍后再试); } // 真正的订单创建逻辑 return orderService.create(dto); } finally { redisTemplate.delete(lockKey); } }4. 性能优化实战记录4.1 缓存策略设计采用多级缓存架构本地缓存Caffeine缓存热点商品信息TTL 5分钟Redis缓存缓存商品详情、分类数据等TTL 30分钟MySQL持久化存储缓存更新策略采用先更新DB再删除缓存的方式Transactional public void updateProduct(ProductUpdateDTO dto) { // 1. 更新数据库 productMapper.update(dto); // 2. 删除缓存 String cacheKey product: dto.getId(); redisTemplate.delete(cacheKey); // 3. 发送MQ消息更新其他缓存 mqProducer.sendProductUpdateMsg(dto.getId()); }4.2 数据库优化针对商品列表查询的慢SQL优化-- 优化前 SELECT * FROM product WHERE status 1 ORDER BY create_time DESC; -- 优化后 SELECT id,name,price,stock FROM product WHERE status 1 AND category_id ? ORDER BY sales_volume DESC LIMIT ?,?;建立复合索引ALTER TABLE product ADD INDEX idx_category_status (category_id, status);5. 部署与监控方案5.1 容器化部署使用Docker Compose编排服务docker-compose.yml关键配置version: 3 services: mysql: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} ports: - 3306:3306 volumes: - ./mysql/data:/var/lib/mysql redis: image: redis:6 ports: - 6379:6379 command: redis-server --requirepass ${REDIS_PASSWORD} backend: build: ./backend ports: - 8080:8080 depends_on: - mysql - redis5.2 监控配置SpringBoot Actuator接入Prometheus监控Configuration public class MetricsConfig { Bean MeterRegistryCustomizerPrometheusMeterRegistry configureMetrics() { return registry - registry.config().commonTags(application, handimai-mall); } }在application.yml中暴露监控端点management: endpoints: web: exposure: include: health,info,prometheus metrics: tags: application: ${spring.application.name}6. 典型问题排查实录6.1 库存超卖问题初期直接使用MySQL更新库存UPDATE product SET stock stock - 1 WHERE id ? AND stock 1优化方案引入Redis分布式锁乐观锁public boolean reduceStock(Long productId, int quantity) { String lockKey product:lock: productId; try { // 获取商品级锁 Boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, 1, 1, TimeUnit.SECONDS); if (Boolean.TRUE.equals(locked)) { // 乐观锁版本号控制 Product product productMapper.selectById(productId); if (product.getStock() quantity) { int rows productMapper.updateStockWithVersion( productId, quantity, product.getVersion()); return rows 0; } } return false; } finally { redisTemplate.delete(lockKey); } }6.2 前端内存泄漏在商品列表页发现切换路由时内存持续增长。通过Chrome Memory工具定位到问题// 错误示例在created钩子中注册全局事件未移除 created() { window.addEventListener(resize, this.handleResize) } // 正确做法在beforeDestroy中移除 beforeDestroy() { window.removeEventListener(resize, this.handleResize) }7. 安全防护措施7.1 接口防刷设计采用Guava RateLimiter实现API限流Aspect Component public class RateLimitAspect { private final MapString, RateLimiter limiterMap new ConcurrentHashMap(); Around(annotation(rateLimit)) public Object around(ProceedingJoinPoint joinPoint, RateLimit rateLimit) throws Throwable { String key getRequestKey(); // 根据IP接口生成key RateLimiter limiter limiterMap.computeIfAbsent(key, k - RateLimiter.create(rateLimit.value())); if (!limiter.tryAcquire()) { throw new BusinessException(请求过于频繁请稍后再试); } return joinPoint.proceed(); } }7.2 SQL注入防护MyBatis严格使用参数化查询禁止拼接SQL!-- 错误示例 -- select idqueryByCondition resultTypeProduct SELECT * FROM product WHERE name LIKE %${name}% /select !-- 正确做法 -- select idqueryByCondition resultTypeProduct SELECT * FROM product WHERE name LIKE CONCAT(%,#{name},%) /select8. 项目演进方向技术架构的持续优化路线服务拆分将订单、商品、用户等服务拆分为独立微服务引入Kafka实现订单创建、支付成功等事件的异步处理灰度发布通过SpringCloud Gateway实现API级别的流量控制全链路压测使用JMeterInfluxDBGrafana搭建压测平台在商品详情页已尝试实现静态化方案通过Vue SSR生成静态HTML配合Nginx缓存使页面加载时间从1.2s降低到400ms左右。具体实现采用vue-server-rendererconst renderer require(vue-server-renderer).createRenderer() const app require(./app) server.get(*, (req, res) { const vm app.createApp() renderer.renderToString(vm, (err, html) { if (err) { res.status(500).end(Internal Server Error) return } res.end( !DOCTYPE html html head.../head body${html}/body /html ) }) }) Java+Vue构建高并发手机商城系统实战
1. 项目概述欢迪迈手机商城系统技术全景这个基于Java技术栈的手机商城系统是我去年带队为某3C零售品牌交付的线上销售平台。系统采用前后端分离架构后端基于SpringBootMyBatis实现业务逻辑前端使用VueElementUI构建管理后台MySQL作为核心数据存储。上线后支撑日均3万订单量峰值QPS达到800是典型的B2C电商解决方案。从技术选型来看这套组合拳在中小型电商项目中非常具有代表性SpringBoot的快速开发特性完美适配互联网项目的迭代节奏MyBatis的灵活SQL编写满足电商复杂的查询需求VueElementUI的组合则让管理后台开发效率提升40%以上。特别在促销活动期间这套架构展现了良好的弹性扩展能力。2. 技术架构深度解析2.1 后端技术栈设计SpringBoot 2.7版本作为基础框架其自动配置机制大幅减少了XML配置。我们特别优化了以下配置# 应用启动端口 server.port8088 # MyBatis配置 mybatis.mapper-locationsclasspath:mapper/*.xml mybatis.type-aliases-packagecom.handimai.model # 启用事务管理 spring.transaction.default-timeout30s数据库连接池选用HikariCP这是目前性能最好的Java连接池实现。在application.yml中配置了连接池参数spring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 1800000特别注意连接池大小设置需要根据实际DB服务器配置调整一般建议(maximum-pool-size) (CPU核心数 * 2) 有效磁盘数2.2 前端架构设计采用Vue 2.6 ElementUI 2.15的组合通过vue-cli 4搭建项目骨架。关键目录结构如下src/ ├── api/ # 接口定义 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # Vuex状态管理 ├── utils/ # 工具类 └── views/ # 页面组件在main.js中全局引入ElementUI并配置按需加载import Vue from vue import { Button, Table, Form } from element-ui Vue.use(Button) Vue.use(Table) Vue.use(Form)3. 核心功能模块实现3.1 商品管理模块采用三级分类设计手机→品牌→型号数据库表结构如下CREATE TABLE product ( id bigint(20) NOT NULL AUTO_INCREMENT, category_id int(11) NOT NULL COMMENT 三级分类ID, name varchar(100) NOT NULL, subtitle varchar(200) DEFAULT NULL, price decimal(10,2) NOT NULL, stock int(11) NOT NULL DEFAULT 0, status tinyint(4) DEFAULT 1 COMMENT 1-在售 0-下架, create_time datetime NOT NULL, PRIMARY KEY (id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;后端接口采用RESTful风格设计RestController RequestMapping(/api/product) public class ProductController { Autowired private ProductService productService; GetMapping(/{id}) public ResultProductDetailVO getDetail(PathVariable Long id) { return Result.success(productService.getDetail(id)); } PostMapping(/list) public ResultPageInfoProductVO getList(RequestBody ProductQueryDTO query) { return Result.success(productService.queryByPage(query)); } }3.2 购物车与订单系统购物车采用Redis Hash结构存储Key设计为cart:{userId}field为商品IDvalue为JSON格式的购物项数据。订单状态机设计如下public enum OrderStatus { UNPAID(0, 待支付), PAID(1, 已支付), SHIPPED(2, 已发货), COMPLETED(3, 已完成), CANCELLED(4, 已取消); // 省略构造函数和getter }订单创建时采用分布式锁防止重复提交public String createOrder(OrderCreateDTO dto) { String lockKey order:lock: dto.getUserId(); try { // 尝试获取锁有效期3秒 boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, 1, 3, TimeUnit.SECONDS); if (!locked) { throw new BusinessException(操作太频繁请稍后再试); } // 真正的订单创建逻辑 return orderService.create(dto); } finally { redisTemplate.delete(lockKey); } }4. 性能优化实战记录4.1 缓存策略设计采用多级缓存架构本地缓存Caffeine缓存热点商品信息TTL 5分钟Redis缓存缓存商品详情、分类数据等TTL 30分钟MySQL持久化存储缓存更新策略采用先更新DB再删除缓存的方式Transactional public void updateProduct(ProductUpdateDTO dto) { // 1. 更新数据库 productMapper.update(dto); // 2. 删除缓存 String cacheKey product: dto.getId(); redisTemplate.delete(cacheKey); // 3. 发送MQ消息更新其他缓存 mqProducer.sendProductUpdateMsg(dto.getId()); }4.2 数据库优化针对商品列表查询的慢SQL优化-- 优化前 SELECT * FROM product WHERE status 1 ORDER BY create_time DESC; -- 优化后 SELECT id,name,price,stock FROM product WHERE status 1 AND category_id ? ORDER BY sales_volume DESC LIMIT ?,?;建立复合索引ALTER TABLE product ADD INDEX idx_category_status (category_id, status);5. 部署与监控方案5.1 容器化部署使用Docker Compose编排服务docker-compose.yml关键配置version: 3 services: mysql: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} ports: - 3306:3306 volumes: - ./mysql/data:/var/lib/mysql redis: image: redis:6 ports: - 6379:6379 command: redis-server --requirepass ${REDIS_PASSWORD} backend: build: ./backend ports: - 8080:8080 depends_on: - mysql - redis5.2 监控配置SpringBoot Actuator接入Prometheus监控Configuration public class MetricsConfig { Bean MeterRegistryCustomizerPrometheusMeterRegistry configureMetrics() { return registry - registry.config().commonTags(application, handimai-mall); } }在application.yml中暴露监控端点management: endpoints: web: exposure: include: health,info,prometheus metrics: tags: application: ${spring.application.name}6. 典型问题排查实录6.1 库存超卖问题初期直接使用MySQL更新库存UPDATE product SET stock stock - 1 WHERE id ? AND stock 1优化方案引入Redis分布式锁乐观锁public boolean reduceStock(Long productId, int quantity) { String lockKey product:lock: productId; try { // 获取商品级锁 Boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, 1, 1, TimeUnit.SECONDS); if (Boolean.TRUE.equals(locked)) { // 乐观锁版本号控制 Product product productMapper.selectById(productId); if (product.getStock() quantity) { int rows productMapper.updateStockWithVersion( productId, quantity, product.getVersion()); return rows 0; } } return false; } finally { redisTemplate.delete(lockKey); } }6.2 前端内存泄漏在商品列表页发现切换路由时内存持续增长。通过Chrome Memory工具定位到问题// 错误示例在created钩子中注册全局事件未移除 created() { window.addEventListener(resize, this.handleResize) } // 正确做法在beforeDestroy中移除 beforeDestroy() { window.removeEventListener(resize, this.handleResize) }7. 安全防护措施7.1 接口防刷设计采用Guava RateLimiter实现API限流Aspect Component public class RateLimitAspect { private final MapString, RateLimiter limiterMap new ConcurrentHashMap(); Around(annotation(rateLimit)) public Object around(ProceedingJoinPoint joinPoint, RateLimit rateLimit) throws Throwable { String key getRequestKey(); // 根据IP接口生成key RateLimiter limiter limiterMap.computeIfAbsent(key, k - RateLimiter.create(rateLimit.value())); if (!limiter.tryAcquire()) { throw new BusinessException(请求过于频繁请稍后再试); } return joinPoint.proceed(); } }7.2 SQL注入防护MyBatis严格使用参数化查询禁止拼接SQL!-- 错误示例 -- select idqueryByCondition resultTypeProduct SELECT * FROM product WHERE name LIKE %${name}% /select !-- 正确做法 -- select idqueryByCondition resultTypeProduct SELECT * FROM product WHERE name LIKE CONCAT(%,#{name},%) /select8. 项目演进方向技术架构的持续优化路线服务拆分将订单、商品、用户等服务拆分为独立微服务引入Kafka实现订单创建、支付成功等事件的异步处理灰度发布通过SpringCloud Gateway实现API级别的流量控制全链路压测使用JMeterInfluxDBGrafana搭建压测平台在商品详情页已尝试实现静态化方案通过Vue SSR生成静态HTML配合Nginx缓存使页面加载时间从1.2s降低到400ms左右。具体实现采用vue-server-rendererconst renderer require(vue-server-renderer).createRenderer() const app require(./app) server.get(*, (req, res) { const vm app.createApp() renderer.renderToString(vm, (err, html) { if (err) { res.status(500).end(Internal Server Error) return } res.end( !DOCTYPE html html head.../head body${html}/body /html ) }) })