List component generation method and device and related product

Abstract

The invention discloses a list component generation method and device and a related product. Analyzing the component code template to obtain a component name configuration item, a component type configuration item and a component setting configuration item in a configuration item code sub-template in the component code template; analyzing the configuration item parameter set to obtain a target component name, a target component type and target component setting in the configuration item parameter set; generating a component code file according to the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type and the target component setting; and according to the component code file, generating a target component in the target list. Therefore, the target component in the target list can be generated according to the configuration item parameter set and the component code template, so that the generation of the list component in different scenes can be met, and the availability of the generated list component can be improved.

Description

Technical Field

[0001] This application relates to the field of component generation technology, and in particular to a method, apparatus and related products for generating list components. Background Technology

[0002] List components are the foundation of lists in front-end web pages. In related technologies, list component generation is achieved by abstracting code into common components. However, since different list components need to be generated, this method may result in low usability of the generated list components. Therefore, improving the usability of generated list components has become a pressing technical problem to be solved in this field. Summary of the Invention

[0003] This application provides a method, apparatus, and related products for generating list components, aiming to improve the usability of generating list components.

[0004] The first aspect of this application provides a method for generating a list component, including:

[0005] Obtain the component code template and the configuration parameter set of the target object input, wherein the component code template and the configuration parameter set are used to support the generation of the list component;

[0006] The component code template is parsed to obtain the component name configuration item, component type configuration item, and component setting configuration item from the configuration item code sub-template in the component code template;

[0007] The configuration item parameter set is parsed to obtain the target component name, target component type, and target component settings.

[0008] A component code file is generated based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings;

[0009] Based on the component code file, generate the target components in the target list.

[0010] A second aspect of this application provides an apparatus for generating list components, comprising:

[0011] The template parameter set acquisition unit is used to acquire the component code template and the configuration item parameter set of the target object input, wherein the component code template and the configuration item parameter set are used to support the generation of list components;

[0012] The template parsing and processing unit is used to parse the component code template to obtain the component name configuration item, component type configuration item, and component setting configuration item in the configuration item code sub-template of the component code template;

[0013] The parameter set parsing and processing unit is used to parse and process the configuration item parameter set to obtain the target component name, target component type and target component settings in the configuration item parameter set;

[0014] The code file generation unit is used to generate a component code file based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings;

[0015] The target component generation unit is used to generate target components in the target list based on the component code file.

[0016] A third aspect of this application provides a computer device, the device comprising a processor and a memory:

[0017] The memory is used to store computer programs and to transfer the computer programs to the processor;

[0018] The processor is configured to execute the steps of the method for generating the list components provided in the first aspect according to the instructions in the computer program.

[0019] A fourth aspect of this application provides a computer-readable storage medium for storing a computer program that, when executed by a computer device, implements the steps of the method for generating a list component provided in the first aspect.

[0020] The fifth aspect of this application provides a computer program product, including a computer program that, when executed by a computer device, implements the steps of the method for generating the list component provided in the first aspect.

[0021] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:

[0022] The technical solution of this application first obtains the component code template and the configuration item parameter set input by the target object; then, it parses the component code template to obtain the component name configuration item, component type configuration item, and component setting configuration item from the configuration item code sub-template in the component code template, and parses the configuration item parameter set to obtain the target component name, target component type, and target component settings from the configuration item parameter set; finally, it generates a component code file based on the component name configuration item, component type configuration item, component setting configuration item, target component name, target component type, and target component settings; and it generates the target components in the target list based on the component code file.

[0023] As can be seen, the technical solution of this application can use the configuration parameter set input by the target object to fill in the parameters of the component configuration items in the component code template, thereby generating a component code file. Based on the generated component code file, the target component in the target list can be generated. Thus, this application can both satisfy the generation of list components for different scenarios based on the component code template and the configuration parameter set input by the target object, and improve the usability of the generated list components. Attached Figure Description

[0024] Figure 1 A scenario architecture diagram of a method for generating a list component provided in an embodiment of this application;

[0025] Figure 2 A flowchart illustrating a method for generating a list component as provided in an embodiment of this application;

[0026] Figure 3 A flowchart illustrating the generation of component code files in a method for generating a list component provided in this application embodiment;

[0027] Figure 4 A schematic diagram of the target component in a method for generating a list component provided in an embodiment of this application;

[0028] Figure 5 A schematic diagram of the target component in another method for generating a list component provided in an embodiment of this application;

[0029] Figure 6 A schematic diagram of the target component in another method for generating a list component provided in an embodiment of this application;

[0030] Figure 7 A flowchart illustrating the generation of a target component in a list component generation method provided in this application embodiment;

[0031] Figure 8 A schematic diagram of a list component generation device provided in an embodiment of this application;

[0032] Figure 9 This is a schematic diagram of the server structure in an embodiment of this application;

[0033] Figure 10 This is a schematic diagram of the structure of a terminal device in an embodiment of this application. Detailed Implementation

[0034] The embodiments of this application will now be described with reference to the accompanying drawings.

