SpringBoot+Vue自研记账系统开发实践

1. 项目概述为什么我们需要一个自研记账系统记账这件事每个成年人都躲不过。从学生时代用纸质账本涂涂画画到后来用各种记账APP我始终没找到完全符合自己需求的方式。要么功能太复杂要么数据隐私存疑要么无法自定义分类。直到去年用SpringBootVue亲手搭建了自己的记账系统才算真正解决了这个痛点。这个系统的核心价值在于用技术手段实现财务数据的自主掌控。相比市面上的现成产品自研系统可以自由定制收支分类、报表维度、数据可视化方式所有数据完全私有化存储。对于月流水5万以内的个人或家庭用户这套方案既能满足基础记账需求又具备良好的扩展性——后期可以轻松加入多账户管理、预算预警、投资收益计算等进阶功能。2. 技术选型与架构设计2.1 为什么选择SpringBootVue组合后端采用SpringBoot不是偶然。经过对比Node.js和Python Flask等方案SpringBoot在事务管理、数据校验、安全防护等方面有更成熟的生态。特别是处理金额计算时BigDecimal的精确运算能避免浮点数陷阱。我的生产配置如下Configuration EnableTransactionManagement public class DataSourceConfig { Bean public PlatformTransactionManager transactionManager(DataSource dataSource) { return new DataSourceTransactionManager(dataSource); } }前端选择Vue3Element Plus则看重其响应式特性和丰富的UI组件。记账系统需要频繁的表单操作和数据展示Vue的单文件组件开发模式让收支记录的CRUD操作变得异常简单。实测中从输入到保存完成的平均响应时间控制在300ms内。2.2 数据库设计中的几个关键决策MySQL表结构设计时我特别关注了三个问题金额字段必须用DECIMAL(12,2)而非FLOAT收支类型采用字典表外键约束而非硬编码建立create_time和update_time的联合索引核心表关系如下CREATE TABLE t_transaction ( id bigint NOT NULL AUTO_INCREMENT, amount decimal(12,2) NOT NULL COMMENT 正值收入负值支出, type_id int NOT NULL COMMENT 关联字典表, remark varchar(200) DEFAULT NULL, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_time (create_time,update_time) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;重要提示务必给金额字段添加CHECK约束amount ! 0我曾在测试阶段因为零值记录导致统计报表出错。3. 核心功能实现细节3.1 收支记录的原子化操作记账最怕什么数据丢失。我在后端特别设计了双重保障机制事务注解确保数据库操作原子性本地日志文件实时备份关键代码示例Transactional(rollbackFor Exception.class) public Result addRecord(TransactionDTO dto) { // 参数校验略 Transaction entity new Transaction(); BeanUtils.copyProperties(dto, entity); if(transactionMapper.insert(entity) 0){ log.error(记录插入失败{}, dto); throw new BusinessException(记账失败); } logBackup.writeToFile(entity); // 异步写入备份文件 return Result.success(entity.getId()); }3.2 动态统计报表的优化技巧按月统计收支情况时我放弃了常规的SQL GROUP BY方案改用预计算缓存策略每日凌晨跑定时任务预生成统计结果使用Redis缓存近30天的热数据前端采用ECharts实现动态钻取性能对比查询方式1万条记录耗时10万条记录耗时实时统计1200ms超时预计算80ms90ms4. 那些只有踩过坑才知道的事4.1 时区问题的终极解决方案部署到云服务器后发现记录的日期总是差8小时。最终通过全套时区配置解决Docker容器启动时添加-e TZAsia/ShanghaiMySQL连接串加上serverTimezoneAsia/ShanghaiSpringBoot配置spring.jackson.time-zoneGMT84.2 移动端适配的隐藏成本为了让Vue页面在手机上有更好体验我不得不重写Element Plus的CSS响应式断点为金额输入框添加虚拟键盘适配优化下拉加载的性能节流骨架屏实测中最影响体验的是iOS的WebKit渲染bug需要额外添加input[typenumber] { -webkit-appearance: none; margin: 0; }5. 如何从1.0升级到2.0经过半年使用我正着手这些改进接入微信/支付宝账单自动导入需处理PDF解析增加多账本支持动态数据源切换实现收支趋势预测ARIMA算法数据库升级脚本特别要注意-- 错误的做法 ALTER TABLE t_transaction ADD COLUMN book_id INT AFTER id; -- 正确的做法 BEGIN; ALTER TABLE t_transaction ADD COLUMN book_id INT DEFAULT 1 NOT NULL AFTER id; CREATE INDEX idx_book ON t_transaction(book_id); COMMIT;这套系统目前稳定运行在我的树莓派上日均处理50条收支记录。最大的收获不是技术本身而是真正养成了记账习惯——当你亲手搭建的系统每天记录着自己的消费轨迹那种感觉就像在编写人生的源代码。