SpringBoot+Vue全栈开发个人记账系统实战

1. 项目概述

这个基于SpringBoot+Vue的个人记账系统是我在业余时间开发的一个全栈项目，主要解决个人日常收支管理的痛点。作为一个长期被记账问题困扰的开发者，我发现市面上大部分记账工具要么功能过于复杂，要么无法满足自定义需求。于是决定自己动手开发一个轻量级但功能完备的系统。

系统采用前后端分离架构，后端使用SpringBoot提供RESTful API，前端用Vue构建响应式界面，数据库选用MySQL存储数据。这种技术组合既能保证系统的稳定性和扩展性，又能提供良好的用户体验。经过两个月的开发和测试，目前系统已经实现了基本的记账、分类统计、报表生成等功能。

提示：个人记账系统的核心价值不在于功能有多复杂，而在于能否长期坚持使用。因此我在设计时特别注重操作的便捷性和数据的可视化呈现。

2. 技术架构解析

2.1 后端技术选型

选择SpringBoot作为后端框架主要基于以下几个考虑：

1. 快速开发：SpringBoot的自动配置和起步依赖大大减少了样板代码。比如集成MyBatis-Plus只需要添加一个依赖：

   xml复制<dependency>
       <groupId>com.baomidou</groupId>
       <artifactId>mybatis-plus-boot-starter</artifactId>
       <version>3.5.3.1</version>
   </dependency>
   

2. 内嵌容器：无需额外部署Tomcat，打包成可执行JAR后直接运行，非常适合个人项目部署。

3. 生态丰富：Spring生态有完善的解决方案，比如用Spring Security做认证授权，Spring Cache做数据缓存。

4. 易于测试：提供了完善的测试支持，可以方便地编写单元测试和集成测试。

实际开发中，我采用了以下关键配置：

java复制@SpringBootApplication
@MapperScan("com.ledger.mapper")
public class LedgerApplication {
    public static void main(String[] args) {
        SpringApplication.run(LedgerApplication.class, args);
    }
    
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }
}

2.2 前端技术选型

Vue.js作为前端框架的优势在于：

1. 渐进式框架：可以根据需求逐步引入路由、状态管理等功能，不会一开始就增加复杂度。

2. 组件化开发：将记账表单、统计图表等拆分为独立组件，提高代码复用率。例如账单列表组件：

   vue复制<template>
     <div class="bill-list">
       <el-table :data="bills" style="width: 100%">
         <el-table-column prop="date" label="日期" width="180"></el-table-column>
         <el-table-column prop="category" label="分类" width="180"></el-table-column>
         <el-table-column prop="amount" label="金额"></el-table-column>
       </el-table>
     </div>
   </template>
   

3. 丰富的UI库：使用Element UI快速构建美观的界面，节省样式开发时间。

4. 开发体验好：Vue Devtools调试方便，热重载提升开发效率。

2.3 数据库设计

MySQL数据库设计遵循第三范式，主要表结构如下：

账单表(bill)

sql复制CREATE TABLE `bill` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `user_id` bigint(20) NOT NULL COMMENT '用户ID',
  `type` tinyint(1) NOT NULL COMMENT '1收入 2支出',
  `category_id` bigint(20) NOT NULL COMMENT '分类ID',
  `amount` decimal(10,2) NOT NULL COMMENT '金额',
  `date` date NOT NULL COMMENT '交易日期',
  `remark` varchar(255) DEFAULT NULL COMMENT '备注',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_user_date` (`user_id`,`date`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

分类表(category)

sql复制CREATE TABLE `category` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `user_id` bigint(20) NOT NULL COMMENT '用户ID',
  `name` varchar(50) NOT NULL COMMENT '分类名称',
  `type` tinyint(1) NOT NULL COMMENT '1收入 2支出',
  `icon` varchar(100) DEFAULT NULL COMMENT '图标',
  PRIMARY KEY (`id`),
  KEY `idx_user_type` (`user_id`,`type`)
) ENGINE=InnoDB DEFAULT CHARSET=u