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

I目录第1章绪论 11.1系统开发的背景及意义 11.1.1系统开发的背景 11.1.2系统开发的意义 11.2国内外研究现状 21.3本课题研究的主要内容 3第2章系统需求分析 52.1系统功能需求分析 52.2可行性分析 52.3UML系统建模 6第3章系统设计 83.1系统总体架构设计 83.1.1组件设计 83.1.2后台接口整理归类 83.1.3路由Router的设计 133.2主要功能模块设计 143.2.1导航菜单组件 143.2.2筛选栏组件 153.2.3日志列表组件 153.2.4日志详情组件 153.2.5统计列表组件 163.2.6统计详情组件 163.2.7统计历史列表组件 163.2.8统计规则列表组件 163.2.9统计规则设置组件 163.2.10新建、编辑日志组件 173.3Vuex状态管理模式的设计 173.4应用国际化设计 18第4章系统实现 194.1导航菜单组件 194.2筛选栏组件 194.3日志列表组件 204.4日志详情组件 214.5新建、编辑日志组件 23第5章系统测试 255.1测试目的和意义 255.2测试方法 255.2.1代码规范检测 255.2.2黑盒测试 25第6章结束语 286.1全文总结 286.2课题展望 28参考文献 29致谢 30PAGEPAGE4第1章绪论1.1系统开发的背景及意义1.1.1系统开发的背景目前大部分企业公司、机构或多或少都有通过工作日志等诸如此类的方式来让员工对自己的日常工作进行记录、总结和汇报，而企业管理者根据工作日志所记录的内容，了解员工所遇到的问题，对重要的工作进行跟踪。作为一项使用频繁且使用群众非常庞大的制度，如果在写工作日志的过程中因为写作模式过于不便导致耗费大量的时间，则会使工作者产生排斥心理，而如果查阅工作日志不方便、费时且批注繁琐，则会极大的浪费管理者的时间而又无法得到实质性的情况了解。因此道一云公司开发了一款风格简洁、功能强大的工作日志应用，旨在提供高效率、功能强大的工作日志写作模式给工作者，让工作者能减少花在工作日志上的时间，同时让管理层能方便高效的查阅、批注工作日志。1.1.2系统开发的意义工作者每天结束工作后，如果不对当天工作内容进行总结、回顾，过后就很容易遗忘当天的工作内容。而工作日志恰好可以解决这个问题，每天总结、分析工作内容并记录到工作日志中，并在这个过程中回顾工作中遇到的问题和相应的解决思路。坚持每天写工作日志，能逐渐提高自己的工作效率。工作日志的优点非常显著，但如果使用不当，则会是一项累赘的制度。常见的工作日志写作模式有以下几种：手写：员工手写在本上，每天上交和下发，主管通过手动翻阅，最原始的一种方式；邮件：员工在规定的时间写邮件发到主管邮箱，主管在一小时内甚至受到几百封邮件，并且与外部邮件混杂，每一条都看完并回复可能需要几小时的时间，效率低，在企业内部不公开；Excel表格：员工记流水账一样把日程列在表格里，并不做未来规划和经验记载，主管想要沟通的话需要当面/会议/电话沟通，沟通成本高；Word文档：员工通过各种方式发送给主管，主管需要在电脑上一个一个点开，然后记录问题通过其他形式回复，效率低，沟通成本高。假设一个公司使用诸如以上低效率的手段来执行工作日志的制度，一个员工每天花费在工作日志上的时间是半小时，管理层阅读每一份工作日志所需的时间是10分钟，每周加起来的时间就是200分钟，每个月800分钟，一年工作10个月的话就是8000分钟。另外如果双方针对工作日志内容想要进一步沟通，就又产生少则10分钟多则1小时的双方沟通时间。大致算上去，这项制度每年至少产生10000分钟的时间浪费，雇主为这些时间支付了工资，却得不到良好的效果。而如果能开发一款实用、功能强大的工作日志应用，可以使得员工和管理层都能轻松、便捷地记录工作日志，并因此能直接减少这项制度产生的时间成本，也就相当于间接的产生了经济效益。总而言之，道一云公司开发工作日志应用具有以下几点意义：1）节约员工和管理层的时间成本，让双方都能将更多的时间投入到工作中。2）提高员工和管理层进行工作日志写作和查阅时的体验，使之能更积极的执行工作日志的制度。3）使员工能便捷、省时的阅览自己的工作日志，达到“三省吾身”的效果；使管理层能高效得从工作日志中汲取到想要了解的情况。1.2国内外研究现状十年前，国内外前端领域jQuery库一家独大，可以说是所有前端开发者的必备技能，甚至在这前后端尚未进行分离开发的年代，连后台开发者都需要能读懂jQuery代码乃至能进行基本的jQuery代码编写。然而，jQuery虽然强大，但是jQuery会频繁的操作DOM，当DOM操作影响到布局的时候，浏览器的渲染引擎就要重新计算然后渲染，越多的DOM操作就会导致越多的计算，从而影响页面性能。于是乎为了解决这个问题，有着“前端三大框架”之称的Angular、React和Vue应运而生。Angular和React分别是美国互联网巨头公司雅虎和Facebook的开源项目，也是目前世界范围内最火热的前端框架（库），而Vue则是中国人尤雨溪独立开发的。相较于前两者，vue的入门难度更低，学习曲线平滑，加之作者是中国人，因此也使得Vue在国内非常热门，被大量互联网公司如腾讯、百度和阿里等中国互联网巨头公司所使用，确保了其质量水平。综上所述，道一云公司的工作日志前端开发采用了Vue作为开发框架，确保了开发效率和底层的稳定性。1.3本课题研究的主要内容工作日志应用是基于javascript库Vue.js进行开发的，因此需要对于Vue的技术栈有一个全面的掌握。Vue常见的技术栈为：Vue.js+vue-cli+vue-router+axios+webpack+vuex+sass+es6。以下是对工作日志的关键技术——vue技术栈的详细说明：VueCLI:一个基于Vue.js框架进行快速开发的完整系统，其目的在于为Vue生态中的工具基础定下标准。它能够使各种构建工具在基于默认配置下实现平稳衔接，可以让开发者专注在开发应用上，而不必花大量时间去考虑配置的问题。与此同时，它也十分灵活的允许每个工具进行各自的配置调整。Vuex：专门为Vue.js框架开发的状态管理模式。Vuex使用集中式存储，对项目的所有组件的状态进行管理，为了使状态发生的状态可预测，它制定了许多相应的规则来进行约束。在本系统中，有大量的数据需要在不同组件中进行传递和使用，如果仅靠Vue的父子组件传值，无论是传参的过程，还是管理和维护这些数据，都会变得非常棘手。因此本系统使用了Vuex作为状态管理工具。Axios：一个基于promise的HTTP库，是vue.js官方推荐的HTTP库。它不仅能在浏览器中请求后端数据，在node.js也同样适用。工作日志应用中将会使用axios与后台进行大量的数据交互。Webpack：一个现代JavaScript应用的静态模块打包器。它会通过递归地构建一个依赖关系图来处理应用程序，其包含应用程序必须的各个模块，然后将这些模块打包成一定数量的

