CN114118492A - Office reservation system based on vue authority management - Google Patents

Abstract

The invention provides an office reservation system based on vue authority management, which comprises a front-end module and a back-end module; the front-end module forms an interactive interface, generates corresponding request information according to input information of a user and sends the corresponding request information to the rear-end module; the back-end module comprises a Zuul unit, a Consul unit, a Spring unit and a plurality of micro-service units; the Zuul unit intercepts request information, and the Consul unit searches and calls a corresponding micro-service unit according to the request information; the invention standardizes the use and reservation management of the conference room, improves the reservation efficiency and avoids resource conflict. The user can conveniently and quickly know the current state and the preset condition of each meeting room only after logging in, the possibility that the application is approved is improved, the utilization rate of the meeting rooms is finally improved, and the time and the energy of meeting room applicants and managers are saved. The administrator can conveniently manage the user and the conference room permission, add a new user or a conference room, and also can directly assign the permission of a related user to apply for a specific conference room to examine and verify the conference room.

Description

Office reservation system based on vue authority management

Technical Field

The invention relates to the technical field of intelligent office, in particular to an office reservation system based on vue authority management.

Background

With increasingly fierce competition and continuous deep innovation of enterprises in the present society, association among all departments inside the enterprises is more and more tight, enterprise conferences are also increased, conference information quantity is also increased, and the conferences are often required to carry out business communication, solve problems and make decisions.

In a traditional conference room management mode, a conference room is usually reserved by a paper recording mode, and the procedure is complicated and conflicts are easily generated. When a user applies for a meeting room, the user cannot know the preset condition of the current meeting room, and often experiences the processes of appointment consultation, report filling, signature stamping and the like, so that the user experience is poor. Meanwhile, when facing a large amount of meeting room resources and meeting appointment applications, the administrator is often difficult to make clear decisions depending on manpower, thereby causing the problem of insufficient utilization of meeting room resources.

The existing conference room management system is built based on three frameworks of Struts2, Spring and Hibernate, and the interface is designed by adopting a jQuery technology at the front end. However, the struts2 framework has certain loopholes, and has great hidden danger on information security in application and implementation. In particular, after the JSR-311 standard is released, as the Restful method flow is popularized, the struts2 gradually fade the sight of people, and although some plugins are added to the struts2 to support REST, the struts are cumbersome in the application process. Spring takes the IOC as a core, performs write-extension on functions, and successively pushes out Spring MVC to finish writing logic of a logic layer, and the Spring MVC basically finishes the work of replacing struts2 at present. The persistent layer of Hibernate is packaged too completely, so that developers cannot optimize SQL and flexibly apply native SQL, and meanwhile, the framework uses an ORM principle, so that configuration is too complex, large projects are encountered, maintenance and problems are continuous, and subsequent upgrading of the projects is not facilitated.

With the rapid development of the internet and the upgrading of the IT development technology, in the era of mobile internet, the separation of front and back ends is advocated, the data interaction of the front and back ends is performed according to http, the interface designed at the back end tends to the architecture of Restful, the front end is not only a web end, but also app is a large part, and the requirement of the front end on a cross-platform becomes urgent. These new developments are technically satisfactory for the new current conference room management system framework.

Disclosure of Invention

Aiming at the problems in the prior art, the invention provides an vue-privilege-management-based office reservation system, which adopts a springboot + vue frame, stores roles, users, resources, departments, meeting rooms and reservation information through a database, controls the api privilege through a springboot interceptor at the back end, and provides an interface for returning module and component information accessible to the users at the back end; the front end dynamically loads the components in the sidebars and the pages through the user accessible modules and component information. .

In order to achieve the above object, the present invention provides an vue privilege management-based office reservation system, comprising a front-end module and a back-end module;

the front-end module forms an interactive interface, generates corresponding request information according to input information of a user and sends the corresponding request information to the rear-end module;

the back-end module comprises a Zuul unit, a Consul unit, a Spring unit and a plurality of micro-service units; the Zuul unit intercepts request information, and the Consul unit searches and calls a corresponding micro-service unit according to the request information;

