# react-personal-bookkeeping

**Repository Path**: likealien/react-personal-bookkeeping

## Basic Information

- **Project Name**: react-personal-bookkeeping
- **Description**: 基于 React 开发的个人记账本 Web 应用，实现收支记录、增删改查、月度统计、分类占比、趋势图表，数据本地持久化。作为 React 学习实战项目，覆盖组件化、状态管理、表单、路由、图表等核心技术。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-23
- **Last Updated**: 2026-05-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 记账本项目（前后端分离）

这是一个用于学习 React + Node.js 的记账本项目，包含：

- `account-book-web`：前端（React + Vite + Ant Design）
- `account-book-api`：后端（Express + MySQL + JWT）
- `docs`：需求、技术方案、接口文档等设计资料

## 1. 功能概览

- 用户注册、登录、退出
- 分类管理（新增、编辑、删除、查询）
- 账单管理（新增、编辑、删除、分页、筛选）
- 统计分析（汇总、趋势、分类占比）
- 个人中心（获取和更新个人资料）

## 2. 项目结构

```text
account-book/
  account-book-api/     # 后端服务
  account-book-web/     # 前端应用
  docs/                 # 需求与技术文档
```

## 3. 运行前准备

- Node.js 18+
- MySQL 8+
- npm 9+

## 4. 快速启动

### 4.1 启动后端

```bash
cd account-book-api
npm install
npm run dev
```

后端默认地址：`http://localhost:3000`

### 4.2 启动前端

```bash
cd account-book-web
npm install
npm run dev
```

前端默认地址：`http://localhost:5173`

## 5. 联调说明

- 前端通过 `src/utils/request.js` 的 `baseURL` 调用后端接口。
- 当前默认是：`http://localhost:3000/api`。
- 如果后端端口变化，请同步修改前端 `baseURL`。

## 6. 文档入口

- 后端说明：`account-book-api/README.md`
- 前端说明：`account-book-web/README.md`
- 设计文档：`docs/`

## 7. 常见问题

### Q1：打开 `http://localhost:3000` 为什么不是页面？

`3000` 是后端 API 端口，不是前端页面。  
请访问前端地址（通常是 `http://localhost:5173`）。

### Q2：报错 `Cannot use import statement outside a module`

在后端 `package.json` 增加：

```json
{
  "type": "module"
}
```

然后重启后端服务。