[0035] First, we will explain several terms that may be involved in the embodiments of this application below.

[0036] npm package: Node Package Manager package, which is the package management tool for Node.js.

[0037] Node.js: It is an open-source, cross-platform JavaScript runtime environment.

[0038] List components are the foundation of lists in front-end web pages. In related technologies, list component generation is achieved by abstracting code into common components. This involves extracting common code logic and abstracting it into common components using passed attributes, allowing list components to be generated based on these common components. However, to meet the generation needs of list components in different scenarios, these solutions often abstract common components by introducing numerous passed attributes. This method of abstracting code into common components may result in low usability of the generated list components due to the large number of passed attributes. Therefore, improving the usability of generated list components has become a pressing technical problem in the field.

[0039] In related technologies, list components are generated by abstracting the code into an npm package. This means that installing the npm package in different scenarios will generate list components for different scenarios. However, since the version of the npm package needs to be changed with the iteration of the list front-end code, using this method of abstracting the code into an npm package to generate list components may increase the management cost of the npm package, thus affecting the efficiency of list component generation.

[0040] In view of the above problems, this application provides a method, apparatus, and related products for generating list components, aiming to improve the usability of list component generation. The technical solution provided in this application first obtains a component code template and a set of configuration item parameters for the target object input. Then, the component code template can be parsed to obtain the component name configuration item, component type configuration item, and component setting configuration item from the configuration item code sub-template within the component code template. Similarly, the configuration item parameter set can be parsed to obtain the target component name, target component type, and target component settings from the configuration item parameter set. Finally, a component code file can be generated based on the component name configuration item, component type configuration item, component setting configuration item, target component name, target component type, and target component settings. Furthermore, the target component in the target list can be generated based on the component code file.

[0041] As can be seen, the technical solution of this application can use the configuration parameter set input by the target object to fill in the parameters of the component configuration items in the component code template, thereby generating a component code file. Based on the generated component code file, the target component in the target list can be generated. Thus, this application can satisfy the generation of list components for different scenarios based on the component code template and the configuration parameter set input by the target object, improve the usability of the generated list components, and avoid the problems of increased npm package management costs and reduced list component generation efficiency caused by abstracting the code into an npm package.

[0042] The execution subject of the list component generation method provided in this application embodiment can be a terminal device. For example, the component code template and the configuration item parameter set input by the target object can be obtained on the terminal device. As an example, the terminal device may include, but is not limited to, mobile phones, desktop computers, tablet computers, laptops, handheld computers, smart voice interaction devices, smart home appliances, vehicle terminals, aircraft, etc. The execution subject of the list component generation method provided in this application embodiment can also be a server, that is, the component code template and the configuration item parameter set input by the target object can be obtained on the server. In addition, the list component generation method provided in this application embodiment can also be executed collaboratively by the terminal device and the server. The terminal and the server can be directly or indirectly connected through wired or wireless communication, which is not limited here. Therefore, the implementation subject of the technical solution of this application is not limited in this application embodiment.

[0043] Figure 1An exemplary scenario architecture diagram illustrating a method for generating list components is provided. The diagram includes a server and various types of terminal devices. For example, a terminal device can obtain a component code template and a set of configuration parameters for the target object. The server then generates the component code file based on the component code template and the set of configuration parameters, thereby generating the target component. Figure 1 The server shown can be a standalone physical server, a server cluster consisting of multiple physical servers, or a distributed system. Additionally, the server can also be a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms.

[0044] See Figure 2 This figure is a flowchart of a method for generating a list component according to an embodiment of this application. Figure 2 The method for generating the list component shown includes the following steps:

[0045] S201: Obtain the component code template and the set of configuration parameters for the target object input.

[0046] In this application, the component code template is a pre-built code template that can support the generation of a basic list component. This basic list component can be adapted to different scenarios. The set of configuration parameters input by the target object can be understood as the set of configuration parameters entered by the developer in the front-end interface. The component code template and this set of configuration parameters are used to support the generation of the list component.

[0047] Furthermore, for the generation of list components in each scenario, it is necessary to obtain the configuration parameter set input by the target object. This allows for the generation of subsequent target components based on the component code template and the configuration parameter set. In other words, each generation of a list component requires obtaining the configuration parameter set input by the target object. This ensures that the generated list components are adaptable to different scenarios and meet the needs of developers, thereby reducing development costs.

[0048] It should be noted that before performing the operations of obtaining the component code template and the set of configuration item parameters input by the target object, this application can also obtain a set of configuration item questions. This set of configuration item questions is a pre-set set of questions. Based on the target object's response to this set of configuration item questions, the development requirements of the developers can be known, thereby generating a list component that meets the development requirements.

[0049] Specifically, this set of configuration questions includes a first configuration question regarding the component path, a second configuration question regarding the component name, a third configuration question regarding the component type, and a fourth configuration question regarding component settings. The component path can be understood as the path where the target component to be generated will be located, facilitating subsequent component retrieval; the component name can be understood as the name of the target component to be generated; the component type can be understood as the selector type in the target component to be generated, which can be a triangle or a circle, without specific limitations on the selector type; and the component settings can be understood as the component parameter settings in the target component to be generated. The fourth configuration question regarding component settings can be specifically embodied in "whether to set component parameters".