bundle。在该项目中，vue-cli3.0已经内嵌了webpack的基本配置，无需本人进行额外的配置。Sass：一款CSS扩展语言，它基于CSS语法增加了大量便利的写法和拓展，这些拓展大大节省了开发者的开发时间，并使css的管理和维护更加简单，令CSS变得更加强大与优雅。ES6：全称ECMAScript6.0，是JavaScript语言的新一代标准，于2015年6月正式发布。本次开发的应用将会大量使用es6的语法。PAGE30系统需求分析本章对日志系统进行了需求分析，并且进行了系统的功能设计。根据日志系统的需求，日志系统的功能的设计主要包括日志列表、新建日志、日志详情、统计和筛选等几个模块。另外，本章从管理员用户和普通用户两个用户角色的角度对系统进行了UML建模，给出了各自的功能用例关系图，并作了详细说明。2.1系统功能需求分析道一云公司日志系统的需求如下：作为日志系统，“查看日志”和“编写日志”是系统的两大核心。首先围绕“查看日志”，该系统需要让用户能够一目了然的了解日志数量、日志记录信息和日志详细信息；当日志数量过于庞大时，又要让用户能够快速精准地定位到目标日志；当使用者身份为公司的管理层时，需要查看的不仅仅是日志，还需要查看员工的提交情况并作出相应的员工补交提醒；在查看员工的日志时，往往需要作出评论或者评分，因此还需要一个评论和评分的功能模块。第二点“编写日志”，首先系统需要有最基础的编写日志功能，在这个基础上，继续强化。比如提供图片上传、附件上传来记录文本所不能记录的内容；增加富文本模式以记录图文并茂的内容；很多时候日志的内容可能相似的，所以需要复制日志的功能来提高编写效率；添加汇总日志的操作，可以让员工更全面的向管理层汇报工作；为了让员工更方便的补交日志，需要提交“补交日志”入口；每位员工所属的管理者有所不同，想汇报的对象也不必是管理者，因此还需要提供负责人、相关人的选择。2.2可行性分析根据道一云公司日志系统的要求，日志系统的功能模块主要包括日志列表、新建日志、日志详情、统计和筛选等几个模块，系统的思维导图如图2-1所示：图2-1系统结构的思维导图日志列表包含“已提交”、“待阅”、“相关日志”和“草稿箱”四种类型，分别展示不同类型的日志，根据对应类型提供“编辑”、“复制”和“删除”等操作。新建日志包含“补交日志”、“汇总日志”、“图片上传”、“附近上传”、“添加负责人、相关人”和“富文本模式切换”等功能点，其中为了方便用户选人，增加“选择上次人员”的功能点。日志详情模块对日志进行了详细的信息展示，同时加入评论模块让阅读人员之间能互相交流，翻页功能的实现是为了方便用户持续浏览多篇日志。统计模块分为“日志统计”和“统计规则”两个小模块，其中统计规则是为了让用户自定义统计的规则，如提醒补交时间、统计的目标人员等。筛选模块存在于各个日志列表模块中，可对日志进行多种条件的筛选，能快速定位到目标日志。。权限管理主要是对角色进行管理，即具有一定权限的用户可以新建一个角色并给角色权限以及可以删除所创建的角色。包括的功能有：增加角色、删除角色和角色权限。设备管理员、行政人员、教师和维修人员具有权限管理的功能权限。2.3UML系统建模1.管理员用户功能用例关系图管理员用户可编辑本人和所负责人的日志，可以查看日志、新增日志、筛选日志，可以对所负责人的日志评分，可以评论日志，可以查看日志统计和设置统计规则。管理员用户的功能用例关系图如图2-2所示：图2-2管理员用户的功能用例关系图2.普通用户功能用例关系图与管理员用户有所不同的是，普通用户无法查看统计日志模块。普通用户功能用例关系图如图2-3所示：图2-3普通用户的功能用例关系图

