A web page configuration processing method and its device, equipment and storage medium

Abstract

The present application provides a method for processing web page configuration and its device, equipment and storage medium; the method includes: parsing the component for which the configuration interface is to be generated, obtaining the attribute information of the configuration attribute in the component, the attribute information at least including the attribute identification and description information; based on the attribute identification, obtaining the value corresponding to the configuration attribute; generating a configuration file according to the attribute information and the value of the configuration attribute; providing the configuration file to the operation terminal so that the operation terminal converts the configuration file into the corresponding configuration interface. Through the present application, the configuration interface of the web page in the management background can be automatically generated.

Description

Technical Field

[0001] The present application relates to the field of communication technology, and in particular to a method for processing web page configuration and a device, equipment and storage medium thereof. Background Art

[0002] In recent years, the Internet industry has developed very rapidly, especially mobile business. Whether it is applications (Apps) or web pages, they have shown a trend of rapid growth in popularity. Against this background, competition between similar products has gradually become fierce, and the functional differences between different products are becoming less and less likely to become product advantages. Therefore, various manufacturers have gradually paid attention to the content quality of their products, and the importance of precise delivery is self-evident at this time. In order to provide users with favorite content from different angles, efficient, fast, and current hot operations play a core role in this scenario.

[0003] Taking web pages as an example, in order to enable operators to independently complete content operations, developers need to develop a management background based on a user interface (UI) framework with complete components and strong scalability, which increases the workload of developers and thus increases labor costs. Summary of the invention

[0004] The embodiment of the present application provides a method for processing web page configuration and its device, equipment and storage medium, which can automatically generate a configuration interface of a web page in a management background.

[0005] The technical solution of the embodiment of the present application is implemented as follows:

[0006] The present application provides a method for processing a web page configuration, including:

[0007] Parsing the component for which the configuration interface is to be generated, and obtaining attribute information of the configuration attributes in the component, wherein the attribute information at least includes attribute identification and description information;

[0008] Based on the attribute identifier, obtaining a value corresponding to the configuration attribute;

[0009] Generate a configuration file according to the attribute information of the configuration attribute and the value;

[0010] The configuration file is provided to the operation terminal so that the operation terminal converts the configuration file into a corresponding configuration interface.

[0011] The present application provides a method for processing a web page configuration, including:

[0012] Receive the configuration file generated by the development terminal;

[0013] Obtaining a first file type of the configuration file;

[0014] The configuration file is converted into a configuration interface corresponding to the first file type.

[0015] The present application provides a web page configuration processing device, including:

[0016] A parsing module, used to parse the component for which the configuration interface is to be generated, and obtain attribute information of the configuration attributes in the component, wherein the attribute information at least includes attribute identification and description information;

[0017] A first acquisition module, used to acquire a value corresponding to the configuration attribute based on the attribute identifier;

[0018] A first generating module, used to generate a configuration file according to the attribute information of the configuration attribute and the value;

[0019] The file transmission module is used to provide the configuration file to the operation terminal so that the operation terminal converts the configuration file into a corresponding configuration interface.

[0020] The present application provides a web page configuration processing device, including:

[0021] The second acquisition module is used to obtain the configuration file generated by the development terminal;

[0022] A third acquisition module is used to obtain the type of each configuration attribute in the configuration file;

[0023] A first determining module, used to determine a first interface component according to the types of each configuration attribute;

[0024] A first conversion module is configured to convert the configuration file into a corresponding configuration interface based on the first interface component.

[0025] The present application provides a web page configuration processing device, including:

[0026] A memory for storing executable instructions;

[0027] The processor is used to implement the method provided in the embodiment of the present application when executing the executable instructions stored in the memory.

[0028] An embodiment of the present application provides a storage medium storing executable instructions for causing a processor to execute and implement the method provided in the embodiment of the present application.

[0029] The embodiments of the present application have the following beneficial effects:

[0030] After parsing the component for which the configuration file is to be generated and obtaining the basic information of the attributes that need to be configured in the component and the corresponding values ​​of the attributes, the configuration file can be automatically generated according to the attribute information and values ​​of the configuration attributes, and then the configuration file is provided to the operation terminal so that the operation terminal can automatically convert the configuration file into a configuration interface corresponding to its file type according to the configuration file; in this way, the automatic generation of the configuration interface can be realized, thereby eliminating the need for developers to develop additional configuration interfaces, further reducing the development cost of the operation system. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1A It is a schematic diagram of the architecture of an operational system in the relevant technology;

[0032] Figure 1B It is a schematic diagram of the network architecture of the method for processing web page configuration according to an embodiment of the present application;

[0033] Figure 2 is an optional structural diagram of the device provided in the embodiment of the present application;

[0034] Figure 3 This is a schematic diagram of an implementation flow of a method for processing web page configuration provided in an embodiment of the present application;

[0035] Figure 4A A schematic diagram of the implementation process of obtaining attribute information of configuration attributes in an embodiment of the present application;

[0036] Figure 4B A schematic diagram of automatically generating a configuration file from a React component according to an embodiment of the present application;

[0037] Figure 5 This is another implementation flow diagram of the method for processing web page configuration provided in the embodiment of the present application;

[0038] Figure 6 This is another implementation flow diagram of the method for processing web page configuration provided in the embodiment of the present application;

