一种基于vue权限管理的办公室预约系统的制作方法

1.本发明涉及智能办公技术领域，尤其涉及一种基于vue权限管理的办公室预约系统。


背景技术：

2.随着当今社会竞争日益激烈，企业不断深化改革，企业内部各部门之间的关联愈发紧密，企业会议也不断增多，会议信息量也不断增大，经常需要会议进行业务沟通、解决问题及制定决策。
3.在传统的会议室管理模式中，通常采用纸质记录的方式来预约会议室，程序繁琐且容易产生冲突。用户申请会议室时，无法了解当前会议室的预定情况，往往要经历预约咨询、填送报表、签字盖章等过程，用户体验不佳。同时，管理员面对大量的会议室资源和会议预约申请，依靠人力往往很难做出清晰的决策，因此导致了会议室资源利用不充分的问题。
4.现有的会议室管理系统基于struts2、spring、hibernate三大框架整合搭建而成，前端采用jquery技术完成对界面的设计。但struts2框架存在一定的漏洞，在应用和实施中对信息的安全有较大的隐患。在开发中也有很多方面不够便利，特别是jsr-311标准出台之后，随着restful方式的流程普及开来，struts2逐渐淡出人们的视线，虽然struts2也加入了一些plugin来进行支持rest，但在应用的过程中也较为繁琐。spring以ioc为核心，在功能上做了一写扩展，先后推出了springmvc来完成逻辑层的编写逻辑，现在springmvc基本已经完成了替代struts2的工作。hibernate的持久层封装过于完整，导致开发人员无法对sql进行优化，无法灵活应用原生sql，同时框架中使用orm原则，导致配置过于复杂，遇到大项目，维护和问题不断，不利于项目的后续升级。
5.随着互联网的高速发展以及it开发技术的升级，在移动互联网时代，比较提倡前后端分离，前后端数据交互是根据http进行，后端设计的接口趋向于restful的架构，前端也不仅仅是web端，app也是很大一部分，前端对跨平台的需求变的紧迫。这些新发展，新形势现有的会议室管理系统框架从技术上很满足。


技术实现要素：

