CN118069118B

CN118069118B - Method, device, equipment and medium for changing browser page

Info

Publication number: CN118069118B
Application number: CN202410328249.9A
Authority: CN
Inventors: 纪鹏; 郑伟波; 周斐; 孙立新
Original assignee: Inspur General Software Co Ltd
Current assignee: Inspur General Software Co Ltd
Priority date: 2024-03-21
Filing date: 2024-03-21
Publication date: 2024-10-25
Anticipated expiration: 2044-03-21
Also published as: CN118069118A

Abstract

The embodiment of the specification discloses a method, a device, equipment and a medium for changing a browser page, which comprise the following steps: acquiring a preset interface design document, a preset database design document and a preset page component library; generating page metadata according to the interface design document, the database design document and the page component library; generating a page frame according to the appearance layout in the interface design document; loading a page frame and page metadata in a browser; rendering the page components of the corresponding fields in the page frame according to the component types of each field and the labels of each field; binding the attribute of the page component and the attribute of the data object rendered by the same field to obtain the binding relation of the attribute of the page component and the attribute of the data object rendered by each field, and if the field value of the page component or the value of the attribute of the data object rendered in the browser is changed, changing the field value of the corresponding page component or the value of the attribute of the data object according to the binding relation.

Description

Method, device, equipment and medium for changing browser page

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a medium for modifying a page frame, a component, and data assembling of a browser page.

Background

With the rapid development of the internet, page development is an important field. Page development involves designing, encoding, and implementing various aspects of the web page, including interface layout, style design, interactive functionality, and the like. In the course of page development, changes to browser pages are often required.

When changing browser pages, manual modification is conventional. The manual modification of the browser page requires a high degree of expertise and high requirements for operators. Second, manual modification of browser pages requires reloading of the entire page, which may cause performance bottlenecks and user experience problems for large websites or pages that require frequent modification.

Therefore, the existing browser page modification method cannot well meet the requirement of page development, and a more efficient method is needed to realize quick modification of the browser page.

Disclosure of Invention

One or more embodiments of the present disclosure provide a method, an apparatus, a device, and a medium for modifying a browser page, which are used to solve the technical problem set forth in the background art.

One or more embodiments of the present disclosure adopt the following technical solutions:

One or more embodiments of the present disclosure provide a method for modifying a browser page, where the method includes:

Acquiring a preset interface design document, a database design document and a page component library, wherein the interface design document is used for describing the appearance layout of a page, the labels of fields contained in the page and the component styles of the page, the database design document is used for describing field information stored in a database, the field information comprises the serial numbers of fields, the page component library is used for maintaining codes of page components and the styles of the page components, and the page component library comprises the component types of the fields;

Generating page metadata according to the interface design document, the database design document and the page component library, wherein the page metadata comprises a set of a plurality of field attributes, and each field attribute comprises a number of a field, a label of the field and a component type of the field;

generating a page frame according to the appearance layout in the interface design document;

Loading the page frame and the page metadata in a browser so as to render a document object model of the page frame in the browser, and analyzing the page metadata in a memory of the browser to obtain the number of a field, the tag of the field and the component type of the field in each field attribute;

rendering page components of the corresponding fields in the page frame according to the component types of each field and the labels of each field;

Generating a data object according to the page metadata, and generating a corresponding attribute of the data object for each field;

binding the attribute of the page component and the data object rendered by the same field to obtain the binding relation of the attribute of the page component and the data object rendered by each field, wherein the field value of the page component rendered by the same field is the same as the value of the attribute of the data object;

And if the field value of the page component or the value of the attribute of the data object rendered in the browser is changed, changing the field value of the corresponding page component or the value of the attribute of the data object according to the binding relation.

It should be noted that, through the above, the embodiment of the present disclosure has the following beneficial effects:

The efficiency of browser page modification is improved: while manual operation is required for traditional manual modification of browser pages, the new browser page modification method can quickly and accurately realize modification of browser pages by automatically generating page metadata and page components. Therefore, a great amount of time and energy can be saved, and the page development efficiency is improved.

Providing an intuitive interface and real-time preview: visual interfaces and visual effects can be provided by obtaining a preset interface design document, database design document and page component library, and rendering the page components according to the page metadata. Operators can clearly see the appearance layout, field labels and component styles of the page, preview and change the result in real time, and improve the convenience of development and debugging.