[0039] Figure 7 This is a schematic diagram of the management backend configuration interface of the embodiment of the present application;

[0040] Figure 8 A schematic diagram of a network architecture automatically generated by the configuration interface of an embodiment of the present application;

[0041] Fig. 9 This is a schematic diagram of the implementation process of collecting basic information of configuration attributes through Babel in an embodiment of the present application;

[0042] Fig.10 A schematic diagram of the implementation process of collecting default values ​​of configuration attributes in an embodiment of the present application;

[0043] Fig.11 A schematic diagram of the implementation process of automatically generating a management backend interface for an embodiment of the present application;

[0044] Fig.12 It is an optional structural diagram of the operation terminal provided in the embodiment of the present application. DETAILED DESCRIPTION

[0045] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. The described embodiments should not be regarded as limiting the present application. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application.

[0046] In the following description, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0047] If similar descriptions of "first / second" appear in the application documents, the following instructions are added. In the following description, the terms "first\second\third" involved are merely used to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that "first\second\third" can be interchanged in a specific order or sequence where permitted, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein.

[0048] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0049] Before further describing the embodiments of the present application in detail, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are subject to the following interpretations.

[0050] React components use a method called render() to receive input data and return the content to be displayed.

[0051] JavaScript Object Notation (JSON) Schema is a format specification based on JSON that is used to define the structure of JSON data. JSON Schema can be used to validate and describe the structure of JSON objects.

[0052] JSDoc is a tool that generates application programming interface (API) documentation for JavaScript applications, libraries, and modules based on comment information in JavaScript files.

[0053] Abstract Syntax Tree (AST), or simply Syntax Tree, is an abstract representation of the grammatical structure of source code. AST represents the grammatical structure of a programming language in the form of a tree, and each node in the tree represents a structure in the source code.

[0054] In order to better understand the information processing method provided in the embodiments of the present application, the architecture of the entire operational system in the related technology and the existing shortcomings are first explained.

[0055] Figure 1A It is a schematic diagram of the architecture of the operational system in the relevant technology, such as Figure 1A As shown, the network architecture of the operation system includes: user terminal 101, web page 102 and background service 103, content distribution network (CDN, Content Delivery Network) 104, and management background 105.

[0056] The operation process of the architecture is as follows: First, the developer develops the web page 102 and the background service 103, and then converts the main document of the web page 102 (i.e. Figure 1A The Hyper Text Markup Language (HTML) document in the web page and the background service 103 are deployed on the server, while the static resources of the page (i.e. Figure 1A The JavaScript files and Cascading Style Sheets (CSS) files in the web page are hosted on the CDN server, and the user terminal 101 can access the page through the Uniform Resource Locator (URL).

[0057] Afterwards, the developer extracts the part of the page that needs to be configured according to the operator's requirements, and develops the corresponding management background interface for the operator to use. After the operator configures the data in the management background 105, the server will persist the data through the database, so that when the user visits the page again, since the page contains a real-time request for obtaining the configuration, the background service 103 returns the data configured by the operator to the user terminal 101.

[0058] The above network architecture has the following disadvantages:

[0059] First, developers need to develop an additional management background graphical interface for operations personnel configuration, which is labor-intensive.

[0060] Second, every time a configuration item needs to be modified, developers need to redeploy the management backend code. Some scenarios even require the development of a new configuration interface, which makes collaboration inefficient.

[0061] Third, operators are unable to verify the page effects after modifying the configuration, which can easily lead to misoperation and operational accidents.

[0062] Based on this, the embodiment of the present application provides another method for generating a configuration interface, which can automatically generate a configurable interface by using the combination of JSON Schema and react-JSON Schema-form, thereby eliminating the development costs of developers, and the management background graphical interface can be generated by filling in the configuration file online, thereby overcoming the problem of redeployment required for each update.

[0063] The following describes an exemplary application of the device implementing the embodiment of the present application. The device provided in the embodiment of the present application can be implemented as a server. The following describes an exemplary application of the server when the device is implemented as a server.

[0064] See also Figure 1B , Figure 1B Schematic diagram of the network architecture of the method for processing web page configuration in the embodiment of the present application. Figure 1B As shown, the network architecture includes at least a user terminal 100, a development terminal 400, a server 200 and an operation terminal 300. To support an exemplary application, the user terminal 100, the development terminal 400 and the operation terminal 300 are connected to the server 200 via a network 500, respectively. The network 500 can be a wide area network or a local area network, or a combination of the two, and a wireless link is used to realize data transmission.

[0065] The development terminal 400 can automatically generate components of the configuration file, and after the development is completed, obtain the attribute information and default values ​​of the configuration attributes to automatically generate the configuration file, and send the configuration file to the server 200. The server 200 can actively send the configuration file to the operation terminal 300, or the operation terminal 300 can obtain the configuration file from the server 200 when it needs to generate a configuration interface. After the operation terminal 300 obtains the configuration file, it can convert the configuration file into a corresponding configuration interface according to the conversion tool for the operation personnel to view and modify the configuration.

[0066] After the operator modifies the web page configuration through the configuration interface, the operation terminal 300 synchronously generates a data snapshot of the configuration data and stores the data snapshot in the server 200 for permanent storage. When the user accesses the web page through the user terminal 100, the access request includes a real-time request to obtain the configuration data. At this time, the server 200 returns the data snapshot of the configuration data to the user terminal 100, and updates and outputs the web page content based on the data snapshot to provide users with a browsing experience with higher content quality.

[0067] The device provided in the embodiments of the present application may be implemented in the form of hardware or a combination of hardware and software. Various exemplary implementations of the device provided in the embodiments of the present application are described below.

[0068] See also Figure 2 , Figure 2 This is an optional structural diagram of the development terminal 400 provided in the embodiment of the present application. The development terminal 400 may be a desktop computer, a tablet device, a laptop computer, etc. According to the structure of the development terminal 400, it is foreseeable that the device is implemented as an exemplary structure of a server, so the structure described here should not be regarded as a limitation. For example, some components described below may be omitted, or components not described below may be added to meet the special needs of certain applications.

[0069] Figure 2 The development terminal 400 shown includes: at least one processor 410, a memory 440, at least one network interface 420 and a user interface 430. Each component in the development terminal 400 is coupled together via a bus system 450. It is understood that the bus system 450 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 450 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, the bus system 450 is not shown in FIG. Figure 2 Various buses are labeled as bus system 450 .

[0070] The user interface 430 may include a display, keyboard, mouse, trackball, click wheel, keys, buttons, touch pad, or touch screen, etc.

[0071] The memory 440 may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM). The volatile memory may be a random access memory (RAM). The memory 440 described in the embodiments of the present application is intended to include any suitable type of memory.

[0072] The memory 440 in the embodiment of the present application can store data to support the operation of the development terminal 400. Examples of such data include: any computer program used to operate on the development terminal 400, such as an operating system and an application program. Among them, the operating system includes various system programs, such as a framework layer, a core library layer, a driver layer, etc., which are used to implement various basic services and process hardware-based tasks. The application program can include various application programs.

[0073] As an example of the method provided in the embodiment of the present application being implemented by a combination of software and hardware, the method provided in the embodiment of the present application can be directly embodied as a combination of software modules executed by the processor 410. The software module can be located in a storage medium, and the storage medium is located in the memory 440. The processor 410 reads the executable instructions included in the software module in the memory 440, and completes the method provided in the embodiment of the present application in combination with the necessary hardware (for example, including the processor 410 and other components connected to the bus 450).

[0074] As an example, the processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0075] The method for implementing the embodiment of the present application will be described in conjunction with the aforementioned exemplary application and implementation of the device for implementing the embodiment of the present application.

