基于Vue的个人记账系统设计与实现-计算机毕业设计源码01785

摘要

随着互联网趋势的到来，各行各业都在考虑利用互联网将自己推广出去，最好方式就是建立自己的互联网系统，并对其进行维护和管理。在现实运用中，应用软件的工作规则和开发步骤，采用Express技术建设个人记账系统。

本设计主要实现集人性化、高效率、便捷等优点于一身的个人记账系统，实现系统用户、收入记录管理、支出记录管理、支出统计管理、支出类别管理等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。只需通过一台电脑，动动手指就可以操作系统，实现数据通信管理。整个系统的设计过程都充分考虑了数据的安全、稳定及可靠等问题，而且操作过程简单。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。

个人记账系统前端基于Vue，后端使用基于Node.js的Express框架，使用Express我们可以方便、快速的创建Web网站的服务器或API接口的服务器。数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合前台HTML+CSS技术完成系统的开发。

关键词：Node.js；Express；个人记账；Vue

Abstract

With the arrival of the Internet trend, all walks of life are considering using the Internet to promote themselves. The best way is to establish their own Internet systems, and maintain and manage them. In practical applications, the working rules and development steps of application software are constructed using Express technology to build a personal accounting system.

This design mainly implements a personal accounting system that combines the advantages of humanization, high efficiency, and convenience. It realizes functional modules such as system users, income record management, expenditure record management, expenditure statistics management, and expenditure category management. The system communicates with the server through a browser to achieve data exchange and change. You only need to use a computer and move your fingers to operate the system, achieving data communication management. The entire system design process fully considers issues such as data security, stability, and reliability, and the operation process is simple. This system improves work efficiency and reduces errors and omissions in data storage through scientific management and convenient services.

The front-end of the personal accounting system is based on Vue, and the back-end uses the Node.js based Express framework. With Express, we can easily and quickly create servers for web websites or API interfaces. In terms of data, Microsoft's MySQL relational database is mainly used as the data storage medium, and the system development is completed in conjunction with front-end HTML+CSS technolog.

Keywords:Node.js; Express; Personal bookkeeping; Vue

目  录

摘要

1 绪论

1.1 选题背景和研究意义

1.2开发现状

1.3论文结构与章节安排

2 个人记账系统系统分析

2.1 可行性分析

2.1.1 技术可行性分析

2.1.2 经济可行性分析

2.1.3 操作可行性分析

2.2 系统功能分析

2.2.1 功能性分析

2.2.2 非功能性分析

2.3 系统用例分析

2.4  系统流程分析

2.4.1数据增加流程

2.4.2 数据修改流程

2.4.3 数据删除流程

2.5本章小结

3 个人记账系统总体设计

3.1 系统功能模块设计

3.2 数据库设计

3.2.1 数据库概念结构设计

3.2.2 数据库逻辑结构设计

3.3本章小结

4 个人记账系统详细设计与实现

4.1 用户注册界面

4.2 用户登录界面

4.3个人资料模块

4.4支出类别模块

4.5收入记录管理模块

4.6支出记录管理模块

4.7支出统计管理模块

5系统测试

5.1 测试目的

5.2 系统测试用例

5.3 系统测试结果

结论

参考文献

致  谢

1 绪论

1.1 选题背景和研究意义

随着数字化生活的发展，人们越来越依赖电子信息管理个人财务，许多人喜欢使用个人记账系统来记录和跟踪他们的支出和收入。人们的收入、支出和投资逐渐增加，需要更有效的方法来跟踪和管理财务状况。个人记账系统可以方便地记录和分析个人财务数据，帮助个人更好地了解自己的财务状况，合理安排收入和支出，制定可持续的财务规划。目前市场上已经有各种各样的个人记账应用，但是有些应用可能功能过于复杂，有些应用可能隐私保护不够，因此设计一个基于Vue的个人记账系统，旨在提供简单易用、快速响应、隐私安全的解决方案。

个人记账系统在帮助个人理清财务状况、引导合理消费和投资、实现财务规划目标以及提高财务素养等方面具有重要的研究意义。通过统计和分析财务数据，个人可以清晰地看到自己的开支情况，有助于理清个人财务状况。个人记账系统还可以分析个人的财务数据，提供合理的消费和投资建议。通过分析个人的支出模式和收入来源，系统可以给出相应的建议，指导个人进行合理的消费和投资决策，帮助个人制定财务规划，并跟踪实现目标的进度。通过设定目标和监督进度，个人记账系统可以提醒个人做出相应的调整，实现财务规划目标。通过使用个人记账系统，个人可以学习财务管理的基本概念和方法，提高自身的财务素养。