第3章系统设计3.1系统总体架构设计3.1.1组件设计组件化开发是Vue.js最强大的功能之一，通过封装可重用的代码块，大大提高了前端多人协同开发的便利性，可反复使用的组件极大的提高了开发效率，此外，还能提升整个项目的可维护性。Vue组件一般可分为三大类：页面级别的组件。在业务项目中可复用的组件。与业务无关联的独立组件。道一云公司内部提供了quickwork独立组件库，内置大量常用的、风格统一的独立组件。工作日志系统基于详细的组件分类进行开发，开发初期会先划分各个组件然后逐一进行开发，组件开发完成后再“组装”成整个工作日志系统。组件的划分会决定整个开发过程的效率，下文将会着重介绍本人设计开发的前两类组件。3.1.2后台接口整理归类在后端为主的MVC时代，如图3-1所示，前后端还未分离，前端工作量较少，只需要写好静态页面，调一下ajax接口，剩下的路由、渲染之类的工作都交由后台进行。这样做导致代码耦合性非常高，后期难以维护，而且后台为前端页面套数据时容易出错，还需要与前端来回沟通确认，提高沟通成本。图3-1后端mvc模式示意图针对以上种种问题，前后端分离的“基于Ajax的SPA时代”应运而生，如图3-2所示：图3-2SAP单页面应用结构示意图实现前后端分离后，前后端高度解耦，可维护性大大提高。彼此可以专攻各自的领域：后端工程师只需要负责Model层，如业务处理和数据处理等；前端则负责view和Controller层。前后端之间的关键协作点便是API接口，因此需要熟悉掌握各个接口的业务信息和参数含义、参数类型。下面主要是对接口进行整理分类并简单介绍。日志展示类该类别的接口主要用于展示日志相关信息，如图3-3所示接口，可用于展示所有类型的日志列表、搜索、高级筛选等多个业务逻辑，图中详细的介绍了各参数的作用。图3-3日志列表接口参数示意图日志编辑类该类别的接口主要用于修改日志相关信息，如图3-4所示接口，可用于新增、编辑日志，图中详细的介绍了各参数的作用。图3-4日志新增及编辑接口参数示意图日志统计类该类别包含统计模块（不含统计规则）的所有接口，其中获取统计详情的接口如图3-5所示：图3-5日志统计详情接口参数示意图日志统计规则类该类别包含日志统计规则的所有接口，其中提交规则设置的接口如图3-6所示：图3-6保存规则设置接口参数示意图3.1.3路由Router的设计路由，可解释为URL到函数的映射。最开始的路由概念是出现在后端，每次浏览器切换url时，都会向后台服务器发送请求，然后服务器根据浏览器发送过来的请求在服务器端拼接好html页面返回给浏览器。这种方式会给服务器造成较大的压力，同时加载页面时容易出现短暂的空白页面，用户体验不大友好。正式由于后端路由的不足，前端路由得以诞生。简单的说，前端路由就是一个前端不同页面之间的状态管理器，能够直接通过前端技术进行多页面的切换而无需向后台发送请求。前端路由最显而易见的特点就是，页面无刷新，这也是上文所说的SPA单页面应用得以诞生的基础。前端路由主要由两种模式实现：hash和history，本系统所使用的Vue框架有自己官方的路由管理器：VueRouter。它是基于Vue.js进行深度集成，同时包含hash和history两种实现方式，可由用户自己配置。以下主要介绍本系统所使用的hash模式。图3-7hash模式流程示意图判断是否使用hash模式的最简单的方法就是，查看URL中是否含有#号，这是由于hash模式的实现原理就是监听URL中#后面的hash值的更改来触发hashChange事件，进行一系列DOM显示、隐藏操作，从而实现路由的功能。hash模式的优点在于兼容性更好和不需要对服务器做改动。下面介绍本系统中的vueRouter的路由地址设计，仅有四个模块。首页路由模块该模块包含了本系统中大部分路由，但其实每个路由都是指向同一个大型组件——首页组件，因此此处原本是未考虑设计多个路由的，仅仅是切换导航栏的tab时改变主题内容。但是由于公司负责本人的导师建议，应该从业务逻辑上进行路由名称的定义，用户才可以直接通过路由判断页面状态，也能通过路由地址直接进入到对应的页面。已提交：'/diary/submitted'待阅：'/diary/toBeRead'统计：'/diary/statistics'相关日志：'/diary/relatedDiary'草稿箱：'/diary/draft'新增页路由顾名思义，该路由是跳转至新增日志页，由于新增页面完全改变，此处有明显的跳转趋势，但是由于本系统是单页面应用，不存在实际上的跳转。路由名称：新增日志；路由地址：'/diary/addDiary'统计规则列表页路由该路由跳转至统计规则列表页。路由名称：统计规则列表；路由地址：'/diary/ruleList'统计历史列表路由该路由跳转至统计历史页。路由名称：统计历史列表；路由地址：'/diary/statisticHistory’3.2主要功能模块设计3.2.1导航菜单组件组件描述：固定于工作日志最顶部位置的导航菜单，含“已提交”、“待阅”、“统计”、“相关日志”和“草稿箱”及“新建”按钮，提供多处功能点的入口，涉及到非常重要的状态判定。3.2.2筛选栏组件组件描述：含页面标题、筛选功能，筛选功能常态下只有日期和输入文字作为筛选条件，高级筛选功能则提供复杂条件的筛选。该组件会存在于“已提交”、“待阅”、“相关日志”和“草稿箱”四个路由下的列表页上方，由上文的导航菜单组件提供状态指引。当处于“待阅”路由时，页面标题右边将会出现“一键标记为已阅”的按钮；“相关日志”路由下，页面标题将会替换为一个tab选项，提供子级的“我负责的”和“我相关的”的页面切换。3.2.3日志列表组件组件描述：展示“已提交”、“待阅”、“相关日志”和“草稿箱”路由下的每条日志的概览信息：日志标题。日志标题首字符生产的圆形图标并置于最左端，方便快速识别日志的类型。仅展示最多两行的日志详情，其中部分占幅较长或无法概览的内容，将会智能替换成对应的提示语。如网址等幅度较长的字符串，会替换为【网页链接】，视频、图片将会替换成【视频】、【图片】。日志创建时间，展示年、月、日、时、分等单位，若处于当前年则隐藏年、当前日则只显示时和分。操作按钮，如“复制”、“编辑”和“删除”，会根据权限而显示对应的按钮。日志默认展示20条，可防止接口一次性请求过多数据而对服务器和客户端造成过多压力。当日志数量超出时，使用滚动加载组件请求接口，每次请求返回新的20条日志。3.2.4日志详情组件组件描述：点击日志列表中的日志信息，弹出日志详情弹窗页。该页最多包含日志标题、创建时间、创建人、日志类型、日志内容、图片、附件、评分、负责人、操作按钮（评分、编辑、删除、复制、上一条、下一条、关闭）以及评论模块，具体展示情况视日志类型及权限而定。3.2.5统计列表组件组件描述：根据统计规则所配置，以日、周、月三种集合之一展示相应时间段内的日志提交情况。具体信息包括统计规则名称、统计时间范围和用圆形进度条展示的提交率、已提交、未提交。3.2.6统计详情组件组件描述：与日志详情组件相似，点击统计以抽屉弹窗弹出。除了统计列表组件中已经展示过的信息以外，还多了一个可切换“未提交”和“已提交”的tab。此处在切换上一条和下一条统计详情的时候需考虑tab选中的状态。如果当前处于“未提交”tab，弹窗底部将会出现一个“一键弹窗未交”的按钮，如果已经点击过，则以后再次打开弹窗时按钮会变为不可点击状态。3.2.7统计历史列表组件组件描述：使用表格展示各个统计类型的每次统计概览，包含统计时间、提交比例、已提交和未提交。默认显示20条，超出时使用滚动加载组件加载，点击表格每一行均可打开统计详情弹窗。3.2.8统计规则列表组件组件描述：与统计列表组件相似，主要展示规则名称、提交频率、统计对象、状态以及设置，点击每一条规则会打开详细的规则设置。3.2.9统计规则设置组件组件描述：用于设置统计规则，有大量的表单数据，不同数据之间互有关联，详细的业务逻辑会在下文的系统实现章节介绍。3.2.10新建、编辑日志组件组件描述：用于编写日志的组件，是本系统中工作量最为庞大、最困难的一个组件，涉及到的业务逻辑非常多。可编辑内容涵盖了以下内容：日志类型，从接口获取日志类型，提取前三个类型以单选框的形式展示，剩下的日志类型通过下拉框选择。选择日志类型后会根据类型的配置加载默认的日志标题、日志内容和选人。日志标题。日志内容，有普通编辑模式和富文本编辑模式。富文本模式可以提供字体段落样式设置、插入图片、视频等多媒体的功能。日志汇总，打开一个可汇总的日志列表的弹窗，点击日志可打开日志详情，点击多选框可选择多篇本人提交的或负责的日志的内容汇总到当前编辑的内容中；若当前非富文本编辑模式，则不可选择由富文本模式编辑生成的日志。图片、附件上传组件。选人组件，分为“负责人选择”和“相关人员选择”，均提供“加载上次”的功能。补交日志，仅在当前为“新增日志”时，点击最顶部的入口，打开“补交日志”弹窗，展示未提交的日志列表，有“忽略”和“补交”两个按钮，点击“忽略”则从列表中删除，点击“补交”则关闭弹窗，并将对应的日志标题、类型、日志内容和选人赋值到编辑框中。并且日志类型和“负责人选人”不可再编辑。操作栏，包含“保存为草稿”和“发布”两个操作。如果是已经发布过的日志，则不可保存为草稿。3.3Vuex状态管理模式的设计在本系统中，将Vuex的modules分为六个模块：“新增日志”、“公共部分”、“日志详情”、“首页”、“规则”和“统计”，各自处理对应模块中的数据传递和改变。3.4应用国际化设计本系统使用了Vue.js的国际化插件VueI18n来实现国际化功能，支持中英双语切换。本项目中整理出所有本地化的中文字段，并使用i18n进行插值，中英文各一套字符模板，如图3-8所示：图3-8国际化模板图第4章系统实现根据上一节的系统设计中的组件化设计，本节给出了其中较为重要和复杂的组件的实现。下面分别是它们实现的主要逻辑和界面效果。4.1导航菜单组件下图4-1是导航菜单的界面图，UI样式较为简单，主要使用flex布局中的justify:space-between即可将tab栏与“新建”按钮放置于两端；但是该组件的逻辑非常重要，决定多个接口的请求和页面的展示内容。图4-1导航菜单组件首先是tab的选中，默认选中“已提交”，在vue的生命钩子函数的created阶段，将会根据页面路由来判断，从而选中相应的tab，同时将公共的至关重要的变量nav_active赋值为对应的值，nav_active表示当前所在的列表页面，默认为0，即“已提交”。点击tab时，首先判断点击的tab是否是当前的tab，如果是则不作回应，以防止没必要的请求，否则通过vuex的actions改变state中储存的nav_active，同时改变请求日志列表接口中的status和type入参。4.2筛选栏组件下图4-2和4-3是筛选栏的界面图，筛选栏的各项可输入的表单控件，都会在nav_active改变，也就是离开了当前路由时进行重置处理。筛选栏左边的日志标题，提供了slot插槽，可在使用筛选栏的时候根据当前页面类型自定义标题。点击中间的按钮组，将会以对应的时间作为参数，立即请求接口进行搜索。右边的input搜索框使用实时搜索、点击回车键和点击清除按钮等三种触发方式。实时搜索的实现原理是，输入内容时触发一个changeInput事件，事件中创建一个定时器setTimeout，0.8秒后触发搜索，若在0.8秒内重新触发changeInput事件，则清除上一个事件中的定时器，否则执行搜索。高级筛选组件是一个业务平台的公共组件，此处是直接引入使用。当使用过高级筛选后，最右边的高级筛选按钮将会变成蓝色，表示页面的内容是经过高级筛选的。图4-2筛选栏组件图4-3筛选栏高级筛选组件4.3日志列表组件 组件如下图4-4所示，底部的操作按钮需要根据nav_active的改变来判断该显示哪些操作按钮，当nav_active为4时，表示当前在草稿页，则仅显示删除按钮。当需要加载下一页数据时会通过滚动加载组件进行接口请求，接口的当前页数加一，其它参数不变。图4-4日志列表组件4.4日志详情组件下图4-5是日志详情的界面图，该组件的最大难点在于上一篇、下一篇的日志切换。首先定义一个查询上下页数据的方法nextDiary，该方法接收两个参数type和existId，type表示请求接口是上一页还是下一页，existId为true表示刚打开详情弹窗时的初始化请求，为false则表示手动点击按钮时所触发的。初始化请求时，如果接口能返回对应的id，则表明存在对应的上一篇或者下一篇，并用对应的变量去接收。如果没有返回，则表明不存在，同样需要新建对应的Boolean变量去接收，并根据这个变量改变翻页按钮的状态，同时清空前面上下篇id的变量。点击翻页按钮时，根据初始化时从接口获取的id情况，如果有，则作为接口的参数。以下是翻页的核心代码：if(this.getData.diaryId){this[`${type}ID`]=this.getData.diaryId}else{if(type==='next'){this.isNextDisabled=true}elseif(type==='pre'){this.isPreDisabled=true}this[`${type}ID`]=''}图4-5日志详情界面4.5新建、编辑日志组件下图4-6是新建日志页。下面介绍一下日志类型和“加载上次”的实现逻辑。首先判断存放日志类型的数组templateList的长度是否超过2，如果超过则复制3给变量len，否则将templateList的length赋值给len。根据len进行相应的遍历次数，将接口中的前len种日志类型取出，放入一个数组diaryTypeRadioArr中。如果当前为新增，则默认选中第一个日志类型；如果是从编辑入口进来，还需初始化选项，分别在这两个数组中进行日志id遍历，确定属于哪个数组，复制给对应的变量，同时还需要将另一个数组的变量置空。点击选择的时候同样需要在为其中一个变量赋值的同时置空另一个变量。加载上次，若已手动选择了人员，则点击“加载上次”时需要先判断已选择列表中是否已经存在，若取消“加载上次”，也不能直接去掉属于“加载上次”的人员，需要先判断是否已经从选人组件中选择了，若选择了则取消”加载上次“也无法取消选择。解决方法：手动选择和”加载上次“选择所得到的数组不得直接处理，新建一个数组来整合这两个数组，并作为展示和提交日志的参数。以下是加载上次的核心代码constlastTemp=this.$qwBase.clone(this[lastList])//去重selectUsers.map(item=>{lastTemp.map((i,index)=>{if(item.id===i.id){lastTemp.splice(index,1)}})})type?this.relevantUsers=[...selectUsers,...lastTemp]:this.leaderUsers=[...selectUsers,...lastTemp]图4-6新建、编辑日志