6.针对现有技术存在的问题，本发明提供一种基于vue权限管理的办公室预约系统，采用springboot vue框架，通过数据库存储角色、用户、资源、部门、会议室及预约信息，后端通过springboot拦截器对api权限进行控制，后端提供接口返回用户可访问的模块及组件信息；前端通过用户可访问模块及组件信息动态加载侧边栏和页面中组件。。
7.为达到上述目的，本发明提供了一种基于vue权限管理的办公室预约系统，包括前端模块和后端模块；
8.所述前端模块，形成交互界面，根据用户的输入信息生成对应请求信息，发送至后端模块；
9.所述后端模块包括zuul单元、consul单元、spring单元以及若干微服务单元；所述
zuul单元拦截请求信息，consul单元根据请求信息查找并调用对应的微服务单元；
10.若干微服务单元包括审核管理微服务单元、角色管理微服务单元、会议室管理微服务单元、报表管理单元以及数据查询微服务单元；审核管理微服务单元用于执行登陆管理、账号管理以及审核管理；所述角色管理微服务单元用于进行角色权限管理，执行角色新增、修改或删除操作；所述会议室管理微服务单元，用于会议室的状态管理，执行会议室新增、修改或删除操作；所述报表管理单元基于后台的操作生成报表；所述数据查询微服务单元用于由数据库获取表单，将修改后的表单通过数据查询微服务单元存入数据库。
11.进一步地，所述前端模块基于vue.js架构构建；通过element搭建并封装交互页面，vuerouter控制页面跳转，通过提交按钮触发axios组件，形成对应请求信息。
12.进一步地，所述前端模块还设置，mock是模拟数据接口，前端开发过程中，拦截页面发送的请求信息，再生成模拟后端响应的数据返回。
13.进一步地，所述后端模块采用springboot、springcloud和mybatis形成主体架构。
14.进一步地，所述mybatis用于实现库查找，与spring mvc、spring ioc/aop集成使用实现对数据库的增加、删除、修改和查询操作。
15.进一步地，所述后端模块还包括数据库，存储用户表、角色表、会议室表、部门表以及报表；所述用户表包括用户信息以及登录密码，所述角色表包括用户对应的角色，所述会议室表记录各个会议室信息，所述部门表包括用户的部门信息。
16.进一步地，用户打开预约系统，进入到登录页面，输入用户名、密码、验证码，点击登录；前端模块发送登录请求至后端模块；
17.后端模块的zuul单元拦截请求信息，通过consul单元根据请求信息查找并调用审核管理微服务单元；审核管理微服务单元通过数据查询微服务单元获取用户表，判断账号密码是否正确，账号密码正确后调用权限后台接口服务，获取用户的权限，后台模块将token及用户的权限返给vue前端，前端模块每次调用接口时都token，后台模块获取到这个token后进行比对，如果通过则允许访问；
18.用户登录成功后，前端模块通过vue router跳转到相应的用户界面；预约用户跳转到预约界面，管理员跳转到管理界面。
19.进一步地，用户通过预约界面，填写信息，包括预约人姓名、预约人手机号，预约部门、选择会议室、会议类型、会议日期以及备注信息；其中预约人姓名根据登录信息由用户表获得自动填写，预约部门根据登录用户信息由部门表获得自动填写；用户点击提交后，触发axios组件，形成预约请求信息，发送到后端模块。
20.进一步地，后端模块的zuul单元拦截预约请求信息，通过consul单元根据请求信息查找并调用所述会议室管理微服务单元；所述会议室管理微服务单元通过数据查询微服务单元获取会议室表，修改会议室表后通过数据查询微服务单元存入数据库，保存成功后返回成功信息至前端模块，否则返回失败信息至前端模块。
21.进一步地，管理员通过所述前端模块进行用户管理、角色管理、会议室管理、报表管理以及审核管理；
22.用户管理包括：用户姓名、登录密码以及绑定角色；
23.角色管理包括：新增、编辑或删除角色，查看角色绑定用户，修改角色权限；
24.会议室管理包括：会议室的新增、编辑或删除操作；
25.报表管理包括：查看预约用户的预约申请情况并打印；查看会议室的预约情况，包括按年按月按周统计，可将统计情况打印出来
26.审核管理包括：为角色指派权限后，进行角色审核，审核通过后，指派权限才会生效。
27.本发明的上述技术方案具有如下有益的技术效果：
28.本发明规范会议室的使用和预约管理，提高预约效率，避免资源冲突。用户只需要通过登录系统即可方便、快捷的了解每个会议室的当前状态和预定情况，进而提高申请被审核通过的可能性，最终提高会议室的使用率，同时节省会议室申请人及管理人的时间及精力。管理员登录管理系统，即可方便的管理用户和会议室权限，新增用户或会议室，也可直接指派相关用户申请特定会议室的权限，审核相关的会议室。
附图说明
29.图1是会议室预约系统功能模块示意图；
30.图2为系统前端模块架构；
31.图3为系统后端模块架构；
32.图4为预约的操作流程；
33.图5为预约界面；
34.图6为图5预约界面点击“新增”按钮，弹出新增会议室预约页面；
35.图7为管理员界面；
36.图8为管理员界面点击“角色管理”按钮后的页面。
具体实施方式
37.为使本发明的目的、技术方案和优点更加清楚明了，下面结合具体实施方式并参照附图，对本发明进一步详细说明。应该理解，这些描述只是示例性的，而并非要限制本发明的范围。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本发明的概念。
38.基于vue权限管理的办公室预约系统，采用springboot vue框架，通过数据库存储角色、用户、资源、部门、会议室及预约信息，后端通过springboot拦截器对api权限进行控制，后端提供接口返回用户可访问的模块及组件信息；前端通过用户可访问模块及组件信息动态加载侧边栏和页面中组件。相较于其他模块设计方案将角色传到前端，通过动态路由对界面展示进行控制。本方案的设计将用户可访问模块及组件信息传到前端，对界面展示进行控制。他人的方案需要非常明确每个组件需要哪些角色可以访问，当后期需要更改时，需要修改对应的前端代码才能完成授权。本方案的优点在于：将维护工作放在后端，角色权限分配改变时，不需要更改前端代码。后期维护工作较为容易，当有新的权限加入时，后端只需要维护角色表，用户表，资源表，代码做少量维护；前端则需修改router/index.js中的路由列表。
39.同时采用springboot框架，可以去除大量的xml配置文件，简化复杂的依赖管理，基本上可以做到自动化配置，能够快速启动容器，配合maven构造工具打包jar，java-jar进行部署运行，非常简单。
40.vue是个轻量级框架，实现双向数据绑定，使视图数据机构分离，数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
41.相较于其他前端框架，vue运行速度更快，跨平台移植更简单。
42.会议室预约系统模块及功能如图1所示，系统前端模块架构如图2所示，系统后端架构如图2所示。
43.vue权限管理的办公室预约系统，包括前端模块和后端模块。
44.所述前端模块，形成交互界面，根据用户的输入信息生成对应请求信息，发送至后端模块。vue.js是前端框架，axios负责前后端交互，mock是模拟数据接口。
45.图2是该预约系统的前端架构图，element是基于vue的桌面端组件库，可快速搭建vue页面结构，封装的组件能实现快速开发，大大减少项目的开发时间。vuerouter是vue的路由管理器，可实现模块化的、基于组件的路由配置，细粒度的导航控制。预约系统中，后端返回用户权限，前端根据用户权限处理得到左侧菜单，所有的页面跳转都需要通过vuerouter控制。mock是前端开发中可拦截页面发送的axios请求，再生成模拟数据响应的工具，可用来模拟后端数据接口，非常简单方便，无侵入性，可解放前端开发人员，让前后端可并行开发，大大缩短项目的开发时间。
46.所述后端模块包括zuul单元、consul单元、spring单元以及若干微服务单元；所述zuul单元拦截请求信息，consul单元根据请求信息查找并调用对应的微服务单元。
47.若干微服务单元包括审核管理微服务单元、角色管理微服务单元、会议室管理微服务单元、报表管理单元以及数据查询微服务单元；审核管理微服务单元用于执行登陆管理、账号管理以及审核管理；所述角色管理微服务单元用于进行角色权限管理，执行角色新增、修改或删除操作；所述会议室管理微服务单元，用于会议室的状态管理，执行会议室新增、修改或删除操作；所述报表管理单元基于后台的操作生成报表；所述数据查询微服务单元用于由数据库获取表单，将修改后的表单通过数据查询微服务单元存入数据库。
48.所述后端模块的数据库，存储用户表、角色表、会议室表、部门表以及报表；所述用户表包括用户信息以及登录密码，所述角色表包括用户对应的角色，所述会议室表记录各个会议室信息，所述部门表包括用户的部门信息。
49.后端模块架构采用springboot springsecurity springcloud mybatis的主体架构，同时选择consul注册中心，实现微服务的服务发现与配置。
50.图3是后端微服务架构图。zuul是一个网关应用程序，可处理所有请求，包括网页(web)、手机端(mobile、app)的请求，并执行微服务应用程序的动态路由。例如：前端发送/web/login请求，zuul可映射到登录服务，/web/authority可映射到权限服务，zuulproxy可将前端axios请求动态路由到相应的微服务。zuul可识别每个资源的验证要求，并拒绝要求不符的访问请求。zuul与consul配合使用，易于监控微服务，可在微服务网关收集监控数据并将其推送到外部系统进行分析；易于认证，可在微服务网关上进行认证，然后再将请求转发到后端的微服务，而无须在每个微服务中进行认证；可减少客户端与各个微服务(图中的service1,servicen等)之间的交互次数。
51.consulservice用于实现分布式系统的服务发现与配置,与其他分布式服务注册与发现的方案相比，consul的方案更加“一站式”,内置了服务注册与发现框架、分布式一致性协议实现、监控检查等，不需要依赖其他工具，使用起来也较为简单，同时consul用
golang实现，具有天然可移植性，方便后续部署，可与docker等轻量级容器无缝配合。consulservice提供如下功能：登记每个服务提供的功能；检测每个服务是否可用，剔除不可用服务；服务间互相调用时，通过consul很容易找到目标服务。
52.mybatis是一款优秀的持久层框架，它支持定制化sql、存储过程以及高级映射。mybatis避免了几乎所有的jdbc代码和手动设置参数以及获取结果集。mybatis可以使用简单的xml或注解来配置和映射原生信息，将接口和java的pojos(plain ordinary java object,普通的java对象)映射成数据库中的记录。与spring mvc、spring ioc/aop集成使用，可很方便实现对数据库的增删改查等操作。
53.springmvc和springioc/aop为spring组件，springboot是配置工具，springboot可以加入不同的组件。springcloud为基于spring boot的大容器，最适合用于管理spring boot创建的各个微服务应用，集成了多个微服务框架，能够简化开发者的代码量。
54.结合图1，系统实现权限管理和会议室预约。权限管理包括用户管理、会议室管理、角色管理、报表管理、审核管理。会议室预约模块可提交会议室预约申请，并且可编辑删除该登录用户之前所提交的预约申请(预约日期已过期的申请不可修改编辑)。
55.预约的操作流程如下，结合图4：
56.用户打开预约系统，进入到登录页面，输入用户名、密码、验证码，点击登录，发送登录请求，调用登录后台接口服务，判断账号密码是否正确，账号密码正确后调用权限后台接口服务，获取用户的权限(包括用户权限列表、菜单列表)，后台将token及用户的权限返给vue前端，在以后前端每次调用接口时都需要带上这个token，后台服务端获取到这个token后进行比对，如果通过则可以访问。
57.用户登录成功后，vue router会跳转到相应的用户界面。预约用户跳转到预约界面，管理员跳转到管理界面。
58.预约界面如图5所示。点击“新增”按钮，弹出新增会议室预约页面，如下图6所示。管理员界面如图7所示，点击角色管理后如图8所示。
59.预约用户在预约界面选择相应的会议室，点击“查看”按钮查看该会议室的预约信息，点击“预约”按钮，弹出预约界面，填完预约信息后，点击“提交”按钮，提交预约信息，调用后台服务接口，数据库保存预约信息，向前端返回成功或失败信息，同时刷新预约界面。
60.前端请求发送到后端时，先经过zuul微服务网关，网关与consul配合，进请求动态路由到相应的微服务中(service1、servicen等)，微服务根据请求的业务需要，调用操作数据库的服务(图三中的包含mybatis的服务)，最后将查询的结果返回给前端。具体来讲，后端模块的zuul单元拦截预约请求信息，通过consul单元根据请求信息查找并调用所述会议室管理微服务单元；所述会议室管理微服务单元通过数据查询微服务单元获取会议室表，修改会议室表后通过数据查询微服务单元存入数据库，保存成功后返回成功信息至前端模块，否则返回失败信息至前端模块。
61.管理员通过所述前端模块进行用户管理、角色管理、会议室管理、报表管理以及审核管理；
62.用户管理包括：用户姓名、登录密码以及绑定角色；
63.角色管理包括：新增、编辑或删除角色，查看角色绑定用户，修改角色权限；
64.会议室管理包括：会议室的新增、编辑或删除操作；
65.报表管理包括：查看预约用户的预约申请情况并打印；查看会议室的预约情况，包括按年按月按周统计，可将统计情况打印出来
66.审核管理包括：为角色指派权限后，进行角色审核，审核通过后，指派权限才会生效。
67.综上所述，本发明提供一种基于vue权限管理的办公室预约系统，包括前端模块和后端模块；所述前端模块，形成交互界面，根据用户的输入信息生成对应请求信息，发送至后端模块；所述后端模块包括zuul单元、consul单元、spring单元以及若干微服务单元；zuul单元拦截请求信息，consul单元根据请求信息查找并调用对应的微服务单元；本发明规范会议室的使用和预约管理，提高预约效率，避免资源冲突。用户只登录后即可方便、快捷的了解每个会议室的当前状态和预定情况，提高申请被审核通过的可能性，最终提高会议室的使用率并节省会议室申请人及管理人的时间及精力。管理员可方便的管理用户和会议室权限，新增用户或会议室，也可直接指派相关用户申请特定会议室的权限，审核会议室。
68.应当理解的是，本发明的上述具体实施方式仅仅用于示例性说明或解释本发明的原理，而不构成对本发明的限制。因此，在不偏离本发明的精神和范围的情况下所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。此外，本发明所附权利要求旨在涵盖落入所附权利要求范围和边界、或者这种范围和边界的等同形式内的全部变化和修改例。