Front-end and back-end information synchronization method and system

Abstract

The invention relates to the field of computer software development, in particular to a front-end and back-end information synchronization method and system. The method comprises the following steps: constructing a page configuration file, and configuring a model binding attribute in a form view tag or a list view tag; in response to a received interface change instruction, modifying the field sub-tag in the form view tag or the list view tag; analyzing the name attribute of the updated field sub-tag, and automatically checking and updating the structure of the back-end data entity object pointed by the model binding attribute; in response to a received page access request of a client, generating interface description metadata, and sending the interface description metadata to the client; and in response to the received information filled by the user and returned by the client, storing the information filled by the user into the back-end data entity object according to the model binding attribute. By adopting the method, the development efficiency of software front and back ends can be effectively improved.

Description

Technical Field

[0001] This invention relates to the field of computer software development. More specifically, this invention relates to a method and system for synchronizing front-end and back-end information. Background Technology

[0002] In traditional enterprise web application development processes, the front-end interface display logic and the back-end data storage logic are typically developed separately. The usual technical approach is as follows: back-end developers first define the server-side data entity classes and underlying database table structures using programming languages, and agree on the data transmission format through interface documentation; front-end developers then write hard-coded HTML, CSS, and JavaScript code to build forms and list views according to these agreements, and manually write data binding logic to map client-side control values ​​to back-end interface fields.

[0003] However, the aforementioned traditional development model reveals significant shortcomings when facing dynamic and ever-changing business requirements. Specifically, the existing development process heavily relies on manual hard-coding mapping. When page fields at the business level change (such as adding fields, modifying field types or attributes), these changes cannot be automatically propagated to the backend. Developers must manually modify, coordinate, and redeploy at three separate levels: the frontend page code, the backend entity class definition, and the underlying database structure. This fragmented maintenance approach not only leads to repetitive work and long development cycles but is also highly susceptible to data parsing errors or write exceptions due to asynchronous modifications between the frontend and backend. There is a lack of an automated synchronization mechanism that can automatically link and update the frontend and backend structures based on a unified configuration model.

[0004] In summary, existing front-end and back-end development methods suffer from problems such as repetitive work, long development cycles, and data parsing errors. Summary of the Invention

[0005] To address the problems of repetitive work, long development cycles, and data parsing errors in existing front-end and back-end development methods, this invention provides solutions in the following aspects.

[0006] In a first aspect, the present invention provides a front-end and back-end information synchronization method, comprising: Build a page configuration file, which is built based on a set of predefined tags. The predefined tag set includes form view tags for defining the data editing interface and list view tags for defining the data display interface. In the form view tags or list view tags, configure model binding attributes to declare the fully qualified path of the backend data entity object corresponding to the current interface. In response to receiving an interface change instruction, the field sub-label is modified within the form view label or list view label, and the modification type includes at least one of the three: adding, deleting, and modifying attributes; Parse the name attribute of the updated field sub-tag, automatically verify and update the structure of the backend data entity object pointed to by the model binding attribute; In response to receiving a page access request from a client, the updated page configuration file is reloaded, compiled into interface description metadata containing layout structure and logical rules, and sent to the client. After receiving the metadata stream, the client calls its general rendering engine to perform the following actions: dynamically render the newly added or modified fields into visual interactive controls based on the component type attributes defined by the field sub-tags, for the user to fill in information. In response to receiving user-filled information from the client, the user-filled information is stored in the backend data entity object according to the model binding attributes, thereby completing information synchronization.

[0007] Preferably, the predefined tag set further includes: menu tags for defining the system navigation structure and data definition tags for defining public data sources.

[0008] Preferably, the attribute modification includes setting the field name, specifying the rendering component type, and defining the data source reference.

[0009] Preferably, the reloading of the updated page configuration file and its compilation into interface description metadata containing layout structure and logical rules includes: The parsing engine recursively traverses the tag tree in the configuration file, identifies the layout panel tags and their attributes, and divides the interface into several logical blocks. For the field sub-tags in each logical block, its cross-column attributes are parsed, the weight of the field in the front-end grid layout system is calculated, and the weight value is written into the interface description metadata.

[0010] Preferably, the value of the model binding attribute is the fully qualified path string of the backend data entity object.

