README.md

XMind 前端面试大作业 - 1

开始动手吧

1. 这份大作业需要考察你的各方面能力，所以为了能够让我们能够更好地了解你的现有水平和发展潜力，请认真并仔细地阅读本文档以完成我们所提出的任务；

2. 本作业不设置任何的技术限制，你可以使用任何技术来完成，但最终请使用网页的方式呈现；

3. 你需要附带一份文档以告诉我们要如何对你的代码进行使用、运行和测试，包括所需要准备的操作系统、运行环境等；

4. 为保证你的努力成果不被盗用，我们将对你的代码和其他内容进行保存，以进行对比和鉴定，你将保留有这份成果的所有权。我们也同样欢迎你将你的成果分享到任何地方。

简易的记账本

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

数据结构

我们将为你提供一份以 CSV 形式存储的数据表格，里面包含了一份虚构的账单数据。其中包括以下字段信息：

字段名称	字段标识	字段类型	内容解释	是否必选
账单时间	time	Date	账单被创建的时间，格式为 ISO 8601 标准 示例：2019-09-08T08:02:17+08:00	是
账单类型	type	Integer	账单的类型 该字段有且只有两种值：1 代表收入，0 代表支出	是
账单分类	category	String	账单的详细分类	否
账单金额	amount	Float	账单的金额。单位为人民币（￥），精确到小数点后两位。	是

另外对于这份数据表格中的账单分类字段，我们还会另外提供一份数据表格，其中包括以下字段信息：

字段名称	字段标识	字段类型	内容解释	是否必选
分类 ID	id	String	分类的唯一标识符，对应账单数据中的 category 字段。	是
分类名称	name	String	分类的展示名称	是
分类类型	type	Integer	分类的类型 与账单数据中的 type 字段一样：1 代表收入，0 代表支出	是

基本需求

你需要读取我们所提供的数据完成以下需求：

1. 加载我们所提供的数据；

2. 以列表的形式展示账单内容，并且提供下拉框选择月份进行筛选，其中列表中所展示的账单为选择月份的账单；

3. 支持使用者添加账单；

4. 简单地统计并展示所选月份的收入和支出总金额。

以上为本题目的基本需求，而如果你需要应聘的岗位为高级前端工程师或以上岗位，则需要完成以下附加需求：

1. 对账单分类进行二次筛选；

2. 对选择月份内的所有账单根据账单分类进行支出金额统计，并进行排序。

如果你希望应聘远程工作的岗位，那么请完成以下附加需求：

1. 写一篇简单的文档来描述你对解决本题目时的思考过程，并对其中所遇到的问题和你的解决方案进行描述。

以上所有的附加需求都可以作为加分项进行回答

请仔细检查

1. 请将你的代码和所有其他内容以云盘或者github链接的形式发送到 hr@xmind.net。

2. 请附带上你的简历，其中必须包含以下联系方式信息：

   • 电子邮箱地址

   • 电话号码

3. 请不要在代码中包含任何依赖库文件或可执行文件，如 node_modules 文件夹。