第5章系统测试本系统测试分为两部分，分别是由eslint实现的代码规范检测和测试用例测试。5.1测试目的和意义对于访问一个web应用，耗费时间最多的过程并不是后台、数据库的数据处理，而是在前端程序。就算我们能将后端的响应时间缩减至50%，那整体的响应时间其实只会缩减5%-10%。根据web优化的黄金法则：最终用户响应时间的80%耗费在前端程序上，而前端的大部分时间则是耗费在页面加载和页面渲染，如图片、css样式表、js脚本的下载与渲染。通过减少http请求和优化资源请求等方式来优化前端性能，可以整体减少40%~50%的响应时间。通过前端测试，能保证前端应用的业务逻辑正确和代码的规范，提高代码质量和页面的性能。相对后端而言，前端的错误被发现和修复所需的工作量要少很多，但是带来的收益却很高。5.2测试方法5.2.1代码规范检测本系统在项目中集成了Eslint，它是一个插件化的JavaScript代码检测工具，按照特定的编码风格进行约束，若eslint错误不修复，则在git提交代码时将无法提交成功。因此代码规范的这次检测已经完全通过。5.2.2黑盒测试黑盒测试是靠测试来检测各个功能能否正常使用。在测试过程中，把系统看成一个封闭的黑盒子，在系统前端接口进行测试，它只根据测试用例来检查系统的功能是否按照预期的需求执行，系统是否能正确接收输入的数据并返回输出数据，测试过程忽略系统内部结构和处理过程。本系统中由测试工程师提供了所有模块的完整的测试用例，已经通过本人和测试工程师的测试。如表5-1所示，是新建日志页的部分测试用例。表5-1新建日志部分测试用例功能块功能点前置条件操作步骤预期结果日志类型默认显示排序前三位的类型1、进入工作日志PC端首页2、点击【新建】，进入新建页3、查看日志类型默认显示排序前三位的类型长类型显示正确管理后台设置类型名称为最长字数限制1、进入工作日志PC端首页2、点击【新建】，进入新建页3、查看日志类型长类型显示正确仅可选择一个类型1、进入工作日志PC端首页2、点击【新建】，进入新建页3、查看日志类型仅可选择一个类型可下拉选择其他日志类型类型已启用1、进入工作日志PC端首页2、点击【新建】，进入新建页3、点击类型框下拉图标弹出下拉框，可自由选择日志类型必填项，为空无法提交日志1、进入工作日志PC端首页2、点击【新建】，进入新建页3、不选择日志类型，其他设置项正常4、点击【发布】发布失败日志标题输入框默认文案显示正确1、进入工作日志PC端首页2、点击【新建】，进入新建页3、查看输入框默认文案输入框默认文案显示正确：请输入日志标题允许输入50字以内1、进入工作日志PC端首页2、点击【新建】，进入新建页3、输入日志标题允许输入50字以内必填项，为空无法提交日志1、进入工作日志PC端首页2、点击【新建】，进入新建页3、不输入日志标题，其他设置项正常4、点击【发布】发布失败日志内容输入框默认文案显示正确1、进入工作日志PC端首页2、点击【新建】，进入新建页3、查看输入框默认文案输入框默认文案显示正确：请输入日志内容允许输入60000字以内1、进入工作日志PC端首页2、点击【新建】，进入新建页3、输入日志内容允许输入60000字以内必填项，为空无法提交日志1、进入工作日志PC端首页2、点击【新建】，进入新建页3、不输入日志内容，其他设置项正常4、点击【发布】发布失败切换文本则清除已输入内容1、进入工作日志PC端首页2、点击【新建】，进入新建页3、输入日志内容，其他设置项正常4、点击切换切换纯文本/富文本切换文本则清除已输入内容软件质量评价标准：A：质量稳定，适合大规模使用。B：存在少数严重问题，但有规避措施，可以局部使用。C：基本功能可用，但严重问题较多。D：基本功能不可用。本系统测试对象的整体质量：A。部分测试报告。如图5-1所示：图5-1部分测试报告