1.2开发现状

随着社会经济的发展和人们收入水平的提高，个人消费水平逐渐提升，但同时也伴随着消费习惯的复杂化和理财需求的增加。因此，开发一种能够帮助个人科学合理地管理自己的消费、进行预算规划的记账管理系统具有重要的实际意义。

国内方面，经济学家和财务管理专家对个人消费规划和记账管理的重要性进行了广泛的探讨和研究。他们认为，个人消费规划和记账管理是保障个人财务稳定和未来资金流动的重要手段。研究者通过调查和数据分析，发现许多个人因为缺乏消费规划和记账管理，导致财务难题和负债累累。因此，提出个人消费规划和记账管理系统能够帮助个人合理安排消费，控制支出，提高财务状况。国内研究者还对记账管理系统进行了一定程度的优化。例如，通过引入数据挖掘和机器学习技术，系统可以自动分析用户的消费行为，为用户提供个性化的消费建议和理财规划；还有研究者通过使用云存储技术，实现了多设备数据同步和备份，提高了系统的可靠性和稳定性。

国外方面，消费经济学和行为经济学方面的研究者也对个人消费规划和记账管理进行了广泛的研究。他们通过实证研究发现，个人消费规划和记账管理可以帮助个人提高消费决策的理性性和有效性。此外，研究者还发现，通过个人消费规划和记账管理系统，可以帮助个人设置消费目标，激励个人改变消费习惯并最终达到节约消费并实现财务自由的目标。国外的记账管理系统更注重用户体验和跨平台性能。这些系统通常具有简洁直观的界面设计和强大的功能模块，可以满足用户多样化的消费管理需求，并支持在不同操作系统和设备上的使用。他们也非常重视用户的信息安全和隐私保护，在系统设计中，研究者采用了多种加密和认证技术，确保用户的消费数据不被非法获取或篡改；同时，系统也会采取匿名化处理等措施，保护用户的个人隐私，防止信息泄露。

总的来说，在国内外的研究中，记账管理系统被广泛认为是一种有效的财务管理工具。它可以帮助个人合理规划消费，控制支出，削减浪费，从而提高个人财务状况并实现财务自由的目标。然而，目前存在的个人消费规划和记账管理系统还存在一些问题，比如用户对系统的使用率不高，功能不完善、用户体验差等，需要进一步的研究和改进。相信在不久的将来，个人消费规划记账管理系统会更加智能化、个性化和安全可靠，为人们的消费管理和理财规划提供更好的支持和帮助。

1.3论文结构与章节安排

本文共分为六章，章节内容安排如下：

第一章为引言，此章节对所设计和实现的系统的背景和状况以及意义进行详细的论述以及说明，同时进行了论文整体框架的结构的简要介绍。

第二章为系统需求分析，章节所做的主要的工作是对系统进行了技术、经济和操作方面可行性的分析；对系统实行了总体功能的需求、用例分析。

第三章为系统的设计，主要是对系统的功能结构进行设计，并对系统数据库的概念结构以及物理结构的设计进行了分析。

第四章就是对系统的实现，根据系统功能的划分，分别的对系统所需要实现的前台客户功能和后台管理员功能进行了分析和说明。

第五章：系统测试。主要对系统的部分界面进行测试并对主要功能进行测试

第六章：总结。

2 个人记账系统系统分析

系统需求分析是系统开发的一个关键环节，它在系统的设计和实现上起到了一个承上启下的位置。系统需求分析是对所需要做的系统进行一个需求的挖掘，如果分析的准确可以精准的解决现实中碰到的问题。如果分析不到位会影响后期系统的实现。一个系统的优秀程度需求分析也是占据了非常大的比例，如果需求分析不到位，后面的系统设计要实现就是一个偏离导航的设计。

2.1 可行性分析

系统可行行分析是对系统对系统可行性进行一个探讨。在探讨系统的可行性上我们主要从技术上的可行性和经济上的可行性以及法律层面的可行性上进行分析，如果三个层面度通过，我们则认为系统是比较可行的。

2.1.1 技术可行性分析

