html+layui+node+js做的个人财务管理系统

个人财务管理系统

一个基于 Layui、JavaScript 和 Node、MySQL 的个人财务管理系统，提供收入支出记录、预算管理、报表生成和数据分析等功能。

功能特性

1. 用户认证

• 用户登录/注册
• 密码加密存储

2. 收入支出记录

• 添加、编辑、删除交易记录
• 按类型、分类、日期筛选
• 支持分页查询
• 收入和支出分类管理

3. 预算管理

• 创建月度/年度预算
• 总预算和分类预算
• 实时预算执行情况监控
• 预算超支提醒

4. 报表生成

• 收支概览统计
• 收支趋势图表
• 分类统计分析（饼图）
• 月度对比分析
• 收入支出明细表

5. 数据分析

• 多维度数据可视化
• 使用 ECharts 展示图表
• 财务健康度分析

6. 分类管理

• 自定义收入/支出分类
• 分类图标和颜色配置
• 默认分类模板

技术栈

前端

• Layui 2.8.18 - UI框架
• ECharts 5.4.3 - 数据可视化
• 原生JavaScript - 业务逻辑

后端

• Node.js - 运行环境
• Express 4.x - Web框架
• MySQL2 - 数据库驱动

数据库

• MySQL - 关系型数据库

项目结构

gerencaiwu/
├── database/                # 数据库文件
│   └── schema.sql          # 数据库结构和初始数据
├── server/                 # 后端服务
│   ├── config/            
│   │   └── database.js    # 数据库连接配置
│   ├── routes/            # 路由模块
│   │   ├── auth.js        # 认证路由
│   │   ├── transactions.js # 交易记录路由
│   │   ├── categories.js  # 分类管理路由
│   │   ├── budgets.js     # 预算管理路由
│   │   └── reports.js     # 报表统计路由
│   ├── config.js          # 服务器配置
│   ├── server.js          # 服务器入口
│   └── package.json       # 依赖配置
└── public/                # 前端文件
    ├── js/
    │   ├── config.js      # API配置
    │   ├── main.js        # 主页面逻辑
    │   ├── transactions.js # 交易记录页面
    │   ├── budgets.js     # 预算管理页面
    │   ├── reports.js     # 报表分析页面
    │   └── categories.js  # 分类管理页面
    ├── index.html         # 登录页面
    ├── register.html      # 注册页面
    └── main.html          # 主应用页面

安装部署

1. 环境要求

• Node.js 14.x 或更高版本
• MySQL 5.7 或 MySQL 8.x（推荐 MySQL 8.x）

注意：如果使用 MySQL 8，请参考 MySQL8配置说明.md 文件进行配置。

2. 数据库配置

方法1：使用命令行导入

mysql -u root -p < database/schema.sql

方法2：登录后导入

# 登录 MySQL
mysql -u root -p

# 执行数据库脚本
source database/schema.sql

MySQL 8 用户注意：

如果遇到认证错误（ER_NOT_SUPPORTED_AUTH_MODE），需要修改用户认证方式：

# 登录 MySQL
mysql -u root -p

# 修改认证方式
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your_password';
FLUSH PRIVILEGES;

详细配置请参考：MySQL8配置说明.md

测试数据库连接：

# 修改 test-mysql8-connection.js 中的密码
# 然后运行测试
node test-mysql8-connection.js

3. 后端配置

# 进入服务器目录
cd server

# 安装依赖
npm install

# 配置数据库连接
# 编辑 server/config.js 文件，修改数据库连接信息：
# - host: 数据库主机地址（默认：localhost）
# - user: 数据库用户名（默认：root）
# - password: 数据库密码（默认：空）
# - database: 数据库名称（默认：personal_finance）
# - port: 数据库端口（默认：3306）

4. 启动服务

# 在 server 目录下
npm start

# 或使用 nodemon 进行开发（需要先安装 nodemon）
npm run dev

服务器默认运行在：http://localhost:3000

5. 访问应用

使用浏览器打开 public/index.html 文件，或者配置一个Web服务器（如Nginx、Apache）指向 public 目录。

默认测试账号：

• 用户名：admin
• 密码：123456

API接口文档

认证接口

登录

• URL : /api/auth/login

