简易的记账本

[gameclub000]

简易的记账本应用程序

需求

基本需求为构建一个简易的记账本应用程序

• 详见： https://github.com/xmindltd/hiring/blob/master/frontend-1/README.md

来自需求的功能点：

1. 加载我们所提供的数据；
2. 以列表的形式展示账单内容，并且提供下拉框选择月份进行筛选，其中列表中所展示的账单为选择月份的账单；
3. 支持使用者添加账单；
4. 简单地统计并展示所选月份的收入和支出总金额。
5. 对账单分类进行二次筛选；
6. 对选择月份内的所有账单根据账单分类进行支出金额统计，并进行排序。

整理并划分功能需求点：

• 1. 构建基础项目框架；

#1 (comment)
PR: #2

• 2. 加载账单并以表格的形式展示；

#1 (comment)
PR: #3
PR: #4

• 3. 构建筛选表单，对表格进行筛选过滤；

#1 (comment)
PR: #5

• 4. 统计账单数据，以图表的形式展示；

#1 (comment)
PR: #6
PR: #7

• 5. 构建新增表单，支持新增账单；

#1 (comment)
PR: #8

[gameclub000]

构建基础项目框架

• 初始化项目

1. 使用 nextjs 为基础框架，初始化项目。

• 配置运行环境，为避免环境差异导致的错误，使用Docker进行开发与部署；

1. 安装Docker https://docs.docker.com/get-docker/
2. 配置Dockerfile https://docs.docker.com/develop/develop-images/dockerfile_best-practices/
3. 配置docker-compose https://docs.docker.com/compose/reference/overview/

• 完善 README.md

1. 完善Getting Started
   1.1 System Requirements
   1.2 Getting Started

• 确定代码格式规范

1. 使用 https://prettier.io/ 作为代码格式化工具；
2. 配合 vscode extension 使用;

• 代码目录结构

.
├── CHANGELOG
├── components
│   ├── base
│   │   └── README.md
│   ├── common
│   │   └── README.md
│   ├── containers
│   │   └── README.md
│   └── README.md
├── config
│   └── README.md
├── docker-compose.dev.yml
├── docker-compose.yml
├── Dockerfile
├── Dockerfile.dev
├── LICENSE
├── node_modules
├── package.json
├── pages
│   ├── api
│   │   └── hello.js
│   ├── _app.js
│   └── index.js
├── prettier.config.js
├── public
│   ├── favicon.ico
│   ├── README.md
│   └── vercel.svg
├── README.md
├── styles
│   ├── globals.css
│   └── Home.module.css
└── yarn.lock

• 组件目录结构

├── components
│   ├── base (基础组件）
│   ├── common（通用组件）
│   ├── containers（容器组件）

• 数仓目录结构

使用 redux 作为 数仓

store/
├── index.js
├── modules
└── README.md

• 静态资源管理

Next.js 默认以public为静态资源目录 https://nextjs.org/learn/basics/assets-metadata-css/assets
无需做更多的配置：
Next.js can serve static files, like images, under the top-level public directory. Files inside public can be referenced from the root of the application similar to pages.

• 路由管理
• 页面管理

Next.js 已做好页面与路由的映射，无需做更多配置：
In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.
https://nextjs.org/docs/basic-features/pages

• 单元测试

1. 选择哪些单元测试工具？
   1.1 Jest https://jestjs.io/
   1.2 enzymejs https://github.com/enzymejs/enzyme
2. ❓ 问题：怎样配置单元测试的工作流（参考文档及博客）：
   2.1 https://levelup.gitconnected.com/configuring-jest-for-next-js-react-and-babel-from-scratch-bb3b7751329b
   2.2 https://jestjs.io/docs/en/webpack#handling-static-assets

[gameclub000]

加载账单并以表格的形式展示

• 构建页面骨架

1. 需要引用前端框架，以便快速构建界面，选哪个UI框架，快捷构建布局？
   1.1 使用 Ant Design of React

• 构建表格组件

1. 构建各种组件
   1.1 构建金额格式化组件 FormatAmount
   1.2 构建时间格式化组件 FormatTime
   1.3 构建类型格式化组件 BillType
   1.4 构建分类格式化组件 BillCategory
   1.5 构建表格容器组件 BillList
   ❓ 问题：单元测试中报错： TypeError: window.matchMedia is not a function
   解决：挂载组件中，并没有window对象，需要使用依赖注入替身的方式；
   参考：https://stackoverflow.com/questions/39830580/jest-test-fails-typeerror-window-matchmedia-is-not-a-function

• 对接数据

1. 前端数据源
   1.1 使用 redux slice 构建账单列表；
   1.2 账单分类列表 billSlice、 billSlice测试套件；
2. 数据接口
   2.1 根据前端数据源构建服务端接口 账单、账单分类；
   2.2 请求器 Requestor（用于发起ajax请求并处理数据的服务，使用 axios 做为默认的requestor）；
   2.3 请求并处理服务器接口数据provider.js，将数据转换成前端需要的数据格式response.js；

[gameclub000]

构建筛选表单，对表格进行筛选过滤

• 构建表单组件

• ❓ 问题：需要测试第三方组件的自定事件，enzyme是否支持？
• 结果：通过查enzyme的文档及issue： simulate() support for custom events on shallow rendered children enzymejs/enzyme#147

• 实时过滤器 selectVisibleBill（根据月份、分类，对数据进行实时过滤，并交予界面组件进行渲染展示）
• 提交表单参数 addBill（提交月份、分类参数，用于数据筛选展示）
• 重置过滤参数 resetMonth|resetCatetory（去掉月份、分类参数，重新开始筛选数据展示）

[gameclub000]

统计账单数据，以图表的形式展示

• 构建图表组件

1. 图表选型
   1.1 🚫 饼图：https://charts.ant.design/demos/pie#%E5%A4%9A%E8%89%B2%E9%A5%BC%E5%9B%BE
   1.1 🆗 环图：https://charts.ant.design/demos/pie#donut
2. 图表组件引用与配置参数

• 生成图表数据

1. 统计数据：根据分类统计账单数据
2. 统计数据：总收入、总支出

[gameclub000]

构建新增表单，支持新增账单

• 构建表单组件

1. 确定账单所需字段：
   1.1 日期
   1.2 金额
   1.3 分类
   1.4 类型（收入、支出）

• 提交表单

1. 验证表单数据有效性
2. 将表单数据存入数仓

[gameclub000]

结果