Human error is reduced and accuracy is improved: the traditional manual modification of the browser page is easy to be neglected and wrong, and the new method can reduce the occurrence of human errors and improve the accuracy of data modification by automatically generating the page metadata and binding the attributes of the page components and the data objects.

And the user experience is improved: by loading the page frame and the page metadata in the browser and changing the attributes of the page component and the data object according to the binding relation, the real-time updating and response of the page can be realized, and the user experience is improved. Particularly, for a large website or a page needing frequent modification, delay and performance bottleneck caused by reloading the whole page are avoided, and the smoothness and response speed of the page are improved.

Further, the embodiment of the present disclosure generates page metadata according to the interface design document, the database design document and the page component library, including:

Comparing the interface design document with the database design document to obtain the same fields in the interface design document and the database design document;

inquiring the page component library according to the same field to obtain the component type of the same field;

and generating the page metadata according to the number of the same field, the label of the same field and the component type of the same field.

simplifying the generation process of page metadata: the same fields in the interface design document and the database design document can be obtained by comparing the two. Thus, manual matching and field searching can be avoided, and the workload of operators and the possibility of errors are reduced. The process of generating page metadata is more simplified and automated.

Ensuring consistency of page metadata: by comparing fields in the interface design document and the database design document, it can be ensured that the page metadata remains consistent with the data fields stored in the database. Therefore, mismatching of page metadata and actual data caused by errors or negligence can be avoided, and the accuracy and stability of the page are improved.

The generation speed of the page metadata is increased: by querying the page component library, the component types of the same field can be quickly acquired. Therefore, the manual search and writing of the component types can be avoided, the generation speed of the page metadata is improved, and the page development process is accelerated.

Flexibility and maintainability of development are improved: by generating page metadata, field numbers, tags and component types of pages are recorded, and reference and convenience can be provided for subsequent page development and maintenance work. The page can be adjusted, modified and expanded more conveniently by a developer, so that the flexibility and maintainability of development are improved.

Further, according to the component type of each field and the label of each field, the embodiment of the present disclosure renders the page component of the corresponding field in the page frame, including:

acquiring a component code from a page component library according to the component type of each field;

determining the text label of the page component according to the label of each field;

And rendering the page component of the corresponding field in the page frame according to the component code and the text label of the page component.

An automation component renders: and automatically acquiring corresponding component codes from the page component library according to the component types of the fields. Therefore, the time and effort for manually writing and adjusting the components by a developer can be saved, and the automation of component rendering is realized.

Ensuring consistency of components and labels: by determining the text labels of the page components according to the labels of the fields, the consistency of the display of the components and the description of the labels can be ensured. Thus, the possibility of errors can be reduced, and the accuracy and consistency of the page can be improved.

Flexible component selection and personalization customization: component code is obtained from the page component library so that appropriate components can be selected for rendering according to the different component types of the fields. Meanwhile, the components can be customized individually according to the needs, and specific design and function requirements are met.

The visual effect and the user experience of the page are improved: by rendering page components of corresponding fields in the page frame, aesthetics and user friendliness of the page can be achieved. The page frame and the component types and text labels of each field are carefully selected and designed, so that the layout and the display of the page are more visual and easy to understand and operate.

Efficiency and convenience of developer are improved: automatically rendering page components of corresponding fields in the page frame can greatly reduce the workload of manually writing and adjusting components. The developer can concentrate on the development of business logic more, improves development efficiency and convenience.

Further, the page framework of the embodiments of the present disclosure includes a predefined anchor point, and the method further includes:

Determining the position of an anchor point of the page frame;

And rendering a document object model of the page component according to the positions of the anchor points of the page frame.

accurate positioning and navigation anchor points: by determining the location of the anchor point of the page frame, the region where the traffic field is located can be precisely marked. Thus, convenient navigation and positioning functions can be provided, and a user can more quickly find out required information and functions.

A fast render page component: according to the positions of the anchors of the page frame, a Document Object Model (DOM) of the page component can be effectively rendered. Therefore, the loading and rendering processes of the page can be accelerated, and the response speed of a user and the loading performance of the page are improved.

