SpringBoot+微信小程序全栈财务系统开发实战

发布时间：2026/10/28 2:23:35
SpringBoot+微信小程序全栈财务系统开发实战

1. 项目概述：一个面向毕业设计的全栈财务小程序

"财来财往"这个微信小程序项目，本质上是一个面向计算机相关专业毕业设计的全栈开发解决方案。它采用了目前企业级开发中最主流的SpringBoot后端+微信小程序前端技术栈，完整覆盖了从数据库设计到前端交互的全流程。我见过太多毕业设计项目要么功能单薄得像玩具，要么文档潦草得让人无从下手，而这个项目提供的"程序+文档+代码讲解+定制服务"四件套，恰好击中了毕设开发中最痛的几个点。

从技术架构来看，项目采用SpringBoot作为后端框架绝非偶然。作为当前Java领域最流行的轻量级框架，SpringBoot的自动配置特性让大学生可以避开繁琐的XML配置，快速搭建起具备完整RESTful API的后端服务。而微信小程序作为前端载体，则解决了跨平台适配和原生体验的难题——要知道在毕业答辩现场，能直接在手机上演示的成果永远比网页版更有说服力。

2. 核心功能模块拆解

2.1 财务记账核心功能实现

记账功能作为核心模块，其数据库设计直接决定了整个系统的扩展性。项目采用了经典的三层架构：

// 实体层示例 @Entity public class Transaction { @Id @GeneratedValue private Long id; private BigDecimal amount; private LocalDateTime createTime; @Enumerated(EnumType.STRING) private TransactionType type; // 关联用户实体 @ManyToOne private User user; }

这里特别要注意的是金额字段使用BigDecimal而非double，这是金融类应用必须遵守的铁律——任何使用基本数据类型处理金额的行为都会导致精度丢失的灾难性后果。我在第一次实现时就踩过这个坑，最终对账时发现差了几毛钱，调试了整整两天。

2.2 数据可视化展示

微信小程序端的图表渲染采用了F2图表库，这是支付宝团队开源的移动端可视化方案。与PC端常见的ECharts不同，F2专门针对小程序环境做了极致优化：

// 小程序端月消费趋势图实现 const F2 = require('../../libs/f2-canvas/lib/f2'); Page({ onReady() { this.chart = new F2.Chart({ el: 'canvas', width: 300, height: 200 }); this.chart.source(data); this.chart.interval().position('month*amount'); this.chart.render(); } })

重要提示：小程序canvas组件层级问题是个经典坑。当页面有弹出层时，canvas会始终显示在最上层。解决方案是使用cover-view组件或者临时隐藏canvas。

2.3 用户权限系统设计

采用RBAC（基于角色的访问控制）模型实现多级权限管理：

CREATE TABLE `sys_role` ( `id` int NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL COMMENT '管理员/普通用户', PRIMARY KEY (`id`) ) ENGINE=InnoDB; CREATE TABLE `sys_user_role` ( `user_id` int NOT NULL, `role_id` int NOT NULL, PRIMARY KEY (`user_id`,`role_id`) ) ENGINE=InnoDB;

在Spring Security配置中，我特别添加了防止CSRF攻击的配置。很多毕业项目会忽略这一点，但作为财务应用，安全防护绝对不能马虎：

@Override protected void configure(HttpSecurity http) throws Exception { http.csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()); }

3. 开发环境搭建实战

3.1 后端工程初始化

使用Spring Initializr创建项目时，这几个依赖必不可少：

  • Spring Web MVC（REST接口）
  • Spring Data JPA（数据库操作）
  • Lombok（代码简化）
  • MySQL Driver

我强烈建议在application.yml中配置完整的Druid连接池，而不是用默认的HikariCP。Druid的监控界面对于调试SQL性能异常有用：

spring: datasource: type: com.alibaba.druid.pool.DruidDataSource druid: stat-view-servlet: enabled: true login-username: admin login-password: admin

