需求分析

• 目标用户：对数据安全敏感的离线用户。
• 显示账单，包含时间、类型、类别、金额。
• 支持以月份、类别进行筛选，并显示总支出、总收入。
• 支持根据账单分类进行支出金额统计，并进行排序。

如何启动

该过程在 MacOS 上测试过。若使用 windows，建议用 WSL 环境。

1. 安装 lerna，npm i lerna -g。
2. Bootstrap，npx lerna bootstrap 或lerna bootstrap。若遇到问题，可以参考 https://github.com/lerna/lerna
3. 同时启动 server 和 client。lerna run start --parallel。
4. 待 3 执行完成后，访问 http://localhost:8080/

经测试，安装的时候可能会发生 Cannot find module 'fork-ts-checker-webpack-plugin-v5'。该情况需要执行，cd packages/client && yarn install。建议用 yarn，速度会快一些。

开发文档

开发模式

因没有现成的 UI 图，暂定先以功能为主，功能完成后进行样式开发。

系统架构

采用 client-server 模式，方便进行局域网共享，或家庭成员共同记账。

数据结构调整

• bill 将 category 重命名为 categoryId。
• 在 bill 中增加自增 id 字段，以便在新增或删除等场景下操作该表。

技术选型

服务端技术选型

• 数据库：简单起见，暂定将 csv 文件本身作为数据库使用，并采用node-csvdb。采用原因：1. 其基于fast-csv，性能较好，但其封装并没有以性能为主。2. 支持 TypeScript。3. 其接口设计简洁，以便日后迁移至其它数据库。
• 框架：NestJS。采用原因：支持 TypeScript 和 GraphQL。

客户端技术选型

• 因本人想体验一下 Vue3，这里暂且选择 Vue3。

开发日志

2020-09-17 对需求进行分析，并进行脚手架搭建。+2 小时。

2020-09-18 上午 新增对账单的查询接口，并调整初始数据结构。+4 小时。

2020-09-18 下午 搭建前端基本框架。尝试使用 Vite，因其 HMR 不支持 apollo 的基于 Symbol 的 exports，详见ISSUE-598，遂改为灵活度稍高的 vue-cli。+2 小时。

2020-09-22 下午 新增操作栏，支持显示总收入支出，显示分类筛选和日期筛选。+4 小时，其中 1 小时踩了 Vue3 devtool 的坑。

2020-09-24 上午 新增账单的显示（分页）、账单的创建和根据分类过滤。+4 小时

2020-09-24 晚上 写书面作业。+1 小时

2020-09-25 上午 写书面作业，研究最后一道题。+1 小时

2020-09-25 上午 新增根据日期筛选功能。+1 小时

2020-09-25 上午 新增根据日期筛选后对账单金额的统计。+2 小时

结语

由于时间关系，以下遗留问题暂时没有处理。若有时间，该项目可以继续优化如下内容：

遗留业务

• 总收入支出的部分表示不太明确，有优化的空间。比如，显示总收入，月收入之类的文案。
• 账单信息的修改。当用户双击某个条目时，该条目可编辑金额和类别。
• 账单删除。用户可针对单个账单进行删除。
• 自定义分类。
• 图表信息，比如饼图或直方图。

遗留代码问题

• client 和 server 中有些可以共享的工具函数和模型对象，可以提取公共部分。
• server 端应编写 service 层的单元测试。
• server 端可以编写基于 fixture 的 e2e 测试。
• cvs 文件本身不适合作为数据存储的工具，应替换为 sqlite。（现在偶尔会发生文件存储的错误）
• 金额过大时，会产生 graphql int 溢出的问题，应在客户端处理一下金额。
• 现有项目未考虑部署产品环境的问题，需根据情况选择合适的部署模式。