所谓技术可行性，是指能否在有限的时间内实现预期设定的功能。在开发和设计中是否有未解决的问题。完成的项目能否很好地应用，如果有任何不足之处，后期的维护是否会有较大的困难。经过对该系统的评估，确定现有的技术可以达到目标。通过使用Vue技术来创建动态的页面，采取低耦合的架构，搭载灵活的数据库，以及强劲的服务器，我们能够显著地改善系统的性能。这表明，我们不仅要追求理论上的目标，还要在实践中不断探索。

2.1.2 经济可行性分析

个人记账系统采用Express和Node.js技术，这样可以有效地降低软硬件的开发与维护费用，同时又能够让用户更加轻松地访问资源资源，从而提高服务质量。虽然个人记账系统的构建并非特别困难，但由于它的投入相比较少，而且能够带来更高的效率，因此，我们认为这个系统的建立具有很强的可持续性，而且能够带来更高的经济效益，而且比起日常的维护与管理更具有价值。

2.1.3 操作可行性分析

个人记账系统的前台页面简洁易懂，无论是系统管理员还是普通用户，只要电脑连接到网络，就可以轻松访问网站，而且不需要任何操作指导，只要输入正确的URL地址，就可以轻松完成所有的操作。由于无需任何复杂的环境配置，这个系统非常简单，易于操作，因此它是一个非常实用的工具。

2.2 系统功能分析

2.2.1 功能性分析

个人记账系统我划分为了普通用户模块和管理员模块这两大部分。

普通用户模块：

（1）主页：普通用户的主页是其工作的起点，通过主页可以了解到收入记录统计、支出记录统计和支出统计，以便更好地开展工作。

（2）个人信息：用户可以查看和修改自己的个人信息，如姓名、联系方式等。他们可以通过系统更新个人信息，并及时与管理人员进行联系，也可以对登录密码进行修改。

（3）收入记录管理：用户在此模块可以添加新的收入记录信息，对已有的收入记录信息进行修改维护。

（4）支出记录管理：用户在此模块可以添加新的消费支出信息，对已有的支出记录信息进行修改维护。

（5）支出统计管理：用户可以查看自己的支出统计列表，了解具体的支出情况。

管理员管理模块：

（1）登录：管理员在后台可以输入用户名+密码进行登录，管理员的用户名和密码是在数据库中直接设定好的。

（2）系统用户：管理员负责管理系统中的普通用户和管理员，包括添加新用户、修改权限、删除用户等操作。管理员需要确保用户信息的安全性和合法性，并根据角色分配不同的权限。

（3）收入记录管理：管理员可以对所有用户的收入记录信息进行管理，可以进行查询、重置或删除操作。

（4）支出记录管理：管理员可以对所有用户的支出记录信息进行管理，可以进行查询、重置或删除操作。

（5）支出统计管理：管理员可以查看所有用户的支出统计列表，了解具体的支出情况。

（6）支出类别管理：管理员可以对支出类别进行查询、重置或删除，也可以添加新的支出类别。

2.2.2 非功能性分析

个人记账系统的非功能性需求比如个人记账系统的安全性怎么样，可靠性怎么样，性能怎么样，可拓展性怎么样等。具体可以表示在如下2-1表格中：

表2-1个人记账系统非功能需求表

安全性	主要指个人记账系统数据库的安装，数据库的使用和密码的设定必须合乎规范。
可靠性	可靠性是指个人记账系统能够按照用户提交的指示进行操作，经过测试，可靠性90%以上。
性能	性能是影响个人记账系统占据市场的必要条件，所以性能最好要佳才好。
可扩展性	比如数据库预留多个属性，比如接口的使用等确保了系统的非功能性需求。
易用性	用户只要跟着个人记账系统的页面展示内容进行操作，就可以了。
可维护性	个人记账系统开发的可维护性是非常重要的，经过测试，可维护性没有问题

2.3 系统用例分析

个人记账系统的完整UML用例图分别是图2-1和图2-2。

图2-1就是普通用户角色的用例展示。

图2-1 个人记账系统普通用户角色用例图

图2-2就是管理员角色的用例展示。

图2-2 个人记账系统管理员角色用例图

2.4  系统流程分析

业务流程是用一些特定的符合和线条来进行演示用户在使用系统时的过程，在进行系统分析的时候，业务流程可以帮助开发人员更好的理解业务，发现错误，完善系统。

2.4.1数据增加流程

