Realization method of digital family tree management system based on Spring Boot and Vue3

Abstract

The invention provides an implementation method of a digital family tree management system based on Spring Boot and Vue3, which comprises the following steps of: adopting a front and back end separation architecture, displaying family information at a front end by utilizing a Vue3 design interface component, and implementing functions of page jump, data addition, deletion, modification and check, user login and registration and the like at a back end based on Spring Boot; system related data is stored in a cloud MySQL database, and a rear end reads and transmits the system related data to a front end for display through SQL statements; the system comprises a personal information tree and family tree structure, and newly added information is uploaded to a cloud database in real time; constructing a prediction model based on a neural network, predicting a change trend of a front-end numerical element, and storing the change trend to a cloud; the system is deployed to a cloud server, and cross-operating-system and multi-terminal access is achieved. Through data set management, front and rear end cooperation, genealogy dynamic visualization, intelligent prediction and cloud integrated deployment, the genealogy management efficiency, the intelligent level and the user experience are improved.

Description

Technical Field

[0001] This invention belongs to the field of computer technology, and in particular relates to an implementation method of a digital genealogy management system based on Spring Boot and Vue3. Background Technology

[0002] Existing genealogy management systems face significant limitations in their informatization process: On the one hand, due to technological complexity, traditional book-style lineage charts, with their complex layout, are difficult to dynamically visualize on electronic platforms, often employing simplified tables or basic tree structures with extremely low displayability. On the other hand, the system records a severe lack of multi-dimensional information on members, often only including basic data such as name and gender, lacking detailed resumes, deeds, photos, audio, and video records, failing to meet the demands of the big data era for comprehensive and three-dimensional preservation of family history. Particularly noteworthy is the general lack of in-depth data mining and intelligent trend prediction capabilities in genealogy systems, hindering their ability to provide forward-looking decision support for family development. These shortcomings collectively constitute the key technological bottlenecks that urgently need to be overcome in the current field of genealogy management. Summary of the Invention

[0003] To address the aforementioned technical issues, this invention proposes a method for implementing a digital genealogy management system based on Spring Boot and Vue3.

[0004] To achieve the above objectives, the present invention is implemented through the following technical solutions.

[0005] Step 1: The system adopts a front-end and back-end separation architecture: the front-end is designed using Vue3, and the interface and different components are used to display various elements and content; the back-end is designed using the Spring Boot framework, and the functions of various taskbars in the back-end are designed, including implementing navigation, reading data, adding, deleting, modifying and querying information, and implementing user login and registration operations.

[0006] Step 2: All relevant data used by the system is stored in a cloud-based MySQL database. The corresponding data is retrieved from the database and table using SQL statements on the backend and then transmitted to the frontend for display.

[0007] Step 3: The family tree management system was designed and implemented, including personal information trees and various family tree diagrams. The relevant personal data are read from the database, and newly added personal information is returned to the cloud database for storage.

[0008] Step 4: Build a neural network model, and based on the selected relevant impact data, make data predictions for a certain data point over a future period, and upload the predicted data to a cloud database for storage.

[0009] Step 5: Deploy the family tree management system to Alibaba Cloud server to enable access to the family tree management system from various operating systems and different client terminals.

[0010] Preferably, in step 1, the system architecture uses Vue3 for the front-end design, including a data display section, a key figure display section, and sections for village and family introductions and company introductions; the back-end is implemented using the Spring Boot framework, including two main taskbars: genealogy management and system management. The genealogy management taskbar includes a genealogy presentation taskbar for displaying various genealogy trees; the system management taskbar includes menu management, table data management, homepage management, genealogy management, notification management, and user management, used for adding, modifying, and deleting relevant information. Ordinary users do not have certain modification permissions, while the super administrator has all modification permissions.

[0011] Preferably, in step 2, the cloud-based MySQL database includes a genealogy personnel data table and related data tables displayed in various front-end sections, and the corresponding data is obtained by reading the corresponding tables.

[0012] Preferably, in step 3, the family tree includes a personal information tree of outstanding representatives in the front end, various family tree diagrams implemented in the back end, and a personal relationship tree in the family tree. The implementation of each family tree is carried out by customizing the tree component and rendering all levels of the family tree in a recursive manner.