• Method : POST

• Body :

  {
    "username": "admin",
    "password": "123456"
  }

注册

• URL : /api/auth/register

• Method : POST

• Body :

  {
    "username": "newuser",
    "password": "password",
    "email": "user@example.com"
  }

交易记录接口

获取交易记录列表

• URL : /api/transactions
• Method : GET
• Query : userId, type, categoryId, startDate, endDate, page, limit

添加交易记录

• URL : /api/transactions

• Method : POST

• Body :

  {
    "userId": 1,
    "categoryId": 1,
    "type": "income",
    "amount": 5000.00,
    "description": "工资",
    "transactionDate": "2025-10-27"
  }

更新交易记录

• URL : /api/transactions/:id
• Method : PUT

删除交易记录

• URL : /api/transactions/:id
• Method : DELETE

预算接口

获取预算列表

• URL : /api/budgets
• Method : GET
• Query : userId, period

获取当前有效预算

• URL : /api/budgets/current
• Method : GET
• Query : userId

添加预算

• URL : /api/budgets
• Method : POST

更新预算

• URL : /api/budgets/:id
• Method : PUT

删除预算

• URL : /api/budgets/:id
• Method : DELETE

报表接口

获取概览统计

• URL : /api/reports/overview
• Method : GET
• Query : userId, startDate, endDate

按分类统计

• URL : /api/reports/category
• Method : GET
• Query : userId, type, startDate, endDate

趋势分析

• URL : /api/reports/trend
• Method : GET
• Query : userId, startDate, endDate, groupBy

月度对比

• URL : /api/reports/monthly-comparison
• Method : GET
• Query : userId, months

分类接口

获取所有分类

• URL : /api/categories
• Method : GET
• Query : userId

按类型获取分类

• URL : /api/categories/type/:type
• Method : GET
• Query : userId

添加分类

• URL : /api/categories
• Method : POST

更新分类

• URL : /api/categories/:id
• Method : PUT

删除分类

• URL : /api/categories/:id
• Method : DELETE

使用说明

1. 登录系统

使用默认账号或注册新账号登录系统。

2. 添加交易记录

点击"收支记录"菜单，点击"添加记录"按钮，填写交易信息。

3. 设置预算

点击"预算管理"菜单，点击"添加预算"按钮，设置月度或年度预算。

4. 查看报表

点击"报表分析"菜单，查看各种统计图表和数据分析。

5. 管理分类

点击"分类管理"菜单，可以自定义收入和支出分类。

数据库设计

users（用户表）

• id: 主键
• username: 用户名（唯一）
• password: 密码（MD5加密）
• email: 邮箱
• created_at: 创建时间
• updated_at: 更新时间

categories（分类表）

• id: 主键
• user_id: 用户ID
• name: 分类名称
• type: 类型（income/expense）
• icon: 图标
• color: 颜色
• created_at: 创建时间

transactions（交易记录表）

• id: 主键
• user_id: 用户ID
• category_id: 分类ID
• type: 类型（income/expense）
• amount: 金额
• description: 描述
• transaction_date: 交易日期
• created_at: 创建时间
• updated_at: 更新时间

budgets（预算表）

• id: 主键
• user_id: 用户ID
• category_id: 分类ID（NULL表示总预算）
• amount: 预算金额
• period: 周期（monthly/yearly）
• start_date: 开始日期
• end_date: 结束日期
• description: 描述
• created_at: 创建时间
• updated_at: 更新时间

注意事项

1. 安全性：密码使用MD5加密，生产环境建议使用更安全的加密方式（如bcrypt）
2. CORS：后端已配置CORS，允许跨域访问
3. 数据备份：建议定期备份MySQL数据库
4. 端口冲突 ：如果3000端口被占用，可在 server/config.js 中修改
5. 前端部署：可使用任何Web服务器托管public目录，或使用Express的静态文件服务

功能扩展建议

1. 添加数据导出功能（Excel、PDF）

2. 添加多用户权限管理

3. 添加数据备份和恢复功能

4. 添加移动端适配

5. 添加消息通知功能

6. 添加多币种支持

7. 添加账户余额管理

8. 添加定期记账提醒

9. 添加财务目标设置

10. 添加更多图表类型