SpringBoot+Vue个人记账系统开发全流程指南

1. 项目概述

作为一名有多年Java全栈开发经验的工程师，最近在指导几位大学生完成毕业设计项目时，发现基于SpringBoot的个人记账系统是个非常实用的选题。这类系统不仅技术栈主流，而且能让学生掌握完整的Web开发流程。下面我将分享一个完整的实现方案，包含技术选型、架构设计和核心功能实现。

个人记账系统主要解决日常收支记录的数字化管理问题。相比传统的手工记账，它能自动生成统计报表，提供多维度数据分析，帮助用户更好地掌握财务状况。这个项目适合作为计算机相关专业的毕业设计，涵盖了前后端开发、数据库设计、系统测试等完整环节。

2. 技术架构设计

2.1 整体架构方案

系统采用前后端分离架构，这是当前主流的Web开发模式。后端基于SpringBoot框架，前端使用Vue.js，数据库选用MySQL。这种组合既保证了系统的稳定性，又具有良好的扩展性。

前后端分离的优势在于：

• 开发解耦：前后端可以并行开发
• 性能优化：前端负责渲染，减轻服务器压力
• 技术灵活：前后端可以独立选择最适合的技术栈

2.2 后端技术栈

2.2.1 SpringBoot框架

SpringBoot是目前Java领域最流行的后端框架，我们选择它的原因：

1. 自动配置：简化了传统Spring繁琐的XML配置
2. 内嵌容器：可以直接打包成可执行JAR，部署方便
3. 丰富的starter：快速集成各种常用组件
4. 完善的生态：有大量现成的解决方案和社区支持

核心依赖：

xml复制<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

2.2.2 MyBatis-Plus

相比原生MyBatis，MyBatis-Plus提供了更多便捷功能：

• 通用Mapper：减少重复CRUD代码
• 分页插件：简化分页查询实现
• 代码生成器：自动生成基础代码
• Lambda表达式：类型安全的查询条件构造

配置示例：

java复制@Configuration
@MapperScan("com.example.mapper")
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return interceptor;
    }
}

2.3 前端技术栈

2.3.1 Vue.js框架

Vue.js作为渐进式前端框架，具有以下优势：

• 响应式数据绑定：自动更新视图
• 组件化开发：提高代码复用性
• 轻量高效：体积小，性能优秀
• 学习曲线平缓：文档完善，上手容易

典型组件示例：

vue复制<template>
  <div class="record-form">
    <el-form :model="form" label-width="80px">
      <el-form-item label="类型">
        <el-select v-model="form.type">
          <el-option label="收入" value="income"></el-option>
          <el-option label="支出" value="expense"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

2.3.2 Element UI

我们选用Element UI作为UI组件库，因为它：

• 组件丰富：满足各种界面需求
• 设计规范：遵循统一的设计语言
• 文档完善：示例丰富，易于查阅
• 社区活跃：问题解决速度快

3. 数据库设计

3.1 核心表结构

3.1.1 用户表(user)

sql复制CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(100) NOT NULL COMMENT '密码',
  `email` varchar(100) DEFAULT NULL COMMENT '邮箱',
  `phone` varchar(20) DEFAULT NULL COMMENT '手机号',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像URL',
  `status` tinyint DEFAULT '1' COMMENT '状态：0-禁用，1-正常',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

3.1.2 记账记录表(account_record)