User experience and navigation convenience are improved: by using predefined anchors and document object models that render page components, better user experience and navigation convenience may be achieved. The user can directly jump to the specific position where the service field is located by clicking the navigation link or other interaction modes, manual scrolling searching is not needed, and time and effort are saved.

Simplified page development and maintenance: the predefined anchor points can be used as reference points for page development and maintenance, enabling developers to more effectively locate and operate page components. Therefore, the development and maintenance flow of the page can be simplified, and the working efficiency of developers is improved.

Scalability and flexibility: the page framework has some extensibility and flexibility by using predefined anchors and a document object model that renders the page components. The developer can customize the anchor points and the corresponding page components according to the requirements, and the requirements of different page structures and layouts are met.

Further, in the embodiment of the present disclosure, if the field value of the rendered page component or the value of the attribute of the data object in the browser is changed, the changing the field value of the corresponding page component or the value of the attribute of the data object according to the binding relationship includes:

If the field value of the first page component rendered in the browser is changed, determining the attribute of the first data object according to the binding relation, and changing the value of the attribute of the first data object;

And if the value of the attribute of the second data object in the browser is changed, determining a rendered second page component according to the binding relation, and changing the field value of the second page component.

Updating page components and data objects in real time: by changing the attributes of the page component and the data object according to the binding relation, the page component and the data object can be updated in real time. Whether the field value of the page component is changed or the attribute value of the data object is changed, the system can timely capture and update the corresponding component or attribute value. Thus, the synchronism of the page and the data can be maintained, and real-time display and feedback are provided.

The responsiveness and the user experience of the page are improved: by modifying the properties of the page components and data objects according to binding relationships, rapid page response and updating can be achieved. The operation and input of the user can be immediately reflected on the page, and smoother and real-time user experience is provided.

Simplified data association and processing logic: by establishing a binding relationship, the field value of the page component and the attribute value of the data object are bound, so that the data association and processing logic can be simplified. When one of them changes, the system can automatically update the other one without manual processing by a developer. Thus, development workload and possibility of errors can be reduced, and development efficiency and accuracy are improved.

Enhancing data driven page functionality: by modifying the properties of the page component and the data object according to the binding relationship, a data driven page function can be realized. The display and behavior of the page component can be changed in real time according to the attribute value of the data object, so that personalized and flexible page exchange is realized.

Further, the data object in the embodiment of the present disclosure is a JavaScript object, where the attribute name of the JavaScript object is consistent with the field name of the database table.

The JavaScript object is serialized into a character string and then sent to the back end, and the back end can automatically splice SQL sentences according to the attribute names of the JavaScript object and insert data into a database table.

One or more embodiments of the present disclosure provide a device for modifying a browser page, where the device includes:

The system comprises an acquisition unit, a storage unit and a page component library, wherein the acquisition unit is used for acquiring a preset interface design document, a database design document and a page component library, the interface design document is used for describing the appearance layout of a page, the labels of fields contained in the page and the component styles of the page, the database design document is used for describing field information stored in a database, the field information comprises the serial numbers of fields, the page component library is used for maintaining codes of page components and the styles of the page components, and the page component library comprises the component types of the fields;

A metadata generation unit for generating page metadata according to the interface design document, the database design document and the page component library, wherein the page metadata comprises a plurality of field attributes, and each field attribute comprises a number of a field, a label of the field and a component type of the field;

a frame generation unit which generates a page frame according to the appearance layout in the interface design document;

The metadata loading unit loads the page frame and the page metadata in a browser so as to render a document object model of the page frame in the browser, and analyzes the page metadata in a memory of the browser to obtain the number of a field, the tag of the field and the component type of the field in each field attribute;

the component rendering unit renders page components of the corresponding fields in the page frame according to the component types of each field and the labels of each field;

The data object generating unit generates a data object according to the page metadata and generates corresponding attributes of the data object for each field;

the relation binding unit is used for binding the attribute of the page component and the data object rendered by the same field to obtain the binding relation of the attribute of the page component and the data object rendered by each field, wherein the field value of the page component rendered by the same field is the same as the value of the attribute of the data object;

And the changing unit is used for changing the field value of the corresponding page component or the value of the attribute of the data object according to the binding relation if the field value of the page component or the value of the attribute of the data object rendered in the browser is changed.

