🧭 簡介

EasyACT 是一個專為個人理財設計的記帳網頁應用程式。此專案旨在提供使用者一個直觀、便捷的介面來記錄日常收支，並透過視覺化的圖表分析財務狀況，協助使用者達成理財目標。

✨ 特色功能

• 輕鬆記帳：快速新增收入與支出紀錄，支援自訂分類管理。
• 圖表分析：使用視覺化圖表呈現收支趨勢與類別佔比。
• 帳本管理：支援多帳本功能，靈活管理不同用途的資金。

🏗️ 技術架構

系統架構

本專案採用前後端分離架構，並使用 Docker Compose 進行容器化部署：

┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│             │      │             │      │             │
│   Web UI    │─────▶│   API       │─────▶│  Database   │
│  (Vue.js)   │      │ (Spring     │      │ (PostgreSQL)│
│   Nginx     │      │  Boot)      │      │             │
│             │      │             │      │             │
└─────────────┘      └─────────────┘      └─────────────┘
   Port: 8000           Port: 8080          Port: 5432

前端技術棧

技術	版本	用途
Vue 3	3.5.25	核心框架
Vue Router	4.6.3	路由管理
Pinia	3.0.4	狀態管理
PrimeVue	4.5.3	UI 組件庫
Tailwind CSS	4.1.18	CSS 框架
Chart.js	4.5.1	圖表視覺化
Axios	1.13.2	HTTP 客戶端
Vite	7.2.4	建置工具
Nginx	stable-alpine	Web 伺服器

後端技術棧

技術	版本	用途
Spring Boot	4.0.1	核心框架
Java	25	程式語言
Spring Data JPA	-	ORM 框架
Spring Web MVC	-	Web 層框架
PostgreSQL Driver	runtime	資料庫驅動
Lombok	-	簡化 Java 程式碼
SpringDoc OpenAPI	2.6.0	API 文件生成
Maven	-	專案管理工具

資料庫

技術	版本	說明
PostgreSQL	15	關聯式資料庫

部署架構

採用 Docker Compose 進行一鍵部署：

• Web 容器：Nginx 提供靜態檔案服務
• API 容器：Spring Boot 應用程式
• DB 容器：PostgreSQL 資料庫
• 網路：使用 Bridge 網路模式連接所有容器

專案結構

EasyACT/
├── api/                          # 後端 API 服務
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/raylon/api/
│   │   │   │   ├── config/      # 配置類（OpenAPI）
│   │   │   │   ├── controller/  # REST 控制器
│   │   │   │   ├── dto/         # 資料傳輸物件
│   │   │   │   ├── model/       # 實體模型
│   │   │   │   ├── repository/  # 資料訪問層
│   │   │   │   └── service/     # 業務邏輯層
│   │   │   └── resources/
│   │   │       └── application.properties
│   │   └── test/                # 測試程式碼
│   ├── Dockerfile               # API 容器映像
│   └── pom.xml                  # Maven 配置
│
├── web/                          # 前端應用程式
│   ├── src/
│   │   ├── assets/              # 靜態資源（CSS）
│   │   ├── components/          # Vue 組件
│   │   │   ├── ChartView/       # 圖表相關組件
│   │   │   └── ListView/        # 列表相關組件
│   │   ├── layout/              # 佈局組件
│   │   ├── router/              # 路由配置
│   │   ├── stores/              # Pinia 狀態管理
│   │   ├── theme/               # 主題配置
│   │   ├── views/               # 頁面視圖
│   │   ├── App.vue              # 根組件
│   │   └── main.js              # 應用程式入口
│   ├── Dockerfile               # Web 容器映像
│   ├── nginx.conf               # Nginx 配置
│   ├── package.json             # NPM 配置
│   └── vite.config.js           # Vite 配置
│
├── docker-compose.yml            # Docker Compose 配置
└── data/                         # PostgreSQL 資料持久化目錄

API 文件

啟動服務後，可訪問 Swagger UI 查看完整的 API 文件：

http://localhost:8080/swagger-ui.html

📖 如何使用

使用 Docker Compose 快速部屬

1. 確保您的系統已安裝 Docker 與 Docker Compose。
2. 複製此專案到本地端：

   git clone https://github.com/RL-Small-Project/EasyACT.git
   cd EasyACT

3. 啟動服務：

   docker-compose up -d

4. 開啟瀏覽器訪問： http://localhost:8000

💡 回報問題 & 貢獻

問題回報：您可以到 Issues 進行回報，並說明問題點與執行時的錯誤代碼。