Online declaration system based on front and rear end separation and design method

Abstract

The invention provides an online declaration system based on front and rear end separation and a design method, and belongs to the field of software development. The method comprises the following steps: dividing the online declaration system into a front-end function module and a rear-end function module; dividing an online declaration system by adopting a layered architecture; a database table building mode combining a global data table and a local data table is adopted; automatically generating an Excel document according to the web page content; data transmission between the front-end function module and the rear-end function module adopts an HTTPS protocol. Through the method, the software development efficiency and the system expandability are improved, and the manpower and time cost is effectively reduced.

Description

Technical Field

[0001] This invention belongs to the field of software development, specifically relating to an online application system and design method based on front-end and back-end separation. Background Technology

[0002] With the development of computer technology, information system software has gradually penetrated into all walks of life. Enterprises use information technology to organize, build, manage and optimize relevant work processes and business data flows, thereby improving the work efficiency of relevant personnel.

[0003] Currently, many online business systems adopt traditional information system construction methods, using development technologies such as the Django framework that do not separate the front-end and back-end for system construction. In 2019, Liu Ningxin, addressing human resource management needs, used Java Server Pages and JavaScript programming technologies to build a Tomcat web server and implement the relevant functions of a human resource management system. In 2023, Zhang Jinxian et al. used the MVT design pattern and the Django framework to develop a web website. In 2024, He Xiaohui et al. used the B / S architecture and the Django framework, and simplified database operations through Object Relational Mapping (ORM) tools to develop a web system for facial recognition, enabling functions such as facial recognition attendance for enterprises.

[0004] The aforementioned online services all employ a front-end / back-end not-separated development approach. The web server receives a request from the client, performs logical checks via a Servlet, queries backend data, renders the retrieved data using a template engine, and finally displays the rendered template to the user via HTML and a browser. These methods have the following problems:

[0005] The aforementioned software has redundant front-end and back-end code, which poses challenges for requirement changes, defect localization, and subsequent maintenance.

[0006] During the database design phase, the aforementioned software typically creates tables uniformly in the database, mixing business logic and processes together, which leads to low data operation efficiency and makes data accuracy and integrity easily affected.

[0007] The software mentioned above lacks the ability to dynamically parse web page data and cannot generate documents in a specific format.

[0008] During data interaction, the data structure used is simple, but there are many system interface requests and high complexity. Summary of the Invention

[0009] The purpose of this invention is to solve the problems existing in the prior art, and to propose a design method for an online system based on front-end and back-end separation. It adopts a modular design of software platform, and on this basis, proposes an online application system based on front-end and back-end separation.

[0010] This invention is achieved through the following technical solution:

[0011] A first aspect of the present invention provides a design method for an online application system based on front-end and back-end separation, the method comprising:

[0012] The online application system is divided into front-end and back-end functional modules;

[0013] The online application system is divided into layers using a hierarchical architecture.

[0014] A database table creation method combining global and local data tables is adopted;

[0015] Automatically generate Excel documents from web page content;

[0016] Data transmission between the front-end and back-end functional modules uses the HTTPS protocol.

[0017] Furthermore, the layered architecture includes, from bottom to top, the following:

[0018] Infrastructure layer: Provides the hardware, network, and security infrastructure required for system operation;

[0019] Data resource layer: Built on top of the infrastructure layer, it provides various data services for the business application layer;

[0020] Basic service layer: Located between the data resource layer and the business application layer, it is responsible for providing middleware services;

[0021] Business application layer: By sending requests to the basic service layer, the basic service layer processes the requests and returns the results, thus realizing the system's business logic;

[0022] API Interface Layer: Provides system access interfaces to achieve separation of front-end and back-end functional modules;

[0023] Front-end presentation layer: Provides users with the entry point to log in and access the online application system;

[0024] The infrastructure layer, data resource layer, basic service layer, and API interface layer contain functional modules that constitute the backend functional modules; the business application layer and frontend presentation layer contain functional modules that constitute the frontend functional modules.

[0025] Furthermore, the global data table is used to store general basic information data; the local data table is used to store data related to specific business processes.

[0026] Furthermore, the global data table and the local data table are connected by foreign key constraints to ensure data integrity.

[0027] Furthermore, the operation of automatically generating an Excel document from web page content includes:

[0028] Step 41: Determine the data source from which the document will be generated on the webpage;

[0029] Step 42: Use Selenium to simulate browser behavior to parse webpage data;

[0030] Step 43: Convert the data extracted in step 42 into a table format to fit the Excel document structure;

[0031] Step 44: Use the HSSF and XSSF components of the Apache POI library to generate an Excel document.