[0050] It should also be noted that in this application, the configuration item question set can be displayed using an interactive command-line tool, allowing the target object to answer questions based on the displayed configuration item question set. The interactive command-line tool can be Inquirer.js, and no specific limitation is made here. In one feasible implementation, the configuration item questions in the configuration item question set can be specifically represented in code as follows:

[0051]

[0052] It should be noted that the code for the configuration item question set shown in this application is only a partial example. The 'Please enter the component path:' after the message in the code can also be changed, for example, to 'Please enter the component name:', or to 'Please enter the component type:', or to 'Whether to set component parameters:'. No restrictions are placed on the changes to the code here.

[0053] Furthermore, the target object can respond to the first, second, third, and fourth configuration item questions by inputting information on the interface. Specifically, the target object can enter `src / xxxx` after `'Please enter component path:'` in the code above, which will then be used as the target component path for the first configuration item question. Similarly, the target object can enter `aaa` after `'Please enter component name:'`, which will then be used as the target component name for the second configuration item question. The target object can also enter a triangle type after `'Please enter component type:'`, which will then be used as the target component type for the third configuration item question. Finally, the target object can enter "Yes" or "No" after `'Set component parameters:'`, which will then be used as the target component setting for the fourth configuration item question.

[0054] Understandably, if the target component for the fourth configuration item issue is set to "yes", then the target component generated in the subsequent process will have a configuration item that allows setting component parameters; if the target component for the fourth configuration item issue is set to "no", then the target component generated in the subsequent process will not have a configuration item that allows setting component parameters.

[0055] Finally, the target component path, target component name, target component type, and target component settings input by the target object can be used as the configuration parameter set input by the target object. It should be noted that in this application, the configuration parameter set input by the target object can be obtained through a command-line interactive tool to facilitate the subsequent filling in of the component code template. Thus, before generating the target components in the target list in this application, a pre-set set of configuration question questions needs to be answered, thereby improving development efficiency and the usability of the subsequently generated list components.

[0056] S202: Parse the component code template to obtain the component name configuration item, component type configuration item, and component setting configuration item from the configuration item code sub-template in the component code template.

[0057] In this step, the component code template can be parsed to obtain the configuration item code sub-templates. Then, the configuration item code sub-templates can be parsed to obtain the component name configuration item, component type configuration item, and component setting configuration item. These three configuration items support the input of configuration item parameter sets. It should be noted that in this application, placeholders can be used to construct the component code template; that is, the configuration item parameter set can be filled into placeholders in the component code template, thereby combining the component code template and the configuration item parameter set to achieve the subsequent generation of the list component.

[0058] In one feasible implementation, the component code template can be specifically represented by code as follows:

[0059] @param{*}componentName

[0060] @param{*}fieldCompType

[0061] @param{*}ifIncludesMatchArg

[0062] @return

[0063] Wherein, componentName represents the component name configuration item in the configuration item code sub-template of the component code template, fieldCompType represents the component type configuration item in the configuration item code sub-template of the component code template, ifIncludesMatchArg represents the component setting configuration item in the configuration item code sub-template of the component code template, and * represents a placeholder.

[0064] It should be noted that since the target component path for the list component does not need to be displayed on the front-end display page, the component path configuration item is not reflected in the component code template. This target component path is used for generating the subsequent target component directory, making it easier to determine the location where the list component will be generated.

[0065] S203: Parse the configuration item parameter set to obtain the target component name, target component type and target component settings in the configuration item parameter set.

[0066] In this step, the configuration parameter set can be parsed to obtain the answers to the set of configuration questions entered by the target object in the interactive command line, namely the target component name, target component type, and target component settings. This allows the target component name, target component type, and target component settings to be entered into the configuration items of the component code template in subsequent processes, thereby generating the component code file.

[0067] S204: Generate a component code file based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings.

[0068] It should be noted that before performing the operation of generating component code files based on component name configuration items, component type configuration items, component setting configuration items, target component name, target component type, and target component settings, this application can also obtain a tool script. This tool script is used to support the generation of code files and the generation of target component directories. This tool script can be understood as an npm script.

[0069] like Figure 3 As shown, Figure 3 The flowchart illustrates the generation of component code files in a method for generating a list component, as provided in an embodiment of this application. Figure 3 This includes steps S2041A and S2042A, which are specifically described as follows:

[0070] S2041A: Based on the tool script, populate the target component name into the component name configuration item, populate the target component type into the component type configuration item, and populate the target component settings into the component settings configuration item to generate an initial code file.

[0071] Specifically, in this application, the tool script can populate the target component name into the placeholders in the component name configuration item, the target component type into the placeholders in the component type configuration item, and the target component settings into the placeholders in the component settings configuration item. It can be understood that when the tool script is executed, the population between the target component name and the component name configuration item, the target type name and the component type configuration item, and the target component settings and the component settings configuration item are achieved. Afterward, once the tool script has finished executing, an initial code file can be generated, thereby simplifying the development process for developers and improving development efficiency.