[0013] Preferably, in step 4, a long short-term neural network model (LSTM) and a convolutional neural network model (CNN) are constructed to predict relevant data for a future period of time. The historical data is read from the Alibaba Cloud MySQL database, and the predicted data is returned to the cloud database for storage. The constructed neural models are embedded into the system to provide forward-looking decision support for family development.

[0014] Preferably, in step 5, the genealogy management system is deployed to a cloud server, and the genealogy management system can be accessed on Windows and iOS systems, PCs and mobile phones.

[0015] This invention utilizes Alibaba Cloud's MySQL database as a unified, secure, and reliable centralized data repository, ensuring the persistence and consistency of all personal and multi-dimensional related information. The system adopts a modern front-end and back-end separation architecture: the front-end, built on the Vue33 framework, constructs a highly interactive and component-based user interface, enabling dynamic visualization of complex structures such as personal information trees and family tree diagrams; the back-end, relying on the Spring Boot framework, efficiently handles user authentication and performs precise CRUD operations on the cloud database using SQL statements. It also innovatively integrates a neural network prediction model, capable of predicting specific future indicators based on filtered historical impact data and storing the prediction results back to the cloud database, injecting intelligent analysis capabilities into family tree management. Finally, by deploying the entire system on Alibaba Cloud servers, convenient cross-platform and cross-terminal access is achieved. This invention constructs a modern family tree management platform integrating secure data storage, efficient interactive management, dynamic visualization, intelligent predictive analysis, and widespread convenient access. Attached Figure Description

[0016] Figure 1 This is a structural diagram of the genealogy management system.

[0017] Figure 2 A schematic diagram of the database constructed for the genealogy management system.

[0018] Figure 3 This diagram illustrates the privileges of a regular user and a super administrator.

[0019] Figure 4 This is a schematic diagram of a family tree implemented by a family tree management system. Detailed Implementation

[0020] The present invention will be further described below with reference to specific embodiments, so that the advantages and features of the present invention can be more easily understood by those skilled in the art, thereby making a clearer and more explicit definition of the scope of protection of the present invention.

[0021] An implementation method for a digital genealogy management system based on Spring Boot and Vue3 is shown in the attached system diagram. Figure 1 The diagram shown illustrates the structural framework of this genealogy system, comprising a front-end dashboard and a back-end management system. The front-end is used to visually display various data and family introductions, while the back-end management system has different taskbars for users to perform various queries, modifications, and other operations. The following is a further detailed description of the implementation scheme of this invention.

[0022] Step 1: The system adopts a front-end and back-end separation architecture: the front-end is designed using Vue3, and the interface and different components are used to display various elements and content; the back-end is designed using the Spring Boot framework, and the functions of various taskbars in the back-end are designed, including implementing navigation, reading data, adding, deleting, modifying and querying information, and implementing user login and registration operations.

[0023] Step 2: All relevant data used by the system is stored in an Alibaba Cloud MySQL database. The corresponding data is retrieved on the backend by reading the corresponding database and table name using SQL statements, and then passed to the frontend for display.

[0024] Step 3: The genealogy management system is designed with personal information trees and various genealogy tree diagrams. The relevant personal data are read from the database, and newly added personal information is returned to the cloud database for storage.

[0025] Step 4: Build a neural network model, and based on the selected relevant impact data, make data predictions for a certain data point over a future period, and upload the predicted data to a cloud database for storage.

[0026] Step 5: Deploy the family tree management system to Alibaba Cloud server to enable access to the family tree management system from various operating systems and different client terminals.

[0027] Specifically, in step 1, the following is constructed: Figure 2 The system database shown includes information tables for various genealogical trees, data tables for eight front-end modules, a data table for genealogical personnel, data tables for various enterprises and their corresponding assets, uploaded image data, a data table for the average income of genealogical members, and a data table for the insurance coverage rate of genealogical members. It also includes information on genealogical personnel, population data, enterprise asset data, insurance coverage rate data, average income of villagers, education level data, and data related to villagers' temporary residence. Some of this data is used for front-end visualization, while others are used to construct genealogical trees, personal information trees, and to provide decision-making information for the genealogical trees.