[0032] Furthermore, step 42 also includes creating a BeautifulSoup object, specifying lxml as the parser to parse the webpage, and extracting the required data.

[0033] Furthermore, the data transmission adopts the HTTPS protocol. Specifically, the front-end functional module obtains the required data by calling the API interface provided by the back-end functional module.

[0034] Furthermore, the data transmission between the front-end and back-end functional modules also adopts a flattened serialized data transmission method, which divides the complex data structure into blocks and converts them into a one-dimensional byte stream for data transmission.

[0035] Furthermore, the flattened serialized data transmission method includes:

[0036] Step 51: Determine the serialization format as JSON;

[0037] Step 52: Use multi-dimensional data blocks to represent the data. Design data blocks according to different data request dimensions.

[0038] Step 53: Use the JSON.stringify method to convert the JavaScript object into a JSON-formatted string and generate serialization code;

[0039] Step 54: Use the JSON.parse method to convert the JSON string back into a JavaScript object, perform deserialization, and obtain the original data structure.

[0040] In a second aspect, the present invention provides an online application system based on front-end and back-end separation, the system comprising, from bottom to top:

[0041] Infrastructure layer: Provides the hardware, network, and security infrastructure required for system operation;

[0042] Data Resource Layer: Built on top of the infrastructure layer, it provides various data services to the business application layer, including: basic information database, user information database, organization information database, award information database, project information database, and log information database;

[0043] Basic Service Layer: Located between the data resource layer and the business application layer, it is responsible for providing middleware services, including: basic services, system services, approval services, verification services, access control, and application services.

[0044] Business Application Layer: By sending requests to the basic service layer, the basic service layer processes the requests and returns the results, thereby realizing all business logic of the system. Specifically, it includes: user management module, system management module, bonus release module, information verification module, award entry module, and data approval module.

[0045] API Interface Layer: Provides system access interfaces to separate front-end and back-end functional modules;

[0046] Front-end presentation layer: Provides the entry point for users to log in and access the online application system. Users log in to different user module interfaces through authentication.

[0047] Compared with existing technologies, the beneficial effects of this invention are: improved software development efficiency and system scalability, and effective reduction of manpower and time costs. Attached Figure Description

[0048] Figure 1 System functional module diagram;

[0049] Figure 2 User login module interface design diagrams for different types of users;

[0050] Figure 3 System business process diagram;

[0051] Figure 4 Flowchart of the flat serialization data transmission method;

[0052] Figure 5 Multi-dimensional data block design diagram. Detailed Implementation

[0053] The present invention will now be described in further detail with reference to the accompanying drawings:

[0054] Example 1: The first embodiment of the present invention is an online system design method based on front-end and back-end separation.

[0055] This method is based on front-end and back-end separation technology for system development. The front-end and back-end development processes are independent of each other, and their connection is established through API interfaces. The design method of this invention is implemented using the following steps:

[0056] 1. Divide the system into different front-end and back-end functional modules according to the system's functional points, and reduce the coupling between the front-end and back-end through program modularization.

[0057] 2. Design a layered system architecture.

[0058] This invention employs a layered architecture to enhance code scalability. The modular, layered design of the online application system is as follows: Figure 1 As shown, the front-end and back-end functional modules are further categorized into 6 layers, from bottom to top: infrastructure layer, data resource layer, basic service layer, business application layer, API interface layer, and front-end presentation layer, as detailed below:

[0059] Infrastructure layer: Provides the hardware, network, security and other infrastructure required for system operation.

[0060] Data Resource Layer: Built on top of the infrastructure layer, it is the data center of the online application system, providing various data services to the business application layer.

[0061] Basic service layer: Located between the data resource layer and the business application layer, it is mainly responsible for providing middleware services and interacting with the business application layer by calling relevant services or APIs.

[0062] Business application layer: This is the core functional component of the online application system. It sends requests to the basic service layer, which then processes the requests and returns the results, thereby realizing all the business logic of the system and managing the business processes.

[0063] API Interface Layer: Provides system access interfaces to achieve front-end and back-end separation.

[0064] Front-end presentation layer: Provides users with the entry point to log in and access the online application system.

[0065] The infrastructure layer, data resource layer, basic service layer, and API interface layer contain functional modules that constitute the backend functional modules; the business application layer and frontend presentation layer contain functional modules that constitute the frontend functional modules.

[0066] 3. Database table design that combines global and local data tables.