[0011] Preferably, the automatic verification and updating of the structure of the backend data entity object pointed to by the model-bound attribute includes: Using reflection or a class loader, locate and load the corresponding backend entity class file based on the fully qualified path string; The attribute definitions in the entity class file are read and compared with the modified field sub-tags. If the field sub-tags do not exist in the entity class file, a database structure change instruction is automatically triggered to add a new column in the corresponding database table and update the mapping configuration of the entity class file.

[0012] Preferably, the dynamic rendering of newly added or modified fields as visual interactive controls includes: Preload a front-end component library containing various basic interactive components and establish a mapping table between component type strings and specific component objects; The rendering component type attribute of the sub-tag in the interface description metadata is read; if the rendering component type attribute is empty, the default component is automatically matched according to the data type of the field; if the rendering component type attribute is not empty, the corresponding component object is found in the mapping table and instantiated for rendering.

[0013] Preferably, the field sub-tag includes a dynamic display condition attribute, and the client's general rendering engine is also used to perform the following actions: parse the logical expression in the dynamic display condition attribute; monitor changes in the current page data and calculate the value of the logical expression in real time; when the boolean result of the expression value changes, control the display or hiding of the corresponding interface element in the page DOM structure in real time.

[0014] Preferably, storing the information entered by the user into the backend data entity object according to the model binding attributes includes: In response to receiving a JSON object from the client, the corresponding backend data object is instantiated based on the fully qualified path pointed to by the model attribute; the JSON object is obtained by the client's general rendering engine automatically collecting the values ​​of all fields in the form and constructing the JSON object. Perform data type conversion and format validation, inject the values ​​from the JSON object into the corresponding properties of the backend data object, and call the persistence layer interface to complete data saving.

[0015] In a second aspect, the present invention provides a front-end and back-end information synchronization system, the front-end and back-end information synchronization system including a processor and a memory, the memory storing computer program instructions, and the front-end and back-end information synchronization method of the present invention being implemented when the computer program instructions are executed by the processor.

[0016] The beneficial effects of this invention are as follows: Unlike existing technologies where modifying the front-end interface often requires manual synchronization of back-end code and data structure, this embodiment establishes a front-end and back-end connection by constructing a page configuration file containing model binding attributes. When the interface is changed by modifying tags (adding, deleting, modifying attributes), the system can automatically parse and update the back-end data entity structure, while the client dynamically renders the new interface through a general engine and automatically completes data storage using the binding attributes. This design achieves "one-time configuration, automatic front-end and back-end synchronization," significantly reducing maintenance costs and error rates caused by inconsistent front-end and back-end development paces, and greatly improving development efficiency. Attached Figure Description

[0017] Figure 1 This is a schematic flowchart illustrating a front-end and back-end information synchronization method according to an embodiment of the present invention; Figure 2 This is a schematic diagram illustrating the front-end and back-end information synchronization system structure according to an embodiment of the present invention. Detailed Implementation

[0018] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0019] The specific embodiments of the present invention will now be described in detail with reference to the accompanying drawings.

[0020] Example of front-end and back-end information synchronization method: like Figure 1 As shown, the front-end and back-end information synchronization method of the present invention includes: S101. Construct a page configuration file and configure model binding attributes. Specifically, construct a page configuration file. The file is constructed based on a set of predefined tags. The predefined tag set includes form view tags for defining the data editing interface and list view tags for defining the data display interface. In the form view tags or list view tags, configure model binding attributes to declare the fully qualified path of the backend data entity object corresponding to the current interface. In this embodiment, the page configuration file is in XML format; other suitable formats may be used in other embodiments. The predefined tag set also includes menu tags for defining the system navigation structure and data definition tags for defining common data sources.

[0021] The value of the model binding attribute is the fully qualified path string of the backend data entity object.

[0022] The property value of the model binding attribute specifies the fully qualified path of the backend Java entity class DailyProcReq. Through this declaration, the system establishes that the current interface (Form) is specifically used to manipulate the backend data object DailyProcReq, thus establishing a unique mapping relationship between the interface and the backend data model.

[0023] This step establishes a mapping between the tag-based interface and the model. Developers do not need to write JavaScript or HTML code; instead, they directly create XML-formatted page configuration files on the server. For example, to build an editing interface for a "Daily News Production Work Order," developers create a file named view-ao-DailyProcReq.xml. In this file, the root tag is first defined. <form>(Form label).

[0024] S102. Modify the field sub-label, specifically: in response to receiving the interface change instruction, modify the field sub-label inside the form view label or list view label, wherein the modification type includes at least one of the three: adding, deleting, and modifying attributes; In this embodiment, the attribute modification includes setting the field name, specifying the rendering component type, and defining the data source reference.

