《网络工程 办公协同管理系统.docx》由会员分享，可在线阅读，更多相关《网络工程 办公协同管理系统.docx（51页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、本科毕业设计（论文）办公协同管理系统Office Coordination Management System 院 （系）计算机学院专 业网络工程班 级一班学 号16210220120学生姓名徐轩雄指导教师刘政连提交日期2020年4月19日毕业设计（论文）原创性声明 本人郑重声明：所呈交的毕业设计（论文），是本人在指导老师的指导下，独立进行的设计（研究）工作及取得的成果，论文中引用他人的文献、数据、图件、资料均已明确标注出，论文中的结论和结果为本人独立完成，不包人已含他经发表或撰写的作品及成果。对本文的研究作出贡献的个人和集体，均已在论文中作了明确的说明。本人完全意识到本声明的法律结果由本人承
2、担。 毕业论文作者（签字）： 签字日期： 年 月 日成绩评定 成绩项论文成绩（百分制）折合比例实得成绩（折合分）指导教师成绩30%评阅教师成绩20%答辩成绩50%总评成绩 注：毕业设计（论文）成绩按百分制评定。答辩成绩不及格的（评分低于60分的），则该毕业设计（论文）总评成绩为答辩成绩。摘 要网络科技高速发展下，许多企业都转向无纸化办公。本系统满足基本的公司办公需求，操作简便易上手，无纸化办公管理系统成为众多企业对日常业务管理的首选方法。实现办公管理系统是本项目主要内容。本系统以Pycharm和Vscode两个工具进行项目开发，数据库使用MySQL，用于数据存储和调用。前端页面主要利用Vue.
3、js进行搭建，通过此渐进式框架对前台界面的展示。后端主要利用Django的MVT模式，对前端请求的数据进行与数据库的对接并且响应。实现的功能包括：员工的管理，合同的管理，项目的创建与进行，办公用品的统计，公共信息的通知等。关键词：渐进式框架；无纸化；办公管理系统；AbstractWith the rapid development of network technology, many enterprises have turned to paperless office. This system satisfies the basic office needs of the company
4、and is easy to operate. The paperless office management system has become the preferred method of daily business management for many enterprises.The realization of an office management system is the main content of this project. This system uses Pycharm and Vscode tools for project development. The
5、database uses MySQL for data storage and recall. The front-end page is mainly built using Vue.js, and the front-end interface is displayed through this progressive framework. The back end mainly uses Djangos MVT mode to connect and respond to the data requested by the front end with the database. Th
6、e realized functions include: employee management, contract management, project creation and progress, office supplies statistics, public information notification, etc.Key words: Progressive framework; office management system目录第一章 绪论11.1 研究动机与目的11.2 设计思路11.3 论文整体结构2第二章 相关技术与文献综述32.1 MVT模式与MVC模式32.1
7、.1 MVT模式32.1.2 MVC模式42.2 系统开发关键技术与开发环境62.2.1 Django项目62.2.2 Vue.js82.3 MySQL数据库102.4 本章小结10第三章 系统分析与设计113.1 系统功能性需求分析113.1.1 功能性分析113.1.2 用户功能性123.2 系统非功能需求分析123.3 数据库需求分析133.4 系统总体架构设计143.5 系统界面设计143.6 系统功能模块设计153.6.1 用户的权限设计153.6.2 登录验证页面模块设计163.6.3 人事页面管理模块设计173.6.4 合同页面管理模块设计193.6.5 行政页面管理模块设计20
8、3.6.6 项目页面管理模块设计203.6.7 公共信息页面管理模块设计223.7 数据库设计223.8 本章小结26第四章 系统实现、测试及维护274.1 办公管理系统的实现274.1.1 登录验证页面系统实现274.1.2 人事管理页面系统实现274.1.3 合同管理页面系统实现274.1.4 行政管理页面系统实现284.1.5 项目管理页面系统实现284.1.6 公共信息管理页面系统实现294.2 系统测试294.2.1 测试环境294.2.2 测试过程304.2.3 测试总结394.3 系统维护394.4 本章小结40第五章 总结与展望415.1 总结415.2 未来展望41参考文献4
9、3广东东软学院本科生毕业设计（论文）第一章 绪论1.1 研究动机与目的当前中国的快速发展，促使了多数人产生了创业的想法。根据中国新闻网的一篇关于浙江中小微企业的报告，2019年浙江中小微企业新增40.8万。中国除了浙江，还有22个省份，这充分表明目前在中国每时每刻都有大量的中小微企业在生根发芽。科学管理技术成为了办公自动化的主要凭据，计算机网络与通信技术的广泛使用，将传统的企业工作面貌彻底改变，完成了对日常办公的自动化，缩短了每个业务的周期，大幅度提升了办公效率，减少办公用品的使用，改进了办公质量【12】。在每个企业中都会存在着专属于自身企业的办公模式，不同的企业有着不同的方式来处理办公事务与
10、整理信息。在21世纪的网络信息科技高速发展下，许多企业都抛弃了以往的传统办公模式，纷纷转向于无纸化办公管理系统，相比于传统模式下，无纸化办公大大节省了日常纸张的消耗，降低了企业办公成本，让信息在系统中更加准确无误的传输到指定的员工或文档里，使办公过程中文件传递更加便捷，提高了各部门员工的工作质量。在办公中有紧急通知的时候，不再需要逐个部门或向逐个员工传递相关通知，可直接在系统中查询。公司管理变得比传统办公模式下更加规范操作性，在更加规范对员工进行监督和控制同时也节约了本无必要的人力物力资源,提高了各部门员工的工作效率。1.2 设计思路此项目所对应的公司属于新创建的公司，单位规模属于初小型企业，
11、经过实用性与合适性的角度分析，并不需要完整的大而全企业管理系统，只需要建立适用于此初步建立的企业地办公管理系统根据总结与统计公司办公管理的需要，通过分析与整合，建立适用于此公司办公的实际功能，根据此功能出发，因此建立人事管理，合同管理，行政管理，项目管理，公共信息管理主要功能应用。根据不同的员工岗位，给予与之相对应的管理权利，以便更为快捷的管理员工。本论文以基础办公系统为基准，利用Django与vue.js的相结合【9】，对小型企业管理系统进行了设计与开发，详细说明开发与测试的整个过程。该系统的实现会促进并且提高公司的工作效率，改善办公质量，大大减少了对办公用品的支出。在数据库方面运用了MyS
12、QL数据库【11】，可大程度地解决公司各方面的数据存储与调用，也可以在将来或许出现安全性的问题时，能够第一时间去处理解决出现的各种问题，方便超级管理者的使用与维护。对已完成实现的系统进行测试，查找系统中未被寻找到的bug或问题进而完善该系统的功能。1.3 论文整体结构论文整体结构分为七个部分：第一章：绪言，对办公管理系统进行了研究动机与目的的介绍；设计思路中简单介绍了为何要开发此系统且功能线路。第二章：相关技术与文献综述，初步介绍本文中涉及的相关技术，尤其是开发关键技术与数据库的配置技术，介绍了相关后台的响应请求模式，并且对其关键技术进行了说明，对本系统成功开发起关键性的作用。第三章：系统总体
13、设计，此章为论文的核心章节，对系统需求进行阐述，分析本次项目所对应的系统功能性及非功能性需求，并阐明本次系统开发所需要的数据库。着重于对系统的总体架构设计，设计系统界面的样式，系统功能模块的设计，并且阐述模块与模块之间的关联，且每个模块所对应的数据库设计等。第四章：办公管理系统的实现与测试，此章节为第四章所设计的内容进行实现测试，列出与之相关的开发配置文件，通过此测试确认是否达到预期的目标内容，对不同操作系统或浏览器进行测试。第五章：对此次项目进行总结并表述未来展望。第六章：项目中所引用的文献综述。43第二章 相关技术与文献综述2.1 MVT模式与MVC模式2.1.1 MVT模式Django所
14、使用的模式是MTV模式，即便其本身是遵循MVC模式【2-4】。视图,模板,模型三个模块构成MVT框架。两个模式中的模型层功能一致，数据库的封装，进行与数据库之间的交互，处理请求数据都在作用于模型层中；视图层是MVC中的核心，进行数据的获取，对模型层和视图层返回的数据进行进一步的业务处理,对请求进行处理并且返回所对应的结果。与MVC模式的差别就在此。模板层（template）用于向用户展示结果与内容。除却这三层之外，Django额外配置一个URL路径分发器，将页面的请求按照不同的url路径分发给不同的Views层，再通过Views层里的函数调用与之匹配的模型层与模板层。MVT模式（如图2-1）运
15、行中，分为客户端与服务端，两者之间的请求与响应分为几个步骤:图2-1 MVT模式（1）客户端在浏览器发送数据表单请求（request）。（2）请求（request）会进入到URL路劲分发器，路劲分发器会根据请求上配置的url路径分配到指定的views层。（3）views层接收到客户端所发出的请求，进行相关的业务处理，并向model层发出数据请求。（4）model层收到views层发出的请求数据后，向所属数据库中提取到所需要的数据，model层内嵌ORM框架。model层整理交互好数据后，就将数据返回给views层。（5）views层接收到model层的返回的数据后，再业务处理数据，最后向模板层
16、（Template）传输数据。（6）模板层收到数据后，将所有数据渲染生成html界面并且返回给视图层（views）。（7）视图层接收返回的数据后并将所有数据返回HttpResponse。浏览器页面展示最终响应结果。2.1.2 MVC模式MVC（Model- View- Controller）模式【1】在20世纪70年代通过Smalltalk- 80的GUI设计中提出。MVC分离数据处理，数据显示和程序I/O控制。并且对对象之间通信方式的不同进行阐述, 使它们不必卷入彼此的数据模型和方法中, 使程序结构变得清晰而灵活。在MVC模式中，M代表model（模型），数据库的封装，进行与数据库之间的交互
17、，处理请求数据都在作用于模型层中；V表示view（视图），为控制器传递过来的数据进行渲染并将渲染后的页面返回控制器中；C表示controller（控制器），controller是MVC中的核心，进行数据的获取，对模型层和视图层返回的数据进行进一步的业务处理,对请求进行处理并且返回所对应的结果。处理解决各个模块之前的关联程度是MVC框架中最主要的核心思想【1】。在项目中使用MVC框架，将model层与view层，controller层实现代码之间的分离，不再需要因为更改视图层而修改模型层与控制层相关的代码，降低每个功能模块之间的耦合性。一个模型层能适用于多个不同的视图得益于模型层与视图层的分离，
18、正因为两者之间的分离从而能被不同的界面所使用。将视图层与控制器分离，能便于工作人员的维护与修改，提高工作效率。MVC模式（如图2-2）运行中，分为客户端与服务端，两者之间的请求与响应分为几个步骤： 图2-2 MVC模式（1）客户端在浏览器发送数据表单请求（request）。（2）请求（request）会到达一个前端控制器，前端控制器根据请求上配置的所对应的控制器来将此请求分发到controller层中（3）controller层接收到前端控制器分发过来的请求后，向model层发出指定的数据请求并进行相对应的业务逻辑处理（4）model层收到controller层的指令后，会与数据库交互，并从数
19、据库中提取与之相对应的数据，将交互得来的数据响应给controller层。（5）控制器（controller）接收到模型层（model）返回后的数据，由于此时的数据属于原始数据，展现出来的数据并不清晰，所以控制器（controller）就会将数据传递到视图层（view）。（6）视图层（view）收到控制器（controller）返回的数据后，就会将这些原始数据填充到已经写好的html文件里的众多数据坑。当填充好这些数据后就将渲染好的html返回到控制器（controller）中。（7）控制器把视图层填充好的数据接收后，并将渲染好的html响应给客户端，客户端上就会显示渲染后的html，或者是j
20、son,xml数据。2.2 系统开发关键技术与开发环境2.2.1 Django在2005年7月，一个基于MVC构造的Python定制框架在堪萨斯州诞生-Django，适用于高性能网站的快速搭建。从诞生开始，Django逐步拥有数以百万计的用户，并且每个用户都会进行开源完整项目；Django是因为当时开发小组要对当地的新闻站点进行维护，并且迎合记者或管理层的要求从而开发出来的网络开发框架，节省了一部分的时间，并在新闻界中获得好评。正因诞生于新闻界，独特的管理后台也诞生于此。不过在当时，也有部分人认为Django建立的目的是对在线报刊需求的处理而只适用于出版业中。Django框架遵循MVC设计【2
21、-4】，但是Django更加关注于模型，视图和模板简称（MVT），具体说来它具有以下特点：1.自带后台：正如上文所说，创建Django项目的同时会让自动帮你新建一个后台管理功能，admin文件中只需要几行代码，就能轻松控制数据。2.模板系统：遵循了MVC的设计同时又有自己独特的一面，将以往的MVC架构变成MVT架构，模型视图模板层的相互分离使业务与数据能够分离操作，节省了将来可能需要更改代码的时间。3.数据库功能：由于MVT模式中，model层为Django提供了一个ORM功能，有了这个功能后，模型层的设计不再需要特定的数据库，解决了以往面向对象和数据库之间的不匹配现象，可以让代码直接访问对象
22、而不需要访问数据库表，因为model层已经帮忙实现好一切的匹配，不需要再额外编写SQL语句。4.URL路径中使用正则匹配，将对应的信息传递到函数中。创建Django项目后目录会有以下这几个文件（如图2-3）：图2-3 Django项目目录从上往下看：App：App在项目中代表着各式各样的功能组件，正如手机App与手机的关系，当需要使用某一个App的时候就会调用这App中的函数方法。创建App的方法：在manage.py中输入startapp App名称即可，当然了一个项目中肯定不止一个App，所以就要在项目的根目录下创建一个新的文件夹apps，并将所需要的app组件放进去，重要的是要把这个ap
23、ps文件夹设置为sources root。App下文件：（1）migrations：记录对模型层的改动并用于对数据库迁移，产生你在模型层中所定义的数据库表。（2）admin.py：这页面就能生成与这App相对应的后台管理页面，可以对数据进行修改与编译。（3）model.py：在这页面里，可以编写此App所应用到的数据库表，模型层会通过ORM自动转换SQL语句，不需要自行编写SQL语句，这就是MVT模式的方便之处。（4）test.py：在这文件里，可以编写所想要的测试来对此App进行测试是否出现问题。（5）urls.py：这文件在App应用中可有可无，因为即使不应用中设置url路径，也能在项目目
24、录的urls中配置相对应的视图层的路径，在项目目录配置App的路径是必不可少的，在项目目录配置后，一定要在项目目录settings.py中的INSTALLED_APPS中设置App的名称，如果缺少配置路径与设置名称，就不会出现这个App的数据页面。（6）views.py：Django项目中最重要的一部分，视图层里编写方法，用于接收客户端请求的数据并进行一系列规范的业务处理，最后返回相对应的数据或页面。Project：project目录就是根目录下的Django目录，往往创建新Django项目的时候就会自动生成一个与项目名称相同的project目录，Project目录下分为多个py文件以至于构建
25、一个基本的Django项目。Project下的文件：（1）_init_.py：通常情况下，如果要使用MySQL数据库，就要在里面配置，将其文件定义为一个python的包。（2）settings.py：里面配置了许多基础信息，能够修改使用哪种数据库，也能修改MVT中模板的指定文件夹或文件。（3）urls.py：作为项目里的URL路径分发器，里面填写了许多应用的路径，当前端请求数据时，就能根据此文件，进入到不同应用中，并实现返回数据，展示内容。（4）Templates：MVT模式中的T（模板层），用于接受视图层请求的数据并且渲染与之相对应的页面，最后返回给视图层，并由视图层将页面返回给前端，最后展
26、示页面。2.2.2 Vue.jsVue是当今前端主流三大框架之一【6-8】。编译前端代码时运用了MVVM模式【5】并且能运用多数组件。降低了更换框架的维护成本。刚公布出来的时候，以运行速率和轻量级获得了大众前端开发人员的喜爱。Vue是一套自底向上且创建于用户界面的渐进式框架【7】。响应数据绑定与组件系统就是它的核心功能，通过简单的API接口就能实现数据的双向绑定。Vue利用了MVVM模式来进行对View和ViewModel双向绑定【10】。View层与Model层能进行紧密的交互，正是因为ViewModel这个中间件的存在，能保证视图与数据的统一性。MVVM模式的基本模式【5】：（如图2-4）
27、,同时MVVM模式还能降低DOM操作且没有增加渲染的性能。图2-4 MVVM模式在Vue项目中，有两种方法可以快速的运用开发vue项目:（1）可以在html文件上利用script标签引用，可引用开发环境版本或者生产环境版本，根据不同的需要进行不同的引用，并且引用后可以在浏览器上直接使用vue的实例。（如图2-5）图中列出了MVVM每个层次所代表的部位图2-5 Html中MVVM中层次（2）可以创建一个基于webpack的vue开发项目,可以在项目里直接创建.vue文件，一个.vue文件代表一个组件。（如图2-6）图2-6 基于webpack的Vue项目当然，各有各的优点，利用script标签引
28、用直接编写代码，适用于初步学习者，官方文档不推荐新手直接使用vue-cli，初步学习的时候，适用于第一种方法。当自身接触的项目越来越多，且项目变得越来越大，项目变成中大型的同时，所需要的页面也会增多，这样继续第一种方法的话，就会存在了代码重复，浪费时间的问题，对后期的维护和代码公用有着不好的发展。2.3 MySQL数据库MySQL创建于1995年。在发布后的几年，发行了第一个关系型数据库版本，提供了大量面向编程语言的API。在往后的一段时间里，性能高，可靠性强，成本低使MySQL成为了最深受开发人员喜爱的开源数据库。MySQL充分利用处理器资源，支持多线程，并支持多个用户。可相对于其他的大型数
29、据库相比，MySQL的功能和规模就没有那么占优势，不过MySQL提供的功能对于个人或中小型企业却是有着非常大的帮助【11】。MySQL在使用资源方面有着大量的伸缩性，可以正常运行在资源充足的环境下，也可正常运行在资源少量的情况下【11】。MySQL能拥有这么大批用户的，是因为它有着几个特点：（1）在运动C和C+编译的同时也运用了多种编译器进行测试，确保了往后可移植源代码。（2）充分利用处理器资源，在支持众多用户的同时也支持多线程。（3）对SQL查询算法经行了改善，大大提高了查询速率。2.4 本章小结在本章节中阐述了此论文中开发设计到的相关技术，包括MVT模式，Django，Vue和MySQL数
30、据库的相关简介。以起到为本次研究分析设计实现奠定了基础。第三章 系统分析与设计3.1 系统功能性需求分析3.1.1 功能性分析依照对研究对象的初步了解与分析，其公司的系统所具备项目，人事，合同，行政与公共通知等功能，在需要这些功能的同时也需要具备一个登录模块，以防止不是本司的人员对此系统进行破坏或者窃取重要文件。（如图3-1）图3-1 管理系统功能模块登录模块：在网站的首页设置为登录界面，通过输入账号密码验证是否工作于本公司的人员，如果不是，就禁止访问。人事模块：人事管理能根据对员工的辞职进行在员工表中删除和增加新入职的员工的个人信息，也能通过着页面及时修改员工个人信息的变化。合同模块：主要是
31、上传员工与公司的之间的合同文件或者合同信息。行政模块：能对办公用品的统计与添加删除修改，能够让员工查看当前办公用品的剩余存量，以便及时补充存量。公共模块：遵循系统设计的公告发表规则，能够及时地更新每日的通告和紧急通知，对信息进行适当的维护与更新。在颁布通知的同时，记录颁布者的记录。项目模块：在此模块里，可以创建新的项目；查看已经完成或者过期的项目，也能对项目进行查看每个人的周报，项目运行过程中产生的问题，项目负责人分配的任务情况。3.1.2 用户功能性在本系统里，将用户区分为普通员工与领导者，项目负责人三种类型。普通员工能够查询修改自己的个人信息，允许员工在合同模块下载与查看所有合同，但是无权
32、修改或者自行增加合同内容。为了方便办公室的维护，员工被允许添加办公用品的货量信息，也能查看每日餐饮和公共通知。在项目业务里，可以申请参加指定项目，项目确定后，能参与其中的任务，编写周报中，也能及时添加在项目运行中遇到的问题，让其他用户进行帮忙解决问题。项目完成后，能够下载项目过程中上传的文档。领导者拥有的权限比普通员工多，可以在人事模块根据对员工的辞职进行在员工表中删除和增加新入职的员工的个人信息。对于每个员工的考勤或请假申请有着审批的功能，能对系统中所有功能的内容数据进行修改，删除，增加。项目负责人在项目里，能够添加删除成员，修改项目的业务处理，也有权修改与自身相符合的项目的完成状态。3.2
33、 系统非功能需求分析办公系统开发中，既需要满足技术上的需求功能，也要在系统的非功能性作出一系列的设计。这样不仅能提高日常工作地办公效率，也能方便系统的维护与完善。（1）实际应用性：满足办公系统的性能首先应有实际应用性，根据项目合同人员的不同，进行着不同的操作。同时在开发中应该设计间便容易的操作界面，使工作人员能够轻易的驾驭此系统（2）权限控制：系统将不同用户采取不同的权限控制，不仅能让系统容易辨识身份，也能防止部分重要的文件被恶意修改删除，即便发生了也能快速找到是哪个用户操作的。（3）易维护：维护人员可以在后台中维护，不影响工作人员日常办公。（4）环境需求：可在多种操作系统中运行此系统，只要环
34、境配置符合，就会系统兼容，不影响工作。（5）环境配置：本次系统使用了Vue.js与Django进行开发。Vue所需的浏览器系统版本环境如表3-2所示：表3-2 Vue.js环境配置表Vue.js 环境配置系统语言版本兼容浏览器浏览器版本Vue.js2.X版本IE10版本，11版本Microsoft Edge12版本以上FireForx21版本以上Chrome23版本以上Safari6.1版本以上Opera15版本以上在2.X版本中的Vue.js中，由于其使用了IE8无法模拟的ECMASCript 5特性导致无法支持IE8和IE8以下版本。在配置的时候，需要注意所下载的版本。Django所配置的
35、版本与环境如表3-3所示：表3-3 Django环境配置表Django的环境配置系统语言版本基于python版本适用的操作系统Django1.10.72.73.43.5OS XLinuxWindows本次使用低版本Django，由于本机所安装的python版本为3.8，如果直接运行Django的话会出现报错，需要在当前虚拟环境的Django目录下寻找base.py进行相对应的配置。3.3 数据库需求分析经过实际的考察与分析，本系统采用MySQL数据库作为数据的存储与调用，利用Navicat对数据库进行管理。这两个工具都是快速，便宜且可靠，符合这次项目对应的公司企业。首先根据上文分析的功能来决定
36、所需要的数据库表：第一：从登录与人事模块来看，数据库中需要保存用户的基本个人信息与登录密码，因此需要用户的用户名密码表和个人信息表。第二：公司有这员工的同时，也会有着员工需要请假或者考勤的情况，因此需要在数据库中增加员工的考勤表和请假申请表。第三：从合同的模块来看，数据库中需要保存与合同相关的信息，因此需要一个合同信息表。第四：在公共模块中，要创建新的通知或者餐饮消息，就需要一个关于信息的数据表。第五：根据项目管理的正常流程来说，分为创建项目，审批项目，审批项目过后，项目就应该存在项目中遇到的问题，负责人发表的任务，项目相关文档，且每个项目成员的周报，因此需要建立项目表，项目申请表，项目成员表
37、，项目的任务表，任务成员表，任务进度汇报，周报表，项目问题表，项目相关文档表。第六：根据上述说的行政需求分析，需要建立办公用品表。最后，每个用户都有不同的分级与权限，因此需要创建一个角色权限分级表。3.4 系统总体架构设计在办公企业管理系统中，系统总体架构设计是核心部分，能很清晰的辨识到整个办公系统的整体架构。通过上文对整个系统的详细需求分析，本次办公管理系统由人事管理，项目管理，行政管理，公共通知管理等几大模块组成。每个模块也包含了属于自己的子模块在这次项目中，使用了Django框架，也运用了其特有的MVT设计：浏览器发送请求-通过请求中间件进入正则URL路径-匹配合适的视图中间件再通过视图
38、中间件进入到指定视图中-视图接收请求进行业务处理同时向数据层请求指定数据-数据层收到请求访问数据库数据最后返回给视图层-视图层将接收到的数据业务处理后将数据传入模板层-模板层收到数据并对html文件进行渲染再返回给视图-最后视图将渲染好的页面通过响应中间件返回给浏览器。3.5 系统界面设计本次项目是以Vue.js框架来取代Django框架的MVT模式中的模型层，放弃了Django自带较为羸弱模板。由于Vue.js的学习成本较低，且其在模板中能够方便快捷的操作DOM，组件引用十分广泛且容易使用，在操作单页面的程度来说，使用Vue是一个很好的选择。把页面分为两种，一种是登录界面，一种是登录成功后重
39、定向的页面（管理系统的主页）。登录界面就拥有一个账号密码输入框，下方还有着一个登录按钮，形成了一个表单。当输入账号密码后，点击按钮，浏览器就会将表单提交到后端，后端进行验证处理，随后根据密码正确错误决定响应哪些内容。文字下面显示该界面的模板设计图（图3-4）。图3-4 登录界面设计进入主页后，在浏览器页面的左边，就显示每个功能的路由跳转链接，能跳转到指定功能的页面。右边就会显示相关内容，主页的头部右边角落，就会显示当前登录的用户是谁。文字下面显示该界面的模板设计图（图3-5）。图3-5 进入系统后的页面设计3.6 系统功能模块设计3.6.1 用户的权限设计本次项目中如上文功能性分析需求中所说，
40、设置了用户之间的权限控制，分为了领导层，员工层与项目负责人层。通过权限控制进行对管理系统的日常操作与管理。具体核心代码如下:=代码开始=def init(): role = Roles.objects.all() if not role: role = Roles(role=manager) role.save() role = Roles(role=staff) role.save() user = User.objects.filter(username=admin) if not user: role = Roles.objects.get(role=manager) user = Us
41、er(username=admin, password=md5_encode(admin), role=role) user.save()=代码结束=当新打开迁移数据库的时候，判断是否有账号在此里面，如果没有，就需要创建一个领导级的账号，以便后期进入系统中能够正常运行。3.6.2 登录验证页面模块设计登录页面是本系统中最为重要的一部分。对每个有登录进系统的用户有着严格的把关与控制，通常情况下只允许本公司的工作人员进入此系统内。当浏览器进入到登录页面时，会让登陆者输入属于自己的账号与密码，点击登录的按钮，浏览器会将数据表单提交到后端服务端中，服务端接收过来的请求收取数据后，会根据前端js部分写好
42、的url设置与后端指定的视图层接口进行拼接。本系统将登录相关的视图层写在了应用中的用户应用。当视图层接收到请求后，对此账号密码进行验证。通过对密码进行MD5的加密验证后，视图层会将最终结果返回给浏览器（客户端），如果登录验证成功，就会生成一个2周的缓存session，并返回cookie给浏览器。当要退出账号的时候，就会删除这个session，再想进入系统访问本账户的信息时就需要重新进行登录验证了。（如图3-6）图3-6 登录验证页面流程设计3.6.3 人事页面管理模块设计根据上文需求分析。人事页面分为两个不同权限的展示页面，如果登录用户为员工，则无法浏览器页面，即便打开人事管理页面，也会显示并
43、无权限，只有领导层给予他升职的之后的权限，才能允许查看此页面的信息。（如图3-7）图3-7 角色权限查看人事页面领导层则可以在此页面进行对人员的增加删除以及更改指定用户的权限，不过同为管理层的人则无法修改管理层的人。当有新员工进入公司后，领导层就会创建一个初始密码与名字的账号给新员工，此处增加了员工账号的重名规则，不允许拥有相同的账号（如图3-8）。图3-8 添加新用户流程当新员工拿到了账号登陆后，可以在右上角的角色栏进行对本人账号的个人信息修改，也可以对密码进行修改，视图层则会将新修改的密码进行md5加密，存入数据库中。此处也设置了手机号码无法与他人相同的限制。（如图3-9）图3-9 修改信
44、息流程3.6.4 合同页面管理模块设计在合同模块里，也一样的分为领导页与用户页不同的显示（图3-10）。图3-10 合同页面下的角色权限显示领导层能够增加指定员工与公司之间的合同，或者其为代表的与外界公司合作的合同，合同分为标题内容与上传文件，文件属于附件，属于可上传可不上传，暂时支持上传pdf格式，并对非pdf格式的文件进行了提示，最大上传容量为10Mb。普通员工只能看到自己相关的合同，能对此合同进行下载附件，却没有修改的权限。页面的右上角，具有一个通过合同标题进行搜索的搜索框，能够查询指定标题的合同并进行查看或者修改（添加合同流程如图3-11）。图3-11 合同的添加流程3.6.5 行政页
45、面管理模块设计在此模块中，普通用户拥有一个增加，修改办公用品的权限，但却无法拥有删除的权限。防止个别员工恶意篡改数据。管理层拥有着对办公用品的修改增加删除权限，并且对不同种类的办公用品进行分类。右上角一个搜索框，通过用品的关键词名称来进行搜索查找。3.6.6 项目页面管理模块设计在项目管理模块中，分为全部项目，项目审核，人员申请审核，项目中的任务管理，周报管理与文档管理。在此模块中，也同样的设定了用户之间的权限设置。只允许领导层的人创建项目，在创建项目的时候，能够指定本项目的项目负责人，给予其一定的权利，添加本项目的项目名称，项目内容，必要时可上传此项目的创建文档（只限于pdf），可以设定项目
46、组成员，也可以等项目审核通过的时候，再由员工来决定是否申请参加此项目的开发中。创建项目之后，会通过一个审核的过程，领导层的人通过审核，使此项目是否能继续进行开发，在审核的过程中，员工不能向这项目进行申请进组的权利，需要此项目通过审核后，方能申请进入项目。员工申请参加项目开发后，项目负责人或者领导阶级的人员能通过项目申请页面进行对申请人员的确认或拒绝。如果某个员工被拒绝后，允许再一次发出申请；项目负责人也可以通过全部项目页面中进行编辑，自行添加自己所需要的人员，被添加到的人员无法拒绝也无权限不参加此项目。项目的开发过程中，提供了项目的任务界面，周报页面，问题页面与文档页面。项目负责人可以通过任务界面，指定任务负责人添加任务组成员并发表任务，让任务组进行处理解决。任务状态分为一般与紧急，并且成员需要提交完成情况，负责人对任务进行每个人的任务情况审核并根据完成情况调整显示任务进度。在项目进行的过程中，每个人每周都需要提交一篇关于这次项目的周报，一周只能提交一次，重复提交会提示”本周已经提交“。员工只能查看到自己的周报，项目负责人与项目创建人则可以查看该项目中所有成员所提交的周报，如果对某员工的周报不满意就对此进行删除，员工能再一次提交周报。员工还能查看所参加过的项目中提交的所有周报。项目开发过程中难免会遇