[0067] To improve database flexibility, a combined approach of global and local data tables was adopted during the system database design phase. System data was divided into two categories: general basic information data and data related to the application and approval process. For general basic information data, an independent, clearly structured global data table was created for each entity; for process-related data, dedicated local data tables were created. By designing the two types of data separately, the coupling between them was reduced, ensuring the consistency, accuracy, and integrity of data within the system, and improving data operation efficiency.

[0068] Based on different business modules, data is divided into global data tables or local data tables. Global data tables store general basic information and shared data across all modules of the system, including system user information tables and award type information tables. This data is typically shared by multiple parts of the system. Local data tables store data related to specific business processes or functions, including project release information tables, project bonus data tables, and departmental retention data tables. This data is usually used only by specific modules. Foreign key constraints are used between global and local data tables to ensure data integrity. For example, in the project bonus data table, a foreign key constraint ensures that the user IDs of project members exist in the system user table.

[0069] 4. Automatically generate Excel documents for relevant web pages.

[0070] A web system is built using front-end and back-end technology development frameworks and tools. Furthermore, a method for automatically generating Excel documents from relevant web pages is employed, employing an underlying data construction and parsing approach for Excel documents. By automatically parsing webpage content and dynamically generating online documents, the system provides users with automated and customized document generation services.

[0071] The specific implementation steps are as follows:

[0072] The first step is to determine the data source: Determine the data source for the documents to be generated on the webpage. For example, if you need to generate an Excel document containing departmental staff bonus data and project bonus allocation data, first determine the location and structure of this data on the webpage.

[0073] The second step is parsing the webpage data: Since the webpage data is dynamically loaded, Selenium is used to simulate browser behavior. In this invention, the BeautifulSoup crawling tool and an lxml parser are used to parse the webpage and extract data such as departmental staff bonus data and project bonus allocation data.

[0074] Furthermore, to ensure complete loading of webpage data, this invention employs a page loading strategy, which includes:

[0075] • normal: Wait for the entire page to load completely (default strategy).

[0076] • eager: Wait for the DOM tree to finish loading, ignoring the loading of stylesheets, images, and child frames.

[0077] • none: Do not wait for the page to load; wait only for the initial download of the HTML document to complete.

[0078] The third step is to process the data: convert the data extracted in the second step into a table format to fit the structure of an Excel document.

[0079] The fourth step is to generate an Excel document: using the HSSF and XSSF components of the Apache POI library, the Excel document is generated, and users can export the data on the software page as needed.

[0080] 5. The front-end and back-end interfaces use the HTTPS protocol to transmit data.

[0081] To ensure data security and privacy, HTTPS protocol is used for data transmission during front-end and back-end data calls. The front-end functional module interface calls the API interfaces provided by the back-end functional modules to return the required data to the user, completing the joint debugging of the front-end and back-end API interfaces.

[0082] Furthermore, to optimize data transmission efficiency and meet the transmission requirements of data with different structures, this invention specifically adopts a flattened serialized data transmission method. In terms of data interaction, it proposes a multi-dimensional data block data structure, such as... Figure 5 As shown, complex data structures are processed in blocks and converted into one-dimensional byte streams for data transmission.

[0083] Specifically, the steps of the flattened serialization data transmission method are as follows: Figure 4 As shown.

[0084] The first step is to determine that the serialization format is JSON.

[0085] The second step is to define the data structure, such as... Figure 5 As shown, multi-dimensional data blocks are used to represent data. Data blocks are designed according to different data request dimensions. Through the data transmission of multi-dimensional structures, the effect of increasing data flow and reducing system interface requests is achieved.

[0086] The third step is to generate serialization code by using the JSON.stringify method to convert the JavaScript object into a JSON-formatted string.

[0087] The fourth step is to use an encrypted transmission protocol (such as HTTPS) to protect the security of the data during transmission. After the data is transmitted via HTTPS, the JSON.parse method is used to convert the JSON string back into a JavaScript object, which is then deserialized to obtain the original data structure.

[0088] Furthermore, the deserialization process includes the following steps:

[0089] Step 1: Data Reception: The recipient receives encrypted data via the HTTPS protocol. The security of this data is ensured through the encryption, integrity verification, and authentication provided by HTTPS.

[0090] The second step is data decryption: Since the data is transmitted via HTTPS, it needs to be decrypted upon arrival at the recipient to restore the original form of the data. This step is automatically completed by the SSL / TLS protocol stack.

[0091] The third step is deserialization: The decrypted data is a serialized byte stream. In order to convert this data back into the original object or data structure, it needs to be deserialized, that is, the byte stream is parsed and mapped back to the corresponding data type and structure.

[0092] Step 4: Process the deserialized data: Once the data has been successfully deserialized, it can be passed to the application's logic processing part for further processing, including database storage, business logic processing, etc.