[0076] See also Figure 3 , Figure 3 This is a schematic diagram of an implementation flow of a method for processing web page configuration provided in an embodiment of the present application, which will be combined with Figure 3 The steps shown are explained.

[0077] Step S101: the development terminal parses the component for which the configuration interface is to be generated, and obtains attribute information of the configuration attributes in the component.

[0078] Here, the development terminal can be a terminal for a developer user to develop components, which can be a desktop computer, a laptop computer, a tablet device, etc. The component for which the configuration interface is to be generated can be a React component. Configuration attributes refer to attributes that need to be configured, for example, the attributes that need to be configured can be a title, a page description, etc.

[0079] When parsing the component for which the configuration interface is to be generated, the source code of the React component for which the configuration interface is to be generated may be parsed to obtain the attribute information of the configuration attributes in the component. The attribute information refers to the basic information of the attribute. In this embodiment, the attribute information at least includes an attribute identifier and description information, and the attribute identifier may be an attribute name.

[0080] Step S102: The development terminal obtains a value corresponding to the configuration attribute based on the attribute identifier.

[0081] Here, after obtaining the attribute name of the attribute to be configured, the development terminal can obtain the value corresponding to the configuration attribute from the attribute default value according to the attribute name. In this embodiment, the value corresponding to the obtained configuration attribute can be the default value of the configuration attribute.

[0082] Step S103: the development terminal generates a configuration file according to the attribute information and the value of the configuration attribute.

[0083] Here, when implementing step S103, the development terminal may generate a configuration file using a tool from the attribute information and the value of the configuration attribute. For example, if the component of the configuration interface to be generated is a React component, then when implementing step S103, the attribute information and the value of the configuration attribute may be generated using a Node js tool. In this case, the configuration file may be a JSON Schema file.

[0084] Step S104: the development terminal provides the configuration file to the operation terminal, so that the operation terminal converts the configuration file into a corresponding configuration interface.

[0085] Here, the operation terminal may refer to a terminal used by an operator to configure or adjust a web page, and the operation terminal may be a desktop computer, a laptop computer, a tablet device, a smart phone, etc.

[0086] When the development terminal provides the configuration file to the operation terminal, it can be implemented in the following two ways:

[0087] In the first method, the development terminal sends the configuration file to the server, and the server sends the configuration file to the operation terminal.

[0088] The second method is that the development terminal sends the configuration file directly to the operation terminal.

[0089] When the first method is adopted, the development terminal and the operation terminal do not need to establish a direct communication connection, as long as a direct communication connection is established between the development terminal and the server and between the operation terminal and the server; when the second method is adopted, a direct communication connection is required between the development terminal and the operation terminal.

[0090] After the operation terminal obtains the configuration file, the configuration file can be automatically converted to the configuration interface corresponding to the file type of the configuration file through the corresponding conversion tool. In this way, the configuration file can be automatically generated and the configuration interface can be automatically converted and generated through the conversion tool, so that the developer does not need to develop an additional management background graphical interface for the operation personnel to configure, thereby reducing the development cost.

