SpringBoot+Vue构建社区疫情购物系统全解析-代码聚汇网

SpringBoot+Vue构建社区疫情购物系统全解析

propsX

1. 项目概述与背景

在特殊时期，社区物资供应系统面临着前所未有的挑战。传统线下采购模式容易造成人员聚集，增加交叉感染风险。这个基于SpringBoot+Vue的小区疫情购物系统，正是为解决这一痛点而设计的全栈解决方案。

我去年参与过三个类似社区系统的开发，发现这类系统最核心的价值在于实现"无接触式"物资流转。系统通过线上订单、智能分单、轨迹追踪等功能模块，将居民、商户、社区管理者三方需求无缝衔接。相比市面上通用的电商系统，我们特别强化了以下特性：

健康状态与购物权限联动（绿码用户才可下单）
应急物资库存动态预警机制
配送人员健康打卡集成
敏感信息加密存储方案

2. 技术架构解析

2.1 后端技术选型

SpringBoot 2.7.x作为核心框架，这是经过多个生产环境验证的稳定版本。我在技术选型时主要考虑：

自动配置：减少XML配置，快速搭建RESTful API
内嵌Tomcat：默认使用Tomcat 9.0，支持200+并发（实测数据）
Starter依赖：引入spring-boot-starter-data-redis等组件

数据库选用MySQL 8.0，具体配置参数：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/community_db?useSSL=false&serverTimezone=UTC
    username: root
    password: 加密密码
    hikari:
      maximum-pool-size: 20 # 连接池大小根据服务器配置调整

2.2 前端技术方案

Vue 3.x + Element Plus的组合，在多个项目中验证过其稳定性。特别值得分享的优化点：

采用Pinia替代Vuex进行状态管理
使用axios拦截器统一处理JWT令牌
响应式布局适配移动端：

css复制@media (max-width: 768px) {
  .goods-card {
    width: 100% !important;
  }
}

3. 核心功能实现

3.1 多角色权限控制

系统包含三类角色：

居民：浏览商品、下单、查看配送
商户：商品管理、订单处理
管理员：用户管理、数据统计

权限控制采用RBAC模型，数据库设计：

sql复制CREATE TABLE `sys_role` (
  `role_id` int NOT NULL AUTO_INCREMENT,
  `role_name` varchar(20) COLLATE utf8mb4_bin NOT NULL,
  `role_key` varchar(20) COLLATE utf8mb4_bin NOT NULL,
  PRIMARY KEY (`role_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

3.2 订单业务流程

下单流程关键代码：

java复制@PostMapping("/order/create")
public Result createOrder(@RequestBody OrderDTO dto) {
    // 1. 校验用户健康状态
    if(!userService.checkHealthStatus(dto.getUserId())){
        return Result.error("健康状态异常，无法下单");
    }
    // 2. 库存预扣减
    stockService.reduceStock(dto.getGoodsList());
    // 3. 生成订单（雪花算法）
    long orderId = snowFlake.nextId();
    // ...后续处理
}

支付成功后的处理逻辑：

异步通知商户系统
更新Redis中的订单状态
触发配送任务

4. 数据库设计优化

4.1 核心表结构

用户表增加垂直分表设计：

sql复制-- 基础信息表
CREATE TABLE `user_base` (
  `user_id` bigint NOT NULL COMMENT '雪花ID',
  `username` varchar(50) NOT NULL COMMENT '加密存储',
  `phone` varchar(15) NOT NULL COMMENT 'AES加密',
  PRIMARY KEY (`user_id`)
);

-- 健康信息表（高频查询）
CREATE TABLE `user_health` (
  `user_id` bigint NOT NULL,
  `health_code` tinyint NOT NULL DEFAULT '0',
  `last_check_time` datetime NOT NULL,
  PRIMARY KEY (`user_id`)
);

4.2 索引优化方案

针对订单查询场景：

sql复制ALTER TABLE `order_info` 
ADD INDEX `idx_user_status` (`user_id`, `order_status`) USING BTREE,
ADD INDEX `idx_create_time` (`create_time`) USING BTREE;

5. 安全防护措施

5.1 敏感数据加密

采用国密SM4算法加密关键字段：

java复制// 手机号加密示例
public String encryptPhone(String phone) {
    SM4Util sm4 = new SM4Util();
    return sm4.encryptData_ECB(phone, SECRET_KEY);
}

5.2 接口防刷策略

使用Guava RateLimiter做限流：

java复制@Aspect
@Component
public class RateLimitAspect {
    private final RateLimiter limiter = RateLimiter.create(100); // 每秒100次
    
    @Before("@annotation(rateLimit)")
    public void before(JoinPoint jp) {
        if(!limiter.tryAcquire()) {
            throw new BusinessException("访问过于频繁");
        }
    }
}

关键操作增加验证码校验

6. 部署与运维

6.1 服务器配置建议

最低生产环境配置：

2核4G云服务器（阿里云ECS共享型s6）
CentOS 7.9系统
JDK17 + MySQL8.0 + Redis6.2

6.2 启动参数优化

application-prod.yml关键配置：

yaml复制server:
  tomcat:
    max-threads: 200
    min-spare-threads: 10
    
spring:
  redis:
    lettuce:
      pool:
        max-active: 20
        max-wait: 1000ms

7. 开发注意事项

前端跨域问题解决方案：

javascript复制// vue.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

后端事务处理要点：

java复制@Transactional(rollbackFor = Exception.class)
public void createOrder(OrderDTO dto) {
    // 1. 扣减库存
    // 2. 生成订单
    // 3. 记录日志
    // 必须在一个事务内完成
}

缓存一致性问题：

采用Redisson分布式锁
设置合理的缓存过期时间
重要数据采用双写策略

8. 扩展与改进方向

可增加的实用功能：

物资团购模块
志愿者配送系统
疫情地图可视化

性能优化建议：

引入Elasticsearch实现商品搜索
采用WebSocket实现订单状态实时推送
使用Quartz做定时任务统一管理

这个项目我在实际部署时遇到过Nginx配置问题，最终发现是上传大小限制导致的。建议在nginx.conf中添加：

nginx复制client_max_body_size 20M;

对于想深入学习的同学，可以重点研究：

SpringBoot自动配置原理
Vue3组合式API实践
分布式ID生成方案对比
微服务拆分策略