the micro service units comprise an auditing management micro service unit, a role management micro service unit, a conference room management micro service unit, a report management unit and a data query micro service unit; the auditing management micro-service unit is used for executing login management, account management and auditing management; the role management micro-service unit is used for carrying out role authority management and executing role adding, modifying or deleting operation; the conference room management micro-service unit is used for managing the state of the conference room and executing the addition, modification or deletion operation of the conference room; the report management unit generates a report based on the background operation; the data query micro-service unit is used for acquiring the form from the database and storing the modified form into the database through the data query micro-service unit.

Further, the front-end module is constructed based on a Vue.js architecture; and constructing and packaging an interactive page through the Element, controlling the page jump by the VueRouter, and triggering the Axios assembly through a submit button to form corresponding request information.

Furthermore, the front-end module is also provided with a Mock data interface, and in the front-end development process, the Mock is used for intercepting the request information sent by the page and then generating the data return for simulating the response of the back end.

Further, the rear-end module adopts SpringBoot, SpringCloud and Mybatis to form a main body framework.

Further, the Mybatis is used for realizing library search, and is integrated with Spring MVC, Spring IOC/AOP for use to realize the operations of adding, deleting, modifying and inquiring the database.

Furthermore, the back-end module also comprises a database for storing a user table, a role table, a meeting room table, a department table and a report; the user table comprises user information and login passwords, the role table comprises roles corresponding to the users, the conference room table records information of each conference room, and the department table comprises department information of the users.

Further, the user opens the reservation system, enters a login page, inputs a user name, a password and a verification code, and clicks to login; the front-end module sends a login request to the back-end module;

a Zuul unit of the rear-end module intercepts request information, and searches and calls an audit management micro-service unit according to the request information through a Consul unit; the auditing management micro-service unit acquires a user table through the data query micro-service unit, judges whether the account password is correct, calls an authority background interface service after the account password is correct, acquires the authority of the user, returns the token and the authority of the user to Vue front end by the background module, the token is used by the front end module each time the interface is called, the background module acquires the token and then compares the token, and if the token passes the comparison, the access is allowed;

after the user successfully logs in, the front-end module jumps to a corresponding user interface through the Vue Router; and the reservation user jumps to the reservation interface, and the administrator jumps to the management interface.

Further, the user fills in information through an appointment interface, wherein the information comprises an appointment name, an appointment mobile phone number, an appointment department, a conference room, a conference type, a conference date and remark information; the name of the reservation person is automatically filled in by the user table according to the login information, and the reservation department is automatically filled in by the department table according to the login user information; after the user clicks and submits, the Axios component is triggered to form reservation request information, and the reservation request information is sent to the back-end module.

Furthermore, a Zuul unit of the rear-end module intercepts reservation request information, and searches and calls the meeting room management micro-service unit according to the request information through a Consul unit; the conference room management micro-service unit acquires a conference room table through the data query micro-service unit, the conference room table is modified and then stored in the database through the data query micro-service unit, successful information is returned to the front-end module after the conference room table is stored successfully, and otherwise, failed information is returned to the front-end module.

Further, the administrator performs user management, role management, conference room management, report management and audit management through the front-end module;

the user management comprises the following steps: user name, login password and binding role;

the role management comprises the following steps: adding, editing or deleting roles, checking role binding users, and modifying role authority;

the conference room management comprises: adding, editing or deleting operation of a conference room;

the report management comprises the following steps: checking the reservation application condition of the reservation user and printing; the appointment conditions of the meeting room can be checked, including annual, monthly and weekly statistics, and the statistical conditions can be printed

The audit management comprises the following steps: and after the authority is assigned to the role, role auditing is carried out, and the assigned authority can take effect after the auditing is passed.

The technical scheme of the invention has the following beneficial technical effects:

the invention standardizes the use and reservation management of the conference room, improves the reservation efficiency and avoids resource conflict. Users can conveniently and quickly know the current state and the preset condition of each meeting room only by logging in the system, so that the possibility that the applications are approved is improved, the utilization rate of the meeting rooms is finally improved, and the time and the energy of meeting room applicants and managers are saved. The administrator logs in the management system, so that the user and the conference room permission can be conveniently managed, the user or the conference room is newly added, and related users can be directly assigned to apply for the permission of a specific conference room to examine and verify the related conference room.

Drawings

FIG. 1 is a schematic diagram of a conference room reservation system functional module;

FIG. 2 is a system front end module architecture;

FIG. 3 is a system back end module architecture;

FIG. 4 is a flow of operations for a reservation;

FIG. 5 is an appointment interface;

FIG. 6 is the reservation interface of FIG. 5 clicking a "newly added" button to pop up a reservation page of a newly added conference room;

FIG. 7 is an administrator interface;

FIG. 8 is a page of the administrator interface after clicking the "role management" button.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be described in further detail with reference to the accompanying drawings in conjunction with the following detailed description. It should be understood that the description is intended to be exemplary only, and is not intended to limit the scope of the present invention. Moreover, in the following description, descriptions of well-known structures and techniques are omitted so as to not unnecessarily obscure the concepts of the present invention.

An office reservation system based on vue authority management adopts a springboot + vue frame, stores roles, users, resources, departments, meeting rooms and reservation information through a database, controls the api authority through a springboot interceptor at the back end, and provides an interface to return modules and component information accessible by the users at the back end; the front end dynamically loads the components in the sidebars and the pages through the user accessible modules and component information. Compared with other module design schemes, the method has the advantages that the roles are transmitted to the front end, and interface display is controlled through dynamic routing. The design of the scheme transmits the information of the module and the component which can be accessed by the user to the front end to control the interface display. The scheme of others needs to very clearly determine which roles are required to be accessed by each component, and when the components need to be changed at a later stage, corresponding front-end codes need to be modified to finish authorization. The scheme has the advantages that: maintenance work is put at the back end, and when role authority distribution is changed, front-end codes do not need to be changed. The later maintenance work is easy, and when a new authority is added, the rear end only needs to maintain the role table, the user table, the resource table and the code in a small amount; the front end needs to modify the route list in router/index.

Meanwhile, a springboot frame is adopted, so that a large number of xml configuration files can be removed, the complex dependence management is simplified, the automatic configuration can be basically realized, the container can be quickly started, the java construction tool is matched to pack jar, and the deployment and the operation of the jar-jar are very simple.

Vue is a lightweight frame, realizes bidirectional data binding, separates view data mechanism, and has simple data change, no need of logic code modification, and only need of data operation to complete related operations.

Vue runs faster and is simpler to migrate across platforms than other front end frameworks.

The conference room reservation system module and functions are shown in fig. 1, the system front-end module architecture is shown in fig. 2, and the system back-end architecture is shown in fig. 2.

vue A rights management office reservation system includes a front end module and a back end module.

The front-end module forms an interactive interface, generates corresponding request information according to input information of a user and sends the corresponding request information to the rear-end module. Js is a front-end framework, Axios is responsible for front-end and back-end interaction, and Mock is an analog data interface.

Fig. 2 is a front-end architecture diagram of the reservation system, Element is a desktop end component library based on Vue, a vue page structure can be rapidly built, and a packaged component can be rapidly developed, so that the development time of a project is greatly reduced. vueRouter is a route manager of Vue, and can realize modular and component-based route configuration and fine-grained navigation control. In the reservation system, the back end returns the user authority, the front end processes the user authority to obtain a left menu, and all page jumps are controlled by the VueRouter. The Mock is a tool which can intercept an axios request sent by a page in front-end development and then generate a simulation data response, can be used for simulating a back-end data interface, is very simple, convenient and non-invasive, can liberate front-end developers, enables the front end and the back end to develop in parallel and greatly shortens the development time of a project.

The back-end module comprises a Zuul unit, a Consul unit, a Spring unit and a plurality of micro-service units; and the Zuul unit intercepts the request information, and the Consul unit searches and calls the corresponding micro-service unit according to the request information.