第6章结束语6.1全文总结本系统是我第一次独立搭建完整的企业项目，期间遇到了较多的困难。刚开始开发时对git的使用不够熟悉，在使用git提交代码的过程中经常会遇到冲突问题，导致提交失败，在同事的提醒下我懂得了每次提交代码之前都需要先拉取代码解决冲突。另外，项目搭建和组件划分也不大熟悉，踩了不少坑。这些也是企业开发与学校课堂作业项目的最大区别，面向现实需求的，追求严谨的细节。本应用作为公司PC版改造的第一个应用，在改造的同时，完善好各公共组件能力，如评论组件、选人组件、列表规范、详情页规范等，下沉好组件的服务能力。随着产品被投入到公司使用，在服务公司同事的层面上，可以更高效的帮助同事记录每天的工作内容；从公司领导的层面上，可以更好的跟进下属的每日工作情况以及管理下属的工作安排；从公司业务往来的层面上，根据应用的优势推广至其他公司，从而为公司创造更多的效益。6.2课题展望另外，在系统上线的过程中，不断的有新的bug和待优化点被提出，这些问题的提出在促使本系统逐渐的完善的同时，也让我发现了自己开发中犯的错误，令我能够进一步提升自己的能力。本系统还存在部分不足，例如统计规则中未明确如何才能让日志成为规则中的已提交部分，这一点将会在后续的二期开发计划中完善，通过增加日志提交规则列表，展示对应规则的明细，然后在提交日志时需将汇报对象添加为负责人，则视为提交成功。同时目前发现的一些影响较小的bug和UI设计师提出来的样式优化也将会在二期开发中统一修复。

