SpringBoot+Vue小区管理系统开发实战

兔尾巴老李

1. 项目概述

这套前后端分离的小区管理系统是我在参与多个智慧社区项目后总结出的最佳实践方案。传统单体架构的小区管理系统存在维护困难、扩展性差等问题，而采用SpringBoot+Vue的分离架构能有效解决这些痛点。

系统核心功能包括：

住户信息管理（增删改查、批量导入导出）
物业费用管理（费用生成、在线支付、账单查询）
报修工单系统（工单提交、进度跟踪、评价反馈）
公告通知模块（分类发布、阅读统计、紧急通知）

提示：系统采用RBAC权限模型，预设了超级管理员、物业管理员、普通住户三种角色，权限粒度细化到按钮级别。

2. 技术栈选型解析

2.1 后端技术栈

SpringBoot 2.7.x 作为基础框架，主要考虑因素：

自动配置特性大幅减少XML配置
内嵌Tomcat简化部署流程
丰富的Starter依赖（特别是spring-boot-starter-security用于权限控制）

数据库操作采用 MyBatis-Plus 3.5.x 而非原生MyBatis，因为：

内置通用Mapper减少30%以上的重复SQL编写
强大的条件构造器简化复杂查询
代码生成器可一键生成实体类、Mapper和Service

java复制// 典型Service层实现示例
@Service
public class ResidentServiceImpl extends ServiceImpl<ResidentMapper, Resident> 
    implements ResidentService {
    
    @Override
    public Page<ResidentVO> getPage(ResidentQueryDTO dto) {
        return lambdaQuery()
            .like(StringUtils.isNotBlank(dto.getName()), Resident::getName, dto.getName())
            .eq(dto.getBuildingId() != null, Resident::getBuildingId, dto.getBuildingId())
            .page(dto.toPage())
            .convert(this::toVO);
    }
}

2.2 前端技术栈

Vue 3 + TypeScript 组合的优势：

Composition API 使功能模块更内聚
Vite构建速度比Webpack快5-10倍
Element Plus组件库提供丰富的UI组件

前端工程化关键配置：

javascript复制// vite.config.ts 优化配置
export default defineConfig({
  plugins: [vue()],
  build: {
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

2.3 数据库设计

MySQL 8.0版本选择依据：

窗口函数支持复杂统计分析
JSON字段类型便于存储动态扩展属性
比5.7版本性能提升2倍以上

核心表关系设计：

mermaid复制erDiagram
    RESIDENT ||--o{ PROPERTY_FEE : "1:n"
    RESIDENT ||--o{ REPAIR_ORDER : "1:n"
    RESIDENT {
        int resident_id PK
        varchar(50) name
        varchar(20) phone
        varchar(100) address
    }
    PROPERTY_FEE {
        int fee_id PK
        int resident_id FK
        decimal(10,2) amount
        varchar(20) status
    }

3. 核心功能实现

3.1 住户管理模块

批量导入实现要点：

使用EasyExcel处理Excel文件
异步线程池执行导入任务
分布式锁防止重复提交

java复制@PostMapping("/import")
public R<String> importResidents(@RequestParam MultipartFile file) {
    String taskId = UUID.randomUUID().toString();
    redisLock.lock("import:resident", taskId, 30, TimeUnit.MINUTES);
    residentImportService.asyncImport(file, taskId);
    return R.success(taskId);
}

分页查询优化方案：

使用MyBatis-Plus的selectPage方法
添加building_id和unit_no联合索引
前端采用虚拟滚动优化大数据量展示

3.2 物业缴费模块

支付流程设计：

生成缴费单时创建支付宝/微信预支付订单
前端获取支付二维码
支付成功后通过回调更新状态

java复制// 支付状态回调处理
@Transactional
public void handlePaymentNotify(PaymentNotifyDTO dto) {
    PropertyFee fee = getById(dto.getOutTradeNo());
    if (fee.getStatus() == PaymentStatus.PAID) {
        return;
    }
    
    fee.setStatus(PaymentStatus.PAID);
    fee.setPaymentTime(LocalDateTime.now());
    updateById(fee);
    
    // 记录支付日志
    paymentLogService.save(buildLog(fee, dto));
}

3.3 报修工单系统

状态机设计：

java复制public enum RepairStatus {
    PENDING("待处理") {
        public boolean canTransferTo(RepairStatus status) {
            return status == PROCESSING || status == REJECTED;
        }
    },
    PROCESSING("处理中") {
        public boolean canTransferTo(RepairStatus status) {
            return status == COMPLETED || status == CANCELLED;
        }
    },
    // 其他状态...
}

工单分配策略：

根据报修类型自动匹配维修工
考虑维修工当前工单量负载均衡
支持手动调整分配

4. 部署实战指南

4.1 后端部署

生产环境推荐配置：

JDK17 + Docker容器化部署

JVM参数调优：

bash复制-Xms2g -Xmx2g -XX:MaxMetaspaceSize=512m 
-XX:+UseG1GC -XX:MaxGCPauseMillis=200

Nginx配置示例：

nginx复制upstream backend {
  server 127.0.0.1:8080;
  keepalive 32;
}

server {
  location /api/ {
    proxy_pass http://backend;
    proxy_http_version 1.1;
  }
}

4.2 前端部署

性能优化方案：

开启Gzip压缩（节省60%带宽）
配置HTTP/2提升加载速度
使用CDN加速静态资源

bash复制# 生产环境构建命令
npm run build -- --mode production

4.3 数据库部署

高可用方案：

主从复制配置
定期备份策略（每日全备+binlog）
使用Flyway管理数据库变更

sql复制-- 索引优化示例
ALTER TABLE property_fee 
ADD INDEX idx_resident_status (resident_id, payment_status);

5. 踩坑经验总结

5.1 跨域问题解决方案

开发环境配置：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .maxAge(3600);
    }
}

生产环境推荐：

Nginx反向代理统一处理
严格限制allowedOrigins域名
启用CORS预检缓存

5.2 接口安全防护

必备安全措施：

JWT令牌过期时间设置为4小时
敏感接口添加@PreAuthorize注解
使用Spring Security的CSRF防护
关键操作记录审计日志

java复制@PreAuthorize("hasRole('ADMIN') or #dto.residentId == authentication.principal.id")
@PostMapping("/update")
public R<Void> updateResident(@Valid @RequestBody ResidentUpdateDTO dto) {
    // ...
}

5.3 性能优化实践

缓存策略示例：

java复制@Cacheable(value = "resident", key = "#id", unless = "#result == null")
public ResidentVO getResidentById(Long id) {
    return baseMapper.selectResidentWithDetail(id);
}

SQL优化案例：

sql复制-- 优化前（全表扫描）
SELECT * FROM property_fee WHERE YEAR(payment_time) = 2023;

-- 优化后（索引扫描）
SELECT * FROM property_fee 
WHERE payment_time BETWEEN '2023-01-01' AND '2023-12-31 23:59:59';

6. 扩展开发建议

移动端适配：开发微信小程序版本
- 使用Uniapp跨端框架
- 复用现有API接口
- 增加扫码缴费功能
数据大屏：接入ECharts实现
- 缴费率统计分析
- 报修类型热力图
- 住户满意度趋势
智能预警：
- 欠费自动提醒（短信+公众号模板消息）
- 工单超时预警
- 异常登录检测

java复制// 定时任务示例
@Scheduled(cron = "0 0 9 * * ?")
public void sendPaymentReminder() {
    List<Resident> residents = residentMapper.selectUnpaidResidents();
    residents.forEach(resident -> {
        smsService.send(resident.getPhone(), buildReminderContent(resident));
    });
}