[0072] In one feasible implementation, the generated initial code file can be specifically represented by the following code:

[0073]

[0074] It should be noted that the above code is a JS (JavaScript) code file. The JS code file is used to support the input of the target component name, target component type and target component settings in the underlying program. It can realize the interactive functions of the final generated list component. This JS code file is only a partial example in this application and will not be specifically limited here.

[0075] In another feasible implementation, the generated initial code file can be specifically represented by the following code:

[0076]

[0077] It should be noted that the above code is a CSS code file, which is used to support the input of the target component type and target component settings in the front-end program. That is, the appearance of the final generated list component can be controlled through this CSS code file. In addition, this CSS code file is only a partial example in this application and will not be specifically limited here.

[0078] S2042A: Generate component code files based on the initial code file.

[0079] It should be noted that before generating component code files from the initial code file, this application may also obtain a code formatting tool. This tool is used to perform formatting operations on the initial code file, thereby improving code readability and maintainability, and ensuring consistency in code style. The code formatting tool includes tools such as fs and prettier; no specific limitations are imposed on the specific tool used here. Other tools that contribute to maintaining code style consistency may also be included.

[0080] Specifically, in this application, code formatting operations can be performed on the initial code file in a code formatting tool. For example, if the initial code file is a code file with code style A, the code formatting tool can be used to format the code file with code style A to obtain a code file with code style B. This can generate component code files. The generated component code files can support the generation of target components in the target list in subsequent processes. In this way, development efficiency can be greatly improved and repetitive work for developers can be reduced.

[0081] In one feasible implementation, the process of formatting the initial code file can be specifically represented by code as follows:

[0082] *@param content

[0083] *@returns

[0084] const formatCode=async content=>{

[0085] try{

[0086] const configPath=join(_dirname,'.. / .prettier.js');

[0087] const configOptions=await prettier.resolveConfig(configPath);

[0088] const formatted

[0089] =prettier.format(content,{parser:'typescript',…config0ptions});

[0090] return formatted;

[0091] }catch(error){

[0092] console.log(error);

[0093] throw new Error(error);}};

[0094] It should be noted that the code formatting process for the initial code file shown in this application is only a partial code example, and no specific limitations are made here.

[0095] S205: Generate the target components in the target list based on the component code file.

[0096] Understandably, after completing the filling of the target component name with the component name configuration item, the target type name with the component type configuration item, and the target component settings with the component setting configuration item in the aforementioned steps, obtaining the initial code file, and performing code styling operations based on the initial code file to obtain the component code file, the target components in the target list can be generated. The target list can be a dynamic list to support deletion and addition operations. Thus, in this application, with the help of the configuration item parameter set and component code template, it can both meet the need for rapid generation of business code in complex scenarios and improve the usability of the generated target components.

[0097] It should be noted that, since the configuration parameter set also includes the target component path, after generating the target component in the target list based on the component code file, this application can also call a tool script to generate a target component directory under the target component path entered by the target object, according to the target component name entered by the target object. This target component directory is used to identify the position of the target component in the target list. Understandably, since the different positions of a component in the target list can reflect its function or role in the application, generating the target component directory at this time facilitates quickly and accurately finding the location of the target component in subsequent processes, thereby enabling changes to the code corresponding to the target component.

[0098] In one feasible implementation, the generated target component directory can be specifically represented by code as follows:

[0099] import TagInput from'@scr / components / TagInput'

[0100] It should also be noted that this application performs template parsing on the component code template to obtain style code sub-templates within it. These style code sub-templates contain the basic styles for generating the list component. At this point, the component code file can be generated based on the style code sub-template to obtain target components containing the target styles in the target list. Furthermore, the target components containing the target styles in the target list can be used as the target components in the target list. Thus, in this application, under the influence of the style code sub-templates, list components with basic styles can be generated, thereby satisfying the style requirements of list components in different scenarios and improving the usability of the generated list components.

[0101] like Figure 4 As shown, Figure 4 This is a schematic diagram of the target component in a method for generating a list component provided in an embodiment of this application. Figure 4 The document shows a target list and target components within that list. The target list includes components in rows AAA and XXX. The component in row AAA can be understood as a target component within the target list. Its target component name is axx (displayed below the name field on the front-end page), and its type is a triangle (this triangle selector allows selection of the name field). The target component is set to have component parameters set (i.e., the setting field and the "Please enter parameters" text below it are displayed on the front-end page). It should be noted that if the target component is set to not have component parameters set, the setting field and the "Please enter parameters" text below it will not be displayed on the front-end page. Furthermore, the basic style of this target component is a rectangle.

[0102] Furthermore, it should be noted that the configuration item set in this application also includes component addition settings and component matching settings. Component addition settings can be understood as whether to add a new component row and the number of new component rows, while component matching settings can be understood as whether to add matching conditions. Based on this, the configuration item parameter set input to the target object also includes target new component rows and target matching conditions. These are then used to fill the component code template based on the target component name, target component type, target component settings, target new component rows, and target matching conditions to generate target components in the target list. This achieves flexibility in generating target components and improves the development experience.