参考文献阮一峰.ES6标准入门（第3版）[M].电子工业出版社，2017.9[美]尼古拉斯·泽卡斯.高性能JavaScript[M].电子工业出版社，2010.11[美]ElisabethRobson[美]EricFreeman编著.HeadFirstHTML与CSS(第2版)[M].中国电力出版社，2013.9刘博文.深入浅出Vue.js[M].人民邮电出版社，2019.3梁灏.Vue.js实战[M]清华大学出版社，2017.10张耀春，黄轶，王静，苏伟，王瑾，殷献勇Vue.js权威指南[M]电子工业出版社，2016.09.01[美]NicholasC.Zakas.深入理解ES6[M]电子工业出版社，2017.7[英]JeremyKeith[加]JeffreySambells.JavaScriptDOM编程艺术[M].人民邮电出版社，2011.4[美]IlyaGrigorik.HighPerformanceBrowserNetworking[M].人民邮电出版社，2013.9[美]DavidFlanagan.JavaScript.The.Definitive.Guide.6e[M].机械工业出版社出版，2012.4[希]LeaVerou.CSSSecrets:BetterSolutionstoEverydayWebDesignProblems[M].人民邮电出版社，2016.4“vue官方网站”，（2019/12/14）“vuex官方网站”，/zh/（2019/11/10）廖雪峰，“Git教程”，/wiki/896043488029600Flex布局语法教程，/w3cnote/flex-grammar.html