用户成功登入系统后就能够实现增加数据的操作，增加数据的编号是特定的，系统生成，用户不能随意填写，除了编号以外，其他增加信息用户自己填写，填写后的信息经过系统验证，验证合法通过就显示增加数据成功了，相反的话，就没有增加成功，图2-3显示的就是在增加数据时的流程。

图2-3 数据增加流程图

2.4.2 数据修改流程

数据修改时的流程和上面介绍的数据增加时的流程差不多，如图2-4所示。

图2-4  数据修改流程图

2.4.3 数据删除流程

如果系统里面存在一些没有用的数据的话，相关的管理人员还可以对这些数据进行删除，图2-5就是数据删除时的流程图。

图2-5 数据删除流程图

2.5本章小结

本章主要通过对个人记账系统的可行性分析、功能需求分析、系统用例分析、系统流程分析，确定整个个人记账系统要实现的功能。同时也为个人记账系统的代码实现和测试提供了标准。

3 个人记账系统总体设计

本章主要讨论的内容包括个人记账系统的功能模块设计、数据库系统设计。

3.1 系统功能模块设计

在上一章节中主要对系统的功能性需求和非功能性需求进行分析，并且根据需求分析了本个人记账系统中的用例。那么接下来就要开始对本个人记账系统的架构、主要功能和数据库开始进行设计。个人记账系统根据前面章节的需求分析得出，其总体设计模块图如图3-1所示。

图3-1 个人记账系统功能模块图

3.2 数据库设计

数据库设计一般包括需求分析、概念模型设计、数据库表建立三大过程，其中需求分析前面章节已经阐述，概念模型设计有概念模型和逻辑结构设计两部分。

3.2.1 数据库概念结构设计

下面是整个个人记账系统中主要的数据库表总E-R实体关系图。

图3-2 个人记账系统总E-R关系图

3.2.2 数据库逻辑结构设计

通过上一小节中个人记账系统中总E-R关系图上得出一共需要创建很多个数据表。在此我主要罗列几个主要的数据库表结构设计。

表access_token (登陆访问时长)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	token_id	int	10	0	N	Y		临时访问牌ID
2	token	varchar	64	0	Y	N		临时访问牌
3	info	text	65535	0	Y	N
4	maxage	int	10	0	N	N	2	最大寿命：默认2小时
5	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
6	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
7	user_id	int	10	0	N	N	0	用户编号:

表annual_income_and_expenditure (年收支)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	annual_income_and_expenditure_id	int	10	0	N	Y		年收支ID
2	title	varchar	64	0	Y	N		标题
3	type	varchar	64	0	Y	N		类型
4	describe	varchar	64	0	Y	N		描述
5	money	int	10	0	Y	N	0	金额
6	year	varchar	64	0	Y	N		年份
7	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表auth (用户权限管理)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	auth_id	int	10	0	N	Y		授权ID：
2	user_group	varchar	64	0	Y	N		用户组：
3	mod_name	varchar	64	0	Y	N		模块名：
4	table_name	varchar	64	0	Y	N		表名：
5	page_title	varchar	255	0	Y	N		页面标题：
6	path	varchar	255	0	Y	N		路由路径：
7	position	varchar	32	0	Y	N		位置：
8	mode	varchar	32	0	N	N	_blank	跳转方式：
9	add	tinyint	3	0	N	N	1	是否可增加：
10	del	tinyint	3	0	N	N	1	是否可删除：
11	set	tinyint	3	0	N	N	1	是否可修改：
12	get	tinyint	3	0	N	N	1	是否可查看：
13	field_add	text	65535	0	Y	N		添加字段：
14	field_set	text	65535	0	Y	N		修改字段：
15	field_get	text	65535	0	Y	N		查询字段：
16	table_nav_name	varchar	500	0	Y	N		跨表导航名称：
17	table_nav	varchar	500	0	Y	N		跨表导航：
18	option	text	65535	0	Y	N		配置：
19	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
20	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表classification_details (分类明细)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	classification_details_id	int	10	0	N	Y		分类明细ID
2	title	varchar	64	0	Y	N		标题
3	type	varchar	64	0	Y	N		类型
4	describe	varchar	64	0	Y	N		描述
5	money	varchar	64	0	Y	N		金额
6	date	varchar	64	0	Y	N		日期
7	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表hits (用户点击)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	hits_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：

