【《基于React的个人事务管理系统设计》8500字（论文）】

基于React的个人事务管理系统设计摘要近些年来，由于社会的不断发展和快速进步，导致人们的生活节奏也随之加快，每天需要处理的事务也变得芜杂繁多起来。传统的个人事务管理模式需要花费大量的时间和精力。所以，利用计算机软件易操作、用时短、差错小的优点去进行个人事务管理成为一种必然的发展趋势。TomatoWork个人事务管理系统利用计算机软件的优势，针对当前社会发展快，个人事管理繁杂的问题设计了一套个人事务管理流程，并且研发出一款支持多设备同时在线的个人事务管理系统。前后端分离是该系统所采用的的开发交互模式：前端软件的开发使用了TypeScript、React.js、AntDesign等技术,帮助用户在提醒事项、活动清单、今日待办、财务管理、我的备忘等日常活动进行更高效的管理。后端软件开发使用了Egg.js、MySQL数据库等技术,实现了对用户信息、事件活动、数据整理等功能。关键词：个人事务管理系统，React.js，Egg.js，数据库MySQL目录TOC\o"1-3"\h\u1绪论 [5]4.4.1财务类别表财务类型表如表4-1所示。表4-1财务类别表序号名称数据类型是否主键说明1idchar是财务类别id2uidint用户id3sort_indextinyint排序4namevarchar财务类别名称5typetinyint财务类别收支类型6created_atdatetime创建时间7updated_atdatetime更新时间4.4.2资金流动表资金流动表如表4-2所示。表4-2资金流动表序号名称数据类型是否主键说明1idchar是资金流动id2uidint用户id3pricedecimal收支金额4datebigint日期5type_idchar财务类别id6remarksvarchar备注信息7created_atdatetime入账时间8updated_atdatetime更新时间4.4.3系统消息表系统消息表如表4-3所示。表4-3系统消息表序号名称数据类型是否主键说明1idchar是系统消息id2uidint用户id3contentvarchar内容4typetinyint消息类型5has_readtinyint是否已读6created_atdatetime创建时间7updated_atdatetime修改时间4.4.4备忘录表备忘录表如表4-4所示。表4-4备忘录表序号名称数据类型是否主键说明1idchar是备忘录id2uidint用户id3sort_indextinyint排序4titlevarchar备忘录标题5markdownlongtext备忘录内容6created_atdatetime创建时间7updated_atdatetime更新时间4.4.5提醒事项表提醒事项表如表4-5所示。表4-5提醒事项表序号名称数据类型是否主键说明1idchar是提醒事项id2uidint用户id3contentvarchar内容4datebigint日期5typetinyint类型6created_atdatetime创建时间7updated_atdatetime更新时间4.4.6今日待办表今日待办表如表4-6所示。表4-6今日待办表序号名称数据类型是否主键说明1idchar是提醒事项id2uidint用户id3contentvarchar内容4datebigint日期5typetinyint类型6counttinyint数量7created_atdatetime创建时间8updated_atdatetime更新时间

4.4.7活动清单表活动清单表如表4-7所示。表4-7活动清单表序号名称数据类型是否主键说明1idchar是财务类别id2uidint用户id3contentvarchar内容4statustinyint状态5created_atdatetime创建时间6updated_atdatetime更新时间4.4.8个人中心表个人中心单表如4-8所示。表4-8个人中心表序号名称数据类型是否主键说明1idchar是主键id2uidint用户id3is_task_notifytinyint待办任务通知4is_matter_notifytinyint提醒事项通知5created_atdatetime创建时间6updated_atdatetime更新时间4.4.9用户表用户表如表4-9所示。表4-9用户表序号名称数据类型是否主键说明1idchar是主键id2uidint用户id3providervarchar账号来源4login_namevarchar账号5usernamevarchar用户名6passwordvarchar密码7tokenvarchar密牌8avatar_urlvarchar头像9locationvarchar所在地10emailvarchar邮箱11ip_addrdatetimeIp地址12roletinyint角色13created_atdatetime创建时间14updated_atdatetime更新时间