Further, the metadata generating unit of the embodiment of the present disclosure executes the generating of the page metadata according to the interface design document, the database design document, and the page component library, and is specifically configured to:

One or more embodiments of the present disclosure provide a device for modifying a browser page, including:

at least one processor; and

A memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor, the instructions are executable by the at least one processor to enable the at least one processor to:

One or more embodiments of the present description provide a non-volatile computer storage medium storing computer-executable instructions that, when executed by a computer, enable:

The above-mentioned at least one technical scheme that this description embodiment adopted can reach following beneficial effect:

Drawings

In order to more clearly illustrate the embodiments of the present description or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described below, it being obvious that the drawings in the following description are only some of the embodiments described in the present description, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art. In the drawings:

FIG. 1 is a flowchart illustrating a method for modifying a browser page according to one or more embodiments of the present disclosure;

FIG. 2 is a schematic diagram of page metadata provided by one or more embodiments of the present disclosure;

FIG. 3 is a schematic diagram of the binding of page components and JavaScript objects provided by one or more embodiments of the present disclosure;

FIG. 4 is an illustration of metadata of a commercial loan application page provided by one or more embodiments of the present disclosure;

FIG. 5 is a schematic diagram of a page development device according to one or more embodiments of the present disclosure;

FIG. 6 is a schematic structural diagram of a device for modifying a browser page according to one or more embodiments of the present disclosure;

fig. 7 is a schematic structural diagram of a device for modifying a browser page according to one or more embodiments of the present disclosure.

Detailed Description

The embodiment of the specification provides a method, a device, equipment and a medium for changing a browser page.

In order to make the technical solutions in the present specification better understood by those skilled in the art, the technical solutions in the embodiments of the present specification will be clearly and completely described below with reference to the drawings in the embodiments of the present specification, and it is obvious that the described embodiments are only some embodiments of the present specification, not all embodiments. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, shall fall within the scope of the present disclosure.

The following are technical terms related to embodiments of the present specification:

1. the documents, one type of document corresponds to a table of the database.

2. And recording, namely recording the bill data stored in the database, wherein one record corresponds to one row of data of the database table.

3. A field, a field of the document data record, a field corresponding to a column of the table.

4. The service field is a field for reflecting service requirements and is used for carrying the display of service information.

5. A page component, a reusable page code block, containing HTML, javaScript and CSS, containing field tags and field values.

A JavaScript object, in JavaScript language, an object is a collection of properties, one property containing a name and a value.

7. A Document Object Model (DOM), is a data representation of objects on a web page that make up the structure and content of a document.

Fig. 1 is a schematic flow diagram of a method for modifying a browser page according to one or more embodiments of the present disclosure, where the flow may be executed by a browser page modifying system. Some input parameters or intermediate results in the flow allow for manual intervention adjustments to help improve accuracy.

The method flow steps of the embodiment of the present specification are as follows:

S102, acquiring a preset interface design document, a database design document and a page component library, wherein the interface design document is used for describing the appearance layout of a page, the labels of fields contained in the page and the component styles of the page, the database design document is used for describing field information stored in a database, the field information comprises the serial numbers of the fields, the page component library is used for maintaining codes of page components and the styles of the page components, and the page component library comprises the component types of the fields.

In the embodiment of the present specification, regarding the above-described acquisition interface design document, database design document and page component library, the following specific embodiments may be adopted:

Acquiring a preset interface design document: the source of the interface design document is determined, and the interface design document can be communicated with a designer or a related team to obtain information such as the specific position, format and the like of the interface design document. A set of naming and version control specifications are established to ensure that the development team can accurately acquire and use the latest version of the interface design document.

Acquiring a preset database design document: the source of the database design document is determined, and the database design document can be communicated with database designers or related teams to acquire information such as the specific position and format of the document. The field information contained in the database design document, including detailed information of the number, data type, length, etc. of the field is confirmed so that the database field is accurately used in the development process. A database model tool is built or an existing tool, such as an ER diagram tool, is used to translate database design documents into a visualized model for better understanding and use of the database structure.

