UniApp + SqlServer 实现的简易记账系统

功能介绍

这是一个基于 UniApp + SqlServer 开发的简易记账系统，主要包含以下功能：

在线演示

演示地址: http://demo.xiyueta.com/case/web20250222/

测试账号: demo

测试密码: 123456

使用效果

首页统计

• 顶部可选择年份
• 中间显示年度汇总数据
• 底部列表显示月度明细

记录管理

• 列表形式展示所有记录
• 每条记录显示关键信息
• 支持编辑和删除操作

记账表单

• 简洁的表单设计
• 分类选择支持图标显示
• 关键信息必填验证

1. 记账首页

• 年度数据概览
• 支持选择年份（当前年往前10年）
• 显示年度收入、支出和结余统计
• 按月份展示收支明细
• 数据可视化展示
• 清晰展示每月收支情况
• 结余金额正负值颜色区分

2. 记账管理

• 记账记录列表
• 展示所有记账记录
• 支持分页加载
• 每条记录显示类别、金额、日期等信息
• 记录操作
• 添加新记录
• 编辑已有记录
• 删除记录

3. 记账表单

• 类型选择
• 支出/收入切换
• 不同类型显示不同颜色标识
• 金额输入
• 支持小数点输入
• 金额格式化显示
• 分类选择
• 提供15个常用分类
• 每个分类配有图标
• 支持单击选择
• 日期选择
• 可选择具体记账日期
• 默认当前日期
• 支持选择历史日期
• 备注信息
• 可选填写备注说明
• 支持长文本输入

技术实现

前端实现(UniApp + Vue3)

1. 使用 Vue3 Composition API 开发

2. 采用 uView Plus UI 组件库

3. 使用 SCSS 编写样式

4. 响应式数据管理

5. 组件化开发

后端实现(ASP)

1. RESTful API 设计

2. SQL Server 数据存储

3. 统一的数据格式返回

4. 完善的参数验证

5. 用户权限控制

主要接口

1. 统计接口

/api/bookkeeping/summary/

• 获取年度统计数据
• 返回年度汇总和月度明细

2. 列表接口

/api/bookkeeping/list/

• 获取记账记录列表
• 支持分页和搜索

3. 保存接口

/api/bookkeeping/save/

• 支持新增和编辑
• 统一的参数验证

4. 删除接口

/api/bookkeeping/delete/

• 删除指定记录
• 权限验证

数据结构

记账表(bookkeeping)

CREATE TABLE bookkeeping (
  record_id INT IDENTITY(1,1) PRIMARY KEY,  -- 记录ID
  user_id INT NOT NULL,                     -- 用户ID
  type TINYINT NOT NULL,                    -- 类型:1支出2收入
  category NVARCHAR(50) NOT NULL,           -- 分类名称
  amount DECIMAL(10,2) NOT NULL,            -- 金额
  record_date DATE NOT NULL,                -- 记账日期
  remark NVARCHAR(200),                     -- 备注
  create_time DATETIME DEFAULT GETDATE()    -- 创建时间
)

总结

这是一个功能完整、界面简洁的记账系统。主要特点：

1. 操作简单直观

2. 数据统计清晰

3. 分类管理方便

4. 支持历史记录

5. 性能响应迅速

适合个人日常记账使用，也可以作为学习UniApp和ASP开发的参考案例。

后续优化方向

1. 添加数据导出功能

2. 支持自定义分类

3. 增加预算管理

4. 添加图表分析

5. 支持多端同步

参考资料

1. UniApp官方文档

2. Vue3官方文档

3. uView Plus文档

关于作者

如果本文章对您有所帮助，欢迎交流和探讨技术问题。

QQ： 313801120

更多文章： www.xiyueta.com/

希望能一起成长，共同探索更多开发技巧！