The micro service units comprise an auditing management micro service unit, a role management micro service unit, a conference room management micro service unit, a report management unit and a data query micro service unit; the auditing management micro-service unit is used for executing login management, account management and auditing management; the role management micro-service unit is used for carrying out role authority management and executing role adding, modifying or deleting operation; the conference room management micro-service unit is used for managing the state of the conference room and executing the addition, modification or deletion operation of the conference room; the report management unit generates a report based on the background operation; the data query micro-service unit is used for acquiring the form from the database and storing the modified form into the database through the data query micro-service unit.

The database of the back-end module stores a user table, a role table, a meeting room table, a department table and a report; the user table comprises user information and login passwords, the role table comprises roles corresponding to the users, the conference room table records information of each conference room, and the department table comprises department information of the users.

The rear-end module architecture adopts a main body architecture of SpringBoot + SpringSecurity + SpringCloud + Mybatis, and selects a Consul registration center at the same time, so that the service discovery and configuration of the micro-service are realized.

FIG. 3 is a diagram of a back-end microservice architecture. Zuul is a gateway application that handles all requests, including web page (web), mobile phone side (mobile, app) requests, and performs dynamic routing of microservice applications. For example: the front-end sends/web/login requests,/zuul may map to login services,/web/authority may map to authority services,/ZuulProxy may dynamically route front-end axios requests to corresponding microservices. Zuul may identify the authentication requirements for each resource and deny access requests that do not meet the requirements. Zuul and Consul are matched for use, micro-service is easy to monitor, monitoring data can be collected at a micro-service gateway and pushed to an external system for analysis; the authentication is easy, the authentication can be carried out on the micro-service gateway, and then the request is forwarded to the micro-service at the back end without carrying out the authentication in each micro-service; the number of interactions between the client and the various microservices (service1, service n, etc. in the figure) may be reduced.

The Consult service is used for realizing service discovery and configuration of a distributed system, compared with other distributed service registration and discovery schemes, the Consult scheme is more 'one-stop', a service registration and discovery framework, distributed consistency protocol implementation, monitoring and inspection and the like are built in, other tools are not needed, the use is simpler, meanwhile, the Consult is realized by Golang, the natural portability is realized, the subsequent deployment is convenient, and the Consult service can be in seamless fit with light-weight containers such as Docker and the like. Consumservice provides the following functions: registering the function provided by each service; detecting whether each service is available or not, and rejecting unavailable services; when the services are mutually called, the target service is easily found through Consul.

MyBatis is an excellent persistent layer framework that supports customized SQL, stored procedures, and advanced mapping. MyBatis avoids almost all JDBC code and manual setting of parameters and acquisition of result sets. MyBatis can use simple XML or annotations to configure and map native information, mapping interfaces and Java's POJOs (Plain Ordinary Java Object) into records in the database. The method is integrated with Spring MVC and Spring IOC/AOP for use, and can conveniently realize the operations of increasing, deleting, modifying, checking and the like of the database.

The Spring MVC and the Spring IOC/AOP are Spring components, the Spring boot is a configuration tool, and different components can be added into the Spring boot. The Spring cloud is a large container based on the Spring Boot, is most suitable for managing each micro-service application created by the Spring Boot, integrates a plurality of micro-service frameworks, and can simplify the code amount of a developer.

In connection with fig. 1, the system implements rights management and meeting room reservations. The authority management comprises user management, conference room management, role management, report management and audit management. The meeting room reservation module may submit a meeting room reservation application and may edit and delete a reservation application previously submitted by the logged-in user (an application whose reservation date has expired may not be edited by modification).

The operation flow of the reservation is as follows, and is combined with the figure 4:

the user opens the reservation system, enters a login page, inputs a user name, a password and an authentication code, clicks login, sends a login request, calls a login background interface service, judges whether the account password is correct or not, calls a permission background interface service after the account password is correct, acquires the permission of the user (including a user permission list and a menu list), the background returns the token and the permission of the user to Vue front end, the token is required to be taken by the front end each time the interface is called later, the background server acquires the token and then compares the token, and if the token passes the comparison, the user can access the system.