[0091] In the web page configuration processing method provided in the embodiment of the present application, the component for which the configuration file is to be generated is first parsed, and after the basic information of the attributes that need to be configured in the component and the corresponding values ​​of the attributes are obtained, the configuration file can be automatically generated according to the attribute information and values ​​of the configuration attributes, and then the configuration file is provided to the operation terminal, so that the operation terminal can automatically convert the configuration file into a configuration interface corresponding to its file type according to the configuration file; in this way, the automatic generation of the configuration interface can be realized, thereby eliminating the need for developers to additionally develop the configuration interface, further reducing the development cost of the operation system.

[0092] In some embodiments, Figure 3 Step S101 shown in FIG. 1 can be implemented by steps 1011 to 1013. Figure 4A This is a schematic diagram of the implementation process of obtaining the attribute information of the configuration attribute in the embodiment of the present application. Figure 4A Each step is explained.

[0093] Step S1011: the development terminal parses the components of the configuration interface to be generated to obtain an object set having a preset data structure.

[0094] Here, when implementing step S1011, the development terminal may parse the React component source code using a parsing tool to obtain an abstract syntax tree structure object set. The parsing tool may be @babel / parser (decoder), which performs syntax analysis on the React component source code to generate a token sequence with syntax meaning (capable of distinguishing keywords, values, punctuation marks, etc.), and then generates an AST with syntax meaning through syntax analysis, thereby distinguishing statement blocks, comments, variable declarations, function parameters, etc.

[0095] Each node in the AST can be considered an object.

[0096] Step S1012: the development terminal traverses each object in the object set of the preset data structure, and determines the class attribute of the component based on the identifier of each object.

[0097] Here, when implementing step S1012, the development terminal may use a traversal tool (@babel / traverse) to traverse each object in the AST, determine the class property of the component through the identifier of each object, and also determine the node whose object identifier is Class Property in the AST.

[0098] Step S1013: the development terminal obtains at least the attribute identifier and description information of the configuration attribute in the component according to the class attribute of the component.

[0099] Here, when implementing step S1013, it is necessary to first obtain the attribute type information of the class attribute; and then obtain the attribute identifier and description information of the configuration attribute in the component from the attribute type information.

[0100] Figure 4B A schematic diagram of automatically generating a configuration file from a React component in an embodiment of the present application is shown in FIG. Figure 4B In the React component shown in 401, propTypes 4011, defaultProps 4012 and render() 4013 all have the class attributes. At this time, it is necessary to obtain the attribute type information having the class attributes, that is, obtain the attribute type information in the rectangular box 4011, and then obtain the attribute identifier 4111 and description information 4112 of the configuration attribute from the attribute type information in 4011, wherein the attribute identifiers in the attribute type information 4011 are title and description.

[0101] In some embodiments, the values ​​of configuration attributes are collected. Since the values ​​of attributes may be the result of calculations, the collection cannot be performed after static analysis using an abstract syntax tree. Instead, the components need to be run to collect the values ​​of configuration attributes. In actual application, the above step S102 can be implemented by the following steps:

[0102] Step S1021, using a preset script to reference the component to obtain the component class when running the component.

[0103] Here, step S1021 may be implemented by using a Nodejs script to reference the React component through an Import() function, so that the component class of the React component can be obtained by running the React component.

[0104] Step S1022, obtaining static properties of the component class.

[0105] Here, in this embodiment, the value of the configuration attribute obtained is the default value of the configuration attribute. Since the default value of the configuration attribute is a static attribute, the default value is obtained by accessing the static attribute of the component class in step S1022.

[0106] Step S1023: Based on the attribute identifier, obtain the value corresponding to the attribute to be configured from the static attributes of the component.

[0107] Here, after obtaining the static properties of the component class by accessing the static properties of the component class, the default value can be searched through the property identifier without creating an instance.

[0108] like Figure 4B As shown, it can be seen from 4012 shown in React component 401 that the default values ​​of title and description are both empty.

[0109] When developing React components, developers only need to describe the name, type, and whether the configuration is required for the properties that need to be configured in the component. If the configuration property requires a default value at this time, it can be supplemented with defaultProps. After the component is developed, the configuration file can be automatically generated according to the property information and value of the configuration property, and then the configuration interface can be automatically generated by the operation terminal, without the need for developers to develop the configuration interface required by the operation personnel, thereby reducing development costs and improving interface generation efficiency.

[0110] In some embodiments, see Figure 5 , Figure 5 is another implementation flow diagram of the method for processing web page configuration provided in an embodiment of the present application, Figure 5 S301 to S304 in Figure 3 S101 to S104 in; based on Figure 3 After step 104, the following steps may also be performed:

[0111] Step S105: the operation terminal obtains the configuration file generated by the development terminal.

[0112] Here, corresponding to step S104, step S105 can obtain the configuration file generated by the development terminal in the following two ways:

[0113] The first method: The operation terminal obtains the configuration file generated by the development terminal from the server;

[0114] The second method: The operation terminal directly receives the configuration file generated by the development terminal.