[0103] like Figure 5 As shown, Figure 5 This is a schematic diagram of the target component in another method for generating a list component provided in an embodiment of this application. Figure 5The document shows a target list and target components within that list. The target list includes components in rows AAA and XXX. Components in row AAA can be understood as target components within the target list. The target component names for these components are axx and bxx (displayed below the name field on the front-end page). The target component type is a triangle (the triangle selector allows selection of the name field). The target component is set with component parameters (i.e., the setting field and "Please enter parameters" are displayed on the front-end page). Adding a new component means adding a new component row (i.e., row bxx is displayed below row axx on the front-end page). The target matching condition is set with a matching condition (i.e., the matching field and "Please enter matching" are displayed on the front-end page). The number of newly added component rows can be set by the target object, for example, to 5; no specific limit is specified here.

[0104] It should be noted that if the target component is set to have no parameters, the setting field and the "Please enter parameters" text below it will not be displayed on the front-end page; if the target newly added component does not add a new component row, the bxx row will not be displayed below the axx row on the front-end page; and if the target matching condition is set, the matching field and the "Please enter matching" text below it will not be displayed on the front-end page. Furthermore, the target components shown in the figures of this application are only partial examples, and the schematic diagram of the target components is not limited here.

[0105] In one feasible implementation, after executing the operation of setting the target component containing the target style in the target list as the target component in the target list, this application can also obtain the style adjustment instruction submitted by the target object. This style adjustment instruction is used to adjust the style of the style code sub-template, that is, to change the component style of the list component. Specifically, in this application, the style code sub-template can be adjusted based on the style adjustment instruction submitted by the target object to obtain the adjusted style code sub-template. Afterwards, the target component containing the target style can be styled according to the adjusted style code sub-template to obtain the adjusted target component containing the target style. Furthermore, a new target component can be generated based on the adjusted style code sub-template. Thus, this application can achieve a one-time adjustment of the component style based on the template adjustment, thereby reducing the development cost for developers, improving development efficiency, and enhancing the usability of generated list components.

[0106] like Figure 6 As shown, Figure 6 This is a schematic diagram of the target component in another method for generating a list component provided in an embodiment of this application. Figure 6The text shows the target list and the target components in the target list generated by the adjusted style code sub-template. The target list includes the AAA row component and the XXX row component. At this time, the component style of the AAA row component is pentagonal and elliptical, and the component style of the AAA row component has also been adjusted.

[0107] like Figure 7 As shown, Figure 7 This application provides a flowchart illustrating the generation of a target component in a list component generation method. First, a component code template containing style code sub-templates and configuration item code sub-templates is obtained, along with a configuration item parameter set, which includes the target component name, target component type, and target component settings. Next, the target component name, target component type, and target component settings are filled into the component name configuration item, component type configuration item, and component settings configuration item in the configuration item code sub-template of the component code template to generate an initial code file. Finally, with the help of a code formatting tool, a component code file is generated based on the initial code file, and with the help of the style code sub-templates in the component code template, the target components in the target list are generated based on the component code file. A target component directory can also be generated based on a tool script. Thus, with the component code template and configuration item parameter set, this application improves development efficiency, reduces code testing costs, and meets the development needs of developers, thereby improving code maintainability, system stability of the application component, and enhancing the usability of the generated list component.

[0108] In summary, this application embodiment can use the configuration parameter set input by the target object to fill in the parameters of the component configuration items in the component code template, thereby generating a component code file. Based on the generated component code file, the target component in the target list can be generated. Thus, this application can satisfy the generation of list components for different scenarios based on the component code template and the configuration parameter set input by the target object, improve the usability of the generated list components, and avoid the problems of increased npm package management costs and reduced list component generation efficiency caused by abstracting code into an npm package. Furthermore, it can also reduce development efficiency and testing costs.

[0109] Based on the list component generation method provided in the preceding embodiments, this application also provides a list component generation apparatus. The list component generation apparatus provided in this application will be described in detail below.

[0110] See Figure 8 This figure is a schematic diagram of the structure of a list component generation device provided in an embodiment of this application. Figure 8 As shown, the device for generating this list component specifically includes:

[0111] The template parameter set acquisition unit 801 is used to acquire the component code template and the configuration item parameter set of the target object input, wherein the component code template and the configuration item parameter set are used to support the generation of list components;

[0112] The template parsing and processing unit 802 is used to parse the component code template to obtain the component name configuration item, component type configuration item, and component setting configuration item in the configuration item code sub-template of the component code template.

[0113] The parameter set parsing and processing unit 803 is used to parse and process the configuration item parameter set to obtain the target component name, target component type and target component settings in the configuration item parameter set;

[0114] The code file generation unit 804 is used to generate a component code file based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings;

[0115] The target component generation unit 805 is used to generate target components in the target list based on the component code file.