After the user logs in successfully, the Vue Router jumps to a corresponding user interface. And the reservation user jumps to the reservation interface, and the administrator jumps to the management interface.

The reservation interface is shown in fig. 5. Clicking the "add new" button pops up the add new meeting room appointment page, as shown in fig. 6 below. The administrator interface is shown in FIG. 7, and after the role management is clicked, it is shown in FIG. 8.

The reservation user selects a corresponding conference room on a reservation interface, clicks a check button to check reservation information of the conference room, clicks a reservation button, pops up the reservation interface, clicks a submit button after the reservation information is filled, submits the reservation information, calls a background service interface, stores the reservation information in a database, returns success or failure information to a front end, and refreshes the reservation interface.

When the front end request is sent to the back end, the front end request passes through a Zuul micro-service gateway, the gateway is matched with Consul, the request is dynamically routed to a corresponding micro-service (service1, service N and the like), the micro-service calls a service (the service containing MyBatis in the figure III) of an operation database according to the service requirement of the request, and finally, the query result is returned to the front end. Specifically, a Zuul unit of the back-end module intercepts reservation request information, and searches and calls the meeting room management micro-service unit according to the request information through a Consul unit; the conference room management micro-service unit acquires a conference room table through the data query micro-service unit, the conference room table is modified and then stored in the database through the data query micro-service unit, successful information is returned to the front-end module after the conference room table is stored successfully, and otherwise, failed information is returned to the front-end module.

The administrator performs user management, role management, conference room management, report management and audit management through the front-end module;

the user management comprises the following steps: user name, login password and binding role;

the role management comprises the following steps: adding, editing or deleting roles, checking role binding users, and modifying role authority;

the conference room management comprises: adding, editing or deleting operation of a conference room;

the report management comprises the following steps: checking the reservation application condition of the reservation user and printing; the appointment conditions of the meeting room can be checked, including annual, monthly and weekly statistics, and the statistical conditions can be printed

The audit management comprises the following steps: and after the authority is assigned to the role, role auditing is carried out, and the assigned authority can take effect after the auditing is passed.

In summary, the present invention provides an vue-based office reservation system, which includes a front-end module and a back-end module; the front-end module forms an interactive interface, generates corresponding request information according to input information of a user and sends the corresponding request information to the rear-end module; the back-end module comprises a Zuul unit, a Consul unit, a Spring unit and a plurality of micro-service units; the Zuul unit intercepts request information, and the Consul unit searches and calls a corresponding micro-service unit according to the request information; the invention standardizes the use and reservation management of the conference room, improves the reservation efficiency and avoids resource conflict. The user can conveniently and quickly know the current state and the preset condition of each meeting room only after logging in, the possibility that the application is approved is improved, the utilization rate of the meeting rooms is finally improved, and the time and the energy of meeting room applicants and managers are saved. The administrator can conveniently manage the user and the conference room permission, add a new user or a conference room, and also can directly assign the permission of a related user to apply for a specific conference room to examine and verify the conference room.

It is to be understood that the above-described embodiments of the present invention are merely illustrative of or explaining the principles of the invention and are not to be construed as limiting the invention. Therefore, any modification, equivalent replacement, improvement and the like made without departing from the spirit and scope of the present invention should be included in the protection scope of the present invention. Further, it is intended that the appended claims cover all such variations and modifications as fall within the scope and boundaries of the appended claims or the equivalents of such scope and boundaries.

Claims (10)

1. An vue right management-based office reservation system is characterized by comprising a front-end module and a back-end module;

the front-end module forms an interactive interface, generates corresponding request information according to input information of a user and sends the corresponding request information to the rear-end module;

the back-end module comprises a Zuul unit, a Consul unit, a Spring unit and a plurality of micro-service units; the Zuul unit intercepts request information, and the Consul unit searches and calls a corresponding micro-service unit according to the request information;