Acquiring a preset page component library: the source of the page component library is determined, and the page component library can be communicated with a front-end designer or a component library provider to acquire information such as the specific position and the use mode of the component library. The types and styles of components contained in the component library are confirmed so that the corresponding components are accurately used in the development process. A specialized directory or library is built in the code repository of the project or related code management tool for maintaining and managing the code and style of the page components.

And S104, generating page metadata according to the interface design document, the database design document and the page component library, wherein the page metadata comprises a set of a plurality of field attributes, and each field attribute comprises a number of a field, a label of the field and a component type of the field.

In the embodiment of the specification, the interface design document and the database design document can be compared first to obtain the same fields in the interface design document and the database design document; inquiring the page component library according to the same field to obtain the component type of the same field; finally, page metadata may be generated according to the number of the same field, the tag of the same field, and the component type of the same field.

The generation of page metadata may be performed by the following embodiments:

comparing the interface design document with the database design document: the fields are compared one by one and the same field that exists in both documents is found. The matching may be performed using a number or field name.

Querying a page component library: and querying the page component library by using the same fields to find out the component types matched with the fields. And confirming whether the component library contains the component types corresponding to the same fields. If there is no corresponding component type in the component library, it is necessary to negotiate with the development team to determine applicable alternative components.

Generating page metadata: based on the number, tag, and component type of the same field, a collection or object is created to store these field attributes. The page metadata may be represented using JSON format or other data structures. The number, label, and component type of each field are stored as key-value pairs in the metadata.

S106, generating a page frame according to the appearance layout in the interface design document.

In the above-described generation of the page frame, a blank web page may be created as the page frame using front-end technologies such as HTML and CSS. The structure and layout of the page may be created in particular using the appropriate HTML tags and CSS styles in the web page, based on the appearance layout in the interface design document. Different regions and layouts are set using container elements (e.g., div) and each region is assigned the appropriate style and size. The page frame can be further perfected by manual coding and used in the subsequent steps.

S108, loading the page frame and the page metadata in a browser so as to render a document object model of the page frame in the browser, and analyzing the page metadata in a memory of the browser to obtain the number of the field, the tag of the field and the component type of the field in each field attribute.

It should be noted that, regarding the loading of the page frame and the page metadata, the following specific embodiments may be adopted:

Loading the page frame and page metadata: the code that introduces the page frame in the HTML document may be introduced using script tags or through an external script file. Page metadata is introduced into the HTML document, the script tag can be used to designate type as JSON, and external JSON files are introduced to contain the metadata through src attributes, or the metadata is defined directly in the script tag.

Rendering a document object model of a page frame: the code of the page frame is loaded by the browser and parsed into a Document Object Model (DOM). Ensuring that the structure of the page frame is created using the HTML tags and attributes correctly enables it to present the corresponding layout and components.

Parsing the page metadata: the parsing and reading of the page metadata in the browser can be realized through JavaScript. The page metadata is converted into JavaScript objects for access and processing in the browser. The JavaScript code is used to obtain the field number, field tag and field component type in each field attribute.

Page interaction and setting: and dynamically generating a form or an input component of the page according to field information in the page metadata, and setting corresponding attributes and styles. Form elements and UI components in the page are rendered using the appropriate HTML tags and attributes according to field numbers, tags, and component types. JavaScript code can be used to handle user input and interaction, and to match and verify with page metadata, as desired.

And S110, rendering the page components of the corresponding fields in the page frame according to the component types of each field and the labels of each field.

In the embodiment of the present specification, component codes may be obtained from a page component library according to the component type of each field; determining the text label of the page component according to the label of each field; and finally, rendering the page component of the corresponding field in the page frame according to the component code and the text label of the page component.

It should be noted that, regarding the above page component for rendering the corresponding field in the page frame, the following specific embodiments may be adopted:

acquiring component codes: and acquiring corresponding component codes from the page component library according to the component type of each field. The method ensures that various required component types are contained in the page component library, and corresponding codes can be acquired according to the component types.

Determining text labels of page components: and according to the label of each field, finding the corresponding field label in the interface design document or page metadata. The literal tag of the page component is determined to describe and identify the meaning and role of each field.

Rendering the page component of the field: and according to the acquired component codes and the determined text labels, combining the acquired component codes and the determined text labels, and rendering page components of corresponding fields in the page framework. Front-end techniques such as HTML, CSS, and JavaScript may be used to place the component code and text labels in place and apply the appropriate style and behavior.