[0116] In one feasible implementation, the device further includes:

[0117] A tool script acquisition unit is used to acquire tool scripts, wherein the tool scripts are used to support the generation of code files;

[0118] The code file generation unit 804 is specifically used for:

[0119] Based on the tool script, the target component name is filled into the component name configuration item, the target component type is filled into the component type configuration item, and the target component settings are filled into the component settings configuration item, generating an initial code file;

[0120] Based on the initial code file, generate the component code file.

[0121] In one feasible implementation, the device further includes:

[0122] A formatting tool acquisition unit is used to acquire a code formatting tool, wherein the code formatting tool is used to perform formatting operations on the initial code file;

[0123] The code file generation unit 804 is specifically used for:

[0124] The initial code file is formatted using the code formatting tool to generate component code files.

[0125] In one feasible implementation, the device further includes:

[0126] The component directory generation unit is used to generate a target component directory based on the target component path and the target component name using the tool script. The target component directory is used to identify the position of the target component in the target list.

[0127] In one feasible implementation, the device further includes:

[0128] The problem set acquisition unit is used to acquire a configuration item problem set, wherein the configuration item problem set includes a first configuration item problem for the component path, a second configuration item problem for the component name, a third configuration item problem for the component type, and a fourth configuration item problem for the component settings;

[0129] The template parameter set acquisition unit 801 is specifically used for:

[0130] Receive the target component path for the first configuration item problem, the target component name for the second configuration item problem, the target component type for the third configuration item problem, and the target component settings for the fourth configuration item problem from the target object;

[0131] The target component path, target component name, target component type, and target component settings are used as the configuration parameter set for the target object input.

[0132] In one feasible implementation, the target component generation unit 805 is specifically used for:

[0133] Based on the style code sub-template, the component code file is generated to obtain target components containing the target style in the target list;

[0134] The target component that contains the target style in the target list is used as the target component in the target list.

[0135] In one feasible implementation, the device further includes:

[0136] An adjustment instruction acquisition unit is used to acquire style adjustment instructions submitted by the target object;

[0137] The style template adjustment unit is used to adjust the style code sub-template according to the style adjustment instruction to obtain the adjusted style code sub-template.

[0138] The template component adjustment unit is used to adjust the style of the target component containing the target style according to the adjusted style code sub-template, so as to obtain the adjusted target component containing the target style.

[0139] The list component generation apparatus provided in this application embodiment has the same beneficial effects as the list component generation method provided in the above embodiments, and therefore will not be described again.

[0140] This application provides a computer device, which can be a server. Figure 9 This is a schematic diagram of a server structure provided in an embodiment of this application. The server 900 can vary significantly due to different configurations or performance. It may include one or more central processing units (CPUs) 922 (e.g., one or more processors) and memory 932, and one or more storage media 930 (e.g., one or more mass storage devices) for storing application programs 942 or data 944. The memory 932 and storage media 930 can be temporary or persistent storage. The program stored in the storage media 930 may include one or more modules (not shown in the diagram), each module may include a series of instruction operations on the server. Furthermore, the CPU 922 may be configured to communicate with the storage media 930 and execute the series of instruction operations in the storage media 930 on the server 900.

[0141] Server 900 may also include one or more power supplies 926, one or more wired or wireless network interfaces 950, one or more input / output interfaces 958, and / or one or more operating systems 941, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0142] CPU 922 is used to perform the following steps:

[0143] Obtain the component code template and the configuration parameter set of the target object input, wherein the component code template and the configuration parameter set are used to support the generation of the list component;

[0144] The component code template is parsed to obtain the component name configuration item, component type configuration item, and component setting configuration item from the configuration item code sub-template in the component code template;

[0145] The configuration item parameter set is parsed to obtain the target component name, target component type, and target component settings.

[0146] A component code file is generated based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings;

[0147] Based on the component code file, generate the target components in the target list.

[0148] This application also provides another computer device, which can be a terminal device. For example... Figure 10 As shown, for ease of explanation, only the parts related to the embodiments of this application are shown. For specific technical details not disclosed, please refer to the method section of the embodiments of this application. Taking a mobile phone as an example:

[0149] Figure 10 The diagram shown is a block diagram of a portion of the structure of a mobile phone provided in an embodiment of this application. (Reference) Figure 10 The mobile phone includes: a radio frequency (RF) circuit 1010, a memory 1020, an input unit 1030, a display unit 1040, a sensor 1050, an audio circuit 1060, a wireless fidelity (WiFi) module 1070, a processor 1080, and a power supply 1090, etc. Those skilled in the art will understand that... Figure 10 The mobile phone structure shown does not constitute a limitation on the mobile phone and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0150] The following is combined Figure 10 A detailed introduction to each component of a mobile phone:

[0151] The RF circuit 1010 can be used for receiving and transmitting signals during information transmission or calls. Specifically, it receives downlink information from the base station and processes it with the processor 1080; additionally, it transmits uplink data to the base station. Typically, the RF circuit 1010 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low-noise amplifier (LNA), a duplexer, etc. Furthermore, the RF circuit 1010 can also communicate wirelessly with networks and other devices. The aforementioned wireless communications may use any communication standard or protocol, including but not limited to Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Long Term Evolution (LTE), email, and Short Messaging Service (SMS).