[0093] Example 2: The second embodiment of the present invention is an online application system implemented using an online system design method based on front-end and back-end separation. This system is based on a B / S development framework.

[0094] The online application system adopts a modular and layered design, such as... Figure 1 As shown, from bottom to top, they are: infrastructure layer, data resource layer, basic service layer, business application layer, API interface layer, and front-end presentation layer.

[0095] (1) Infrastructure layer, including the hardware, network, security and other infrastructure required for system operation.

[0096] (2) The data resource layer is the data center of the online application system, providing various data services to the business application layer. Specifically, it includes: basic information database, user information database, organization information database, award information database, project information database, and log information database.

[0097] System administrators import data into various information tables via the system's front-end page, linking them together using foreign keys. Addressing the issue of low efficiency in unified database table creation and data operations, this data resource layer employs a combination of global and local data tables. By separating basic information data from process-related data, the coupling between the two is reduced, improving database flexibility.

[0098] In this invention, the system user information table and award type information table are basic information tables, serving as global data tables; the project release information table, project bonus data table, and department retention data table are business data tables, serving as local data tables. The global and local data tables are linked via foreign keys. This is achieved by creating a foreign key column in the local data table that references the primary key column of the global data table.

[0099] (3) Basic service layer, located between data resource layer and business application layer, is mainly responsible for providing middleware services and interacting with business application layer by calling relevant services or APIs.

[0100] The service modules provided include: basic services, system services, approval services, verification services, access control, and application services.

[0101] In terms of login permission management, in order to meet the system security requirements, role-based access control (RBAC) and JWT token-based secure access control are adopted. Through strict identity authentication and system permission control, the legitimate use of users is guaranteed.

[0102] (4) The business application layer is the core functional component of the online application system. It sends requests to the basic service layer, which then processes the requests and returns results, thereby implementing all business logic and managing business processes. The business application layer specifically includes: a user management module, a system management module, a bonus distribution module, an information verification module, an award entry module, and a data approval module, as detailed below:

[0103] • User Management Module: This module allows system administrators to manage users' personal information, account information, and role permissions.

[0104] • System Management Module: This module allows system administrators to manage projects, organizational information, bonus types, and track award submission progress.

[0105] • Bonus publishing module: This module allows the publisher to import, add, modify, delete, and publish project data.

[0106] • Information Verification Module: Department heads (parent submitters) confirm the published award information. • Award Submission Module: Enables functions such as setting up child submitters, submitting project bonus information, submitting departmental retention information, and submitting departmental bonus allocation data.

[0107] • Data Approval Module: Enables institute-level approval of data submitted by various departments.

[0108] The relationships between the modules are as follows: the user management module and the system management module are the foundation of the bonus distribution process; basic data maintenance is completed through these two modules before the system is used. The bonus distribution module, information verification module, award entry module, and data approval module work together in sequence to complete the entire bonus distribution process.

[0109] In the award entry and data approval modules, the Element-UI plugin is used to sort the data statistics page by amount using the bubble sort algorithm, providing users with certain categorized statistical functions. Specifically, the sequence to be sorted is repeatedly traversed, comparing two elements at a time, and swapping them if they are in the wrong order. This traversal is repeated until no more swaps are needed, meaning the sequence is now sorted.

[0110] The following are the basic implementation steps of the bubble sort algorithm, and an example of how to apply it to a data statistics page to sort by amount:

[0111] • Compare adjacent elements; if the first is larger than the second, swap them.

[0112] • Repeat the same process for each pair of adjacent elements, from the first pair to the last pair; after this step, the last element will be the largest number.

[0113] Repeat the above steps for all elements except the last one.

[0114] Repeat the above steps for fewer and fewer elements each time until there are no more pairs of numbers that need to be compared.

[0115] (5) The API interface layer provides system access interfaces to achieve front-end and back-end separation.

[0116] (6) The front-end presentation layer uses web pages as the interface layer for human-computer interaction, providing users with the entry point to log in and access the online reward and bonus application system.

[0117] Furthermore, such as Figure 2 As shown, different types of users log in to different user module interfaces after authentication. The system adopts role-based access control (RBAC), allowing users to view functional modules and pages within their authorized scope after logging in.

[0118] The data transmission method between the layers of this system from bottom to top is as follows:

[0119] The data resource layer uses Object-Relational Mapping (ORM) tools combined with SQL queries to encapsulate data into objects and pass them to the basic service layer. The basic service layer interacts with the business application layer through function calls. The business application layer processes the data according to business logic through service calls and then passes the results to the API interface layer. The API interface layer serializes the objects passed from the business application layer into JSON format and transmits them over the network to the front-end presentation layer. The front-end presentation layer completes asynchronous data exchange with the API interface layer through Ajax and RESTful APIs.

