Java+Vue全栈开发个人记账系统实战-代码聚汇网

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

VanessaDu·2026-08-22·阅读 22 GEO检测（免费）

JavaVueSpring Boot

|难度：普通|阅读约 15 分钟

1. 项目概述

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

系统采用前后端分离架构，后端使用Spring Boot框架提供RESTful API，前端使用Vue.js构建响应式界面，数据库选用MySQL存储交易数据。整个系统从设计到实现大约花费了3个月时间，目前已经稳定运行半年多，管理着我个人的全部财务流水。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术选型与架构设计

2.1 后端技术栈

选择Java作为后端语言主要基于以下几个考虑：

成熟的生态系统和丰富的开源库支持
强大的类型系统可以在编译期发现大部分错误
与Spring框架完美配合，快速构建稳健的后端服务

具体技术组件：

Spring Boot 2.7：简化配置和部署
Spring Security：处理认证和授权
MyBatis-Plus：简化数据库操作
Lombok：减少样板代码
Hibernate Validator：参数校验

2.2 前端技术栈

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

渐进式框架，学习曲线平缓
响应式数据绑定简化开发
丰富的生态系统（Vue Router、Vuex等）
组件化开发提高代码复用性

主要使用的库和工具：

Vue 3：组合式API
Element Plus：UI组件库
Axios：HTTP客户端
ECharts：数据可视化
Day.js：日期处理

2.3 数据库设计

数据库采用MySQL 8.0，主要表结构设计如下：

用户表(user)
- id, username, password, email, create_time等字段
账户表(account)
- id, user_id, name, type, balance, currency等
交易记录表(transaction)
- id, account_id, category_id, amount, type, date, description等
分类表(category)
- id, user_id, name, type, icon等

关系设计遵循第三范式，同时针对查询性能做了适当优化，比如在transaction表上建立了复合索引(user_id, date)。

3. 核心功能实现

3.1 用户认证模块

采用JWT(JSON Web Token)实现无状态认证，流程如下：

用户登录成功后，后端生成包含用户ID和有效期的JWT
前端将JWT存储在localStorage中
后续请求在Authorization头中携带JWT
后端验证JWT有效性并解析用户信息

关键代码示例（Spring Security配置）：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .addFilter(new JwtAuthorizationFilter(authenticationManager()))
            .sessionManagement()
            .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

3.2 交易记录管理

交易记录是系统的核心功能，支持以下操作：

添加收入/支出记录
按条件筛选记录
批量导入导出
分类统计

后端API设计遵循RESTful规范：

GET /api/transactions - 获取交易列表
POST /api/transactions - 创建新交易
GET /api/transactions/{id} - 获取单条交易
PUT /api/transactions/{id} - 更新交易
DELETE /api/transactions/{id} - 删除交易

前端使用Vue的Composition API组织代码：

javascript复制// 使用setup语法糖
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getTransactions } from '@/api/transaction'

const transactions = ref([])
const loading = ref(false)
const pagination = ref({
  page: 1,
  size: 10,
  total: 0
})

const fetchData = async () => {
  loading.value = true
  try {
    const res = await getTransactions({
      page: pagination.value.page,
      size: pagination.value.size
    })
    transactions.value = res.data.list
    pagination.value.total = res.data.total
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>

3.3 数据统计与分析

系统提供多种数据可视化方式帮助用户理解消费模式：

月度收支趋势图（折线图）
消费分类占比（饼图）
账户余额变化（柱状图）
预算与实际对比（条形图）

使用ECharts实现动态图表，关键配置：

javascript复制const initChart = () => {
  const chart = echarts.init(chartRef.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '消费分类',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: chartData.value
      }
    ]
  }
  chart.setOption(option)
}

4. 开发经验与优化技巧

4.1 性能优化实践

数据库查询优化：
- 合理设计索引，避免全表扫描
- 使用MyBatis-Plus的分页插件处理大数据集
- 复杂统计使用SQL视图或存储过程
前端性能优化：
- 组件懒加载
- 列表虚拟滚动
- 防抖节流处理高频操作
- 按需引入第三方库
API响应优化：
- 启用Gzip压缩
- 使用Spring Cache缓存热点数据
- 合理设计DTO减少不必要字段传输

4.2 常见问题与解决方案

跨域问题：
- 后端配置CORS
- 开发环境使用proxyTable
- 生产环境通过Nginx反向代理
表单验证：
- 前端使用Element Plus表单验证
- 后端使用Hibernate Validator二次验证
- 自定义业务规则验证
数据一致性：
- 事务管理（@Transactional）
- 乐观锁控制并发修改
- 定期数据备份
安全性考虑：
- 密码加密存储（BCrypt）
- XSS防护
- CSRF防护（虽然使用JWT可以部分缓解）
- 接口权限控制

5. 部署与维护

5.1 开发环境搭建

后端环境：
- JDK 11+
- Maven 3.6+
- MySQL 8.0
- IDE（IntelliJ IDEA或Eclipse）
前端环境：
- Node.js 14+
- npm或yarn
- VS Code或WebStorm

5.2 生产环境部署

推荐使用Docker容器化部署，docker-compose.yml示例：

yaml复制version: '3'

services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: account
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - "3306:3306"

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/account
      SPRING_DATASOURCE_USERNAME: root
      SPRING_DATASOURCE_PASSWORD: root

  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

volumes:
  mysql_data:

5.3 系统监控与维护

日志管理：
- 使用Logback记录详细日志
- ELK栈收集分析日志
- 异常告警通知
性能监控：
- Spring Boot Actuator
- Prometheus + Grafana
备份策略：
- 数据库定期全量备份
- 二进制日志增量备份
- 异地备份容灾

6. 扩展与未来计划

当前系统已经满足基本记账需求，但还有不少可以改进的地方：

多平台支持：
- 开发移动端APP（React Native或Flutter）
- 微信小程序版本
- 桌面客户端（Electron）
智能功能：
- 消费习惯分析
- 自动分类建议
- 预算预警
社交功能：
- 家庭共享账本
- 消费排行榜（匿名）
- 理财建议交流
技术升级：
- 尝试GraalVM原生镜像
- 前端迁移到Vue 3的script setup语法
- 探索Serverless架构

这个项目给我最大的收获不是技术上的，而是养成了记账和理财的好习惯。通过开发自己的记账系统，我不仅提升了全栈开发能力，更重要的是建立了健康的财务观念。