Interaction and verification of processing fields: necessary interactive functions such as form verification, data verification, etc. are added to the page components of each field as needed. JavaScript code can be used to monitor the events of the field components and perform corresponding processing and verification according to the service requirements.

Further, the page frame in the embodiment of the present specification includes a predefined anchor point, and the embodiment of the present specification may further determine the location of the anchor point of the page frame; and rendering a document object model of the page component according to the positions of the anchor points of the page frame.

The above-described content may be provided by the following embodiments:

Determining anchor point positions of a page frame: and determining the positions and the number of anchor points to be set according to the requirements and the design of the page frame. In the HTML code of the page frame, appropriate HTML tags (e.g., div) are used as anchors, and each anchor is assigned a unique id attribute.

Rendering a document object model of a page component: javaScript code is written to render a Document Object Model (DOM) of the page component according to the requirements and design of the page component. In JavaScript code, HTML elements of the page component are created and organized by DOM manipulation methods (e.g., CREATEELEMENT, APPENDCHILD, etc.) and added to the corresponding anchor positions.

Setting the style and the attribute of the component: using CSS style sheets or inline styles, appropriate styles are set for page components to achieve predefined appearance and layout requirements. And setting proper attributes and event listeners for the page components according to service requirements so as to support interactive functions and behaviors.

Page interaction and event handling: adding the required interactive functions and event handlers such as click events, form submission, etc. And monitoring and processing interaction events of the user by using JavaScript codes according to the anchor point and the structure of the page assembly, and carrying out corresponding operation according to service requirements.

And S112, generating a data object according to the page metadata, and generating corresponding attributes of the data object for each field.

In the embodiment of the present specification, the data object may be a JavaScript object.

It should be noted that, regarding the above generation of the data object of each field, the following specific embodiments may be adopted:

creating a data object: the object may be created using the object literal or constructor in JavaScript.

Defining attributes: and generating an attribute of the JavaScript object according to the field information for each field of the page metadata, wherein the name of the attribute is equal to the field number.

And S114, binding the attributes of the page components and the data objects rendered by the same field to obtain the binding relation between the attributes of the page components and the data objects rendered by each field, wherein the field value of the page components rendered by the same field is the same as the value of the attributes of the data objects.

And S116, if the field value of the page component or the value of the attribute of the data object rendered in the browser is changed, changing the field value of the corresponding page component or the value of the attribute of the data object according to the binding relation.

In this embodiment of the present disclosure, if a field value of a first page component rendered in the browser is changed, determining an attribute of a first data object according to the binding relationship, and changing a value of the attribute of the first data object; and if the value of the attribute of the second data object in the browser is changed, determining a rendered second page component according to the binding relation, and changing the field value of the second page component.

In the embodiment of the present specification, regarding the above, the following specific implementation steps may be adopted:

binding relationship: and establishing a binding relation according to the relation between the page component rendered by the field and the attribute of the data object. The field values of the page component may be bound with the attribute values of the data objects using a two-way data binding function provided by a framework or library.

Processing of page component value changes: when the field value of the rendered page component in the browser is changed, determining the attribute of the corresponding data object according to the binding relation, and changing the value of the attribute. An event listening function provided by a framework or library may be used to listen for changes in page component values and update the attribute values of the corresponding data objects according to binding relationships.

Processing of data object attribute change: and when the attribute value of the data object is changed, determining a rendered page component which needs to be updated according to the binding relation, and changing the field value of the component. The observer mode or event mechanism provided by the framework or library may be used to monitor changes in the attributes of the data objects and update the field values of the corresponding page components according to the binding relationships.

It should be noted that, the user interface of the enterprise application generally contains a large amount of business information, and the requirements of the enterprise application on the appearance of the interface are continuously increasing. The user interface of the enterprise application is realized by manual coding, the page style can be accurately controlled, the appearance requirement is met, but great workload is required for realizing the service information. The interface of the enterprise application is realized based on the structured data, so that a part of workload can be reduced, but page styles are difficult to accurately control, and appearance requirements cannot be met.

