UI component configuration implementation method and system

Abstract

The invention provides a UI component configuration implementation method and system. The method comprises the following steps: installing a BalmUI Pro component library; uI component codes needing to be written in the page are converted into configuration information, and component elements in the page are managed in a unified mode through model-config model configuration parameters; appointing a UI component used by each component element by using a component parameter, wherein the UI component can be any UI component library component or a user-defined component; an attrOrProp parameter is used for configuring the attribute of each component element, and configuration information is converted into a component attribute value through a configuration analyzer; and rendering the UI component according to the component attribute value by using the template grammar of Vue.js so as to realize the rapid construction of the page. The system is used for implementing the method. According to the method and the device, the problem of low development efficiency caused by excessive repeated work of the existing software front-end development can be solved.

Description

Technical Field

[0001] The present invention belongs to the field of computer software technology, and more specifically, relates to a method and system for implementing UI component configuration. Background Art

[0002] In traditional front-end development, developers often need to write a lot of repetitive component code, such as forms, lists, and pop-ups, which results in a lot of repetitive code, high maintenance costs, and is prone to errors. In modern front-end frameworks, developers often choose their own commonly used UI frameworks to reduce component development, but in actual business needs, especially for some highly repetitive list / details pages, if you want to integrate the required components and logic, you still have to complete the function through repetitive labor of copying and pasting. Different modules of the same project may use a variety of UI framework components and custom components. With the iterative updates of framework components, it is quite difficult to manage and maintain them in a unified manner. Summary of the invention

[0003] The purpose of the present invention is to solve the problem of low development efficiency due to excessive repetitive work in existing software front-end development.

[0004] In order to achieve the above-mentioned purpose, the present invention provides a method and system for implementing UI component configuration.

[0005] According to a first aspect of the present invention, a method for implementing UI component configuration is provided, the method comprising the following steps:

[0006] Install the BalmUIPro component library;

[0007] Convert the UI component code that needs to be written in the page into configuration information, and uniformly manage the component elements in the page through model-config model configuration parameters;

[0008] Use the component parameter to specify the UI component used by each component element. The UI component can be any UI component library component or a custom component.

[0009] Use the attrOrProp parameter to configure the properties of each component element, and convert the configuration information into component property values ​​through the configuration parser;

[0010] Use Vue.js's template syntax to render UI components according to component attribute values ​​to achieve rapid page construction.

[0011] Optionally, the model-config model configuration parameter adopts a JavaScript object or function format, and is used to define the structure of the page and the configuration information of the component elements.

[0012] According to a second aspect of the present invention, a UI component configuration implementation system is provided, wherein the UI component configuration implementation system is used to implement any of the above UI component configuration implementation methods, and comprises the following functional modules:

[0013] Model parsing module, used to parse model-config model configuration parameters and pass model configuration information;

[0014] The component configuration parsing module is used to parse the configuration information of each component element and convert the component element configuration information into component attribute values;

[0015] A component rendering module, used to render UI components according to the model configuration information and the component attribute values, and supports rendering any UI component library component or custom component;

[0016] The model management module is used to manage the model configuration of the page and supports the nesting and reuse of models.

[0017] Optionally, the UI component configuration implementation system further includes:

[0018] Theme customization module, used to customize the theme style of UI components.

[0019] The beneficial effects of the present invention are:

[0020] The UI component configuration implementation method of the present invention, first, install the BalmUIPro component library; second, convert the UI component code that needs to be written in the page into configuration information, and uniformly manage the component elements in the page through the model-config model configuration parameter; third, use the component parameter to specify the UI component used by each component element, and the UI component can be any UI component library component or a custom component; from this, use the attrOrProp parameter to configure the properties of each component element, and convert the configuration information into component property values ​​through the configuration parser; finally, use the template syntax of Vue.js to render the UI component according to the component property value to achieve rapid construction of the page. The UI component configuration implementation method of the present invention allows developers to create various user interfaces with simple configurations like building blocks, greatly reducing duplication of work and improving development efficiency.

[0021] The UI component configuration implementation system of the present invention and the above-mentioned UI component configuration implementation method belong to a general inventive concept, and have at least the same beneficial effects as the above-mentioned UI component configuration implementation method, and its beneficial effects are no longer repeated here.

[0022] Other features and advantages of the present invention will be described in detail in the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] The present invention may be better understood by referring to the following description taken in conjunction with the accompanying drawings, in which the same or similar reference numerals are used throughout the drawings to represent the same or similar components.

[0024] Figure 1 A flowchart of a method for implementing UI component configuration according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0025] In order to enable those skilled in the art to more fully understand the technical solution of the present invention, the exemplary embodiments of the present invention will be described in more comprehensive and detailed in conjunction with the accompanying drawings below. Obviously, the one or more embodiments of the present invention described below are only one or more of the specific ways in which the technical solution of the present invention can be implemented, and are not exhaustive. It should be understood that other ways belonging to a general inventive concept can be used to implement the technical solution of the present invention, and should not be limited by the exemplary embodiments described. Based on one or more embodiments of the present invention, all other embodiments obtained by ordinary technicians in the field without making creative work should fall within the scope of protection of the present invention.

[0026] Example: Figure 1 The following is a flowchart showing the implementation method of the UI component configuration implementation method according to the embodiment of the present invention. Figure 1 The UI component configuration implementation method of the embodiment of the present invention includes the following steps:

[0027] Step S100, installing the BalmUIPro component library;

[0028] Step S200: convert the UI component code to be written in the page into configuration information, and uniformly manage the component elements in the page through the model-config model configuration parameters;

[0029] Step S300: Use the component parameter to specify the UI component used by each component element. The UI component can be any UI component library component or a custom component.