[0152] The memory 1020 can be used to store software programs and modules. The processor 1080 executes various mobile phone functions and data processing by running the software programs and modules stored in the memory 1020. The memory 1020 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the mobile phone (such as audio data, phonebook, etc.). In addition, the memory 1020 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0153] The input unit 1030 can be used to receive input numerical or character information, and to generate key signal inputs related to user settings and function control of the mobile phone. Specifically, the input unit 1030 may include a touch panel 1031 and other input devices 1032. The touch panel 1031, also known as a touch screen, can collect touch operations performed by the user on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or near the touch panel 1031), and drive the corresponding connection devices according to a pre-set program. Optionally, the touch panel 1031 may include two parts: a touch detection device and a touch controller. The touch detection device detects the user's touch position and the signal generated by the touch operation, and transmits the signal to the touch controller; the touch controller receives touch information from the touch detection device, converts it into touch point coordinates, and sends it to the processor 1080, and can also receive and execute commands sent by the processor 1080. In addition, the touch panel 1031 can be implemented using various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch panel 1031, the input unit 1030 may also include other input devices 1032. Specifically, other input devices 1032 may include, but are not limited to, one or more of the following: physical keyboard, function keys (such as volume control buttons, power buttons, etc.), trackball, mouse, joystick, etc.

[0154] The display unit 1040 can be used to display information input by the user or information provided to the user, as well as various menus of the mobile phone. The display unit 1040 may include a display panel 1041, which may optionally be configured as a Liquid Crystal Display (LCD), Organic Light-Emitting Diode (OLED), or similar display panel 1041. Further, a touch panel 1031 may cover the display panel 1041. When the touch panel 1031 detects a touch operation on or near it, it transmits the information to the processor 1080 to determine the type of touch event. Subsequently, the processor 1080 provides corresponding visual output on the display panel 1041 according to the type of touch event. Although in Figure 10 In this embodiment, the touch panel 1031 and the display panel 1041 are two separate components to realize the input and output functions of the mobile phone. However, in some embodiments, the touch panel 1031 and the display panel 1041 can be integrated to realize the input and output functions of the mobile phone.

[0155] The mobile phone may also include at least one sensor 1050, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor. The ambient light sensor can adjust the brightness of the display panel 1041 according to the ambient light level, and the proximity sensor can turn off the display panel 1041 and / or the backlight when the phone is moved to the ear. As a type of motion sensor, an accelerometer sensor can detect the magnitude of acceleration in various directions (generally three axes). When stationary, it can detect the magnitude and direction of gravity and can be used for applications that recognize the phone's posture (such as landscape / portrait switching, related games, magnetometer posture calibration), vibration recognition-related functions (such as pedometer, taps), etc. Other sensors that may be configured in the mobile phone, such as gyroscopes, barometers, hygrometers, thermometers, and infrared sensors, will not be described in detail here.

[0156] The audio circuit 1060, speaker 1061, and microphone 1062 provide an audio interface between the user and the mobile phone. The audio circuit 1060 converts the received audio data into electrical signals and transmits them to the speaker 1061, where the speaker 1061 converts them into sound signals for output. On the other hand, the microphone 1062 converts the collected sound signals into electrical signals, which are then received by the audio circuit 1060, converted into audio data, and then processed by the processor 1080 before being transmitted via the RF circuit 1010 to, for example, another mobile phone, or the audio data can be output to the memory 1020 for further processing.

[0157] WiFi is a short-range wireless transmission technology. Through the WiFi module 1070, mobile phones can help users send and receive emails, browse web pages, and access streaming media, providing users with wireless broadband internet access. Although Figure 10 The WiFi module 1070 is shown, but it is understood that it is not an essential component of a mobile phone and can be omitted as needed without changing the essence of the invention.

[0158] The processor 1080 is the control center of the mobile phone, connecting various parts of the phone through various interfaces and lines. It executes software programs and / or modules stored in the memory 1020 and calls data stored in the memory 1020 to perform various functions and process data, thereby collecting overall data and information from the phone. Optionally, the processor 1080 may include one or more processing units; preferably, the processor 1080 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may not be integrated into the processor 1080.

[0159] The mobile phone also includes a power supply 1090 (such as a battery) that supplies power to various components. Preferably, the power supply can be logically connected to the processor 1080 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system.

[0160] Although not shown, mobile phones may also include a camera, Bluetooth module, etc., which will not be described in detail here.

[0161] In this embodiment of the application, the processor 1080 included in the mobile phone also has the following functions:

[0162] Obtain the component code template and the configuration parameter set of the target object input, wherein the component code template and the configuration parameter set are used to support the generation of the list component;

[0163] The component code template is parsed to obtain the component name configuration item, component type configuration item, and component setting configuration item from the configuration item code sub-template in the component code template;