致谢在撰写本论文的过程中，深深的感谢给予我帮助的导师和公司。首先，感谢刘红敏老师的悉心指导，在论文课题选取、开题报告和整体思路等方面给予了我学术指导。然后感谢提供我开发此项目机会的公司，让我能接触企业级项目，得以学以致用。最后，感谢所有对我提供协助的同事们，尤其是我的项目导师刘道辉，为我提供专业指导。

捷键与一些电脑小技巧HYPERLINKwinkey+d:

这是高手最常用的第一快捷组合键。这个快捷键组合可以将桌面上的所有窗口瞬间最小化，无论是聊天的窗口还是游戏的窗口……只要再次按下这个组合键，刚才的所有窗口都回来了，而且激活的也正是你最小化之前在使用的窗口！

--这个就是winkeywinkey+f:

不用再去移动鼠标点“开始→搜索→文件和文件夹”了，在任何状态下，只要一按winkey+f就会弹出搜索窗口。

winkey+r:

在我们的文章中，你经常会看到这样的操作提示:“点击‘开始→运行’，打开‘运行’对话框……”。其实，还有一个更简单的办法，就是按winkey+r！

alt+tab:

如果打开的窗口太多，这个组合键就非常有用了，它可以在一个窗口中显示当前打开的所有窗口的名称和图标●，选中自己希望要打开的窗口，松开这个组合键就可以了。而alt+tab+shift键则可以反向显示当前打开的窗口。

winkey+e:

当你需要打开资源管理器找文件的时候，这个快捷键会让你感觉非常“爽”！再也不用腾出一只手去摸鼠标了！

小提示:

winkey指的是键盘上刻有windows徽标的键●。winkey主要出现在104键和107键的键盘中。104键盘又称win95键盘，这种键盘在原来101键盘的左右两边、ctrl和alt键之间增加了两个windwos键和一个属性关联键。107键盘又称为win98键盘，比104键多了睡眠、唤醒、开机等电源管理键，这3个键大部分位于键盘的右上方。

再补充点

F1显示当前程序或者windows的帮助内容。

F2当你选中一个文件的话，这意味着“重命名”

F3当你在桌面上的时候是打开“查找：所有文件”对话框

F10或ALT激活当前程序的菜单栏

windows键或CTRL+ESC打开开始菜单

CTRL+ALT+DELETE在win9x中打开关闭程序对话框

DELETE删除被选择的选择项目，如果是文件，将被放入回收站

SHIFT+DELETE删除被选择的选择项目，如果是文件，将被直接删除而不是

放入回收站

CTRL+N新建一个新的文件

CTRL+O打开“打开文件”对话框

CTRL+P打开“打印”对话框

CTRL+S保存当前操作的文件

CTRL+X剪切被选择的项目到剪贴板

CTRL+INSERT或CTRL+C复制被选择的项目到剪贴板

SHIFT+INSERT或CTRL+V粘贴剪贴板中的内容到当前位置

ALT+BACKSPACE或CTRL+Z撤销上一步的操作

ALT+SHIFT+BACKSPACE重做上一步被撤销的操作

Windows键+D：最小化或恢复windows窗口

Windows键+U：打开“辅助工具管理器”

Windows键+CTRL+M重新将恢复上一项操作前窗口的大小和位置

Windows键+E打开资源管理器

Windows键+F打开“查找：所有文件”对话框

Windows键+R打开“运行”对话框

Windows键+BREAK打开“系统属性”对话框

Windows键+CTRL+F打开“查找：计算机”对话框

SHIFT+F10或鼠标右击打开当前活动项目的快捷菜单

SHIFT在放入CD的时候按下不放，可以跳过自动播放CD。在打开wo

rd的时候按下不放，可以跳过自启动的宏

ALT+F4关闭当前应用程序

ALT+SPACEBAR打开程序最左上角的菜单

ALT+TAB切换当前程序