[0025] By specifying the dimensions for attribute modification (name, component type, data source), it provides fine-grained interface customization capabilities, allowing developers or users to flexibly adjust the display format and data source of fields without writing code, thereby enhancing the system's configurability and adaptability to business changes.

[0026] In this embodiment, the field sub-label includes a dropdown list label: <selection>Non-editable table labels: <grid>, can submit form tags, and navigation menu tags <menuitem>Other types of field sub-labels may also be included in other embodiments.

[0027] When business requirements change, such as needing to add "processed successfully" status and "failure reason" records to the daily report, developers directly modify the above XML-formatted page configuration file. Specifically, this involves adding a layout tag within the `` tag. <panel>In the middle, add or modify field sub-tags <field>.

[0028] S103. Parse the name attribute of the updated field sub-tag, automatically verify and update the structure of the backend data entity object pointed to by the model binding attribute; S104. Generate interface description metadata, specifically: in response to receiving a page access request from the client, reload the updated page configuration file, compile it into interface description metadata containing layout structure and logical rules, and send it to the client; after receiving the metadata stream, the client calls its general rendering engine to perform the following actions: dynamically render the newly added or modified fields into visual interactive controls according to the component type attributes defined by the field sub-tags, for the user to fill in information; S105. In response to receiving the information filled in by the user from the client, the information filled in by the user is stored in the backend data entity object according to the model binding attributes, thereby completing the information synchronization.

[0029] Unlike existing technologies where modifying the front-end interface often requires manual modification of the back-end code and data structure, this embodiment establishes a front-end and back-end connection by constructing a page configuration file containing model binding attributes. When the interface is changed by modifying tags (adding, deleting, modifying attributes), the system can automatically parse and update the back-end data entity structure, while the client dynamically renders the new interface through a general engine and automatically completes data storage using the binding attributes. This design achieves "configuration once, automatic synchronization between front-end and back-end," significantly reducing maintenance costs and error rates caused by inconsistent development pace between the front-end and back-end, and greatly improving development efficiency.

[0030] In one embodiment, building the page configuration file includes: S201. Create the file container and view root node definition, including: Based on the business function module to be developed (e.g., "Daily Report Management"), create an XML-formatted configuration file in the specified directory on the server and declare the view root tag in the file; the view root tag is selected from the form view tag (form) or list view tag (grid) in the predefined tag set, and is used to establish the interaction type (edit or display) of the current interface.

[0031] S202. Configure model binding attributes to establish data associations, including: In the properties of the root view tag, configure the model binding property (model) and set its value to the fully qualified path of the backend data entity object (e.g., co.hubble.ao.db.DailyProcReq); the server establishes an exclusive logical mapping between the current configuration file and the specific database entity structure based on this property.

[0032] S203. Construct the interface layout structure, including: Inside the view root tag with configured model binding attributes, nest the layout container tag (panel); by setting the column span attribute (colSpan) or title attribute (title) of the layout container tag, divide the interface into several logical blocks, thereby defining the visual skeleton of the interface.

[0033] S204. Populate data fields and configure rendering logic, including: Inside the layout container tag, several field sub-tags are configured; for each field sub-tag, its name attribute is set to correspond to the specific attribute name of the backend data entity object, and the component type attribute is set to define the rendering form of the field on the front end (such as text box, checkbox or binary link).

[0034] S205. Configure auxiliary data sources and dynamic logic, including: For field sub-tags that require input options, import the reference path of the data source definition tag (selection); at the same time, configure the dynamic display condition attribute (showIf) on the layout container tag or field sub-tag according to business rules to define the visibility of interface elements in a specific data state.

[0035] S206. Registration navigation entry and action association, including: Define a navigation menu label (menuitem) and an action view label (action-view) in an external or independent menu configuration file; direct the click action of the navigation menu label to the action view label, and associate the action view label with the internal name (name) of the view root label created in step S101, thereby opening up the routing channel for users to access the configuration page.

[0036] In one embodiment, reloading the updated page configuration file and compiling it into interface description metadata containing layout structure and logical rules includes: The parsing engine recursively traverses the tag tree in the configuration file, identifies the layout panel tags and their attributes, and divides the interface into several logical blocks. For the field sub-tags in each logical block, its cross-column attributes are parsed, the weight of the field in the front-end grid layout system is calculated, and the weight value is written into the interface description metadata.