[0028] Specifically, in step 2, the front-end is designed using Vue3 for displaying various sections, including displays of past leaders, outstanding representatives, personal information trees of outstanding representatives, family profiles, family achievements, scrolling displays of enterprise and industrial information, and charts displaying various data. The back-end is implemented using the Spring Boot framework, implementing two main taskbars: genealogy management and system management. The genealogy management taskbar includes a genealogy presentation taskbar for displaying various genealogy trees; the system management taskbar includes menu management, table data management, homepage management, genealogy management, notification management, and user management, used for adding, modifying, and deleting relevant information. The system allows users to switch to the backend page via a smart screen. Specific operations include: quickly searching and locating family tree information in various villages within the family tree management section; previewing and adding relatives, deleting individuals, and supplementing information for individuals; showing and hiding spouses; and accessing detailed information. Within the backend system management section, users can modify, add, or delete various menus; input, modify, and delete data such as enterprise assets, average village income, and insurance coverage in the table data management section; add, edit, and delete leadership profiles, company management, village introductions, and leadership relationship trees in the homepage management section; add or delete family tree names in the family tree management section; add, publish, modify, and delete major events in the notification management section; and set user permissions, add users, and modify user-related information in the role management and user management sections. Note that ordinary users do not have certain modification permissions, while super administrators have all modification permissions, as detailed in the attached document. Figure 3 As shown.

[0029] Specifically, in step 3, the family tree used includes the personal information tree of outstanding representatives in the front end, the various family tree diagrams implemented in the back end, and the personal relationship tree in the family tree. The implementation of each family tree uses a custom tree component, and all levels of the family tree are rendered recursively. A schematic diagram of the family tree is attached. Figure 4As shown, each person specifically includes the following information: Basic information: id, name, gender, imageSelf; Relation information: Relation Index (generational), relation (relationship title), parentId, grandId; Family members: mate (spouse), children (children); Display control: hidden, extend (expandable). A traditional tree-structured table layout is used for members from the 7th generation onwards, while a special centered layout is used for members from the first 6 generations. Node click events are added, allowing right-clicking to trigger a menu for more operations such as showing / hiding spouse, improving person information, adding relatives, deleting, or hiding the current person. The backend transmits data based on the parent-child relationship nodes of each tree node in the frontend's family tree, passing in the corresponding data according to the id. For the personal information tree and personal relationship tree of outstanding representatives implemented on the frontend, the relevant task is found based on a specific id, and the relationship is searched backwards from the person based on gender and generation, displaying five generations upstream and downstream, from grandfather to grandson.

[0030] Specifically, in step 4, a dual model, consisting of a Long Short-Term Memory (LSTM) neural network model and a Convolutional Neural Network (CNN) model, was constructed to predict relevant data for a future period. Historical data was read from an Alibaba Cloud MySQL database, and the predicted data was returned to the cloud database for storage. The neural models were then integrated into the system. Specifically, future data including population data, insurance coverage rate, and average income of family members were predicted. The historical data used was five years of historical data, read from the Population_data, Insurance_purchase_rate, and Average_income tables in the system database. Samples were then constructed and fed into the constructed dual neural model for prediction. Finally, the predicted data was returned and stored in the Population_data_Pre, Insurance_purchase_rate_Pre, and Average_income_Pre tables in the database.

[0031] Specifically, in step 5, the genealogy management system is deployed to Alibaba Cloud server. The genealogy management system can be accessed on Windows and iOS systems, PC and mobile devices, and can maintain long-term stable operation.

[0032] By accurately predicting the frosting and defrosting processes using a neural network model and combining the advantages of dual models (LSTM and CNN), the system ultimately displays data such as frosting amount, defrosting time, real-time power, and compressor status on the cold chain storage platform, enabling visualized monitoring and convenient adjustments. This approach not only provides real-time understanding of the system status but also allows for necessary operational optimization, enhancing the system's intelligence and automation levels.