the micro service units comprise an auditing management micro service unit, a role management micro service unit, a conference room management micro service unit, a report management unit and a data query micro service unit; the auditing management micro-service unit is used for executing login management, account management and auditing management; the role management micro-service unit is used for carrying out role authority management and executing role adding, modifying or deleting operation; the conference room management micro-service unit is used for managing the state of the conference room and executing the addition, modification or deletion operation of the conference room; the report management unit generates a report based on the background operation; the data query micro-service unit is used for acquiring the form from the database and storing the modified form into the database through the data query micro-service unit.

2. An vue rights management based office reservation system according to claim 1, wherein the front end module is built based on vue.js architecture; and constructing and packaging an interactive page through the Element, controlling the page jump by the VueRouter, and triggering the Axios assembly through a submit button to form corresponding request information.

3. The vue privilege management-based office reservation system according to claim 2, wherein the front-end module is further configured such that Mock is a simulation data interface, and requests sent from pages are intercepted during the front-end development process, and data returns are generated as simulation back-end responses.

4. The vue rights management-based office reservation system of claim 2, wherein the backend module forms a body framework with SpringBoot, SpringCloud, and Mybatis.

5. The vue rights management-based office reservation system of claim 4, wherein Mybatis is used to enable library lookup, integrated use with Spring MVC, Spring IOC/AOP to enable add, delete, modify, and query operations on a database.

6. The vue privilege management-based office reservation system of claim 4, wherein the back-end module further comprises a database storing a user table, a role table, a meeting room table, a department table, and a report table; the user table comprises user information and login passwords, the role table comprises roles corresponding to the users, the conference room table records information of each conference room, and the department table comprises department information of the users.

7. The vue privilege management-based office reservation system of claim 6, wherein a user opens the reservation system, enters a login page, enters a username, password, authentication code, clicks login; the front-end module sends a login request to the back-end module;

a Zuul unit of the rear-end module intercepts request information, and searches and calls an audit management micro-service unit according to the request information through a Consul unit; the auditing management micro-service unit acquires a user table through the data query micro-service unit, judges whether the account password is correct, calls an authority background interface service after the account password is correct, acquires the authority of the user, returns the token and the authority of the user to Vue front end by the background module, the token is used by the front end module each time the interface is called, the background module acquires the token and then compares the token, and if the token passes the comparison, the access is allowed;

after the user successfully logs in, the front-end module jumps to a corresponding user interface through the Vue Router; and the reservation user jumps to the reservation interface, and the administrator jumps to the management interface.

8. An vue rights management-based office reservation system according to claim 7,

the user fills in information through an appointment interface, wherein the information comprises an appointment name, an appointment mobile phone number, an appointment department, a conference room, a conference type, a conference date and remark information; the name of the reservation person is automatically filled in by the user table according to the login information, and the reservation department is automatically filled in by the department table according to the login user information; after the user clicks and submits, the Axios component is triggered to form reservation request information, and the reservation request information is sent to the back-end module.

9. The vue privilege management-based office reservation system according to claim 8, wherein a Zuul unit of a back-end module intercepts reservation request information, searches and calls the meeting room management micro-service unit according to the request information through a Consul unit; the conference room management micro-service unit acquires a conference room table through the data query micro-service unit, the conference room table is modified and then stored in the database through the data query micro-service unit, successful information is returned to the front-end module after the conference room table is stored successfully, and otherwise, failed information is returned to the front-end module.

10. The vue privilege management-based office reservation system of claim 9, wherein an administrator performs user management, role management, meeting room management, report management, and audit management through the front-end module;

the user management comprises the following steps: user name, login password and binding role;

the role management comprises the following steps: adding, editing or deleting roles, checking role binding users, and modifying role authority;

the conference room management comprises: adding, editing or deleting operation of a conference room;

the report management comprises the following steps: checking the reservation application condition of the reservation user and printing; the appointment conditions of the meeting room can be checked, including annual, monthly and weekly statistics, and the statistical conditions can be printed

The audit management comprises the following steps: and after the authority is assigned to the role, role auditing is carried out, and the assigned authority can take effect after the auditing is passed.

Images