HandsomeAq/AI-accounting-soft-uniApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
71bc2db985
AI-accounting-soft-uniApp/README.md
ni ziyi 71bc2db985 前端初始化
2025-12-12 16:49:06 +08:00

3.9 KiB
Raw Blame History

强宝爱记账前端

基于 uni-app + Vue 3 开发的记账应用前端项目。

功能特性

  • ✅ 用户登录/注册
  • ✅ 手动记账
  • ✅ OCR识别记账（支持截图识别金额）
  • ✅ 账单列表展示（按日期分组）
  • ✅ 统计功能（按日/周/月统计）
  • ✅ 分类管理

技术栈

  • 框架: uni-app + Vue 3
  • 状态管理: Pinia
  • UI组件: uni-ui
  • HTTP请求: uni.request 封装

项目结构

frontend/
├── pages/                    # 页面
│   ├── login/               # 登录页
│   ├── index/               # 首页（账单列表）
│   ├── add/                 # 添加账单
│   └── statistics/          # 统计页
├── api/                     # API接口封装
│   ├── auth.js             # 认证接口
│   ├── bill.js             # 账单接口
│   ├── category.js         # 分类接口
│   ├── statistics.js       # 统计接口
│   └── ocr.js              # OCR接口
├── store/                   # Pinia状态管理
│   └── user.js             # 用户状态
├── utils/                   # 工具函数
│   ├── request.js          # HTTP请求封装
│   └── date.js             # 日期工具
├── static/                  # 静态资源
├── App.vue                  # 应用根组件
├── main.js                  # 入口文件
└── pages.json               # 页面配置

开发说明

环境要求

  • Node.js >= 14
  • HBuilderX（推荐）或 uni-app CLI

安装依赖

npm install

运行项目

HBuilderX

  1. 使用 HBuilderX 打开项目
  2. 选择运行 -> 运行到浏览器 -> Chrome

CLI

npm run dev:h5

配置后端API地址

修改 utils/request.js 中的 BASE_URL：

const BASE_URL = process.env.NODE_ENV === 'development' 
  ? 'http://localhost:8080/api'  // 开发环境
  : 'https://your-api-domain.com/api'  // 生产环境

页面说明

登录页 (pages/login/login.vue)

  • 支持登录和注册
  • 自动保存token和用户信息
  • 登录成功后跳转到首页

首页 (pages/index/index.vue)

  • 显示本月收支统计
  • 账单列表按日期分组展示
  • 支持下拉刷新
  • 点击账单可查看详情（待完善）

添加账单页 (pages/add/add.vue)

  • 手动记账: 手动输入分类、金额、日期、备注
  • OCR识别:
    • 选择图片（相机/相册）
    • 上传识别
    • 自动填充金额、商户、日期
    • 可手动修改识别结果

统计页 (pages/statistics/statistics.vue)

  • 按日/周/月切换统计
  • 显示总收入、总支出、余额
  • 分类统计展示（带进度条）

API接口

认证接口

  • POST /api/auth/register - 注册
  • POST /api/auth/login - 登录

账单接口

  • GET /api/bills - 获取账单列表
  • POST /api/bills - 创建账单
  • GET /api/bills/:id - 获取账单详情
  • PUT /api/bills/:id - 更新账单
  • DELETE /api/bills/:id - 删除账单

分类接口

  • GET /api/categories - 获取分类列表
  • POST /api/categories - 创建分类
  • PUT /api/categories/:id - 更新分类
  • DELETE /api/categories/:id - 删除分类

统计接口

  • GET /api/statistics/daily - 按日统计
  • GET /api/statistics/weekly - 按周统计
  • GET /api/statistics/monthly - 按月统计

OCR接口

  • POST /api/ocr/recognize - OCR识别

注意事项

  1. 登录状态: 所有页面都会检查登录状态，未登录会自动跳转到登录页
  2. Token管理: Token存储在本地存储中，过期后会自动跳转登录
  3. 图片上传: OCR功能需要上传图片，注意图片大小限制
  4. 平台差异: 注意H5和App平台的API差异，部分功能可能需要平台判断

待完善功能

  • 账单编辑功能
  • 账单删除功能
  • 分类管理页面
  • 账单详情页面
  • 图表展示（echarts集成）