The embodiment of the specification provides a page development device, which defines a page metadata format, wherein basic elements of the page metadata format bear service information and interface information at the same time, the page metadata is automatically generated by a design document, and the page metadata format and a manually encoded page style are combined together to construct a page, and the device comprises the following specific steps:

1. the development device compares the interface design document with the database design document to generate page metadata and a page frame;

1) The interface design document is in an image form and describes the appearance layout of the page, the tag characters of the fields contained in the page and the page component style;

2) The database design document is in a form of a table, and describes field information stored in the database, including the number, the name and the data type of the field;

3) The development device extracts relevant information from fields which are commonly appeared in the interface design document and the database design document to form page metadata;

4) The page metadata follows a fixed format, containing a collection of field information. One field information contains a number, a tag text, a data type and a component type;

(1) The number and data type of the field comes from the database design document;

(2) The label text of the field comes from the interface design document;

(3) The component types of the fields are obtained by querying a page component library;

(4) The page component library maintains the codes of the page components and the styles of the page components;

5) The development device generates a page frame from the appearance layout in the interface design document;

(1) The fields contained in the page frame are replaced with anchor points;

(2) Developing personnel perfects the page frame to realize accurate page appearance effect;

2. The development device loads the page frame and the page metadata in the browser and renders a document object model DOM (Document Object Model) of the page frame in the browser view; analyzing the page metadata in the browser memory as a field set;

3. Rendering the page component in the browser view by the development device;

1) Traversing each field of the field list of page metadata:

(1) Determining the component type corresponding to the field, and acquiring a component code from a page component library according to the component type;

(2) Determining a text label of the page component according to the label of the field;

(3) Determining positions and rendering DOM of the page assembly according to anchor points defined by the page frame;

4. the development device generates a JavaScript object in the memory of the browser;

1) Creating a JavaScript object and traversing each field of the field list of page metadata:

(1) Generating an attribute of JavaScript according to the field information, wherein the name of the attribute is equal to the field number;

5. The development device determines the binding relation between the page component of the browser view and the attribute of the JavaScript object in the browser memory;

1) The development device uses the attribute of the component rendered by the same service field and the generated JavaScript object as a bidirectional binding relationship;

2) The development device registers a field value change event of a page component of the browser view, and when the field value of the page component is changed due to user input, the development device synchronously updates the value of the attribute of the JavaScript object having a binding relationship with the page component.

3) The development device registers a value change event of the attribute of the JavaScript object in the browser, and synchronously updates the field value of the page component with binding relation with the attribute of the JavaScript object when the value of the attribute of the JavaScript object changes.

Taking the development process of the commercial loan application page as an example, the following is a specific example schematic diagram:

FIG. 2 is a schematic diagram of page metadata including fields 1, 2, 3, etc., each field including a number, tag text, data type, and component type.

Fig. 3 is a schematic diagram of binding of a page component and a JavaScript object, which can be referred to above with respect to binding of a page component and a JavaScript object.

Fig. 4 is an illustration of metadata representation of a commercial loan application page, see in particular schematic.

The development device may refer to a schematic structural diagram of the page development device shown in fig. 5, and specifically includes:

index unit: creating an index for each component style of the page component library to query the component type;

Generating unit I: the page metadata loading unit is used for comparing the interface design document and the database design document and generating page metadata: the method comprises the steps of loading page frames and page metadata;

An analysis unit: for parsing the page metadata;

generating unit II: the method comprises the steps of generating a JavaScript object in a browser memory;

a rendering unit: rendering the page component in the browser view;

a binding unit: the method comprises the steps of managing binding relation between view object attributes and page components, and synchronizing field values between the page components and JavaScript objects;

In correspondence to the foregoing, fig. 6 is a schematic structural diagram of a device for modifying a browser page according to one or more embodiments of the present disclosure, where the device includes: an acquisition unit 602, a metadata generation unit 604, a frame generation unit 606, a metadata loading unit 608, a component rendering unit 610, a data object generation unit 612, a relationship binding unit 614, and a modification unit 616.

An obtaining unit 602, configured to obtain a preset interface design document, a database design document and a page component library, where the interface design document is used to describe an appearance layout of a page, a tag of a field included in the page, and a component style of the page, the database design document is used to describe field information stored in a database, the field information includes a number of a field, the page component library is used to maintain a code of a page component and a style of the page component, and the page component library includes a component type of the field;

