# trade-miniapp

**Repository Path**: cxy_meteor/trade-miniapp

## Basic Information

- **Project Name**: trade-miniapp
- **Description**: 🔥 🔥 🔥 基于 SpringBoot3+ MyBatis-Plus + Sa-Token + MySQL + Vue3 + Uni-App 的记账小程序，支持微信小程序和 H5 多端运行。你的⭐️Star ⭐️，是作者发电的动力！
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2026-01-07
- **Last Updated**: 2026-04-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 微信小程序, 记账小程序, SpringBoot, uni-app

## README

# 记账小程序

一个基于 Vue3 + Spring Boot 的全栈记账应用，支持微信小程序和 H5 多端运行。

## ✨ 功能特性

- 📊 **账单管理** - 记录日常收支，支持图片附件上传
- 📈 **统计分析** - 可视化图表展示收支趋势，按分类统计
- 🏷️ **分类管理** - 自定义收支分类（管理员）
- 👤 **用户系统** - 注册登录、个人信息管理、密码修改
- 🔐 **数据隔离** - 每个用户数据完全独立，安全可靠
- 🎨 **精美UI** - 现代化界面设计，操作流畅

## 📸 功能截图

### 用户登录
<!-- 在这里添加登录页面截图 -->
![登录](./login.png)

### 用户注册
<!-- 在这里添加注册页面截图 -->
![注册](./register.png)

### 首页
<!-- 在这里添加首页截图 -->
![首页](./home.png)

### 记账
<!-- 在这里添加记账页面截图 -->
![记账](./add-bill.png)

### 账单列表
<!-- 在这里添加账单列表截图 -->
![账单列表](./bill-list.png)

### 统计分析
<!-- 在这里添加统计页面截图 -->
![统计分析](./statistics.png)

### 分类管理
<!-- 在这里添加分类管理截图 -->
![分类管理](./category.png)

### 我的
<!-- 在这里添加我的页面截图 -->
![我的](./my.png)

## 🛠️ 技术栈

### 前端
- **框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **跨端框架**: uni-app
- **UI组件**: uni-ui
- **状态管理**: Pinia
- **图表库**: uCharts
- **HTTP客户端**: axios

### 后端
- **框架**: Spring Boot 3.2.0
- **数据库**: MySQL 8.0+
- **缓存**: Redis
- **ORM**: MyBatis-Plus
- **认证**: Sa-Token
- **工具库**: Hutool

## 📦 项目结构

```
trade-miniapp/
├── backend/                 # 后端服务
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/accounting/
│   │   │   │   ├── common/         # 通用模块（异常、结果、注解等）
│   │   │   │   ├── config/         # 配置类
│   │   │   │   ├── controller/     # 控制器
│   │   │   │   ├── dto/            # 数据传输对象
│   │   │   │   ├── entity/         # 实体类
│   │   │   │   ├── mapper/         # 数据访问层
│   │   │   │   ├── service/        # 业务逻辑层
│   │   │   │   └── vo/             # 视图对象
│   │   │   └── resources/
│   │   │       ├── sql/            # 数据库脚本
│   │   │       └── application.yml # 配置文件
│   └── pom.xml                     # Maven配置
│
├── frontend/                # 前端应用
│   ├── src/
│   │   ├── api/                    # API接口封装
│   │   ├── constants/              # 常量配置
│   │   ├── pages/                  # 页面组件
│   │   │   ├── bill/               # 账单相关页面
│   │   │   ├── category/           # 分类管理页面
│   │   │   ├── index/              # 首页
│   │   │   ├── statistics/         # 统计页面
│   │   │   └── user/               # 用户相关页面
│   │   ├── stores/                 # 状态管理
│   │   ├── utils/                  # 工具函数
│   │   ├── App.vue                 # 根组件
│   │   ├── main.ts                 # 入口文件
│   │   └── pages.json              # 页面配置
│   ├── package.json
│   └── vite.config.ts
│
└── README.md
```

