1. 项目背景与核心价值

"财来财往"微信小程序是一个基于SpringBoot后端开发的个人财务管理工具。作为计算机专业的毕业设计选题，它完美融合了当下最热门的移动互联网技术和企业级开发框架，既体现了技术的前沿性，又具备实际应用价值。

我在实际开发中发现，这类个人财务管理系统有几个关键痛点：首先是数据安全性要求高，其次是用户操作需要足够便捷，最后是功能要精简实用。基于这些考量，采用SpringBoot+微信小程序的架构组合具有天然优势——SpringBoot提供了稳健的后端支持，微信小程序则拥有即用即走的轻量化体验。

提示：毕业设计选题建议选择这种"小而美"的实用型项目，既能展示完整的技术栈，又能在有限时间内完成核心功能开发。

2. 技术架构设计解析

2.1 整体技术选型

系统采用经典的三层架构：

• 前端：微信小程序（WXML+WXSS+JS）
• 后端：SpringBoot 2.7 + MyBatis-Plus
• 数据库：MySQL 8.0

选择这套技术栈主要基于三点考虑：

1. 微信小程序生态成熟，开发文档完善，特别适合个人开发者
2. SpringBoot的自动配置特性大大简化了后端开发复杂度
3. MyBatis-Plus的代码生成器可以快速构建基础CRUD功能

2.2 关键组件设计

数据库设计中几个核心表需要特别注意：

• 用户表（user）：存储微信openid和用户基本信息
• 账户表（account）：记录各类支付账户余额
• 交易记录表（transaction）：核心数据表，包含金额、分类、时间等字段
• 预算表（budget）：按月存储各类消费预算

// 典型的交易记录实体类示例 public class Transaction { private Long id; private String openid; // 关联用户 private BigDecimal amount; private Integer type; // 1收入 2支出 private Integer category; private Date createTime; private String remark; // getters & setters }

3. 核心功能实现细节

3.1 微信登录集成

微信小程序登录流程是项目的第一个技术难点。我们需要实现完整的OAuth2.0授权流程：

1. 前端调用wx.login()获取临时code
2. 将code发送到SpringBoot后端
3. 后端通过微信API服务换取openid和session_key
4. 生成自定义登录态返回给小程序