[0115] exist Figure 5In the example, both step S104 and step S105 are implemented in the first way, that is, step S104 is that the development terminal sends the configuration file to the server, and step S105 is that the operation terminal obtains the configuration file sent by the server.

[0116] Step S106: The operation terminal obtains the type of each configuration attribute in the configuration file.

[0117] Here, the type of the configuration attribute can be determined by the "Type" field of the configuration attribute in the configuration file.

[0118] Since we know that the attributes to be configured are title and description, we can use Figure 4B It can be seen from 4021 and 4022 in the automatically generated configuration file 402 that the types corresponding to title and description are strings.

[0119] Step S107: The operation terminal determines the first interface component according to the types of the configuration attributes.

[0120] Here, when step S107 is implemented, component mapping is performed according to the type of each configuration attribute, so as to select the corresponding UI component.

[0121] Step S108: The operation terminal converts the configuration file into a corresponding configuration interface based on the first interface component.

[0122] Here, when implementing step S108, the operation terminal may convert the configuration file into a corresponding configuration interface using a preset conversion tool based on the determined first interface component. Furthermore, the conversion tool may be a react-JSON Schema-form tool.

[0123] Through steps S105 to S108, after obtaining the configuration file, the operation terminal can further determine the interface components when converting to the configuration interface, and then automatically convert the configuration file into the corresponding configuration interface. In this way, the operation personnel can independently complete the configuration of the page content when the page has been published, and the configuration can take effect immediately after completion. It is efficient and fast and does not require the intervention of developers.

[0124] In some embodiments, see Figure 6 , Figure 6 is another implementation flow diagram of the method for processing web page configuration provided in the embodiment of the present application. Figure 6 S301 to S304 in Figure 3 S101 to S104 in; based on Figure 5 After step S105, the following steps may also be performed:

[0125] Step S106': the operation terminal receives a first operation for editing the configuration file.

[0126] Here, after the operation terminal receives the configuration file, the operation personnel can edit the configuration file according to the operation requirements. At this time, the editing may be part of the configuration file or the entire content of the configuration file, which is not limited in this embodiment.

[0127] Step S107': the operation terminal obtains an updated configuration file obtained based on the first operation, and determines a second interface component according to the updated configuration file.

[0128] Here, after obtaining the updated configuration file, the operation terminal obtains the type of each configuration attribute in the updated configuration file, and then determines the second interface component according to the type of each configuration attribute in the updated configuration file.

[0129] Step S108': the operation terminal converts the updated configuration file into a corresponding configuration interface based on the second interface component.

[0130] Here, during implementation of step S108', the operation terminal may convert the configuration file into a corresponding configuration interface using a preset conversion tool based on the determined first interface component. Furthermore, the conversion tool may be a react-JSON Schema-form tool.

[0131] Step S109: the operation terminal receives a second operation of configuring attributes through the configuration interface.

[0132] Here, after the operation terminal outputs the automatically generated configuration interface, the operation personnel may configure the configuration attributes in the configuration interface by performing a second operation, and the operation terminal receives the second operation.

[0133] Step S110: The operation terminal obtains an updated configuration interface based on the second operation.

[0134] Here, the operation terminal will update the corresponding configuration attributes based on the second operation to obtain an updated configuration interface.

[0135] Step S111: the operation terminal generates a data snapshot based on the updated configuration interface.

[0136] Here, in order to present the latest page content to users when they access the page, and to enable operators to conveniently verify the page effect, a data snapshot will be generated after the operator updates the configuration interface.

[0137] Step S112: The operation terminal stores the data snapshot to the server, so that the web page updates the web page content according to the data snapshot.

[0138] Here, the operation terminal stores the data snapshot to the server for persistent storage. When the user visits the web page he visited before, he can pull the latest configuration data through real-time request, thereby completing the real-time update of the operation data.

[0139] It should be noted that steps S109 to S112 may also be performed in Figure 5 The step S108 shown is then executed and is not limited in this embodiment.

[0140] In some embodiments, after step S112, some other steps (not shown in the figure) may be further performed:

[0141] Step S113: the operation terminal loads the web page corresponding to the data snapshot.

[0142] Step S114: the operation terminal outputs a web page with updated content based on the data snapshot to verify the page effect of the configuration data.

[0143] Here, after the operator configures some properties through the configuration interface in the operation terminal, the correctness of the configuration data and the page effect can be verified through the synchronously generated data snapshot. After the data snapshot is generated, it can also be stored locally in the operation terminal, or when the data snapshot is only stored on the server, the operation terminal obtains the data snapshot from the server and loads the corresponding web page, thereby verifying the correctness of the configuration data and the page effect through the output web page with updated content.

[0144] Next, an exemplary application of the embodiment of the present application in an actual application scenario will be described. In this embodiment, a JSON Schema file is generated through a React component, and then a configuration interface is automatically generated through the JSON Schema-a file.

[0145] In order to realize the automatic generation of configuration interface, when developing React components, developers first describe the properties that need to be configured in the React component through a combination of JSDoc and propTypes, including the name, type, and whether they must be configured. If the configuration property requires a default value, it can be supplemented with defaultProps. After the React component is developed, the relevant description of the configuration property is converted into a JSON Schema file through the Nodejs tool.

