基于VUE的道一云公司日志系统的设计与实现.docxVIP

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

摘要

“工作日志”作为绝大部分企业、机构所要求的一项任务，其重要性不言而喻，其目的和作用主要体现在三方面：提醒作用、跟踪作用和证明作用。本系统旨在提供高效率、功能强大的工作日志写作模式给用户，加强用户在进行记录日志时的相关体验和提高效率，同时让管理层用户能方便和高效的查阅、批注工作日志。

针对传统“工作日志”的记录所耗费的时间、简陋的记录方式和低效率的查阅，结合公司生产环境，为保障开发效率，本系统是采用了当下前端最热门的js框架Vue.js+HTML5+SASS及其他vue.js相关的技术栈开发出的一款风格简洁、功能强大的web单页面应用（SPA）。大大提高了记录者记录工作日志的速度并丰富了记录方式，同时提高了查阅的效率。Web单页面应用相对传统的桌面端应用而言，具有更加良好的系统兼容性和更低的开发成本；相对传统的web网页而言，单页面应用能实现全使用过程中无刷新的良好体验。

截止目前，本系统已经在公司内部进行使用，其简洁的风格、强大的功能大大提高了同事们记录和查阅工作日志的效率，受到大家的一致好评。

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

目录

TOC\o1-3\h\z\u第一章绪论 1

1.1系统开发的背景及意义 1

1.1.1系统开发的背景 1

1.1.2系统开发的意义 1

1.2国内外研究现状 2

第二章系统需求分析 1

2.1系统功能需求分析 1

2.2可行性分析 1

2.3UM系统建模 2

第三章系统设计 4

3.1系统总体架构设计 4

3.1.1组件设计 4

3.1.2后台接口整理归类 4

3.1.3路由Router的设计 9

3.2主要功能模块设计 10

3.2.1导航菜单组件 10

3.2.2筛选栏组件 10

3.2.3日志列表组件 10

3.2.4日志详情组件 11

3.2.5统计列表组件 11

3.2.6统计详情组件 11

3.2.7统计历史列表组件 11

3.2.8统计规则列表组件 12

3.2.9统计规则设置组件 12

3.2.10新建、编辑日志组件 12

3.3Vuex状态管理模式的设计 12

3.4应用国际化设计 13

第四章系统实现 14

4.1导航菜单组件 14

4.2筛选栏组件 14

4.3日志列表组件 15

4.4日志详情组件 16

4.5新建、编辑日志组件 17

第五章系统测试 20

5.1测试目的和意义 20

5.2测试方法 20

5.2.1代码规范检测 20

5.2.2黑盒测试 20

结论 23

参考文献 24

致谢 25

第一章绪论

1.1系统开发的背景及意义

1.1.1系统开发的背景

目前大部分企业公司、机构或多或少都有通过工作日志等诸如此类的方式来让员工对自己的日常工作进行记录、总结和汇报，而企业管理者根据工作日志所记录的内容，了解员工所遇到的问题，对重要的工作进行跟踪。作为一项使用频繁且使用群众非常庞大的制度，如果在写工作日志的过程中因为写作模式过于不便导致耗费大量的时间，则会使工作者产生排斥心理，而如果查阅工作日志不方便、费时且批注繁琐，则会极大的浪费管理者的时间而又无法得到实质性的情况了解。

1.1.2系统开发的意义

工作者每天结束工作后，如果不对当天工作内容进行总结、回顾，过后就很容易遗忘当天的工作内容。而工作日志恰好可以解决这个问题，每天总结、分析工作内容并记录到工作日志中，并在这个过程中回顾工作中遇到的问题和相应的解决思路。坚持每天写工作日志，能逐渐提高自己的工作效率[1]。

工作日志的优点非常显著，但如果使用不当，则会是一项累赘的制度。常见的工作日志写作模式有以下几种：

手写：员工手写在本上，每天上交和下发，主管通过手动翻阅，最原始的一种方式；

邮件：员工在规定的时间写邮件发到主管邮箱，主管在一小时内甚至受到几百封邮件，并且与外部邮件混杂，每一条都看完并回复可能需要几小时的时间，效率低，在企业内部不公开；

Excel表格：员工记流水账一样把日程列在表格里，并不做未来规划和经验记载，主管想要沟通的话需要当面/会议/电话沟通，沟通成本高；

Word文档：员工通过各种方式发送给主管，主管需要在电脑上一个一个点开，然后记录问题通过其他形式回复，效率低，沟通成本高[2]。

假设一个公司使用诸如以上低效率的手段来执行工作日志的制度，一个员工每天花费在工作日志上的时间是半小时，管理层阅读每一份工