[0037] Compared to simple streaming parsing, this embodiment recursively traverses the tag tree and divides the interface into logical blocks, while calculating the weights in the front-end grid layout system. This ensures that the compiled interface description metadata contains precise layout logic. This ensures that the client rendering engine can reproduce complex page structures and guarantees the aesthetics and responsive layout effects of dynamically generated interfaces.

[0038] In one embodiment, the automatic verification and updating of the structure of the backend data entity object pointed to by the model-bound attribute includes: S301. Using reflection or a class loader, locate and load the corresponding backend entity class file based on the fully qualified path string; S302. Read the attribute definition of the entity class file and compare it with the modified field sub-label; if the field sub-label does not exist in the entity class file, automatically trigger the database structure change instruction, add a new column in the corresponding database table, and update the mapping configuration of the entity class file.

[0039] Unlike traditional development that requires manually writing SQL scripts to modify the database, this embodiment uses reflection to load the backend class and compare it with the frontend tags. When a new field is found, it automatically triggers database structure change instructions (such as adding a new column) and updates the mapping. This "UI-driven database evolution" mechanism achieves true full-stack automation and completely eliminates the pain point of the data layer and presentation layer being out of sync.

[0040] In one embodiment, dynamically rendering the added or modified fields as visual interactive controls includes: S401. Preload a front-end component library containing various basic interactive components and establish a mapping table between component type strings and specific component objects; S402. Read the rendering component type attribute of the field sub-tag in the interface description metadata; if the rendering component type attribute is empty, automatically match the default component according to the data type of the field; if the rendering component type attribute is not empty, find the corresponding component object in the mapping table and instantiate and render it.

[0041] By establishing a mapping table between component type strings and specific component objects, and providing an automatic default component matching mechanism based on data type, the component instantiation problem in dynamic rendering is solved. This design ensures fast rendering of commonly used fields (without specifying components) while retaining the flexibility to use specific interactive components, thus improving the versatility and intelligence of the rendering engine.

[0042] In one embodiment, the field sub-tag contains a dynamic display condition attribute, and the client's general rendering engine is also used to perform the following actions: parse the logical expression in the dynamic display condition attribute; listen for changes in the current page data and calculate the value of the logical expression in real time; when the boolean result of the expression value changes, control the display or hiding of the corresponding interface element in the page DOM structure in real time.

[0043] Complex interactive logic (show / hide) is abstracted into logical expressions in the configuration, which are then calculated and controlled by the rendering engine in real time to control the DOM structure, replacing the hard-coded JavaScript logic in traditional development. This allows business users or non-technical personnel to achieve dynamic interactive effects through configuration, reducing the maintenance difficulty of front-end logic code.

[0044] In one embodiment, storing the user-entered information into a backend data entity object based on the model binding attributes includes: S501. In response to receiving a JSON object sent by the client, instantiate the corresponding backend data object according to the fully qualified path pointed to by the model attribute; the JSON object is obtained by the client's general rendering engine automatically collecting the values ​​of all fields in the form and constructing a JSON object. S502. Perform data type conversion and format validation, inject the values ​​in the JSON object into the corresponding properties of the backend data object, and call the persistence layer interface to complete data saving.

[0045] This embodiment specifies a detailed data return and persistence process. The client automatically collects data and constructs JSON, while the server instantiates objects based on the fully qualified path and completes injection and saving. This process is fully automated, eliminating the cumbersome parameter receiving, object assembly, and conversion code in traditional backend development, ensuring a seamless flow of data from the front-end form to database storage.

[0046] Example of a front-end and back-end information synchronization system: This invention also provides a front-end and back-end information synchronization system. For example... Figure 2 As shown, the front-end and back-end information synchronization system includes a processor and a memory. The memory stores computer program instructions, and when the computer program instructions are executed by the processor, a front-end and back-end information synchronization method as described in the above embodiments is implemented.

[0047] The front-end and back-end information synchronization system also includes other components well known to those skilled in the art, such as communication buses and communication interfaces. Their settings and functions are known in the art and will not be described in detail here.

[0048] While this specification has shown and described numerous embodiments of the invention, it will be apparent to those skilled in the art that such embodiments are provided by way of example only. Many modifications, alterations, and alternatives will occur to those skilled in the art without departing from the spirit and essence of the invention. It should be understood that various alternatives to the embodiments of the invention described herein may be employed in the practice of this invention.< / field> < / panel> < / menuitem> < / grid> < / selection> < / form>