[0030] Step S400: Use the attrOrProp parameter to configure the properties of each component element, and convert the configuration information into component property values ​​through the configuration parser;

[0031] Step S500: Use the template syntax of Vue.js to render UI components according to component attribute values ​​to achieve rapid construction of pages.

[0032] Furthermore, in step S200 of the embodiment of the present invention, the model-config model configuration parameter adopts a JavaScript object or function format, and is used to define the structure of the page and the configuration information of the component elements.

[0033] Specifically, the embodiment of the present invention implements UI component configuration based on BalmUIPro, which is a front-end UI component library based on Vue.js. It allows developers to create and manage various user interfaces with simple configurations like building blocks, greatly reducing repetitive work and improving development efficiency.

[0034] Specifically, the UI component configuration implementation method of the embodiment of the present invention mainly includes the following process:

[0035] Define the model: Consider each page as a model, which consists of multiple component elements;

[0036] Create configuration: Use the configuration rules provided by BalmUIPro to define component parameters and attrOrProp parameters for each component element;

[0037] Rendering page: BalmUIPro will automatically render the page according to the configuration information, and realize the reuse and management of components;

[0038] Form validation: You can configure validation rules for each component element to achieve automatic form validation.

[0039] Among them, each page is equivalent to a model, each model is composed of a series of component elements, each component element can be configured globally or customized according to needs, and some component elements or a model can be reused as component elements of another page (model).

[0040] The following describes in detail the beneficial effects of the method for implementing the configuration of UI components according to an exemplary task scenario:

[0041] A company's development team developed an e-commerce website. The user frontend used the Ele.me UI component library + the company's custom component library, and the management backend used the Ant Financial UI component library + the company's custom component library.

[0042] If the traditional development model is adopted, components need to be written according to the page requirements. Pages that need to reuse functions need to be copied and pasted or rewritten. When the project has more pages, a lot of duplicate code will be generated. When adjusting components on multiple pages, they need to be adjusted and updated one by one.

[0043] If the UI component configuration implementation method of the embodiment of the present invention is adopted, a short configuration is written according to the requirements (the component parameter can be an input box of Ele.me, a drop-down menu of Ant Financial, or any custom UI component); for pages that need to reuse functions, if the functions are exactly the same, only the previous configuration needs to be fully introduced; if some functions are the same, only the previous partial configuration needs to be introduced, and then new configuration elements are incrementally added to form a new configuration; after the project is expanded, it can be found that the page code is relatively small, and each page has its own configuration introduced, which is clear at a glance; when it involves comprehensive iteration of multiple pages, only one common configuration item or several specified configuration items need to be changed to achieve the goal. By adopting the UI component configuration implementation method of the embodiment of the present invention, the development efficiency can be improved by at least 60%, and the amount of code can be reduced by at least 40%.

[0044] According to the above comparison, the UI component configuration implementation method of the embodiment of the present invention can reduce the repeated code in many pages, and then use configurable JavaScript objects or function formats to manage page requirements in an organized, scalable and reusable manner. This can reduce development costs to a certain extent, allowing developers to focus on writing demand logic while ensuring that subsequent maintenance is stable and easy, so that the company may have more development resources to learn or research new technologies.

[0045] Correspondingly, based on the UI component configuration implementation method of the embodiment of the present invention, the embodiment of the present invention also proposes a UI component configuration implementation system, and the UI component configuration implementation system is used to implement the above UI component configuration implementation method.

[0046] The UI component configuration implementation system of the embodiment of the present invention includes the following functional modules:

[0047] Model parsing module, used to parse model-config model configuration parameters and pass model configuration information;

[0048] The component configuration parsing module is used to parse the configuration information of each component element and convert the component element configuration information into component attribute values;

[0049] The component rendering module is used to render UI components according to model configuration information and component attribute values, and supports rendering any UI component library component or custom component;

[0050] The model management module is used to manage the model configuration of the page and supports the nesting and reuse of models.

[0051] Furthermore, the UI component configuration implementation system of the embodiment of the present invention also includes:

[0052] Theme customization module, used to customize the theme style of UI components.

[0053] Although one or more embodiments of the present invention are described above, it should be known to those skilled in the art that the present invention can be implemented in any other form without departing from its subject matter and scope. Therefore, the embodiments described above are illustrative rather than restrictive, and many modifications and substitutions are obvious to those skilled in the art without departing from the spirit and scope of the present invention as defined in the appended claims.

Claims

1. A method for implementing UI component configuration, characterized in that: include: Install the BalmUIPro component library; Convert the UI component code that needs to be written in the page into configuration information, and uniformly manage the component elements in the page through model-config model configuration parameters; Use the component parameter to specify the UI component used by each component element. The UI component can be any UI component library component or a custom component. Use the attrOrProp parameter to configure the properties of each component element, and convert the configuration information into component property values ​​through the configuration parser; Use Vue.js's template syntax to render UI components according to component attribute values ​​to achieve rapid page construction.

2. The method for implementing UI component configuration according to claim 1, characterized in that: The model-config model configuration parameters are in JavaScript object or function format and are used to define the structure of the page and the configuration information of component elements.

3. A UI component configuration implementation system for implementing the UI component configuration implementation method according to claim 1 or 2, characterized in that: include: Model parsing module, used to parse model-config model configuration parameters and pass model configuration information; The component configuration parsing module is used to parse the configuration information of each component element and convert the component element configuration information into component attribute values; A component rendering module, used to render UI components according to the model configuration information and the component attribute values, and supports rendering any UI component library component or custom component; The model management module is used to manage the model configuration of the page and supports the nesting and reuse of models.

4. The UI component configuration implementation system according to claim 3, characterized in that: Also includes: Theme customization module, used to customize the theme style of UI components.

Images