## 🚀 快速开始

### 环境要求

- Node.js 16+
- JDK 17+
- Maven 3.6+
- MySQL 8.0+
- Redis 5.0+

### 后端启动

1. **创建数据库**
   ```sql
   CREATE DATABASE accounting DEFAULT CHARACTER SET utf8mb4;
   ```

2. **导入数据库脚本**
   ```bash
   # 执行 backend/src/main/resources/sql/init.sql
   ```

3. **修改配置文件**
   ```yaml
   # backend/src/main/resources/application.yml
   spring:
     datasource:
       url: jdbc:mysql://localhost:3306/accounting
       username: root
       password: your_password
     redis:
       host: localhost
       port: 6379
   ```

4. **启动后端服务**
   ```bash
   cd backend
   mvn spring-boot:run
   ```

   后端服务将运行在 `http://localhost:8080`

### 前端启动

1. **安装依赖**
   ```bash
   cd frontend
   npm install
   ```

2. **启动开发服务器**
   ```bash
   # H5开发
   npm run dev:h5
   
   # 微信小程序开发
   npm run dev:mp-weixin
   ```

3. **访问应用**
   - H5: 浏览器打开 `http://localhost:5173`
   - 微信小程序: 使用微信开发者工具打开 `dist/dev/mp-weixin`

## 📝 使用说明

### 默认账号

- **管理员账号**: admin / 123456
- **普通用户**: 可自行注册

### 主要功能

1. **记账**: 点击首页"记一笔"按钮，填写金额、分类、备注等信息
2. **查看账单**: 首页显示当月账单，可查看详情、编辑或删除
3. **统计分析**: 切换到统计页面，查看收支趋势图表
4. **分类管理**: 管理员可在"我的"页面进入分类管理，自定义收支分类
5. **个人中心**: 修改个人信息、更换头像、修改密码

## 🔧 配置说明

### 文件上传

后端配置文件中可设置文件上传路径和访问地址：

```yaml
file:
  upload-path: upload/          # 上传路径
  base-url: http://localhost:8080  # 访问地址
```

### Redis配置

用于存储用户会话和防重复提交：

```yaml
spring:
  redis:
    host: localhost
    port: 6379
    password:                   # 如有密码请填写
```

## 🎯 核心特性

### 数据安全
- ✅ 基于 Sa-Token 的用户认证
- ✅ 数据权限隔离，用户只能访问自己的数据
- ✅ 防重复提交机制（前端+后端双重保护）
- ✅ 金额限制（不超过1亿）

### 性能优化
- ✅ Redis 缓存用户会话
- ✅ 图片上传并行处理
- ✅ 分页查询优化
- ✅ 数据库索引优化

### 用户体验
- ✅ 响应式设计，适配多种屏幕
- ✅ 加载状态提示
- ✅ 表单验证反馈
- ✅ 操作成功/失败提示

## 📄 API 文档

主要接口：

- `POST /user/register` - 用户注册
- `POST /user/login` - 用户登录
- `POST /bill` - 添加账单
- `GET /bill/{id}` - 获取账单详情
- `PUT /bill/{id}` - 更新账单
- `DELETE /bill/{id}` - 删除账单
- `POST /bill/page` - 分页查询账单
- `POST /statistics/timeSeries` - 时间序列统计
- `POST /statistics/category` - 分类统计

## 🤝 参与贡献

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 📜 开源协议

本项目采用 MIT 协议开源，详见 [LICENSE](LICENSE) 文件。

## 👨‍💻 作者

如有问题或建议，欢迎提 Issue 或 PR。

## 🙏 致谢

感谢以下开源项目：

- [Vue.js](https://vuejs.org/)
- [Spring Boot](https://spring.io/projects/spring-boot)
- [uni-app](https://uniapp.dcloud.io/)
- [MyBatis-Plus](https://baomidou.com/)
- [Sa-Token](https://sa-token.cc/)
- [uCharts](https://www.ucharts.cn/)