[0120] The above technical solution is only one embodiment of the present invention. For those skilled in the art, based on the principles disclosed in the present invention, it is easy to make various types of improvements or modifications, and not limited to the technical solutions described in the specific embodiments of the present invention. Therefore, the foregoing description is only preferred and not restrictive.

Claims

1. A design method for an online application system based on front-end and back-end separation, characterized in that: The method includes: The online application system is divided into front-end and back-end functional modules; The online application system is divided into layers using a hierarchical architecture. A database table creation method combining global and local data tables is adopted; Automatically generate Excel documents from web page content; Data transmission between the front-end and back-end functional modules uses the HTTPS protocol.

2. The design method of the online application system based on front-end and back-end separation according to claim 1, characterized in that: The layered architecture, from bottom to top, includes: Infrastructure layer: Provides the hardware, network, and security infrastructure required for system operation; Data resource layer: Built on top of the infrastructure layer, it provides various data services for the business application layer; Basic service layer: Located between the data resource layer and the business application layer, it is responsible for providing middleware services; Business application layer: By sending requests to the basic service layer, the basic service layer processes the requests and returns the results, thus realizing the system's business logic; API Interface Layer: Provides system access interfaces to achieve separation of front-end and back-end functional modules; Front-end presentation layer: Provides users with the entry point to log in and access the online application system; The infrastructure layer, data resource layer, basic service layer, and API interface layer contain functional modules that constitute the backend functional modules; the business application layer and frontend presentation layer contain functional modules that constitute the frontend functional modules.

3. The design method for an online application system based on front-end and back-end separation according to claim 1, characterized in that: The global data table is used to store general basic information data; the local data table is used to store data related to specific business processes.

4. The design method for an online application system based on front-end and back-end separation according to claim 3, characterized in that: The global data table and the local data table are connected by foreign key constraints to ensure data integrity.

5. The design method for an online application system based on front-end and back-end separation according to claim 1, characterized in that: The operation of automatically generating an Excel document from web page content includes: Step 41: Determine the data source from which the document will be generated on the webpage; Step 42: Use Selenium to simulate browser behavior to parse webpage data; Step 43: Convert the data extracted in step 42 into a table format to fit the Excel document structure; Step 44: Use the HSSF and XSSF components of the Apache POI library to generate an Excel document.

6. The design method of the online application system based on front-end and back-end separation according to claim 5, characterized in that: Step 42 also includes creating a BeautifulSoup object, specifying lxml as the parser to parse the webpage and extract the required data.

7. The design method for an online application system based on front-end and back-end separation according to claim 1, characterized in that: The data transmission uses the HTTPS protocol. Specifically, the front-end functional module obtains the required data by calling the API interface provided by the back-end functional module.

8. The design method for an online application system based on front-end and back-end separation according to claim 1 or claim 7, characterized in that: The data transmission between the front-end and back-end functional modules also adopts a flattened serialized data transmission method, which divides the complex data structure into blocks and converts them into a one-dimensional byte stream for data transmission.

9. The design method for an online application system based on front-end and back-end separation according to claim 8, characterized in that: The flattened serialized data transmission method includes: Step 51: Determine the serialization format as JSON; Step 52: Use multi-dimensional data blocks to represent the data. Design data blocks according to different data request dimensions. Step 53: Use the JSON.stringify method to convert the JavaScript object into a JSON-formatted string and generate serialization code; Step 54: Use the JSON.parse method to convert the JSON string back into a JavaScript object, perform deserialization, and obtain the original data structure.

10. An online application system based on front-end and back-end separation, characterized in that: The system, from bottom to top, includes: Infrastructure layer: Provides the hardware, network, and security infrastructure required for system operation; Data Resource Layer: Built on top of the infrastructure layer, it provides various data services to the business application layer, including: basic information database, user information database, organization information database, award information database, project information database, and log information database; Basic Service Layer: Located between the data resource layer and the business application layer, it is responsible for providing middleware services, including: basic services, system services, approval services, verification services, access control, and application services. Business Application Layer: By sending requests to the basic service layer, the basic service layer processes the requests and returns the results, thereby realizing all business logic of the system. Specifically, it includes: user management module, system management module, bonus release module, information verification module, award entry module, and data approval module. API Interface Layer: Provides system access interfaces to separate front-end and back-end functional modules; Front-end presentation layer: Provides the entry point for users to log in and access the online application system. Users log in to different user module interfaces through authentication.

Images