5系统实现5.1登录系统该系统暂时不开放注册功能，用户第一次登录点击‘使用Github登录’快捷登录，初始密码为123456，登入系统后可以重置账号密码。若已有账号，直接输入账号（userName）密码（passWord）和验证码，鉴权验证通过后，成功登入到TomatoWork个人事务管理系统。图5-1登录页面图TomatoWork个人事务管理系统首页如图5-2所示。左侧是一个可伸缩式的菜单，涵括了该系统所有功能的入口按钮。上栏是用户信息展示栏，不仅可以选择全屏显示该系统，还可以查看系统消息，个人中心，修改账号信息以及项目的仓库地址。右侧内容区域主要有今日支出、今日待办、活动清单、提醒事项、系统参数、我的消息等功能块的概览。下侧以图表形式展示近一周的资金流动情况。图5-2系统首页图5.2提醒事项模块提醒事项可以按照用户设置的提醒时间，到规定的时间时，准时地向用户绑定的个人邮箱内发送提醒事项的邮件。用户仅需填写提醒事项的提醒时间和内容，便可迅速建立一条记录，默认状态为‘未提醒’，当用户收到邮件提醒后，系统会将状态自动置变为‘已提醒’。如下图5-3所示为准：图5-3提醒事项模块图5.3活动列表模块活动清单，提供了系统已登录用户可以将个人近期的生活工作安排细分为多个小事件，新建的活动默认为‘进行中’状态，已完成活动需用户的进行确认完成的操作。用户可以对活动清单表格数据进行编辑，以时间为条件进行查找，以及活动清单的单个删除或多个删除的操作。如图5-4所示：图5-4活动清单模块图5.4今日待办模块今日待办默认显示今日待办事项，展示顺序以随着优先级别越高越靠前，每件待办事务总共有四个状态：‘待作业’、‘作业中’、‘已完成’、‘未完成’，今日待办事务默认为‘待作业’状态。用户可以根据个人对待办事务的完成情况进行状态的更新操作。图5-5今日待办模块图改。除此之外，还设置了‘前一天’、‘后一天’快捷按钮可以迅速查看昨天和明天的事务进展情况，方便用户更好的安排个人时间，推进事情完成。改模块还查询特定日期的个人事务安排及完成情况。如图5-5所示5.5财务管理模块这部分包含两个子菜单，分别是创建类别、资金流动。资金流动需要按照财务类型进行录入。创建类别以‘收入’、‘支出’为依据对财务管理进行财务类别的定义和声名。比如：工资—收入、餐饮—支出。如图5-6所示：图5-6创建类别模块图根据个人真实情况对于财务花销情况进行记录的创建操作。同时这个模块支持图5-7财务管理模块图按照财务类型、收支类别、备注、日期为条件进行精准查找。收入、支出、实际收入等数据也可以被直观的返回给用户，方便用户对于个人的财务有更好的支配安排。如上图5-7所示。5.6我的备忘模块这部分包含两个子菜单，分别是备忘录列表，备忘录创建。备忘录列表以卡片的形式展示，用户可以对任一备忘录进行修改及删除操作，如图5-8所示：图5-8备忘录列表图备忘录创建本系统为用户提供了markdown、富文本两种书写方式。除了普通文图5-9备忘录创建图本外，还支持插入图片格式、音乐格式、短视频格式、命令代码、a标签链接、表格、emoji表情等。并且最终查看备忘录时文本格式不发生改变。如上图5-9所示为准。5.7个人中心模块这部分包含四个子菜单，分别是个人中心、消息中心、消息通知、账号设置。个人中心允许用户去查看用户个人的邮箱、简介、注册时间、地区、头像等信息。消息中心内用户可以查看系统消息，系统还提供给用户设置全部已读、标记已读的功能。消息通知中可以设置点半任务、提醒事项是否同意使用邮箱接收提醒。账号设置可以修改账户信息、登录密码等。个人中心模块如下图5-10所示为准：图5-10个人中心模块图

6系统测试平台上线之前，为保证运行的质量，全面且严格的测试流程是不能缺少的。软件的测试过程中可以找到开发中未测试出来的问题，快速修复，保证最终上线软件的正确性、安全性、完整性，为软件的上线质量也提供了强有力的保障。6.1功能测试6.1.1测试环境操作系统：Windows10数据库：MySQL开发软件：VisualStudioCode浏览器：Chrome6.1.2登录测试用户登录系统的功能测试，测试的流程及结果如下表6-1所示为准。表6-1登录功能测试表测试成功登录操作步骤首先进入本系统登录的页面；在输入框中填入正确的账号（Bairuina）密码（***）验证码；鼠标右击登录，登录成功进入本系统首页。执行结果登陆本系统成功，显示本系统的首页。结果图示测试失败登录操作步骤首先进入本系统登录的页面；在输入框中填入不正确的账号或密码或验证码；鼠标右击登录。执行结果登陆失败示系错误信息。结果图示6.1.3设置提醒事项测试设置提醒事项功能测试，测试用例如表6-2所示。表6-2设置提醒事项功能测试表测试新增提醒事项操作步骤进入提醒事项菜单后，点击添新增按钮，输入正确的提醒时间、提醒内容。执行结果系统显示“新增成功！”数据库中也新增提醒事项。符合设定的提醒时间后，邮箱会收到提醒邮件。结果图示测试删除提醒事项操作步骤进入提醒事项菜单后，点击需要删除的提醒事项后的‘删除’按钮。执行结果系统显示“删除成功！”，在数据库中看到已经删除。结果图示测试编辑提醒事项操作步骤进入提醒事项菜单后，点击提醒事项的‘编辑’按钮，填入想要修改的信息。执行结果系统0示“编辑成功！”，数据库中显示修改完成。结果图示6.1.4设置备忘录测试设置备忘录功能测试，测试过程及结果如下表6-3所示为准。表6-3设置备忘录功能测试表测试新增备忘录操作步骤进入备忘录创建菜单后，输入正确的备忘录的标题、备忘录的内容，点击‘提交’按钮。执行结果系统显示“新增成功！”数据库中也新增一条备忘录数据。结果图示测试删除备忘录操作步骤进入备忘录列表菜单后，点击备忘录的删除按钮。执行结果该系统会弹出“删除成功！”，同时在数据库中看到已经删除。结果图示测试编辑备忘录操作步骤进入备忘录菜单后，点击备忘录的编辑按钮，填入想要修改的信息。执行结果系统显示“更新成功！”，数据库中显示修改完成。结果图示6.2测试结果该测试从功能和性能两个方面出发，基本功能能够正常响应。另外对兼容性也做了简单测试，系统页面基本实现了对各主流浏览器的兼容。功能测试主要对日常使用频率较高的模块进行了黑盒测试，通过对路径、语句的覆盖，满足功能使用需求。性能测试大部分是针对于基本的日常服务压力进行简单的测试，基本满足性能需求。但在测试的过程中，因为时间原因，没有使用业界主流的自动化的测试工具，导致对系统功能、性能方面的测试效率低，可能存在些许误差。

7结论\t"/report/21c158ac-709a-4d81-ac82-4a51094d698d/html/resultFrame"本次毕业设计以现有的个人事务管理系统为研究对象，研究学习了必要的技术和具体的实现方法，TomatoWork个人事务管理系统的架构设计采用前后端分离模式：前端软件的开发使用了TypeScript、React.js、AntDesign等技术,帮助用户在提醒事项、活动清单、今日待办、财务管理、我的备忘等日常活动进行更高效的管理。后端软件开发使用了Egg.js、MySQL数据库等技术,实现了对用户信息、事件活动、数据整理等功能。在本系统流程设计与研发进展中，经历了一些困难挫折，学到了很多知识，最后达到了较完美的实现。由于之前将大部分的精力都用在了实习、找工作的准备上，对于一些理论知识了解的较少，在系统完成开发后，从图书馆和互联网上查阅了大量的相关材料，最终较好地实现了个人事务管理系统的预期功能和使用效果。

参考文献俞宁云,宋柏宏,陈吉.一种基于交互式网络的个人管理系统,CN110298636A[P].2019.张丰麒,王飞.ReactJS的新特性在Web开发中的应用[J].移动信息,2015,000(010):00071-00072.贺适.软件开发中数据库设计理论实践研究[J].电子测试,2020,No.437(08):67-68.吴家皋,吴敏,周剑,刘林峰.基于E-R图的工程教育专业认证课程达成度评价方法研究[J].计算机教育