[0033] This invention uses an Alibaba Cloud MySQL database as a unified, secure, and reliable core data storage center to ensure persistent storage and global consistency of information on all family members and their multi-dimensional relationships. The system adopts a front-end / back-end separation architecture: the front-end uses the Vue3 framework to build a highly interactive, component-based user interface, enabling dynamic rendering and display of complex structures such as personal information trees and family tree diagrams; the back-end relies on the Spring Boot framework to efficiently perform user authentication and precise CRUD operations on the cloud database via SQL. An innovative neural network prediction model is integrated to predict specific future indicators based on filtered historical data and stores the prediction results back to the cloud database, providing intelligent analysis capabilities for family tree management. Finally, deployed on an Alibaba Cloud server, it achieves convenient cross-platform and cross-terminal access. This method not only solves the limitations of traditional paper-based family tree preservation and inheritance but also further enhances the intelligence, aesthetics, stability, and versatility of the family tree system, improving management efficiency and constructing a modern family tree management system.

[0034] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any equivalent substitutions or modifications made by those skilled in the art within the scope of the technology disclosed in the present invention, based on the technical solution and inventive concept of the present invention, should be covered within the scope of protection of the present invention.

Claims

1. An implementation method for a digital genealogy management system based on Spring Boot and Vue3, characterized in that, Includes the following steps: Step 1: The system adopts a front-end and back-end separation architecture: the front-end is designed using Vue3, which plans the interface and different components to display various elements and content; the back-end is designed using the Spring Boot framework to design the functions of various back-end taskbars, including implementing navigation, reading data, adding, deleting, modifying and querying information, and implementing user login and registration operations. Step 2: All relevant data used by the system is stored in a cloud-based MySQL database. The corresponding data is retrieved on the backend by reading the corresponding database and table name using SQL statements, and then passed to the frontend for display. Step 3: The family tree management system is designed with personal information trees and various family tree diagrams. The relevant personal data are read from the database, and newly added personal information is returned to the cloud database for storage. Step 4: Build a neural network model, and based on the selected relevant impact data, make data predictions for a certain data point over a future period, and upload the predicted data to a cloud database for storage. Step 5: Deploy the family tree management system to Alibaba Cloud server to enable access to the family tree management system from various operating systems and different client terminals.

2. The implementation method of a digital genealogy management system based on Spring Boot and Vue3 as described in claim 1. Its key feature is that, in step 1, the system architecture uses Vue3 for the front-end design, including a data display section, a key figure display section, and sections for village and family introductions and company introductions; the back-end is implemented using the Spring Boot framework, including two main taskbars: genealogy management and system management. The genealogy management taskbar includes a genealogy presentation taskbar for displaying various genealogy trees; the system management taskbar includes menu management, table data management, homepage management, genealogy management, notification management, and user management, used for adding, modifying, and deleting relevant information. Regular users do not have certain modification permissions, while super administrators have all modification permissions.

3. The implementation method of a digital genealogy management system based on Spring Boot and Vue3 as described in claim 1, characterized in that, in step 2, the cloud MySQL database includes a genealogy personnel data table and related data tables displayed in various front-end modules, and the corresponding data is obtained by reading the corresponding tables.

4. The implementation method of a digital genealogy management system based on Spring Boot and Vue3 as described in claim 1, characterized in that, in step 3, the genealogy tree includes a personal information tree of outstanding representatives in the front end, various genealogy tree diagrams implemented in the back end, and a personal relationship tree in the genealogy tree. For the implementation of each genealogy tree, a tree component is used for custom implementation, and all levels of the genealogy tree are rendered recursively.

5. The implementation method of a digital genealogy management system based on Spring Boot and Vue3 as described in claim 1, characterized in that, in step 4, a long short-term neural network model (LSTM) and a convolutional neural network model (CNN) are constructed to predict relevant data for a future period of time. The historical data is read from the Alibaba Cloud MySQL database, and the predicted data is returned to the cloud database for storage. The constructed neural model is embedded in the system.

6. The implementation method of a digital genealogy management system based on Spring Boot and Vue3 as described in claim 1, characterized in that, in step 5, the genealogy management system can be accessed on Windows and iOS systems, PC and mobile devices.

Images