a metadata generation unit 604 that generates page metadata including a set of a plurality of field attributes, each field attribute including a number of a field, a tag of a field, and a component type of a field, from the interface design document, the database design document, and the page component library;

a frame generation unit 606 that generates a page frame from the appearance layout in the interface design document;

The metadata loading unit 608 loads the page frame and the page metadata in the browser so as to render a document object model of the page frame in the browser, and analyzes the page metadata in the memory of the browser to obtain the number of the field, the tag of the field and the component type of the field in each field attribute;

A component rendering unit 610 for rendering a page component of a corresponding field in the page frame according to the component type of each field and the tag of each field;

a data object generating unit 612, configured to generate a data object according to the page metadata, and generate a corresponding attribute of the data object for each field;

A relation binding unit 614, configured to bind the attribute of the data object with the page component rendered in the same field to obtain a binding relation between the attribute of the data object and the page component rendered in each field, where a field value of the page component rendered in the same field is the same as a value of the attribute of the data object;

And a modifying unit 616, configured to modify, if the field value of the rendered page component or the value of the attribute of the data object in the browser is modified, the field value of the corresponding page component or the value of the attribute of the data object according to the binding relationship.

Further, the metadata generating unit 604 of the embodiment of the present disclosure executes the generation of the page metadata according to the interface design document, the database design document, and the page component library, specifically for:

In correspondence with the foregoing, fig. 7 is a schematic structural diagram of a device for modifying a browser page according to one or more embodiments of the present disclosure, where the device includes:

at least one processor; and

A memory communicatively coupled to the at least one processor; wherein,

In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for apparatus, devices, non-volatile computer storage medium embodiments, the description is relatively simple, as it is substantially similar to method embodiments, with reference to the section of the method embodiments being relevant.

The foregoing describes specific embodiments of the present disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

The foregoing is merely one or more embodiments of the present description and is not intended to limit the present description. Various modifications and alterations to one or more embodiments of this description will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, or the like, which is within the spirit and principles of one or more embodiments of the present description, is intended to be included within the scope of the claims of the present description.

Claims

1. A method for modifying a browser page, the method comprising:

If the field value of the page component or the value of the attribute of the data object rendered in the browser is changed, changing the field value of the corresponding page component or the value of the attribute of the data object according to the binding relation;

the generating page metadata according to the interface design document, the database design document and the page component library comprises the following steps:

generating page metadata according to the serial numbers of the same fields, the labels of the same fields and the component types of the same fields;

if the field value of the rendered page component or the value of the attribute of the data object in the browser is changed, changing the field value of the corresponding page component or the value of the attribute of the data object according to the binding relation includes:

If the field value of the first page component rendered in the browser is changed, determining the attribute of the first data object according to the binding relation, changing the value of the attribute of the first data object, monitoring the change of the value of the page component by using an event monitoring function provided by a frame or a library, and updating the attribute value of the corresponding data object according to the binding relation;

if the value of the attribute of the second data object in the browser is changed, determining a rendered second page component according to the binding relation, changing the field value of the second page component, monitoring the change of the attribute of the data object by using an observer mode or event mechanism provided by a framework or a library, and updating the field value of the corresponding page component according to the binding relation.

2. The method of claim 1, wherein rendering the page component of the corresponding field in the page frame according to the component type of each field and the tag of each field comprises:

3. The method of claim 1, wherein the page frame includes a predefined anchor, the method further comprising:

Determining the position of an anchor point of the page frame;

4. The method of claim 1, wherein the data object is a JavaScript object, the attribute name of the JavaScript object remaining consistent with the column name of the database table.

5. A device for modifying a browser page, the device comprising:

a changing unit, configured to change, according to the binding relationship, a field value of a corresponding page component or a value of an attribute of a data object if the field value of the page component or the value of the attribute of the data object rendered in the browser is changed;

The metadata generation unit executes the generation of page metadata according to the interface design document, the database design document and the page component library, and is specifically configured to:

6. A modifying device for a browser page, comprising:

at least one processor; and

A memory communicatively coupled to the at least one processor; wherein,

7. A non-transitory computer storage medium storing computer executable instructions that when executed by a computer enable: