Vue+Spring Boot小区水电费系统开发实战

1. 项目概述

这个基于Vue的小区水电费收费系统是一个面向物业管理的全栈解决方案，我花了三个月时间从零开发完成。系统采用前后端分离架构，前端使用Vue.js框架，后端采用Spring Boot，数据库选用MySQL，实现了从费用计算、账单生成到在线支付的全流程数字化管理。

在实际开发中，我发现传统物业收费存在几个痛点：手工计算易出错、催缴效率低、数据统计困难。这个系统正是针对这些问题设计的，目前已在两个小区试运行，物业人员反馈工作效率提升了60%以上，业主投诉率下降了45%。

2. 系统架构设计

2.1 技术选型考量

前端选择Vue.js主要基于三点考虑：

1. 组件化开发适合这种多表单交互的系统
2. 丰富的UI库（使用Element UI）能快速构建管理后台
3. 渐进式框架特性便于后期功能扩展

后端采用Spring Boot是因为：

• 内置Tomcat简化部署
• 完善的生态支持（Spring Security做权限控制）
• 与MyBatis配合实现高效数据访问

数据库选MySQL 8.0看重其：
✓ 事务处理能力（重要财务数据必须ACID）
✓ JSON字段支持（存储动态扩展的收费标准）
✓ 良好的社区支持

2.2 核心功能模块

系统包含5个主要模块：

1. 用户管理：业主/物业人员分级权限
2. 仪表盘：关键数据可视化展示
3. 费用管理：水电用量录入与计算
4. 账单系统：生成/发送/催缴一体化
5. 支付对接：微信支付+支付宝双通道

特别说明费用计算模块的设计：

javascript复制// 阶梯电价计算示例
function calculateElectricCost(usage) {
  const tier1 = Math.min(usage, 200) * 0.5
  const tier2 = Math.max(0, Math.min(usage-200, 300)) * 0.7
  const tier3 = Math.max(0, usage-500) * 0.9
  return tier1 + tier2 + tier3
}

3. 开发环境配置

3.1 前端环境搭建

需要安装：

• Node.js 16.x（LTS版本更稳定）
• Vue CLI 4.5（脚手架工具）
• 推荐VS Code插件：
  • Vetur（Vue语法支持）
  • ESLint（代码规范检查）
  • Prettier（自动格式化）

配置要点：

bash复制# 项目初始化
vue create wfhj4-system --preset default

# 添加Element UI
vue add element-plus

# 开发模式启动
npm run serve

3.2 后端环境准备

JDK建议11版本（兼容性好），Maven用3.6.x。关键pom依赖：

xml复制<dependency>
  <groupId>org.mybatis.spring.boot</groupId>
  <artifactId>mybatis-spring-boot-starter</artifactId>
  <version>2.2.0</version>
</dependency>
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.78</version>
</dependency>

数据库配置示例：

properties复制spring.datasource.url=jdbc:mysql://localhost:3306/property_fee?useSSL=false
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

4. 核心功能实现

4.1 费用计算引擎

采用策略模式实现不同计费规则：

java复制public interface FeeStrategy {
    BigDecimal calculate(BigDecimal usage);
}

// 实现类示例：阶梯水费
public class TieredWaterFee implements FeeStrategy {
    @Override
    public BigDecimal calculate(BigDecimal usage) {
        // 具体计算逻辑
    }
}

数据库表设计关键字段：

4.2 账单生成流程

1. 每月1日定时任务触发
2. 查询所有业主上月用量
3. 调用对应策略计算费用
4. 生成PDF账单（使用iText库）
5. 短信/微信推送通知

定时任务配置：

java复制@Scheduled(cron = "0 0 0 1 * ?")
public void generateMonthlyBills() {
    // 账单生成逻辑
}

5. 系统部署方案

5.1 生产环境要求

推荐配置：

• 服务器：2核4G（50户以下）/4核8G（200户以下）
• 带宽：5Mbps起步
• 操作系统：CentOS 7.6+

必备软件：

• Nginx 1.18+（前端部署+反向代理）
• JDK 11（后端运行）
• MySQL 8.0（建议主从配置）

5.2 部署步骤

前端部署：

bash复制npm run build
# 生成的dist目录上传至Nginx

Nginx配置关键点：

code复制server {
    listen       80;
    server_name  yourdomain.com;
    
    location / {
        root   /var/www/wfhj4/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8080;
    }
}

后端打包与启动：

bash复制mvn clean package
java -jar target/wfhj4-backend.jar --spring.profiles.active=prod

6. 开发中的典型问题

6.1 微信支付回调处理

常见坑点：

1. 必须验证签名（防止伪造请求）
2. 处理幂等性（同一订单可能多次回调）
3. 网络超时重试机制

解决方案代码片段：

java复制@PostMapping("/wxpay/callback")
public String wxpayCallback(@RequestBody String xmlData) {
    // 1. 验证签名
    if(!WxPayUtil.isSignatureValid(xmlData, apiKey)) {
        return "<xml><return_code>FAIL</return_code></xml>";
    }
    
    // 2. 处理业务逻辑
    String orderNo = parseOrderNo(xmlData);
    if(!orderService.isOrderPaid(orderNo)) {
        orderService.processPayment(orderNo);
    }
    
    return "<xml><return_code>SUCCESS</return_code></xml>";
}

6.2 大数据量导出优化

当需要导出年度报表时：

1. 原始方案：一次性查询→内存溢出
2. 优化方案：分页查询+流式写入

改进后代码：

java复制try (Workbook workbook = new SXSSFWorkbook(100)) {
    Sheet sheet = workbook.createSheet("年度报表");
    int page = 0;
    while (true) {
        List<Record> records = dao.fetchByPage(page, 100);
        if (records.isEmpty()) break;
        
        // 写入当前页数据
        writeToSheet(sheet, records);
        page++;
    }
}

7. 系统界面设计要点

7.1 业主端关键页面

1. 登录页：手机号+验证码登录
2. 首页：当月用量环形图+待缴账单
3. 缴费页：支持部分支付（重要！）
4. 历史记录：带筛选条件的数据表格

UI设计技巧：

• 使用Element UI的Card组件划分功能区
• 金额显示用区分状态（已缴/未缴）
• 表格加入斑马纹提升可读性

7.2 物业后台设计

特别注意：

1. 权限控制（RBAC模型）
2. 批量操作支持（excel导入）
3. 操作日志审计

权限注解示例：

java复制@PreAuthorize("hasRole('ADMIN') or hasRole('OPERATOR')")
@PostMapping("/fee/adjust")
public Result adjustFee(@RequestBody AdjustRequest request) {
    // 调账逻辑
}

8. 配套文档说明

论文文档包含：

1. 需求分析（20页）
2. 系统设计（30页）
3. 测试报告（15页）
4. 用户手册（40页）

特别有价值的章节：

• 第三章 系统安全性设计
• 第四章 性能测试方案
• 附录C 数据库ER图

文档获取方式：
系统部署完成后，在管理后台"文档中心"可下载PDF版本，包含详细的API接口说明和二次开发指南。