sql复制CREATE TABLE `account_record` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL COMMENT '用户ID',
  `type` tinyint NOT NULL COMMENT '类型：1-收入，2-支出',
  `category_id` bigint NOT NULL COMMENT '分类ID',
  `amount` decimal(10,2) NOT NULL COMMENT '金额',
  `record_date` date NOT NULL COMMENT '记录日期',
  `remark` varchar(255) DEFAULT NULL COMMENT '备注',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`),
  KEY `idx_record_date` (`record_date`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='记账记录表';

3.1.3 分类表(category)

sql复制CREATE TABLE `category` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint DEFAULT NULL COMMENT '用户ID，NULL表示系统默认',
  `name` varchar(50) NOT NULL COMMENT '分类名称',
  `type` tinyint NOT NULL COMMENT '类型：1-收入，2-支出',
  `icon` varchar(100) DEFAULT NULL COMMENT '图标',
  `sort` int DEFAULT '0' COMMENT '排序',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='分类表';

3.2 索引优化建议

1. 用户表的username字段需要唯一索引，防止重复注册
2. 记账记录表的user_id和record_date建立联合索引，优化查询性能
3. 分类表的user_id和type字段建立联合索引，提高分类查询效率

4. 核心功能实现

4.1 用户认证模块

4.1.1 密码安全处理

采用BCrypt加密算法存储密码，相比MD5/SHA更安全：

java复制@Service
public class UserServiceImpl implements UserService {
    
    @Autowired
    private PasswordEncoder passwordEncoder;
    
    @Override
    public void register(UserRegisterDTO dto) {
        User user = new User();
        user.setUsername(dto.getUsername());
        // 密码加密存储
        user.setPassword(passwordEncoder.encode(dto.getPassword()));
        userMapper.insert(user);
    }
    
    @Override
    public boolean checkPassword(String rawPassword, String encodedPassword) {
        return passwordEncoder.matches(rawPassword, encodedPassword);
    }
}

4.1.2 JWT认证方案

使用JJWT库实现无状态认证：

java复制public class JwtTokenProvider {
    private String secretKey = "your-secret-key";
    private long validityInMilliseconds = 3600000; // 1h
    
    public String createToken(String username, List<String> roles) {
        Claims claims = Jwts.claims().setSubject(username);
        claims.put("roles", roles);
        
        Date now = new Date();
        Date validity = new Date(now.getTime() + validityInMilliseconds);
        
        return Jwts.builder()
            .setClaims(claims)
            .setIssuedAt(now)
            .setExpiration(validity)
            .signWith(SignatureAlgorithm.HS256, secretKey)
            .compact();
    }
    
    public Authentication getAuthentication(String token) {
        String username = getUsername(token);
        List<SimpleGrantedAuthority> authorities = getRoles(token).stream()
            .map(SimpleGrantedAuthority::new)
            .collect(Collectors.toList());
        
        return new UsernamePasswordAuthenticationToken(username, "", authorities);
    }
    
    // 其他辅助方法...
}

4.2 记账功能实现

4.2.1 记录添加接口

java复制@RestController
@RequestMapping("/api/records")
public class RecordController {
    
    @Autowired
    private RecordService recordService;
    
    @PostMapping
    public Result addRecord(@RequestBody RecordDTO dto, 
                          @RequestHeader("Authorization") String token) {
        String username = jwtTokenProvider.getUsername(token.substring(7));
        recordService.addRecord(username, dto);
        return Result.success();
    }
}

@Service
public class RecordServiceImpl implements RecordService {
    
    @Override
    public void addRecord(String username, RecordDTO dto) {
        User user = userRepository.findByUsername(username)
            .orElseThrow(() -> new BusinessException("用户不存在"));
        
        AccountRecord record = new AccountRecord();
        record.setUserId(user.getId());
        record.setType(dto.getType());
        record.setCategoryId(dto.getCategoryId());
        record.setAmount(dto.getAmount());
        record.setRecordDate(dto.getRecordDate());
        record.setRemark(dto.getRemark());
        
        recordRepository.save(record);
    }
}

4.2.2 数据统计功能

java复制public interface RecordStatisticsService {
    
    /**
     * 按时间段统计收支
     */
    StatisticsVO statisticsByPeriod(Long userId, LocalDate startDate, LocalDate endDate);
    
    /**
     * 按分类统计支出
     */
    List<CategoryStatisticsVO> statisticsByCategory(Long userId, LocalDate startDate, LocalDate endDate);
}

@Service
public class RecordStatisticsServiceImpl implements RecordStatisticsService {
    
    @Override
    public StatisticsVO statisticsByPeriod(Long userId, LocalDate startDate, LocalDate endDate) {
        // 查询收入总额
        BigDecimal incomeTotal = recordRepository.sumAmountByTypeAndPeriod(
            userId, RecordType.INCOME.getValue(), startDate, endDate);
        
        // 查询支出总额
        BigDecimal expenseTotal = recordRepository.sumAmountByTypeAndPeriod(
            userId, RecordType.EXPENSE.getValue(), startDate, endDate);
        
        // 计算结余
        BigDecimal balance = incomeTotal.subtract(expenseTotal);
        
        return new StatisticsVO(incomeTotal, expenseTotal, balance);
    }
}

5. 系统测试与部署

5.1 测试策略

采用分层测试策略：

1. 单元测试：使用JUnit+Mockito测试Service层
2. 集成测试：测试Controller与数据库交互
3. 接口测试：使用Postman测试完整API流程
4. 前端测试：使用Jest进行组件测试

5.2 性能优化建议

1. 缓存热门数据：使用Redis缓存统计结果
2. 数据库读写分离：查询走从库，写入走主库
3. 前端懒加载：账单列表分页加载
4. CDN加速：静态资源使用CDN分发

5.3 部署方案

推荐使用Docker容器化部署：

dockerfile复制# Dockerfile示例
FROM openjdk:8-jdk-alpine
VOLUME /tmp
COPY target/account-system-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

使用docker-compose编排服务：

yaml复制version: '3'
services:
  app:
    build: .
    ports:
      - "8080:8080"
    depends_on:
      - mysql
    environment:
      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/account_db
      - SPRING_DATASOURCE_USERNAME=root
      - SPRING_DATASOURCE_PASSWORD=123456
  
  mysql:
    image: mysql:5.7
    environment:
      - MYSQL_ROOT_PASSWORD=123456
      - MYSQL_DATABASE=account_db
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql

volumes:
  mysql_data:

6. 项目扩展方向

1. 多端同步：开发移动端APP，实现数据实时同步
2. 预算管理：添加月度预算设置和超支提醒功能
3. 数据导出：支持导出Excel/PDF格式的账单
4. 第三方登录：集成微信、支付宝等快捷登录
5. 智能分析：基于机器学习分析消费习惯

这个记账系统项目涵盖了从需求分析到部署上线的完整流程，技术栈主流且实用，非常适合作为计算机相关专业的毕业设计选题。在实际开发过程中，建议先完成核心功能，再逐步扩展附加功能，确保项目按时完成。