表monthly_income_and_expenditure (月收支)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	monthly_income_and_expenditure_id	int	10	0	N	Y		月收支ID
2	title	varchar	64	0	Y	N		标题
3	type	varchar	64	0	Y	N		类型
4	describe	varchar	64	0	Y	N		描述
5	money	int	10	0	Y	N	0	金额
6	month	varchar	64	0	Y	N		月份
7	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表revenue_and_expenditure_details (收支明细)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	revenue_and_expenditure_details_id	int	10	0	N	Y		收支明细ID
2	title	varchar	64	0	Y	N		标题
3	type	varchar	64	0	Y	N		类型
4	describe	varchar	64	0	Y	N		描述
5	money	int	10	0	Y	N	0	金额
6	date	date	10	0	Y	N		日期
7	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表upload (文件上传)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	upload_id	int	10	0	N	Y		上传ID
2	name	varchar	64	0	Y	N		文件名
3	path	varchar	255	0	Y	N		访问路径
4	file	varchar	255	0	Y	N		文件路径
5	display	varchar	255	0	Y	N		显示顺序
6	father_id	int	10	0	Y	N	0	父级ID
7	dir	varchar	255	0	Y	N		文件夹
8	type	varchar	32	0	Y	N		文件类型

表user (用户账户：用于保存用户登录信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	user_id	mediumint	8	0	N	Y		用户ID：[0,8388607]用户获取其他与用户相关的数据
2	state	smallint	5	0	N	N	1	账户状态：[0,10](1可用|2异常|3已冻结|4已注销)
3	user_group	varchar	32	0	Y	N		所在用户组：[0,32767]决定用户身份和权限
4	login_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	上次登录时间：
5	phone	varchar	11	0	Y	N		手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
6	phone_state	smallint	5	0	N	N	0	手机认证：[0,1](0未认证|1审核中|2已认证)
7	username	varchar	16	0	N	N		用户名：[0,16]用户登录时所用的账户名称
8	nickname	varchar	16	0	Y	N		昵称：[0,16]
9	password	varchar	64	0	N	N		密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成
10	email	varchar	64	0	Y	N		邮箱：[0,64]用户的邮箱，用于找回密码时或登录时
11	email_state	smallint	5	0	N	N	0	邮箱认证：[0,1](0未认证|1审核中|2已认证)
12	avatar	varchar	255	0	Y	N		头像地址：[0,255]
13	open_id	varchar	255	0	Y	N		针对获取用户信息字段
14	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
15	vip_level	varchar	255	0	Y	N		会员等级
16	vip_discount	double	11	2	Y	N	0.00	会员折扣

表user_group (用户组：用于用户前端身份和鉴权)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	group_id	mediumint	8	0	N	Y		用户组ID：[0,8388607]
2	display	smallint	5	0	N	N	100	显示顺序：[0,1000]
3	name	varchar	16	0	N	N		名称：[0,16]
4	description	varchar	255	0	Y	N		描述：[0,255]描述该用户组的特点或权限范围
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	register	smallint	5	0	Y	N	0	注册位置:
9	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

3.3本章小结

整个个人记账系统的需求分析主要对系统总体架构以及功能模块的设计，通过建立E-R模型和数据库逻辑系统设计完成了数据库系统设计。

4 个人记账系统详细设计与实现

个人记账系统的详细设计与实现主要是根据前面的个人记账系统的需求分析和个人记账系统的总体设计来设计页面并实现业务逻辑。主要从个人记账系统界面实现、业务逻辑实现这两部分进行介绍。

4.1 用户注册界面

个人记账系统的游客和普通用户时可以进行注册登录，当用户右上角“注册”按钮的时候，当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号等后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可用户注册成功。

用户注册流程图如下所示。

图4-1 用户注册流程

用户注册界面展示如下图4-2所示。

图4-2注册界面图

注册关键代码如下所示。

 Register.prototype.index = async function(req,res) {

    var group_list = await $.services["user_group"].get_list({}, Object.assign({}, this.config));

    return await res.render(this.config.tpl + "index.html", {

        group_list

    });

};

Register.prototype.api = async function(req) {

    var user = $.services.user;

    var body = req.body;

    var username = body.username;

    var obj = await user.get_obj({

        username

    });

    if (obj) {

        return {

            error: {

                code: 70000,

                message: "账户名已存在",

            },

        };

    } else {

        var password = md5(body.password);

        var nickname = body.nickname;

        var user_group = body.user_group;

        var email = body.email;

        var email_state= body.hasOwnProperty('email_state') ? body.email_state : 0;

        var phone = body.phone;

        var phone_state= body.hasOwnProperty('phone_state') ? body.phone_state : 0;

        var bl_reg = await user.add({

            username,

            password,

            nickname,

            user_group,

            email,

            email_state,

            phone,

            phone_state

        });

        if (bl_reg) {

            return {

                result: "注册成功"

            };

        } else {

            return {

                error: {

                    code: 70000,

                    message: "注册失败",

                },

            };

        }

    }

};     

4.2 用户登录界面

管理员、用户在登录界面输入账号+密码，完成验证，点击“登录”按钮，系统在用户数据库表中会对管理员、用户的账号进行匹配，账号+密码正确的话，就会登录到系统中各个用户的主管理界面，否则提示对应的信息，返回到登录的界面。

用户登录流程图如下所示。

图4-3登录流程图

登录界面如下图4-4所示。

图4-4用户登录界面图

登录的逻辑代码如下所示。

Login.prototype.api = async function(req) {

    var body = req.body;

    var obj = await $.services["user"].get_obj({

        username: body.username

    },{like:false});

    if (obj) {

        var group = await $.services["user_group"].get_obj({

            name:obj.user_group

        })

        if (group){

            if (group.name!=="管理员"){

                var sql = "select examine_state from "+ group.source_table +" WHERE user_id = " + obj.user_id;

                var userExamine = await $.mysql.run(sql);

                if (userExamine && userExamine.length > 0 && userExamine[0].examine_state!=="已通过"){

                    return {

                        error: {

                            code: 70000,

                            message: "该用户审核未通过"

                        },

                    };

                }

            }

            if (obj.state!==1){

                return {

                    error: {

                        code: 70000,

                        message: "用户非可用状态，不能登录"

                    },

                };

            }

            var password = md5(body.password);

            if (password === obj.password) {

                req.session.user = obj;

                var date = Date.parse(new Date());

                var token = md5(obj.user_id + "_" + date);

                await $.services["access_token"].add({

                    token,

                    info: JSON.stringify(obj),

                    user_id:obj.user_id

                });

                obj.token = token;

                return {

                    result: {obj}

                };

            } else {

                return {

                    error: {

                        code: 70000,

                        message: "密码错误"

                    },

                };

            }

        }else {

            return {

                error: {

                    code: 70000,

                    message: "用户组不存在"

                },

            };

        }

    } else {

        return {

            error: {

                code: 70000,

                message: "账户不存在"

            }

        };

    }

};

4.3个人资料模块

当您完成/注册操作，您就能够更新您的个人资料。您需要确保您的inputname值能够和您所属的实体类型的参数完全对应。当您更新您的个人资料时，您的账号密码应当保持完整，不能出现任何错误。您需要确保您的账号密码是唯一的，才能继续使用。

密码修改流程图如下所示。

图4-5密码修改流程图

修改密码界面如下图所示。

图4-6修改密码界面图

4.4支出类别模块

支出类别管理：管理员负责管理支出的类别，可以对类别进行添加、编辑、或删除。支出类别管理界面如下图所示。

图4-7支出类别管理界面图

4.5收入记录管理模块

收入记录管理：管理员和普通用户都可以对收入记录信息进行管理，也可以添加新的收入记录信息。用户添加新的收入记录信息，由管理员进行管理统计。用户添加收入记录界面如下图所示。

图4-8 用户添加收入记录界面图

4.6支出记录管理模块

支出记录管理：管理员和普通用户都可以对支出记录信息进行管理，也可以添加新的支出记录信息。用户添加新的支出记录信息，由管理员进行管理统计。用户添加支出记录界面如下图所示。

图4-9 用户添加支出记录界面图

4.7支出统计管理模块

支出统计管理：管理员对支出统计信息进行增删改查操作。普通用户可以查看系统的支出统计列表信息。用户支出统计管理界面如下图所示。

图4-10用户支出统计管理界面图

5系统测试

5.1 测试目的

对任何系统而言，测试都是必不可少的环节，测试可以发现系统存在的很多问题，所有的软件上线之前，都应该进行充足的测试之后才能保证上线后不会Bug频发，或者是功能不满足需求等问题的发生。下面分别从单元测试，功能测试和用例测试来对系统进行测试以保证系统的稳定性和可靠性。

5.2 系统测试用例

下表是系统登录功能测试用例，检测了用户名和密码的不同的输入情况，观察系统的响应情况。得出该功能达到了设计目标。

表5-1 系统登录功能测试用例

功能描述	用于系统登录
测试目的	检测登录时的合法性检查
测试数据以及操作	预期结果	实际结果
输入的用户名和密码带有非法字符	提示用户名或者密码错误	与预期结果一致
输入的用户名或者密码为空	提示用户名或者密码错误	与预期结果一致
输入的用户名和密码不存在	提示用户名或者密码错误	与预期结果一致
输入正确的用户名和密码	登录成功	与预期结果一致

下表是注册功能测试用例，检测了各种数据的输入情况，观察系统的响应情况。得出该功能达到了设计目标。

表5-2 注册功能测试用例

功能描述	用于用户注册
测试目的	检测用户注册时的合法性检查
测试数据以及操作	预期结果	实际结果
输入的手机号不合法	提示请输入正确的手机号码	与预期结果一致
输入的字段为空	提示必填项不能为空	与预期结果一致
输入的密码少于6位	提示密码必须为6-12位	与预期结果一致
输入的密码大于12位	提示密码必须为6-12位	与预期结果一致

下表是收入记录管理功能的测试用例，检测了收入记录管理中对收入记录信息的增加，删除，修改，查询操作是否成功运行。观察系统的响应情况，得出该功能也达到了设计目标，系统运行正确。

前置条件；用户登录系统。

表5-3 收入记录管理的测试用例

功能描述	用于收入记录管理
测试目的	检测收入记录管理时的各种操作的运行情况
测试数据以及操作	预期结果	实际结果
点击添加收入记录，必填项合法输入，点击保存	提示添加成功	与预期结果一致
点击添加收入记录，必填项输入不合法，点击保存	提示必填项不能为空	与预期结果一致
点击修改收入记录，必填项修改为空，点击保存	提示必填项不能为空	与预期结果一致
点击修改收入记录，必填项输入不合法，点击保存	提示必填项不能为空	与预期结果一致
点击删除收入记录，选择收入记录删除	提示删除成功	与预期结果一致
点击搜索收入记录，输入存在的收入记录名	查找出收入记录	与预期结果一致
点击搜索收入记录，输入不存在的收入记录名	不显示收入记录	与预期结果一致

5.3 系统测试结果

通过对个人记账系统的调试，能够检测个人记账系统的稳定性，为个人记账系统正式运行、稳定运行提供了可预测性的维护备案。能够帮助使用者熟悉整个个人记账系统，并对个人记账系统可能出现的错误有所了解。本章节提供了部分调试用例及调试日志，可以帮助使用者解决简单的错误问题，也加深了开发者对于此框架下的个人记账系统编写的了解度，为后期开发者顺利完成个人记账系统、发布个人记账系统提供了非常大的帮助。

结论

在本次系统设计的过程中，我们将深入探讨个人记账系统，从研究背景、目标到实施方案，并详细阐述每一章的内容，以及该系统的硬件和软件环境。其中包含了：需求分析+功能需求+用例图，以此表示系统的功能的流程、模块的处理过程。绘制总体各个结构+流程图，并根据功能细致设计的需要，再来设计数据库的表结构，并绘制E-R图，实现程序接口，然后完成调试。最后，本文进行了总结，并提出了下一步的发展方向。

在这次设计中，我通过不断地探索和学习，掌握了Node.js技术和Vue+Express框架，并创建了一个个人记账系统，这让我对编写系统的必要性和运行环境有了更深入的了解。为了更好地完成这个项目，我花费了大量的时间，不仅丰富了自己的知识面，并且学习并积累了许多宝贵经验。

系统的这一次发展提升了我自己的能力，也学到了框架如何实现基本功能。同时在编程代码各方面也做了的很多尝试，从关注代码错误到做一些小的修改，都有了很大的提高。同时，在撰写论文时，还查阅了大量的参考资料，对论文的结构和文献资料进行了总结和分析。已作出努力，尽量减少错误和走弯路，从一开始的系统功能概念化到逐一实施，并进行了广泛的研究报告。也许后续操作过程中还有很多实现不完美的功能，但我依然会继续学习，努力在以后的软件开发、编号代码中吸取教训，总结不完美之处，努力的在软件开发越来越强。以上是我在本次设计中的总结，希望在未来取得更好的成绩。

参考文献

[1]赵子涵.新形势下个人理财资产配置的优化对策分析[J].投资与创业,2023,34(20):4-6.

[2]王代新,徐诺.基于OBE理念的个人理财课程教学改革与创新研究[J].老字号品牌营销,2023,(19):173-175.

[3]胡怡彤.互联网背景下个人理财课程教学改革研究[J].老字号品牌营销,2023,(17):167-169.

[4]杨文.Web前端主流开发框架技术研究[C]//天津市电子学会.第三十七届中国（天津）2023’IT、网络、信息技术、电子、仪器仪表创新学术会议论文集.天津光电通信技术有限公司;,2023:4.DOI:10.26914/c.cnkihy.2023.022857.

[5]冯爱花.基于Vue云管理平台Web前端性能优化的研究[J].长江信息通信,2023,36(07):126-128.

[6]徐楠,苏浩,张登辉等.基于Vue.js的权限系统设计[C]//天津市电子工业协会.天津市电子工业协会2023年年会论文集.天津七一二通信广播股份有限公司;,2023:5.DOI:10.26914/c.cnkihy.2023.019559.

[7]杨辉,黄家昌.基于Vue的页面设计器实现与应用[J].现代信息科技,2023,7(10):99-101+105.DOI:10.19850/j.cnki.2096-4706.2023.10.025.

[8]张猛,何姗姗.基于Vue+Node.js的智能小区数据管理系统设计与实现[J].电脑知识与技术,2023,19(14):46-49+53.DOI:10.14004/j.cnki.ckt.2023.0730.

[9]李娟.基于Vue+Node的高职院校学生成绩管理系统设计与实现[J].现代信息科技,2023,7(09):115-117.DOI:10.19850/j.cnki.2096-4706.2023.09.028.

[10]赵率宏.基于Node.js的ORM框架研究与实现[D].西南科技大学,2023.DOI:10.27415/d.cnki.gxngc.2023.000804.

[11]Heller M .What is Node.js? The JavaScript runtime explained[J].InfoWorld.com,2022,

[12]郭柏辰,莫清清,赖泳杏.互联网时代记账理财服务平台的构建研究[J].中国集体经济,2021,(30):67-68.

[13]Tyson M .How to use Auth0 with Node.js and Express[J].InfoWorld.com,2021,

[14]Nian L ,Bo Z .The Research on Single Page Application Front-end development Based on Vue[J].Journal of Physics: Conference Series,2021,1883(1):

[15]Tyson M .Angular, React, Vue: JavaScript frameworks compared[J].InfoWorld.com,2021,

[16]张钊源,刘晓瑜,鞠玉霞.Node.js后端技术初探[J].中小企业管理与科技(上旬刊),2020,(08):193-194.

[17]田黄.随手科技个人财务管理APP产品竞争战略研究[D].广西师范大学,2020.DOI:10.27036/d.cnki.ggxsu.2020.000440.

[18]陈甜.跨平台的自动记账与多人共享账务管理系统的设计与实现[D].北京邮电大学,2020.DOI:10.26969/d.cnki.gbydu.2020.001003.

[19]郝哲璞.记账软件对理财的意义——以“一指记账”APP为例[J].投资与合作,2020,(04):124-126.

[20]潘彬彬.一指记账APP软件设计[J].大众标准化,2020,(02):56-58.

致  谢

这篇文章的完成经历了多个日日夜夜的努力，终于在今天得以完成。这篇文章的创作过程实为不易，但在老师和同学的辛勤帮助下顺利渡过。让我在设计过程中举步维艰时，非常感谢我的导师不耐其烦的帮助我解决问题，给予了我许多指导意见。也感谢所有为我授业解惑的老师！

另外，本文的完成也参考借鉴了许多国内外在Vue和Express技术上的著作，如果没有著作原作的辛勤付出和科研成果，我也很难完成本论文。感谢在本论文中关联到的学者们！也感谢Google等公司，感谢他们强大的搜索引擎，让我的资料查阅省事简单。

感谢之余也还有几句话要说，虽大学学习四年，怎奈何本人才疏学浅，本文的完成已为尽力，但文中不免有些不当和错误之处，诚挚真切的请求各位老师对本文的批评改正，感谢百忙之中费心审阅我论文的老师。

免费领取项目源码，请关注❥点赞收藏并私信博主，谢谢~