[0146] After obtaining the JSON Schema description file that needs to be configured in the React component, the corresponding management background graphical user interface (GUI) interface can be automatically generated through the react-jsonschema-form tool. Figure 7 This is a schematic diagram of the management backend configuration interface of the embodiment of the present application, such as Figure 7 As shown, the GUI interface shown in 702 can be generated through the JSON Schema file 701. The operator can configure the attributes through the GUI interface 702. After the operator configures the attributes, the GUI interface will simultaneously generate a data snapshot 703. After the page obtains the data snapshot, the page content will be updated. The operator can verify the correctness of the configuration data and the page effect through this means.

[0147] After the operator completes the configuration of the required properties, the operation management background will save the data snapshot to the server for persistent storage. At this time, when the user revisits the previously visited page, the latest configuration data can be pulled through real-time requests, thereby completing the real-time update of the operation data.

[0148] Figure 8 This is a schematic diagram of the network architecture automatically generated by the configuration interface of the embodiment of the present application, such as Figure 8 As shown, the network architecture at least includes: terminal 801, CDN 802, management backend 803, backend service 804 and web page 805 in the front-end development terminal, wherein the HTML file in the web page 805 is stored in the backend server 804, and the Javascript file and the CSS file can be considered as static resources and can be stored in CDN 802. The front-end development terminal can automatically generate a JSON Schema file through the React component, and then send the JSON Schema file to the management backend 803. After obtaining the JSON Schema file, the management backend 803 can generate a property configuration interface for the operator to configure the properties of the web page through the property configuration interface. A communication connection is established between the management backend 803 and the backend service 804 to transmit the data snapshot generated by the operator after configuring the properties to the backend service 804.

[0149] The following combination Figure 8 The network architecture shown in the figure illustrates the implementation process of automatically generating the JSON Schema corresponding to the React component through the tool for the front-end development terminal, and further automatically generating the corresponding management background GUI interface through the JSON Schema.

[0150] First, the implementation process of automatically generating the JSON Schema file corresponding to the React component configuration is explained. The automatically generated JSON Schema file consists of two parts. The first part is the basic information of the configuration attributes, such as attribute name, description, etc. The second part is the default value of the configuration attribute.

[0151] Fig. 9 This is a schematic diagram of the implementation process of collecting basic information of configuration attributes through Babel in the embodiment of the present application, such as Fig. 9 As shown, first, the source code of the React component 901 is parsed by @babel / parser, and the parsing product is a Javascript object with a certain structure, that is, an abstract syntax tree 902. The specific structure of the abstract syntax tree is shown in 903. After obtaining the abstract syntax tree, the babel-traverse tool is used to traverse the nodes and determine that the collected type is a class property (ClassProperty), which is actually the property of the React component class. Then, the ClassProperty named propTypes is analyzed to collect the basic information of the configuration properties 904.

[0152] After collecting the basic information of the configuration attributes, it is necessary to collect the default values ​​of the configuration attributes. Since the attribute value may be a calculation result, the abstract syntax tree cannot be used for static analysis during the implementation process. Fig.10 The following is a schematic diagram of the implementation process of collecting the default values ​​of the configuration attributes in the embodiment of the present application. Fig.10 As shown, a Nodejs script 1001 is used to reference the React component 1002, and the React component class can be obtained at runtime. Since defaultProps is a static property, there is no need to create an instance. The default value 1004 corresponding to the property name can be found by accessing the class static property 1003.

[0153] Secondly, the implementation process of automatically generating the management background interface is explained. Fig.11 The following is a schematic diagram of the implementation process of automatically generating a management backend interface for the present application embodiment, such as Fig.11 As shown, you only need to input the JSON Schema file 1102 generated by the page (component) to be configured in the management background 1101, and the management background containing react-JSON Schema-form 1103 will perform component mapping according to the type of configuration attributes in the JSON schema file, thereby selecting the corresponding UI component to generate a GUI interface 1104 that can be used by operators.

[0154] It should be noted that the use of react-JSON Schema-form as a tool for automatically generating a GUI interface in the embodiment of the present application is only for exemplary purposes. In fact, other UI frameworks based on JSON Schema can also be used to automatically generate an interface. Therefore, the tool for generating a GUI interface is not specifically limited in this embodiment, and the part of the GUI interface that is automatically generated in this embodiment can also be replaced by various other novel UI frameworks.

[0155] The embodiment of the present application provides a solution for automatically generating an operation platform configuration interface, which enables the operation personnel to independently complete the configuration of the page content when the page has been published, and the configuration can take effect immediately after completion, which is efficient, fast and does not require the intervention of developers. In addition, developers do not need to develop additional configuration interfaces. When the content to be configured changes, the operation can also obtain a new GUI configuration interface by filling in a new JSON Schema file, which greatly saves the development cost of developers and optimizes and reduces the development cost of the operation system.

[0156] The following describes an exemplary structure of a software module. In some embodiments, Figure 2 As shown, the web page configuration processing device 80 in the memory 440 may include:

[0157] The parsing module 81 is used to parse the component for which the configuration interface is to be generated, and obtain the attribute information of the configuration attributes in the component, wherein the attribute information at least includes the attribute identification and description information;

[0158] A first acquisition module 82, configured to acquire a value corresponding to the configuration attribute based on the attribute identifier;

[0159] A first generating module 83, configured to generate a configuration file according to the attribute information of the configuration attribute and the value;

