1. 项目概述小零食商铺系统是一个典型的B2C电商平台采用前后端分离架构实现。前端使用Vue.js构建用户界面后端基于SpringBoot提供RESTful API服务。这种架构组合在中小型电商系统中非常流行既能保证开发效率又能满足性能需求。我在实际开发中发现零食类电商与传统综合电商相比有几个显著特点商品单价低但SKU多、复购率高、促销活动频繁。这些特性对系统的商品展示、库存管理和订单处理都提出了特殊要求。2. 技术选型与架构设计2.1 后端技术栈SpringBoot 2.7.x作为基础框架主要考虑因素包括内嵌Tomcat简化部署自动配置减少样板代码丰富的starter依赖特别是Spring Data JPA和Spring Security数据库选用MySQL 8.0主要优势事务支持完善适合电商场景JSON类型支持便于存储商品规格等半结构化数据社区资源丰富运维成本低注意商品表设计时建议将库存字段单独拆分避免高频更新导致的锁竞争问题。我在实际项目中就遇到过促销时库存更新成为性能瓶颈的情况。2.2 前端技术栈Vue 3.x Element Plus的组合提供了良好的开发体验Composition API使代码组织更灵活Vite构建工具显著提升开发效率Element Plus的表格和表单组件非常适合后台管理系统采用axios处理HTTP请求配置了统一的请求拦截器实现JWT自动刷新错误统一处理请求取消特别适用于商品搜索场景3. 核心功能实现3.1 商品管理系统商品表关键字段设计CREATE TABLE product ( id bigint NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL COMMENT 商品名称, category_id int NOT NULL COMMENT 分类ID, price decimal(10,2) NOT NULL COMMENT 售价, origin_price decimal(10,2) DEFAULT NULL COMMENT 原价, main_image varchar(255) DEFAULT NULL COMMENT 主图, detail text COMMENT 商品详情, status tinyint DEFAULT 1 COMMENT 状态1-上架 0-下架, created_at datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;商品搜索采用Elasticsearch实现主要优化点对商品名称、分类、规格建立索引使用IK分词器支持中文搜索搜索结果按销量、价格等多维度排序3.2 购物车与订单系统购物车数据结构设计考虑未登录用户使用本地存储已登录用户同步到服务端采用Redis缓存热门商品信息订单状态机设计待支付 - 已支付 - 已发货 - 已完成 \- 已取消重要提示订单表一定要记录价格快照不能直接关联商品表。我遇到过商品调价导致历史订单显示价格错误的问题。3.3 支付系统集成对接支付宝沙箱环境的关键配置Configuration public class AlipayConfig { Value(${alipay.app-id}) private String appId; Value(${alipay.merchant-private-key}) private String privateKey; Bean public AlipayClient alipayClient() { return new DefaultAlipayClient( https://openapi.alipaydev.com/gateway.do, appId, privateKey, json, UTF-8, alipay-public-key, RSA2 ); } }支付回调处理要点验证签名检查订单状态处理幂等性相同通知可能多次触发4. 性能优化实践4.1 缓存策略采用多级缓存架构本地缓存Caffeine高频访问的基础数据Redis缓存商品详情、用户信息等CDN缓存静态资源、商品图片缓存失效策略对比策略优点缺点适用场景定时过期实现简单可能缓存雪崩数据变化不频繁延迟双删一致性较好实现复杂数据强一致性要求主动更新实时性高系统耦合度高关键业务数据4.2 数据库优化针对商品列表查询的优化方案public PageProduct listProducts(int page, int size, Long categoryId) { return productRepository.findAll((root, query, cb) - { ListPredicate predicates new ArrayList(); if (categoryId ! null) { predicates.add(cb.equal(root.get(categoryId), categoryId)); } predicates.add(cb.equal(root.get(status), 1)); return cb.and(predicates.toArray(new Predicate[0])); }, PageRequest.of(page, size, Sort.by(sales).descending())); }建立复合索引ALTER TABLE product ADD INDEX idx_category_status (category_id, status);5. 安全防护措施5.1 常见攻击防护XSS防护方案前端使用vue-sanitize过滤输入后端统一处理响应头Configuration public class WebSecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.headers() .xssProtection() .and() .contentSecurityPolicy(script-src self); } }CSRF防护配置http.csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());5.2 数据安全敏感数据加密处理public class SensitiveDataConverter implements AttributeConverterString, String { private final String key your-encryption-key; Override public String convertToDatabaseColumn(String attribute) { return AES.encrypt(attribute, key); } Override public String convertToEntityAttribute(String dbData) { return AES.decrypt(dbData, key); } }6. 部署与监控6.1 容器化部署Dockerfile示例FROM openjdk:11-jre COPY target/snack-shop.jar /app.jar ENTRYPOINT [java,-jar,/app.jar]docker-compose.yml配置version: 3 services: app: build: . ports: - 8080:8080 depends_on: - mysql - redis mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: snack_shop redis: image: redis:66.2 监控方案SpringBoot Actuator配置management.endpoints.web.exposure.includehealth,info,metrics management.metrics.tags.applicationsnack-shopPrometheus监控指标采集scrape_configs: - job_name: spring metrics_path: /actuator/prometheus static_configs: - targets: [host.docker.internal:8080]7. 项目演进方向在实际运营过程中我总结了几个有价值的扩展方向推荐系统集成基于用户行为的协同过滤热门商品推荐搭配购买推荐营销活动支持限时折扣满减优惠优惠券系统数据分析看板销售趋势分析用户购买偏好库存周转率监控这个项目最让我意外的是Redis缓存命中率对系统性能的影响。通过监控发现当缓存命中率低于85%时数据库负载会明显上升。后来我们通过优化缓存键设计和预热机制将命中率提升到了92%以上QPS提高了近3倍