ALT+ESC切换当前程序

ALT+ENTER将windows下运行的MSDOS窗口在窗口和全屏幕状态间切换

PRINTSCREEN将当前屏幕以图象方式拷贝到剪贴板

ALT+PRINTSCREEN将当前活动程序窗口以图象方式拷贝到剪贴板

CTRL+F4关闭当前应用程序中的当前文本（如word中）

CTRL+F6切换到当前应用程序中的下一个文本（加shift可以跳到前

一个窗口）

在IE中：

ALT+RIGHTARROW显示前一页（前进键）

ALT+LEFTARROW显示后一页（后退键）

CTRL+TAB在页面上的各框架中切换（加shift反向）

F5刷新

CTRL+F5强行刷新1.打开“我的电脑”-“工具”-“文件夹选项”-“查看”-在“显示所有文件和文件夹”选项前打勾-“确定”

2.删除以下文件夹中的内容：

x:\DocumentsandSettings\用户名\Cookies\下的所有文件(保留index文件)

x:\DocumentsandSettings\用户名\LocalSettings\Temp\下的所有文件(用户临时文件)

x:\DocumentsandSettings\用户名\LocalSettings\TemporaryInternetFiles\下的所有文件(页面文件)

x:\DocumentsandSettings\用户名\LocalSettings\History\下的所有文件(历史纪录)

x:\DocumentsandSettings\用户名\Recent\下的所有文件(最近浏览文件的快捷方式)

x:\WINDOWS\Temp\下的所有文件(临时文件)

x:\WINDOWS\ServicePackFiles(升级sp1或sp2后的备份文件)

x:\WINDOWS\DriverCache\i386下的压缩文件(驱动程序的备份文件)

x:\WINDOWS\SoftwareDistribution\download下的所有文件

3.如果对系统进行过windoesupdade升级，则删除以下文件：x:\windows\下以$u...开头的隐藏文件

4.然后对磁盘进行碎片整理，整理过程中请退出一切正在运行的程序

5.碎片整理后打开“开始”-“程序”-“附件”-“系统工具”-“系统还原”-“创建一个还原点”(最好以当时的日期作为还原点的名字)

6.打开“我的电脑”-右键点系统盘-“属性”-“磁盘清理”-“其他选项”-单击系统还原一栏里的“清理”-选择“是”-ok了

7、在各种软硬件安装妥当之后，其实XP需要更新文件的时候就很少了。删除系统备份文件吧：开始→运行→sfc.exe/purgecache近3xxM。(该命令的作用是立即清除"Windows文件保护"文件高速缓存，释放出其所占据的空间)

8、删掉\windows\system32\dllcache下dll档(减去200——300mb),这是备用的dll档，只要你已拷贝了安装文件，完全可以这样做。

9、XP会自动备份硬件的驱动程序，但在硬件的驱动安装正确后，一般变动硬件的可能性不大，所以也可以考虑将这个备份删除，文件位于\windows\drivercache\i386目录下，名称为driver.cab，你直接将它删除就可以了，通常这个文件是74M。

10、删除不用的输入法：对很多网友来说，WindowsXPt系统自带的输入法并不全部都合适自己的使用，比如IMJP8_1日文输入法、IMKR6_1韩文输入法这些输入法，如果用不着，我们可以将其删除。输入法位于\windows\ime\文件夹中，全部占用了88M的空间。

11、升级完成发现windows\多了许多类似$NtUninstallQ311889$这些目录，都干掉吧，1x-3xM

12、另外，保留着\windows\help目录下的东西对我来说是一种伤害，呵呵。。。都干掉！

13、关闭系统还原：系统还原功能使用的时间一长，就会占用大量的硬盘空间。因此有必要对其进行手工设置，以减少硬盘占用量。打开"系统属性"对话框，选择"系统还原"选项，选择"在所有驱动器上关闭系统还原"复选框以关闭系统还原。也可仅对系统所在的磁盘或分区设置还原。先选择系统所在的分区，单击"配置"按钮，在弹出的对话框中取消"关闭这个驱动器的系统还原"选项，并可设置用于系统还原的磁盘空间大小。

14、休眠功能会占用不少的硬盘空间，如果使用得少不妨将共关闭，关闭的方法是的：打开"控制面板"，双击"电源选项"，在弹出的"电源选项属性"对话框中选择"休眠"选项卡，取消"启用休眠"复选框。

15、卸载不常用组件：XP默认给操作系统安装了一些系统组件，而这些组件有很大一部分是你根本不可能用到的，可以在"添加/删除Windows组件"中将它们卸载。但其中有一些组件XP默认是隐藏的，在"添加/删除Windows组件"中找不到它们，这时可以这样操作：用记事本打开\windows\inf\sysoc.inf这个文件，用查找/替换功能把文件中的"hide"字符全部替换为空。这样，就把所有组件的隐藏属性都去掉了，存盘退出后再运行"添加-删除程序"，就会看见多出不少你原来看不见的选项，把其中那些你用不到的组件删掉（记住存盘的时候要保存为sysoc.inf，而不是默认的sysoc.txt），如Internat信使服务、传真服务、Windowsmessenger，码表等，大约可腾出近50MB的空间。

16、清除系统临时文件：系统的临时文件一般存放在两个位置中：一个Windows安装目录下的Temp文件夹；另一个是x:\Documentsand