[0160] The file transmission module 84 is used to provide the configuration file to the operation terminal so that the operation terminal converts the configuration file into a corresponding configuration interface.

[0161] In the above solution, the parsing module 81 is also used for:

[0162] Parse the components of the configuration interface to be generated to obtain an object set with a preset data structure;

[0163] Traversing each object in the object set of the preset data structure, and determining the class attribute of the component based on the identifier of each object;

[0164] According to the class attributes of the component, at least attribute identification and description information of the configuration attributes in the component are obtained.

[0165] In the above solution, the parsing module 81 is also used for:

[0166] Obtaining attribute type information of an attribute of the class;

[0167] From the attribute type information, the attribute identifier and description information of the configuration attribute in the component are obtained.

[0168] In the above solution, the first acquisition module 82 is further used for:

[0169] Using a preset script to reference the component, so as to obtain the component class when running the component;

[0170] Get the static properties of the component class;

[0171] Based on the attribute identifier, a value corresponding to the attribute to be configured is obtained from the static attributes of the component.

[0172] As an example of hardware implementation of the method provided in the embodiment of the present application, the method provided in the embodiment of the present application can be directly executed by a processor 410 in the form of a hardware decoding processor, for example, one or more application-specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field-programmable gate arrays (FPGAs), or other electronic components to implement the method provided in the embodiment of the present application.

[0173] See also Fig.12 , Fig.12 This is an optional structural diagram of the operation terminal 300 provided in the embodiment of the present application. The operation terminal 300 may be a desktop computer, a tablet device, a laptop computer, a mobile phone, etc. According to the structure of the operation terminal 300, it is foreseeable that the device is implemented as an exemplary structure of a server, so the structure described here should not be regarded as a limitation. For example, some components described below may be omitted, or components not described below may be added to meet the special needs of certain applications.

[0174] Fig.12The operation terminal 300 shown includes: at least one processor 310, a memory 340, at least one network interface 320 and a user interface 330. Each component in the operation terminal 300 is coupled together through a bus system 350. It can be understood that the bus system 350 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 350 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, the bus system 350 is not shown in FIG. Fig.12 Various buses are labeled as bus system 350 .

[0175] The user interface 330 may include a display, keyboard, mouse, trackball, click wheel, keys, buttons, touch pad, or touch screen.

[0176] The memory 340 may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM). The volatile memory may be a random access memory (RAM). The memory 340 described in the embodiment of the present application is intended to include any suitable type of memory.

[0177] As an example of the method provided in the embodiment of the present application being implemented by a combination of software and hardware, the method provided in the embodiment of the present application can be directly embodied as a combination of software modules executed by the processor 310. The software module can be located in a storage medium, and the storage medium is located in the memory 340. The processor 310 reads the executable instructions included in the software module in the memory 340, and completes the method provided in the embodiment of the present application in combination with the necessary hardware (for example, including the processor 310 and other components connected to the bus 350).

[0178] As an example, the processor 310 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0179] The following describes an exemplary structure of a software module. In some embodiments, Fig.12 As shown, the web page configuration processing device 90 in the memory 340 may include:

[0180] The second acquisition module 91 is used to acquire the configuration file generated by the development terminal;

[0181] A third acquisition module 92 is used to acquire the type of each configuration attribute in the configuration file;

[0182] A first determination module 93, configured to determine a first interface component according to the types of the configuration attributes;

[0183] The first conversion module 94 is configured to convert the configuration file into a corresponding configuration interface based on the first interface component.

[0184] In the above scheme, the device also includes:

[0185] A first receiving module, configured to receive a first operation for editing the configuration file;

[0186] a fourth acquisition module, configured to acquire an updated configuration file obtained based on the first operation, and acquire a type of each configuration attribute in the updated configuration file;

[0187] A second determination module, used to determine the second interface component according to the type of each configuration attribute in the updated configuration file;

[0188] A second conversion module is configured to convert the updated configuration file into a corresponding configuration interface based on the second interface component.

[0189] In the above scheme, the device also includes:

[0190] A second receiving module, used to receive a second operation of configuring a property through the configuration interface;

[0191] A fifth acquisition module, used to acquire an updated configuration interface obtained based on the second operation;

[0192] A second generating module, configured to generate a data snapshot based on the updated configuration interface;

[0193] The storage module is used to store the data snapshot to the server so that the web page can update the web page content according to the data snapshot.

[0194] In the above scheme, the device also includes:

[0195] A loading module, used to load a web page corresponding to the data snapshot;

[0196] The output module is used to output a web page with updated content based on the data snapshot to verify the page effect of the configuration data.

[0197] The embodiment of the present application provides a storage medium storing executable instructions, wherein the executable instructions are stored. When the executable instructions are executed by a processor, the processor will execute the method provided by the embodiment of the present application, for example, Figure 3 , Figure 4A , Figure 5 and Figure 6 The method shown.

[0198] In some embodiments, the storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or various devices including one or any combination of the above memories.

[0199] In some embodiments, executable instructions may be in the form of a program, software, software module, script or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.

[0200] As an example, executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file storing other programs or data, such as in one or more scripts in a HyperText Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files storing one or more modules, subroutines, or code portions).

[0201] By way of example, executable instructions may be deployed to be executed on one computing device, or on multiple computing devices located at one site, or on multiple computing devices distributed across multiple sites and interconnected by a communication network.