@RestController @RequestMapping("/auth") public class AuthController { @GetMapping("/login") public ResultVO login(String code) { // 构建请求URL String url = "https://api.weixin.qq.com/sns/jscode2session?" + "appid=" + appId + "&secret=" + appSecret + "&js_code=" + code + "&grant_type=authorization_code"; // 发送HTTP请求 String response = restTemplate.getForObject(url, String.class); // 解析响应获取openid JSONObject json = JSON.parseObject(response); String openid = json.getString("openid"); // 生成自定义token并存入Redis String token = JwtUtil.generateToken(openid); redisTemplate.opsForValue().set("token:"+token, openid, 7, TimeUnit.DAYS); return ResultVO.success(token); } }

注意：session_key需要妥善保管但不要传到前端，这是微信开发的安全红线。

3.2 交易记录功能实现

交易记录模块是系统的核心，需要实现：

• 记录收支
• 分类统计
• 时间筛选

前端采用微信小程序的picker组件实现分类选择：

// 前端分类选择器实现 Page({ data: { categories: ['餐饮', '交通', '购物', '娱乐'], currentCategory: '' }, bindCategoryChange(e) { this.setData({ currentCategory: this.data.categories[e.detail.value] }) } })

后端接口设计遵循RESTful规范：

POST /api/transaction - 新增交易记录 GET /api/transaction - 获取交易列表 GET /api/transaction/stat - 获取统计信息 DELETE /api/transaction/{id} - 删除记录

4. 数据可视化实现

4.1 ECharts集成方案

选择微信小程序版的ECharts（ec-canvas）实现数据可视化：

1. 安装ec-canvas组件
2. 准备canvas容器
3. 初始化图表配置

// 饼图配置示例 function initPieChart() { const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [{ name: '消费比例', type: 'pie', radius: ['50%', '70%'], data: [ {value: 1048, name: '餐饮'}, {value: 735, name: '交通'}, {value: 580, name: '购物'}, {value: 484, name: '娱乐'} ] }] }; this.ecComponent.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); chart.setOption(option); return chart; }); }

4.2 后端统计接口

后端需要提供聚合查询接口支持前端可视化：

@GetMapping("/stat") public ResultVO getStatData(@RequestParam String openid, @RequestParam String month) { // 查询当月支出统计 List<Map<String, Object>> categoryStats = transactionMapper.selectCategoryStats( openid, month+"-01", month+"-31" ); // 查询收入支出对比 Map<String, BigDecimal> inOutCompare = transactionMapper.selectInOutCompare( openid, month+"-01", month+"-31" ); Map<String, Object> result = new HashMap<>(); result.put("categoryStats", categoryStats); result.put("inOutCompare", inOutCompare); return ResultVO.success(result); }

5. 项目部署与优化

5.1 小程序发布流程

1. 开发环境配置：

   • 注册微信小程序账号
   • 配置合法域名（API服务器地址）
   • 下载微信开发者工具

2. 代码上传：

   • 通过开发者工具上传代码
   • 提交微信审核（通常需要1-3个工作日）

3. 生产环境准备：

   • 购买SSL证书（必须HTTPS）
   • 配置Nginx反向代理
   • 数据库备份策略设置

5.2 性能优化实践

1. 接口缓存策略：
   • 对统计类接口添加Redis缓存
   • 设置合理的过期时间（如10分钟）

@Cacheable(value = "transaction", key = "#openid+':'+#month") @GetMapping("/stat") public ResultVO getStatData(@RequestParam String openid, @RequestParam String month) { // 查询逻辑 }

2. 数据库优化：

   • 为openid和create_time字段添加联合索引
   • 大表考虑分表策略（按月分表）

3. 小程序端优化：

   • 使用分包加载
   • 图片资源压缩
   • 减少setData调用频率

6. 常见问题与解决方案

6.1 微信登录失败排查

问题现象：获取openid返回40029错误码

排查步骤：

1. 检查appid和secret是否正确
2. 确认code没有重复使用（每个code只能用一次）
3. 检查服务器时间是否准确（误差不能超过5分钟）

6.2 图表渲染异常处理

典型问题：canvas在部分机型上显示空白

解决方案：

1. 检查ec-canvas组件版本是否为最新
2. 确认canvas尺寸设置正确
3. 添加错误回调监听：

this.ecComponent = this.selectComponent('#mychart-dom-line'); this.ecComponent.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); chart.setOption(option); // 添加错误监听 chart.on('error', function(err) { console.error('图表错误:', err); }); return chart; });

6.3 数据库连接池优化

问题表现：高峰期出现数据库连接超时

优化方案：

1. 调整SpringBoot数据源配置：

spring.datasource.hikari.maximum-pool-size=20 spring.datasource.hikari.minimum-idle=5 spring.datasource.hikari.idle-timeout=30000 spring.datasource.hikari.connection-timeout=30000

2. 添加连接健康检查：

spring.datasource.hikari.connection-test-query=SELECT 1 spring.datasource.hikari.health-check-properties.poolName=springHikariCP

7. 毕业设计扩展建议

如果想进一步提升项目竞争力，可以考虑以下几个方向：

1. 多账本功能：支持创建多个独立账本（如个人账本、家庭账本）
2. 账单导入导出：支持Excel导入历史数据，PDF导出报表
3. 数据备份同步：实现微信云开发或WebDAV备份
4. 智能分析：基于历史数据的消费趋势预测
5. 多端同步：开发配套的Web管理端

实现多账本功能的数据库调整示例：

ALTER TABLE transaction ADD COLUMN book_id INT NOT NULL DEFAULT 1; ALTER TABLE account ADD COLUMN book_id INT NOT NULL DEFAULT 1; CREATE INDEX idx_book ON transaction(book_id);

在开发这类毕业设计项目时，我最大的体会是：不要贪图功能的大而全，而是要把核心流程做精做细。一个账目记录功能，从能用到好用，中间需要考虑很多细节体验，比如分类选择的便捷性、输入金额时的键盘适配、数据同步的实时性等。这些细节往往比堆砌功能更能体现开发者的功力。