Claims

1. A front and back end information synchronization method, characterized by, The method comprises the following steps: constructing a page configuration file, the file being constructed based on a set of predefined tags, the predefined tags including form view tags for defining a data editing interface and list view tags for defining a data display interface, in the form view tags or the list view tags, a model binding attribute is configured to declare a fully qualified path of a backend data entity object corresponding to a current interface; in response to receiving an interface change instruction, modifying a field sub-tag inside the form view tag or the list view tag, the modification type including at least one of the following three types: addition, deletion and attribute modification; parsing a name attribute of the updated field sub-tag, automatically checking and updating a structure of the backend data entity object pointed to by the model binding attribute; in response to receiving a page access request from a client, reloading the updated page configuration file, compiling the page configuration file into interface description metadata containing layout structure and logic rules, and sending the metadata to the client; after receiving the metadata stream, the client invokes a general rendering engine to perform the following actions: according to a component type attribute defined by the field sub-tag, dynamically rendering the added or modified field into a visual interactive control for user information filling; in response to receiving user-filled information returned by the client, storing the user-filled information into the backend data entity object according to the model binding attribute, thereby completing information synchronization.

2. The front and back-end information synchronization method of claim 1, wherein, The predefined tag set further includes menu tags for defining a system navigation structure and data definition tags for defining a common data source.

3. The front and back-end information synchronization method of claim 1, wherein, The attribute modification includes setting a field name, specifying a rendering component type and defining a data source reference.

4. The front and back-end information synchronization method of claim 1, wherein, The reloading of the updated page configuration file and the compiling of the page configuration file into interface description metadata containing layout structure and logic rules include the following steps: a parsing engine recursively traverses a tag tree in the configuration file, identifies layout panel tags and their attributes, and divides an interface into a plurality of logical blocks; for a field sub-tag in each logical block, the parsing engine parses a cross-column attribute of the field sub-tag, calculates a weight of the field in a front-end grid layout system, and writes the weight value into the interface description metadata.

5. The front and back-end information synchronization method of claim 1, wherein, The value of the model binding attribute is a fully qualified path string of a backend data entity object.

6. The front and back-end information synchronization method of claim 1, wherein, The automatic checking and updating of the structure of the backend data entity object pointed to by the model binding attribute include the following steps: using a reflection mechanism or a class loader, locating and loading a corresponding backend entity class file according to the fully qualified path string; reading attribute definitions of the entity class file and comparing the attribute definitions with the modified field sub-tag; if the field sub-tag does not exist in the entity class file, a database structure change instruction is automatically triggered, a new column is added in a corresponding database table, and a mapping configuration of the entity class file is updated.

7. The front and back-end information synchronization method of claim 1, wherein, The dynamic rendering of the added or modified field into a visual interactive control includes the following steps: preloading a front-end component library containing a plurality of basic interactive components, and establishing a mapping table of component type strings and specific component objects; reading a rendering component type attribute of a field sub-label in the interface description metadata; if the rendering component type attribute is empty, automatically matching a default component according to a data type of the field; if the rendering component type attribute is not empty, searching for a corresponding component object in the mapping table for instantiation rendering.

8. The front and back-end information synchronization method of claim 1, wherein, The field sub-label contains a dynamic display condition attribute, and the general rendering engine of the client is further configured to perform the following actions: parsing a logical expression in the dynamic display condition attribute; listening to changes in current page data, and calculating a value of the logical expression in real time; and when a Boolean result of the expression value changes, controlling display or hiding of a corresponding interface element in a page DOM structure in real time.

9. The front and back-end information synchronization method of any one of claims 1 to 8, wherein, The storing of the information filled by the user into the backend data entity object according to the model binding attribute comprises: in response to receiving the JSON object sent by the client, instantiating a corresponding backend data object according to a fully qualified path pointed to by the model attribute; the JSON object is obtained in the following manner: the general rendering engine of the client automatically collects values of all fields in the form and constructs a JSON object; performing data type conversion and format checking, injecting the values in the JSON object into corresponding attributes of the backend data object, and calling a persistence layer interface to complete data saving.

10. A front-back end information synchronization system comprising a processor and a memory, the memory storing computer program instructions, wherein, When the computer program instructions are executed by the processor, the front-end and back-end information synchronization method of any one of claims 1-9 is implemented.

Images