3.2 微信小程序开发配置

在project.config.json中，这些配置项需要特别注意：

{ "miniprogramRoot": "miniprogram/", "cloudfunctionRoot": "cloudfunctions/", "setting": { "es6": true, "postcss": true, "minified": true, "urlCheck": false // 关闭域名校验方便开发 } }

遇到"不在以下request合法域名列表中"错误时，可以：

  1. 开发阶段：勾选开发者工具"不校验合法域名"
  2. 上线前：务必在微信公众平台配置服务器域名
  3. 调试技巧：使用Charles抓包分析请求（需配置SSL证书）

4. 典型问题排查手册

4.1 微信登录态维护方案

采用双Token方案解决session过期问题：

  1. access_token：短期有效（2小时），放在header中
  2. refresh_token：长期有效（7天），仅用于刷新access_token
// 刷新令牌的典型实现 public String refreshToken(String refreshToken) { if(jwtUtil.validateToken(refreshToken)) { String username = jwtUtil.getUsernameFromToken(refreshToken); return jwtUtil.generateAccessToken(username); } throw new BusinessException(401, "令牌已失效"); }

4.2 事务管理中的坑

在给记账功能添加事务时，我发现@Transactional注解在Controller层不生效。这是因为：

  1. Spring的事务基于AOP实现
  2. 只有public方法且通过代理对象调用时才生效
  3. 自调用（this.method()）会绕过代理

最终解决方案：

@Service public class TransactionService { @Transactional public void createTransaction(TransactionDTO dto) { // 业务逻辑 } }

5. 项目扩展方向建议

5.1 接入微信支付

虽然毕设不要求真实支付，但实现沙箱环境能极大提升项目完整度。关键步骤：

  1. 申请商户号（可使用测试号）
  2. 配置支付域名
  3. 实现统一下单接口：
@PostMapping("/pay") public WxPayResponse createOrder(@RequestBody OrderDTO dto) { WxPayUnifiedOrderRequest request = new WxPayUnifiedOrderRequest(); request.setBody(dto.getDescription()); request.setOutTradeNo(generateTradeNo()); request.setTotalFee(dto.getAmount().multiply(100).intValue()); return wxPayService.createOrder(request); }

金额陷阱：微信支付接口要求金额单位为分，必须将元转分且为整数。这里一定要做边界检查，避免出现0.001元这样的金额。

5.2 多端适配方案

使用uni-app重构小程序前端，可同时输出H5和Android/iOS应用：

// 条件编译示例 // #ifdef MP-WEIXIN wx.login() // #endif // #ifdef H5 h5Login() // #endif

我在实际项目中验证过，uni-app的编译速度比原生开发慢约20%，但节省的跨平台调试时间可能高达50%。这个取舍需要根据项目周期来决定。

6. 毕业设计加分技巧

6.1 文档规范要点

技术文档最容易忽视的三个细节：

  1. 数据库字典要包含字段注释和示例值
  2. API文档需要明确路径、方法、参数、返回值示例
  3. 部署手册必须精确到命令行指令

推荐使用Swagger UI自动生成API文档：

@Configuration @EnableSwagger2 public class SwaggerConfig { @Bean public Docket api() { return new Docket(DocumentationType.SWAGGER_2) .select() .apis(RequestHandlerSelectors.basePackage("com.cailai")) .paths(PathSelectors.any()) .build(); } }

6.2 答辩演示准备

三个必做的压力测试：

  1. 模拟100个并发记账请求（使用JMeter）
  2. 构造异常数据测试系统容错性
  3. 断网恢复测试本地缓存机制

演示时准备两套数据：

  • 正常流程数据（展示主要功能）
  • 异常case数据（展示系统健壮性）

我在实际开发中总结出一个经验：系统对异常输入的处理能力，往往比正常流程更能打动答辩老师。比如故意输入金额为负数，或者日期格式错误，展示系统的校验和提示机制。