[0202] To sum up, through the embodiments of the present application, the configuration file of the management background graphical interface can be automatically generated, and the management background graphical interface can be further automatically generated without the need for additional development by developers, thereby reducing development costs; and the graphical interface of the operation management background can be generated by filling in the configuration file online, overcoming the problem of requiring redeployment for each update; the operation personnel can immediately view the page application effect after modifying the configuration in the management background, thereby assisting the operation personnel to complete the configuration modification quickly, accurately and efficiently.

[0203] The above is only an embodiment of the present application and is not intended to limit the protection scope of the present application. Any modifications, equivalent substitutions and improvements made within the spirit and scope of the present application are included in the protection scope of the present application.

Claims

1. A method for processing web page configuration, characterized in that: The method comprises: Parsing the component for which the configuration interface is to be generated, and obtaining attribute information of the configuration attributes in the component, wherein the attribute information at least includes attribute identification and description information; Based on the attribute identifier, obtaining a value corresponding to the configuration attribute; Generate a configuration file according to the attribute information of the configuration attribute and the value; The configuration file is provided to the operation terminal so that the operation terminal automatically converts the configuration file to a configuration interface corresponding to the file type of the configuration file through the following steps through a corresponding conversion tool: obtaining the configuration file generated by the development terminal through the operation terminal; obtaining the type of each configuration attribute in the configuration file; determining a first interface component according to the type of each configuration attribute; and converting the configuration file into a corresponding configuration interface based on the first interface component; Receiving, through the operation terminal, a first operation for editing the configuration file; the first operation is an operation for editing the entire content of the configuration file; obtaining an updated configuration file obtained based on the first operation, and obtaining the type of each configuration attribute in the updated configuration file; determining a second interface component according to the type of each configuration attribute in the updated configuration file; converting the updated configuration file into a corresponding configuration interface based on the second interface component; A second operation for configuring properties through the configuration interface is received through the operation terminal; an updated configuration interface obtained based on the second operation is obtained; a data snapshot is generated based on the updated configuration interface; the data snapshot is stored in a server so that the web page updates the web page content according to the data snapshot; a web page corresponding to the data snapshot is loaded through the operation terminal; and a web page with updated content based on the data snapshot is output to verify the page effect of the configuration data.

2. The method according to claim 1, characterized in that The parsing of the component for which the configuration interface is to be generated, and obtaining the attribute information of the configuration attributes in the component, includes: Parse the components of the configuration interface to be generated to obtain an object set with a preset data structure; Traversing each object in the object set of the preset data structure, and determining the class attribute of the component based on the identifier of each object; According to the class attributes of the component, at least attribute identification and description information of the configuration attributes in the component are obtained.

3. The method according to claim 2, characterized in that The step of obtaining at least attribute identification and description information of configuration attributes in the component according to the class attributes of the component includes: Obtaining attribute type information of an attribute of the class; From the attribute type information, the attribute identifier and description information of the configuration attribute in the component are obtained.

4. The method according to claim 1, characterized in that The acquiring, based on the attribute identifier, a value corresponding to the configuration attribute includes: Using a preset script to reference the component, so as to obtain the component class when running the component; Get the static properties of the component class; Based on the attribute identifier, a value corresponding to the attribute to be configured is obtained from the static attributes of the component.

5. A web page configuration processing device, characterized in that: include: A parsing module, used to parse the component for which the configuration interface is to be generated, and obtain attribute information of the configuration attributes in the component, wherein the attribute information at least includes attribute identification and description information; A first acquisition module, used to acquire a value corresponding to the configuration attribute based on the attribute identifier; A first generating module, used to generate a configuration file according to the attribute information of the configuration attribute and the value; The file transfer module is used to provide the configuration file to the operation terminal so that the operation terminal automatically converts the configuration file to a configuration interface corresponding to the file type of the configuration file through the following steps through a corresponding conversion tool: obtaining the configuration file generated by the development terminal through the operation terminal; obtaining the type of each configuration attribute in the configuration file; and determining the first interface component according to the type of each configuration attribute; Converting the configuration file into a corresponding configuration interface based on the first interface component; A first receiving module is used to receive, through the operation terminal, a first operation for editing the configuration file; the first operation is an operation for editing the entire content of the configuration file; a fourth acquisition module, configured to acquire an updated configuration file obtained based on the first operation, and acquire a type of each configuration attribute in the updated configuration file; A second determination module, configured to determine a second interface component according to the type of each configuration attribute in the updated configuration file; A second conversion module, configured to convert the updated configuration file into a corresponding configuration interface based on the second interface component; A second receiving module, configured to receive, through the operation terminal, a second operation of configuring a property through the configuration interface; A fifth acquisition module, used to acquire an updated configuration interface obtained based on the second operation; A second generating module, configured to generate a data snapshot based on the updated configuration interface; A storage module, used for storing the data snapshot to a server, so that the web page updates the web page content according to the data snapshot; A loading module, used to load a web page corresponding to the data snapshot through the operation terminal; The output module is used to output a web page with updated content based on the data snapshot to verify the page effect of the configuration data.

6. A storage medium, characterized in that: Executable instructions are stored, and when the executable instructions are executed by a processor, the processor will be caused to execute the web page configuration processing method described in any one of claims 1 to 4.

Images