基于VUE的道一云公司日志系统的设计

基于VUE的道一云公司日志系统的设计

摘要：“工作日志”作为绝大部分企业、机构所要求的一项任务，其重要性不言而喻，其目的和作用主要体现在三方面：提醒作用、跟踪作用和证明作用。本系统旨在提供高效率、功能强大的工作日志写作模式给用户，加强用户在进行记录日志时的相关体验和提高效率，同时让管理层用户能方便和高效的查阅、批注工作日志。
针对传统“工作日志”的记录所耗费的时间、简陋的记录方式和低效率的查阅，结合公司生产环境，为保障开发效率，本系统是采用了当下前端最热门的js框架Vue.js+HTML5+SASS及其他vue.js相关的技术栈开发出的一款风格简洁、功能强大的web单页面应用（SPA）。大大提高了记录者记录工作日志的速度并丰富了记录方式，同时提高了查阅的效率。Web单页面应用相对传统的桌面端应用而言，具有更加良好的系统兼容性和更低的开发成本；相对传统的web网页而言，单页面应用能实现全使用过程中无刷新的良好体验。
截止目前，本系统已经在公司内部进行使用，其简洁的风格、强大的功能大大提高了同事们记录和查阅工作日志的效率，受到大家的一致好评。

关键词：日志系统，前端开发，设计，VUE

Design of Do1 Company’s Diary System Based on VUE

Abstract：As a task required by most enterprises and organizations, “work log” is self-evidently important. Its purpose and role are mainly reflected in three aspects: reminder role, tracking role and proof role. This system aims to provide users with a highly efficient and powerful work log writing mode, enhance the user’s relevant experience when logging and improve efficiency, and at the same time allow management users to easily and efficiently check and annotate work logs.
In response to the time spent in the traditional “work log” recording, the crude recording method and the inefficient search, combined with the company’s production environment, in order to ensure the development efficiency, this system uses the most popular front-end js framework Vue.js + HTML5 + SASS and other vue.js related technology stack developed a simple, powerful web single page application (SPA). Greatly improve the speed of the recorder to record the work log and enrich the recording method, and at the same time improve the efficiency of consulting. Compared with traditional desktop applications, Web single-page applications have better system compatibility and lower development costs. Compared with traditional web pages, single-page applications can achieve a good experience without refresh during the entire use process.
As of now, this system has been used within the company. Its concise style and powerful functions have greatly improved the efficiency of colleagues in recording and consulting work logs, and have been well received by everyone.

Key words: Diary System, Front-end development, Design, VUE

目 录

第1章 绪 论 1
1.1 系统开发的背景及意义 1
1.1.1 系统开发的背景 1
1.1.2系统开发的意义 1
1.2 国内外研究现状 2
1.3 本课题研究的主要内容 3
第2章 系统需求分析 5
2.1 系统功能需求分析 5
2.2 可行性分析 5
2.3 UML系统 建模 6
第3章 系统设计 8
3.1 系统总体架构设计 8
3.1.1 组件设计 8
3.1.2 后台接口整理归类 8
3.1.3 路由Router的设计 13
3.2 主要功能模块设计 14
3.2.1 导航菜单组件 14
3.2.2 筛选栏组件 15
3.2.3 日志列表组件 15
3.2.4 日志详情组件 15
3.2.5 统计列表组件 16
3.2.6 统计详情组件 16
3.2.7 统计历史列表组件 16
3.2.8 统计规则列表组件 16
3.2.9 统计规则设置组件 16
3.2.10 新建、编辑日志组件 17
3.3 Vuex状态管理模式的设计 17
3.4 应用国际化设计 18
第4章 系统实现 19
4.1 导航菜单组件 19
4.2 筛选栏组件 19
4.3 日志列表组件 20
4.4 日志详情组件 21
4.5 新建、编辑日志组件 23
第5章 系统测试 25
5.1 测试目的和意义 25
5.2 测试方法 25
5.2.1代码规范检测 25
5.2.2黑盒测试 25
第6章 结束语 28
6.1 全文总结 28
6.2 课题展望 28
参考文献 29
致 谢 30

第1章 绪 论

1.1 系统开发的背景及意义
1.1.1 系统开发的背景
目前大部分企业公司、机构或多或少都有通过工作日志等诸如此类的方式来让员工对自己的日常工作进行记录、总结和汇报，而企业管理者根据工作日志所记录的内容，了解员工所遇到的问题，对重要的工作进行跟踪。作为一项使用频繁且使用群众非常庞大的制度，如果在写工作日志的过程中因为写作模式过于不便导致耗费大量的时间，则会使工作者产生排斥心理，而如果查阅工作日志不方便、费时且批注繁琐，则会极大的浪费管理者的时间而又无法得到实质性的情况了解。因此道一云公司开发了一款风格简洁、功能强大的工作日志应用，旨在提供高效率、功能强大的工作日志写作模式给工作者，让工作者能减少花在工作日志上的时间，同时让管理层能方便高效的查阅、批注工作日志。
1.1.2系统开发的意义
工作者每天结束工作后，如果不对当天工作内容进行总结、回顾，过后就很容易遗忘当天的工作内容。而工作日志恰好可以解决这个问题，每天总结、分析工作内容并记录到工作日志中，并在这个过程中回顾工作中遇到的问题和相应的解决思路。坚持每天写工作日志，能逐渐提高自己的工作效率。
工作日志的优点非常显著，但如果使用不当，则会是一项累赘的制度。常见的工作日志写作模式有以下几种：
手写：员工手写在本上，每天上交和下发，主管通过手动翻阅，最原始的一种方式；
邮件：员工在规定的时间写邮件发到主管邮箱，主管在一小时内甚至受到几百封邮件，并且与外部邮件混杂，每一条都看完并回复可能需要几小时的时间，效率低，在企业内部不公开；
Excel表格：员工记流水账一样把日程列在表格里，并不做未来规划和经验记载，主管想要沟通的话需要当面/会议/电话沟通，沟通成本高；
Word文档：员工通过各种方式发送给主管，主管需要在电脑上一个一个点开，然后记录问题通过其他形式回复，效率低，沟通成本高。
假设一个公司使用诸如以上低效率的手段来执行工作日志的制度，一个员工每天花费在工作日志上的时间是半小时，管理层阅读每一份工作日志所需的时间是10分钟，每周加起来的时间就是200分钟，每个月800分钟，一年工作10个月的话就是8000分钟。另外如果双方针对工作日志内容想要进一步沟通，就又产生少则10分钟多则1小时的双方沟通时间。大致算上去，这项制度每年至少产生10000分钟的时间浪费，雇主为这些时间支付了工资，却得不到良好的效果。而如果能开发一款实用、功能强大的工作日志应用，可以使得员工和管理层都能轻松、便捷地记录工作日志，并因此能直接减少这项制度产生的时间成本，也就相当于间接的产生了经济效益。
总而言之，道一云公司开发工作日志应用具有以下几点意义：
1）节约员工和管理层的时间成本，让双方都能将更多的时间投入到工作中。
2）提高员工和管理层进行工作日志写作和查阅时的体验，使之