[0164] The configuration item parameter set is parsed to obtain the target component name, target component type, and target component settings.

[0165] A component code file is generated based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings;

[0166] Based on the component code file, generate the target components in the target list.

[0167] This application also provides a computer-readable storage medium for storing a computer program that, when run on a computer device, causes the computer device to perform any of the implementation methods for generating a list component as described in the foregoing embodiments.

[0168] This application also provides a computer program product including a computer program, which, when run on a computer device, causes the computer device to execute any one of the implementation methods for generating a list component as described in the foregoing embodiments.

[0169] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working process of the system and equipment described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0170] In the several embodiments provided in this application, it should be understood that the disclosed systems and methods can be implemented in other ways. For example, the system embodiments described above are merely illustrative. For instance, the division of the system is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple systems may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection through some interfaces, devices, or units, and may be electrical, mechanical, or other forms.

[0171] The system described as separate components may or may not be physically separate. Components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment, depending on actual needs.

[0172] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0173] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes: USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, optical disks, and other media capable of storing computer programs.

[0174] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0175] The above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

Claims

1. A method for generating a list component, characterized in that, include: Obtain the component code template and the configuration parameter set of the target object input, wherein the component code template and the configuration parameter set are used to support the generation of the list component; The component code template is parsed to obtain the component name configuration item, component type configuration item, and component setting configuration item from the configuration item code sub-template in the component code template; The configuration item parameter set is parsed to obtain the target component name, target component type, and target component settings. A component code file is generated based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings; Based on the component code file, generate the target components in the target list.

2. The method according to claim 1, characterized in that, Before generating the component code file based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings, the method further includes: Obtain the tool script, wherein the tool script is used to support the generation of code files; The step of generating a component code file based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings includes: Based on the tool script, the target component name is filled into the component name configuration item, the target component type is filled into the component type configuration item, and the target component settings are filled into the component settings configuration item, generating an initial code file; Based on the initial code file, generate the component code file.

3. The method according to claim 2, characterized in that, Before generating the component code file based on the initial code file, the method further includes: Obtain a code formatting tool, wherein the code formatting tool is used to perform a formatting operation on the initial code file; The step of generating component code files based on the initial code file includes: The initial code file is formatted using the code formatting tool to generate component code files.

4. The method according to claim 2, characterized in that, The configuration parameter set also includes the target component path, and after generating the target components in the target list based on the component code file, it further includes: The tool script generates a target component directory based on the target component path and the target component name. The target component directory is used to identify the position of the target component in the target list.

5. The method according to claim 4, characterized in that, Before obtaining the component code template and the set of configuration parameters input by the target object, the following is also included: Obtain a set of configuration item issues, wherein the set of configuration item issues includes a first configuration item issue for the component path, a second configuration item issue for the component name, a third configuration item issue for the component type, and a fourth configuration item issue for the component settings; Obtain the set of configuration parameters input by the target object, including: Receive the target component path for the first configuration item problem, the target component name for the second configuration item problem, the target component type for the third configuration item problem, and the target component settings for the fourth configuration item problem from the target object; The target component path, target component name, target component type, and target component settings are used as the configuration parameter set for the target object input.

6. The method according to claim 1, characterized in that, The component code template also includes a style code sub-template. Generating the target components in the target list based on the component code file includes: Based on the style code sub-template, the component code file is generated to obtain target components containing the target style in the target list; The target component that contains the target style in the target list is used as the target component in the target list.

7. The method according to claim 6, characterized in that, After adding the target component containing the target style to the target list as the target component in the target list, the method further includes: Obtain the style adjustment instructions submitted by the target object; The style code sub-template is adjusted according to the style adjustment instruction to obtain the adjusted style code sub-template; The target component containing the target style is styled according to the adjusted style code sub-template to obtain the adjusted target component containing the target style.

8. A device for generating a list component, characterized in that, include: The template parameter set acquisition unit is used to acquire the component code template and the configuration item parameter set of the target object input, wherein the component code template and the configuration item parameter set are used to support the generation of list components; The template parsing and processing unit is used to parse the component code template to obtain the component name configuration item, component type configuration item, and component setting configuration item in the configuration item code sub-template of the component code template; The parameter set parsing and processing unit is used to parse and process the configuration item parameter set to obtain the target component name, target component type and target component settings in the configuration item parameter set; The code file generation unit is used to generate a component code file based on the component name configuration item, the component type configuration item, the component setting configuration item, the target component name, the target component type, and the target component settings; The target component generation unit is used to generate target components in the target list based on the component code file.

9. A computer device, characterized in that, The device includes a processor and a memory: The memory is used to store computer programs and to transfer the computer programs to the processor; The processor is configured to execute the steps of the method for generating a list component according to any one of claims 1 to 7, based on instructions in the computer program.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program that, when executed by a computer device, implements the steps of the method for generating a list component according to any one of claims 1 to 7.

11. A computer program product, characterized in that, Includes a computer program that, when executed by a computer device, implements the steps of the method for generating a list component as described in any one of claims 1 to 7.

Images