Design and implementation of school instrument and equipment management system based on Vue+SpringBoot+ECharts (graduate thesis + program source code)
Hello everyone, today I will introduce to you the design and implementation of the school instrument and equipment management system based on Vue+SpringBoot+ECharts. At the end of the article, the thesis and source code download address of this graduation project are attached. Friends who need to download the proposal report PPT template and thesis defense PPT template, etc., can go to my blog homepage to view the self-service download method in the bottom column on the left.
Article directory:
1. Project introduction
- The school laboratory is an important place for the school to carry out teaching activities and cultivate students' operational abilities, and the school's instruments and equipment are an indispensable and important part of the laboratory. At present, the management of instruments and equipment in schools is basically carried out manually. Each link such as declaration, registration, use and storage of instruments requires a certain amount of manpower, material and financial resources. Moreover, this manual management method will not only cause a lot of waste of manpower, but also have many problems in the processing speed of instrument information, statistical information of instrument inventory, instrument use and reservation management, which will not only affect normal operation The development of teaching experiments may also lead to the loss and damage of instruments and improper purchase of equipment due to management problems of instruments and equipment. Therefore, the development of the corresponding instrument and equipment management system can greatly reduce the loss of school instruments and equipment and the management level of instrument and equipment, improve the utilization rate of instruments and equipment, improve the efficiency of instrument procurement and management, and free instrument and equipment managers from numerous data information, The release of troublesome mathematical statistics and other work can further improve the professional level and management level of instrument and equipment managers. The project is completed using SpringBoot and Vue frameworks. The SpringBoot framework is based on Spring, but it can greatly reduce the number of configuration files like Spring and enable the program to run more efficiently. Vue is a framework for building front-end user interfaces. It focuses on the view layer and provides a simpler and easier-to-understand API. It is currently the most extensive front-end application framework. The system mainly implements functions such as instrument and equipment usage declaration, scrap application management, instrument and equipment procurement management, and system user management.
2. Resource details
Project difficulty: medium difficulty
Applicable scenario: graduation project on related topics
Word count of supporting paper: 10,332 words and 32 pages< a i=3>Contains: full set of source code + completed thesisRecommended download method for ppt templates such as proposal report, thesis defense, project report, etc.:
3. Keywords
SpringBoot; Vue; instrument management system; Axios4. Introduction to Bishe
Tip: The following is a brief introduction to the graduation thesis. The complete source code of the project and the download address of the complete graduation thesis can be found at the end of the article.
Chapter 1 Introduction
With the continuous implementation of the strategy of rejuvenating the country through science and education and strengthening the country through talent, the funding invested by our national government in educational infrastructure shows a trend of gradual and steady growth year by year. Scientific research equipment, especially some large-scale high-precision instruments and equipment, is a guarantee for improving the quality of teaching. Its overall quality and quantity are also constantly improving and growing with the increase in funding year by year. In today's world, our country is already at the forefront of the world in terms of the quality and quantity of scientific research equipment in universities. At the same time, a series of problems have arisen, such as uneven distribution of large instruments and the utilization rate of some instruments and equipment in universities. It is not high and the sharing rate of equipment is also relatively low. Therefore, this article is to improve the understanding of the management of instruments and equipment in colleges and universities based on the existing knowledge, to better use the instruments and equipment, so that the resources can be fully and reasonably managed and used, and to improve the application and thinking of open management of laboratory instruments in local colleges and universities. .
1.1 Research Significance
After research and investigation, it can be found that most schools do not pay attention to the management of laboratory consumables [1]. School laboratories are essential and important places for every university today, and there are many problems and needs in the management of laboratory instruments and equipment. A management system can be constructed to solve and simplify the administrator's tasks. This can not only save a certain amount of manpower and financial resources, but also speed up the processing speed and accuracy of equipment operation. Therefore, this research topic also has great significance in the future digital construction of colleges and universities. Its research direction also has great application prospects in the future. According to the results of the survey (Table 1-1), among the current 21 local public undergraduate universities in Fujian, only five have established laboratory instrument and equipment management offices. Most of the other 16 schools have laboratory instrument management departments. It depends on the Academic Affairs Office or the Assets Office. This is due to the relatively low dominant status of the management department, which leads to insufficient attention being paid to the construction of the management system. Relatively speaking, universities that are slightly behind in development will be more committed to introducing high-tech talents and purchasing expensive instruments and equipment, thereby neglecting the construction of a team of laboratory professionals. The construction of scientific research platforms can not only improve the enthusiasm of university faculty and staff, but also improve the use management and continuous function expansion of instruments and equipment.
Table 1-1 Construction of large-scale instrument and equipment management system in 21 local general universities in Fujian [2]
School name establishment Laboratory Equipment and Management Office Large-scale Precision Instrument and Equipment Management Measures can be found The open sharing management methods of instruments can be found
Fujian Normal University Yes Yes Yes
Fujian Agriculture and Forestry University Yes Yes
Fujian College of Traditional Chinese Medicine No No No
Fujian Medical University Yes Yes Yes
Fujian Police College No No No
Fujian Engineering College No No Yes a>
Fujian Business College No No No
Minjiang University No No Yes
Fujian Jiangxia University No No No
Fujian Normal University No No No
Jimei University No No No
Xiamen University of Technology No No No
Xiamen Medical College Yes No
Huaqiao University Yes Yes Yes
Quanzhou Normal University Yes
Minnan Normal University No Yes Yes< a i=18> Putian University No No Yes Longyan University No Yes Sanming University No No No Wuyi University No No No Ningde Normal University No No No
1.2 Research content
Analysis part: The functional structure of the school equipment management system is shown in Figure 1-1. There are mainly two roles: administrator and ordinary user. The administrator has instrument management functions, user management, and application management for ordinary users. Ordinary users can check the system information on the homepage, check their own information in the personal center, and can also apply for reservations, purchase of equipment, and deletion of equipment for the school.
Figure 1-1 Structure diagram of school equipment management system
Design part: The school instrument management system is mainly composed of ordinary users and administrators, and the two types of users correspond to different functions. Therefore, all users are divided into two roles through dynamic routing, and then all functions are saved into the menu table, distinguished by ID. In the character menu table, different menu functions are assigned to the two characters.
Verification part: Finally, the system enables the administrator to purchase and add instruments, remove them from the shelves, query instrument information by page, and modify the instrument information content. Users can also add, delete, modify, and check. Conduct review process for various applications from users. Ordinary users can view personal information, instrument application status and information reports of the system.
1.3 Research Technology
1.3.1 SpringBoot Framework
Vue combined with SpringBoot and MyBatis is a popular technology in the current B/S development model [3]. The Spring framework is a lightweight Java framework. Its role is to simplify enterprise development. By componentizing each module in the project project and handing it over to the container for unified management, it can not only help programmers implement the Java classes at the bottom of the code. Instantiation can also manage its life cycle. In the Spring framework, each type of functional module is abstracted to form a different Bean. Through the Bean, we can realize the management of different functions, which greatly simplifies our development process. encountered many problems. Spring is a framework with features such as control inversion, dependency injection, and aspect-oriented programming. SpringBoot is a framework used to simplify Spring configuration. SpringBoot follows the design method of Spring 4.0 as a whole. It not only inherits the original advantages of the Spring framework, but also completes the construction of the entire project by simplifying the development configuration, becoming an indispensable tool for developers, and because it contains a large number of The framework solves the conflict problem between dependent package versions to a certain extent, thus strengthening the stability of the SpringBoot project. Spring Boot has a built-in servlet container and automatically configures the beans in the Spring container so that users can quickly build projects. Greatly simplifies the project writing process.
1.3.2 MyBatis-Plus
MyBatis is a persistence layer framework that allows customized database statements and reduces most JDBC operations. Information can be configured through annotations or XML, and ORM field mapping between database and Java objects is supported. MyBatis-Plus is based on the MyBatis framework to simplify development and improve programming efficiency. It also provides some practical plug-ins. When using MyBatis, you need to write statements in MyBatis-Plus adds some functions on the basis of MyBatis. It only adds and does not change the content of MyBatis. In short, it is to simplify the development of programmers and improve our efficiency. What it adds is that it encapsulates most of the addition, deletion, modification and query methods. Programmers no longer need to write XML and can directly call the ready-made encapsulated methods. For MyBatis-Plus, we only need to modify the MyBatis dependency on the original MyBatis code into a MyBatis-Plus dependency, and then add the code generator dependency and its template dependency. The next step is to modify the yml file according to your own configuration. We only need to write the code template for one table, and then the addition, deletion, modification and query operations of other tables can be completed through the code generator, which greatly reduces the developer's work intensity. Regarding writing the code generator, we mainly configure some code information, such as the output directory of the code, set the mapperXml generation path, and the database tables that need to be generated, such as the User table of the system. We only need to generate the The table name is changed to User, so that it will quickly generate codes for Entity, Mapper, MapperXML, Controller, Service, ServiceImpl and other classes corresponding to the User table based on the code template, which greatly improves the efficiency of system development.
1.3.3 Vue
Vue is a progressive front-end framework used to build user interfaces. The front-end framework of this system is selected
Choose the currently popular Vue framework [4]. It is different from other front-end frameworks in that Vue is designed by developers
to be a bottom-up layer-by-layer application. model. Vue implements the two-way binding of views and models through the MVVM pattern (i.e., view model layer, model layer, view layer). In short, when the database data changes, the page will automatically change. When the page changes, the data will also be updated. The core library of Vue only focuses on the view layer [5], so for many Java programmers who are not good at front-end development, it is a relatively easy front-end framework to get started with. Using the backend SpringBoot framework and the frontend Vue.js framework construction, the project implements front-end and back-end analysis [6]. In Vue, Axios is used to interact with front-end and back-end data, and the front-end and back-end data request process is simplified by customizing a new Axios instance request. Axios is an HTTP library based on promises and can be used in browsers and node.js, which greatly improves development efficiency [7]. Moreover, Axios is essentially an encapsulation of native XHR, but Axios is an implemented version of Promise and complies with the latest specifications of ES.
1.3.4 SpringBoot integrates JWT
The full name of JWT is: json web token. Its implementation mechanism is to encrypt and package the logged-in user's information into the token, so that the sub-server does not need to store all the user's information. The server only needs to use the key to verify whether the token is correct to determine whether the user can pass the verification. Generate a token in TokenUtils, save the user id into the token, use it as the payload, set the token expiration time, and use the password as the key of the token. When the user logs in, the token will be taken out from the http request, and then the user's token will be judged. The interceptor JwtInterce is written to intercept the token. One is to judge whether the token is empty. The second is to verify whether the user ID in the token can be retrieved and can correspond to the userId in the database. The last step is to use the user password in the database to verify the visa in the token. Configure the interceptor InterceptorConfig to intercept all requests. Except for the initial login and registration requests, which do not need to be intercepted, others need to verify the token. The exceptions that cannot pass are handled by configuring the global exception capture GlobalExceptionHander.
1.3.5 System Integration ECharts
ECharts is an open source visualization library with JavaScript at the bottom. It can run smoothly on desktop and mobile devices and has good performance. ECharts is also compatible with most popular browsers on the Internet today, such as Chrome, Firefox, Safari, etc. ECharts provides many commonly used intuitive charts, such as pie charts, bar charts, line charts, etc., and can support the definition of self-charts. Has rich interactive functions. The first step in using ECharts is to download and introduce the echarts.js file into the Vue page. The generation of charts depends on this js library. The second step is to specify a container to store the charts generated by ECharts, followed by initializing the instance object of the container. The third step is to specify the configuration items of ECharts and the data of the system transmitted in the background. The last step is to set the configuration item data just now to the instance object so that the background data can be displayed in the chart.
Chapter 2 Overall System Design
2.1 Overall System Architecture
The school instrument management system can realize the use of laboratory instruments by university instrument administrators and teachers. Functions such as reservation, purchase, removal, information review, etc. The project adopts the concept of front-end and back-end separation. Vue is responsible for page display and SpringBoot is responsible for business logic processing, which is conducive to project development and later maintenance [8]. Use Vue's dynamic routing to implement post-login function selection for different roles and different states. This system uses B/S architecture to complete the design. It mainly consists of view layer, business logic layer and physical layer. Practice has proved that the B/S architecture in web browser application development has easy operation of the system interface and strong scalability [9].
2.1.1 View layer
This layer is designed in two parts, namely the instrument administrator view layer and the ordinary user view layer. The instrument administrator view layer includes user management, and the user management of the system is realized through the operation of the user table. In role management, there are two main roles, one is the ordinary user and the other is the administrator. Administrators can assign different functions to different roles in role management. Menu management includes all view interfaces of the system. On this basis, a role menu table is created, and menus corresponding to different roles are allocated through the role id and menu id. The instrument management view layer is mainly controlled by the administrator. The administrator can add, edit, delete instruments through different applications from users, and check the loan status of instruments. There is also a view layer for each application. The administrator can manage the applications of ordinary users. There are operations for passing the review and failing the review. Ordinary users can apply for instruments and cancel the application. The display effect of the homepage is the same for both roles. ECharts is used to display some information of the system through charts.
2.1.2 Business logic layer
The business logic layer is a layer used to specifically handle the business requirements of some systems. It is located above the database and below the service layer. , used to complete a series of CRUD on database tables. The business logic layer is the core part of the system architecture. Its main focus is on the customization of business rules and the implementation of business processes. A simple understanding is that it consists of javaBean that encapsulates entity data and classes that encapsulate business logic. The business logic layer is the interaction between data and the view layer. This layer is the core business. In order to realize the core business of the system, which mainly includes user management, instrument management, application review functions and other related functions, school instruments are established through database information. Management system model to achieve effective management of instruments and equipment.
2.1.3 Data Access Layer
The data access layer is sometimes called the persistence layer. Its function is mainly responsible for accessing the database and can access the database system, Binary files, text documents or some XML documents, in simple terms are the operations of Select, Insert, Update and Delete on the data table. Developers can only focus on one layer of the entire project structure, which can reduce the dependencies between layers, facilitate standardization, and achieve logical reuse between layers. The persistence layer mainly saves user data into the database we established so that it can achieve persistence operations.
Chapter 3 System Detailed Design
3.1 Functional design
3.1.1 User login registration
There are two roles in this system, namely instrument administrator and ordinary user. When a user registers, the default is normal user registration. Only administrators can authorize users to different roles in the user management interface. Based on the reality of life, most of them are ordinary users at the beginning, and ordinary users are also a large base. Administrators are added only under special circumstances, and administrators are assigned by existing administrators. Based on dynamic routing settings, ordinary users will have four interfaces: homepage, loan application, purchase application, and removal application. In addition to the homepage, the administrator will also add a parent menu for system management. Under the parent menu, there are also users. Management, role management, instrument management, menu management, application management and other interfaces. When the user registers, the interface will prompt the account password format and there will be a password confirmation link. The system will perform form verification on the data entered by the user. One is to determine whether the same password has been entered twice, and the other is to call the background data to verify the legality of the user. sex, to determine whether it can be used normally [10] and whether it has been registered. After the user successfully logs in, the system will store the user information in the browser through localStorage.
3.1.2 Personal homepage function
After registering and logging in with their account and password, users can enter the homepage, edit their personal information, and upload their own avatar. Modify personal nickname, email, phone number and address. There is also an exit function, which will delete the user's personal information (such as menus and tokens) from the browser application cache. When a user without a token or with an expired token accesses a route of the system that is not allowed, the request will be will be intercepted by the interceptor. The personal homepage is also used to display some user information and instrument storage information of the system, that is, ECharts is used to display user registration information and instrument purchase information in various time periods through line charts or bar charts. The homepage also has a click-to-shrink function on the left menu bar to facilitate users to better query the chart information on the homepage.
3.1.3 User management function
The main function of this module is to maintain the information of laboratory managers [11]. When managing the system, administrators can use the search box on the user management page to find the user they want to modify. There are three search methods, one is by user name, the second is by entering the user's personal email, and the other is by Search by the user's exclusive address. This search not only supports single condition search but also supports joint query of multiple conditions. The main method of implementation is to use the username, email, and address transmitted from the front end and then call the packaged class QueryWrapper in MyBatis-Plus to search for database-related content through the like keyword, and return the returned data to the packaging class through the interface. Store it in the Result packaging class. This packaging class mainly has three fields. One is the status code used to determine success or failure. There are several customized states, 200 success, 400 parameter error, 401 indicating insufficient permissions, 500 system error, and 600 indicating other Unusual business issues. Result also contains msg and data fields. Data is used to store user information transmitted from the database by the service layer, while msg is used to prompt some system information. Such as "system error", "success", etc.
3.1.4 Role management function
There are two roles in the school equipment management system, one is the administrator, and the other is the ordinary user. The Role data table mainly has four fields, id, name, description, and flag. name represents the role name, and flag is used as the unique identifier of the role, namely ROLE_USER and ROLE_ADMIN. When it is necessary to implement different operations for different roles, the roleflag is judged. Therefore, there will be a role attribute on each user, which is used to determine the identity attributes of each user, that is, administrators and ordinary users. On the role management page, the administrator can assign a menu. The menu is implemented using Vue's Tree control. The data is bound to the menuData menu data. The requested menu data is the get data requested from the background through Axios, that is, the Json containing the menu. data, and then process its data into an id array through map (v => v.id). Then the name of the menu is used as the configuration option of props, and the name is used as the child node, leaf node, and tree node text display of the tree. The management page also has a search and reset function. When this function only includes name search and reset, the reset function is to set a @click event to trigger the "reset" event. This event mainly changes the entered this. name, this.flag, and this.description are assigned empty values, and then the load event is triggered to request the page again. Searches corresponding to other fields indicate that this page is not used much, so there is no need to go into details about other less practical functions.
3.1.5 Menu management function
The menu management interface can create new pages and assign them to different roles, or realize all the functions of existing roles. The implementation of this function mainly relies on three tables. A menus table that stores menu ids, menu page names, page paths, and pids is used to store some submenus’ parent menu ids, icons, etc. The second is a role table that mainly contains the ids, unique identifiers, and name. The third and most important table is the role-menu table. It contains two fields, one is the id of the role, and the other is the id of the menu, so that different roles can be mapped to different menu functions. When a menu does not have a parent menu and it does not have a corresponding page path, it can create its submenu, such as user management and instrument management in system management. The relationship is that a parent menu corresponds to multiple submenus. When you want to add a menu, a dialog box will pop up, which is wrapped with the el-dialog component. The normal interface this.dialogFormVisible = false; only when we click the new button, the handleAdd method will be triggered, which is to change this. Set dialogFormVisible to true, and then save the data we input into the dialog box into this.form. The data will be transferred to the background to update the database and display the new data on the page. The same is true for adding a new submenu, except that the calling method must bring the pid, so that the submenu will be distinguished from other parent menus and the new submenu can be added. This approach is also aimed at achieving efficient and standardized backend management. [12].
3.1.6 Instrument management function
The instrument management page will display all the instrument information in the current system, including the name of the instrument, the storage time of the instrument, the storage location, the picture of the instrument, the loan status of the instrument, and if it is borrowed, the information of the person who borrowed the instrument. Considering that the amount of instrument information will be relatively large, the data on the current interface will be displayed using paging query. The el-pagination component is used to package instrument data in paging form. The instrument data table has a state field to indicate the loan status of the instrument. When the user initiates an application for instrument borrowing, if the administrator agrees, the instrument will be in the loaned state. The state It should become unavailable for borrowing. In this way, the basic functions of instrument design are realized.
3.1.7 Purchase application function
The purchase application must include the instrument to be purchased, the initiator of the purchase, and the application status. For the administrator, an audit function must be set up to approve or reject the applicant's request. For the audit function, you must first determine the user's identity. Use a v-if in el-table-column to determine whether user.role is the ROLE_ADMIN mentioned earlier. If it is, the next style will be displayed. By adding audit passed and audit failed Press the button, bind the click event in the button, and trigger the changeState (row, state) event. That is, after clicking, the row's data and state (audit passed, audit failed) will be rebind to this.form and then use save The method saves and submits new data to the background controller layer for data persistence. When the status is updated, the review column should be grayed out and no more review is required. Therefore, adding: disabled="scope.row.state !=='pending review'" means that when the status is not the original pending review, the button will automatically become invalid. Moreover, the audit data should be isolated. If it is an ordinary user, the application data between each other should be invisible, so you can add filtering data in the background that the user name is your own, giving users a better experience [13]. QueryWrapper is also used here to encapsulate the instrument data. If you use eq to filter the instrument data that matches your user name.
3.2 Database design
Database principles course is an important content of basic computer education [14], and database design is also the top priority of database principles course teaching. After completing the requirements analysis, the database structure needs to be further analyzed [15]. The database design of this system will be designed from two aspects: E-R diagram and database table.
3.2.1 E-R diagram
Figure 3-1 is the ER diagram of the instrument management system.
3.2.2 Database table
Table 3-1 - Table 3-8 are respectively the role table, user table, instrument and equipment information table, menu function table, instrument and equipment purchase application form, instrument and equipment use application form, instrument and equipment scrapping application form, role Menu table.
Table 3-1 Role table (sys_role)
Name type primary key allows null value Remarks
id int Is the role id a> flag Varchar(255) No is the unique identifier of the role Yes Description description Varchar(255) No No Role type
name Varchar(50) Yes
Table 3-2 User table (sys_user)
Name type primary key allows null value Remarks
id int Whether user ID
username Varchar(50) yes
no username
password Varchar(50) no
yes user password a> phone Varchar(20) No is the phone< /span> avatar_url Varchar(50) No is the avatar address< /span> role Varchar(50) whether it is a user role create_time timestamp No is the creation time address Varchar(50) No is the address email Varchar(50) No is the email address
nickname Varchar(50) No is the nickname
Table 3-3 Instrument information table (instrument)
Name type primary key allows null value Remarks
id int Yes
No instrument id
name Varchar(50) No instrument name
create_time timestamp No yes storage time
avatar_url Varchar (50) No is the instrument picture
address Varchar(50) No is the instrument storage address
state tinyint No is the instrument status
borrower_id int whether it is the ID of the person who borrowed the instrument
Table 3-4 Menu function table (sys_menu)
Name type primary key allows null value Remarks
id int Yes
No function id
name varchar(255) No
Yes function name
icon varchar(255) No is the page path page_path varchar(255) No is the parent id pid int No Yes Description description varchar(255) No
Yes Icon
Table 3-5 Instrument purchase application form (goods)
Name type primary key allows null value Remarks
id int Is the instrument id
name varchar(50) yes
no instrument name
user varchar(255) no
yes user password
time timestamp No is the nickname
img varchar（255） No is the instrument picture
state varchar（255） No is the application status
Table 3-6 Instrument use application form (work)
Name type primary key allows null value Remarks
id int Is the instrument id
name varchar(50) yes
no instrument name
user varchar(255) no
yes user password
time timestamp No is the nickname
img varchar（255） No is the instrument picture
state varchar（255） No is the application status
Table 3-7 Instrument scrapping application form (broken)
Name type primary key allows null value Remarks
id int Is the instrument id
name varchar(50) yes
no instrument name
user varchar(255) no
yes user password
time timestamp No is the nickname
img varchar（255） No is the instrument picture
state varchar（255） No is the application status
Table 3-8 Role menu table (sys_role_menu)
Name type remarks
role_id int Role ID
menu_id int function menu ID
3.3 Code display
The code for adding or updating user information is as follows:
//自定义一个axios实例
const request = axios.create({
baseURL: `http://localhost:9090`,
timeout: 6000
})
//User.vue使用axios请求后台数据
save() {
this.request.post("/user", this.form).then(res => {
if ( res.code === '200') {
this.$message.success("数据保存成功")
this.load()
} else {
this.$message.error("数据保存失败")
}
})
}
//UserController调用IUserService封装好的库实现增加或删除
@PostMapping
public Result save(@RequestBody User user) {
return Result.success (userService.saveOrUpdate(user));
}
动态路由设置代码如下：
export const setRoutes = () => {
//用menus存储路由名字
const storeMenus = localStorage.getItem("menus");
if (storeMenus) {
// 获取当前的路由对象名称数组
const currentRouteName = router.getRoutes().map(v => v.name)
if (!currentRouteName.includes('Management')) {
// 拼装动态路由
const ManagementRoute = {
path: '/', name: 'Management', component: () => import('../views/Management.vue'), redirect: "/home", children: [
{
path: 'person', name: '个人信息', component: () => import('../views/Person.vue')}
] }
const menus = JSON.parse(storeMenus)
menus.forEach(item => {
if (item.path) {
// 当且仅当path不为空的时候才去设置路由
let itemMenu = {
path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue')}
ManagementRoute.children.push(itemMenu)
} else if(item.children.length) {
item.children.forEach(item => {
if (item.path) {
let itemMenu = {
path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue')}
ManagementRoute.children.push(itemMenu)
}
})
}
})
// 动态添加到现在的路由对象中去
router.addRoute(ManagementRoute)
}
}
}
Conclusion
This article mainly introduces the functions and implementation methods of the school equipment management system based on the SpringBoot and Vue framework. Conducted in-depth research on the functional requirements of the instrument management system and conducted full research on the pre-development questionnaire. In order to provide a good working platform for relevant school staff, we have done the following work on this system:
(1) Fully analyzed the functional requirements and some non-functional requirements of the system and analyzed the main The detailed design of the functional modules is discussed so that readers can understand the functional structure of the system at a glance.
(2) After completing the system, the system was also tested to see whether each function meets the requirements. Functional and performance tests were conducted on this system, which basically enabled users to meet their work needs.
(3) Integrate ECharts charts to make user data clear at a glance, making it easier for readers to analyze and discuss.
At present, the development of the country's IT industry is in full swing, and programming technology is also changing with each passing day. Only continuous learning can keep up with the trend of the times. Based on the research of our management system, we feel that there are still many irregularities and unreasonable functions. I also hope that I can learn programming technology more deeply in my future work and strive to improve my own skills. Some prospects are made for the research on school equipment management system based on SpringBoot and Vue. The system functions are too simple. I hope some functions can be added. For example, there should be time management for borrowing instruments and what will happen if it times out. If the system can integrate caching, it can give users a better experience. It is hoped that in the future, it will not only increase the system operability in terms of surface functions, but also improve the stability of the system, aiming to achieve efficient and standardized background management.
Please pay
Omitted
References
[1] Chen Zhengyan. Design and implementation of web-based laboratory consumables management system under the new situation [J]. Digital World. 2019(12).
[2] Lai Qingna, Zheng Yanying. Construction and thinking on shared management of large-scale instruments and equipment in ordinary universities [J]. Equipment Management and Maintenance, 2022, (05): 21-23. [4] Shan Shuqian , Ren Jiaxun. Design and implementation of database principle website based on SpringBoot and Vue framework [J]. Computer Knowledge and Technology, 2021, 17(30): 40-41+50. [5] Liu Bowen . A simple explanation of Vue.js[M]. Beijing: People's Posts and Telecommunications Publishing House, 2019. [6] Yang Yan. Research on the development of system management module based on Spring Boot and Vue[J]. Electroacoustic Technology, 2019. [7] Wang Dan, Sun Xiaoyu, Yang Lubin, Gao Shengyan. Design and implementation of software statistical analysis system based on SpringBoot [J]. Software Engineering, 2019, 22(03) :40-42.DOI:10.19644/j.cnki.issn2096-1472.1019.03.012.[9]. [8] He Jun, Chen Qianyi. Vue+Springboot+Mybatis develops consumption management system[ J]. Computer Programming Skills and Maintenance, 2019, (02): 87-88+102. [9] Tao Lin. Design of university laboratory consumables management system based on Spring Boot and Vue framework Analysis and Design[J]. Computer Knowledge and Technology, 2021,17(13):83-85. [10] Fuyuan Cheng. Talent Recruitment Management System for Small and Micro Enterprises Based on Springboot Framework[J]. Advances in Educational Technology and Psychology, 2021, 5(2). [11] Xiao Feng, Xin Daxin, Geng Chaoyang. Research and practice on teaching models with computational thinking cultivation as the core ——Taking the "Database Principles and Applications" course as an example [J]. Modern Educational Technology, 2015, 25(07):49-55. [12] Xinwen Zhang,Siyuan Wen,Rui Wang. Implementation of Vehicle Management System Based on Spring Boot and VUE[C]//.Proceedings of the 33rd China control and decision making conference (9) 2021:519-523.DOI:10.26914/c.cnkihy.2021.028243. [13] Yu Qiulan, Li Jun. Application research on network-based university laboratory equipment and instrument management system [J]. Information Technology and Informatization, 2015, (12): 102-103.< /span> [15 ] Li Wei. Design and implementation of driving school reservation system based on SpringBoot+Mybatis[J]. Computer Programming Skills and Maintenance, 2022, (03): 10-12. [14] Gu Mengdie et al. Research on copyright appointment registration microplatform system based on vue[J]. MATEC Web of Conferences, 2022, 355.
5. Resource download
The source code and complete paper of this project are as follows. Friends in need can click to download. If the link does not work, you can click on the card below to scan the code and download it yourself.
| serial number | A complete set of graduation project resources (click to download) |
|---|---|
| Source code of this project | Design and implementation of school instrument and equipment management system based on Vue+SpringBoot+ECharts (source code + documentation)_Vue__Instrument Management System.zip |