Plug-in configuration method, device and equipment

Abstract

The present application provides a plug-in configuration method, device and equipment. The method includes: the server determines a first plug-in that needs to be optimized. The server can determine at least one first attribute that needs to be added to each first plug-in based on the first plug-in. The first attribute is used to add a new function configuration to the first plug-in. The server can also optimize the function of the first plug-in by modifying the second attribute in the original plug-in. The server can configure default parameters for each first attribute and obtain a second plug-in. The second plug-in is the first plug-in after the configuration of the first attribute is completed. When the server obtains the second plug-in, the server packages the second plug-in. The user can call the packaged second plug-in after importing the UI framework. The method of the present application adds the function of the plug-in in the UI framework, so that the plug-in can meet the needs of asset management technology network construction.

Description

Technical Field

[0001] The present application relates to the field of computers, and in particular to a plug-in configuration method, device and equipment. Background Art

[0002] The continuous development of terminal technology has made terminals an important tool for users' entertainment and office work. On the terminal, users need to interact with the terminal through the front-end interface. Among them, the front-end development technology can include html5, css3, javascript, Vue and other technologies. When using the above front-end development technologies for front-end development, administrators usually need to master the use of a large number of front-end development technologies and write a large amount of program code according to the front-end interface.

[0003] In order to improve the efficiency of front-end development, the prior art uses a UI framework to directly import UI components into the front-end page, greatly improving the programming efficiency of administrators in the front-end page programming process. Currently commonly used UI frameworks may include Element-UI. After the administrator imports the UI framework of Element-UI into the programming environment of the front-end interface, he can directly call the plug-in in Element-UI during the programming process to quickly build the front-end interface.

[0004] However, the current plug-ins in Element-UI have the problem of low efficiency. Summary of the invention

[0005] The present application provides a plug-in configuration method, device and equipment to solve the problem of low usage efficiency of the current plug-ins in Element-UI.

[0006] In a first aspect, the present application provides a plug-in configuration method, comprising:

[0007] Adding at least one first attribute to a first plug-in, the first plug-in is used to construct a website function in the website, the first attribute is used to increase the function of the first plug-in, the first attribute includes at least one attribute parameter, and each of the attribute parameters is used to implement a function of the first plug-in;

[0008] The first plug-in is packaged to generate a functional interface of the website function.

[0009] Optionally, the first plug-in is an existing plug-in or a newly added plug-in. When the first plug-in is an existing plug-in, the first plug-in includes at least one second attribute.

[0010] Optionally, when the first plug-in is an existing plug-in, the method further includes:

[0011] Modify a default parameter of at least one second attribute in the first plug-in, where the second attribute is an original attribute in the first plug-in, the second attribute is used to implement a function of the first plug-in, and the default parameter is used to indicate the function implemented by the first plug-in when the first plug-in is directly called.

[0012] Optionally, when the first plug-in is a table plug-in, adding at least one first attribute in the first plug-in includes at least one of the following:

[0013] Add a scroll bar style attribute, wherein the scroll bar style attribute is used to define the scroll bar style of the table according to the scroll bar style in the style file, and the attribute parameter is used to indicate the scroll bar style;

[0014] Adding a null value text attribute, wherein the null value text attribute is used to output a default text in the table when the value of the table is null or undefined, and the attribute parameter is used to refer to the default text style;

[0015] A scroll bar update attribute is added, wherein the scroll bar update attribute is used to synchronously update the scroll bar length when the table content is updated, and the attribute parameter is used to indicate whether the scroll bar update attribute is enabled.

[0016] Optionally, when the first plug-in is a selection box plug-in, adding at least one first attribute in the first plug-in includes:

[0017] Add an active attribute of the selection box, the active attribute is used to dynamically adjust the length and / or width of the selection box according to the added content of the selection box, and the attribute parameter is used to indicate whether the active attribute of the selection box is enabled.

[0018] Optionally, when the first plug-in is an input box plug-in, adding at least one first attribute in the first plug-in includes:

[0019] A focus event attribute is added, wherein the focus event attribute is used to adjust the color of the input box according to the focus in the input box, and the attribute parameter is used to indicate the color of the input box.

[0020] Optionally, when the first plug-in is a dialog plug-in, modifying a default parameter of at least one second attribute in the first plug-in includes:

[0021] The default parameter of the dialog plug-in is modified to be a default mask, so that the page of the website is masked when the dialog box pops up on the website.

[0022] In a second aspect, the present application provides a plug-in configuration device, including:

[0023] A newly added module is used to add at least one first attribute in a first plug-in, the first plug-in is used to build a website function in a website, the first attribute is used to increase the function of the first plug-in, the first attribute includes at least one attribute parameter, and each of the attribute parameters is used to implement a function of the first plug-in;

[0024] The packaging module is used to package the first plug-in to generate a functional interface of the website function.

[0025] Optionally, the first plug-in is an existing plug-in or a newly added plug-in. When the first plug-in is an existing plug-in, the first plug-in includes at least one second attribute.

[0026] Optionally, when the first plug-in is an existing plug-in, the device further includes:

[0027] A modification module is used to modify the default parameters of at least one second attribute in the first plug-in, where the second attribute is an original attribute in the first plug-in, the second attribute is used to implement the function of the first plug-in, and the default parameter is used to indicate the function implemented by the first plug-in when the first plug-in is directly called.

[0028] Optionally, when the first plug-in is a table, the newly added module includes at least one of the following:

[0029] Add a scroll bar style attribute, wherein the scroll bar style attribute is used to define the scroll bar style of the table according to the scroll bar style in the style file, and the attribute parameter is used to indicate the scroll bar style;

[0030] Adding a null value text attribute, wherein the null value text attribute is used to output a default text in the table when the value of the table is null or undefined, and the attribute parameter is used to refer to the default text style;

[0031] A scroll bar update attribute is added, wherein the scroll bar update attribute is used to synchronously update the scroll bar length when the table content is updated, and the attribute parameter is used to indicate whether the scroll bar update attribute is enabled.

[0032] Optionally, when the first plug-in is a selection box, the newly added module includes:

[0033] Add an active attribute of the selection box, the active attribute is used to dynamically adjust the length and / or width of the selection box according to the added content of the selection box, and the attribute parameter is used to indicate whether the active attribute of the selection box is enabled.

[0034] Optionally, when the first plug-in is an input box, the newly added module includes:

[0035] A focus event attribute is added, wherein the focus event attribute is used to adjust the color of the input box according to the focus in the input box, and the attribute parameter is used to indicate the color of the input box.

[0036] Optionally, when the first plug-in is a dialog box, the modification module includes:

[0037] The default parameter of the dialog plug-in is modified to be a default mask, so that the page of the website is masked when the dialog box pops up on the website.

[0038] In a third aspect, the present application provides a server comprising: a memory and a processor; the memory is used to store program instructions; the processor is used to call the program instructions in the memory to execute the plug-in configuration method in the first aspect and any possible design of the first aspect.

[0039] In a fourth aspect, the present application provides a readable storage medium, in which execution instructions are stored. When at least one processor of a server executes the execution instruction, the server executes the plug-in configuration method in the first aspect and any possible design of the first aspect.

[0040] In a fifth aspect, the present application provides a computer program product, which includes a computer program. When at least one processor of a server executes the execution instruction, the server executes the plug-in configuration method in the first aspect and any possible design of the first aspect.

[0041] The plug-in configuration method, device and equipment provided by the present application determine the first plug-in that needs to be optimized; based on the first plug-in, determine at least one first attribute that needs to be added to each first plug-in; the first attribute is used to add a new function configuration for the first plug-in; the function of the first plug-in can be optimized by modifying the second attribute in the original plug-in; default parameters can be configured for each first attribute, and a second plug-in can be obtained; the second plug-in is the first plug-in after the configuration of the first attribute is completed; when the second plug-in is obtained, the second plug-in is packaged; the user can call the packaged second plug-in after importing the UI framework to achieve the effect of adding the function of the plug-in in the UI framework, so that the plug-in can meet the needs of asset management technology network construction. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the technical solutions in the present application or the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0043] Figure 1A schematic diagram of an application scenario of a plug-in provided in an embodiment of the present application;

[0044] Figure 2 A flowchart of a plug-in configuration method provided in one embodiment of the present application;

[0045] Figure 3 A schematic diagram of a front-end page provided for an embodiment of the present application;

[0046] Figure 4 A schematic diagram of a front-end page provided for an embodiment of the present application;

[0047] Figure 5 A schematic diagram of a front-end page provided for an embodiment of the present application;

[0048] Figure 6 An icon diagram provided for an embodiment of the present application;

[0049] Figure 7 A schematic diagram of a front-end page provided for an embodiment of the present application;

[0050] Figure 8 A schematic diagram of the hardware structure of a server provided in one embodiment of the present application;

[0051] Fig. 9 A schematic diagram of the hardware structure of a server provided in accordance with an embodiment of the present application. DETAILED DESCRIPTION

[0052] In order to make the purpose, technical solutions and advantages of this application clearer, the technical solutions in this application will be clearly and completely described below in conjunction with the drawings in this application. Obviously, the described embodiments are part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0053] The terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the terms used in this way can be interchanged where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein, for example.

[0054] In addition, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or apparatus that includes a series of steps or elements is not necessarily limited to those steps or elements explicitly listed, but may include other steps or elements not explicitly listed or inherent to such process, method, product, or apparatus.

[0055] The continuous development of terminal technology has made terminals an important tool for users' entertainment and office work. On the terminal, users need to interact with the terminal through the front-end interface. Among them, the front-end development technology can include html5, css3, javascript, VueJs and other technologies. When using the above front-end development technologies for front-end development, administrators usually need to master the use of a large number of front-end development technologies and write a large amount of program code according to the front-end interface.

[0056] In order to improve the efficiency of front-end development, the prior art uses a UI framework to directly import UI components into the front-end page, greatly improving the administrator's programming efficiency during the front-end page programming process. Currently commonly used UI frameworks may include Element-UI. Among them, Element-UI is a website rapid prototyping tool specially provided for developers, designers, product managers and other professions. Administrators can import the UI framework of Element-UI into the programming environment of the front-end interface. The Element-UI includes a plug-in library. The plug-in library includes a large number of components, forms, notifications, menus and other plug-ins. When the administrator is performing front-end development, the administrator can quickly build the front-end interface by calling the plug-in in the Element-UI.

[0057] However, as a general framework, Element-UI has a general style and cannot meet the personalized style requirements of various websites. At the same time, as a general framework, its functions only include general functions, which cannot meet the personalized functional requirements of various websites. Therefore, in the personalized needs of various websites, the general framework Element-UI has the problem of low efficiency. For example, the scroll bar style in the table of the website cannot be customized. The administrator will not be able to adjust the scroll bar style according to the style requirements of the website. To address this issue, the administrator can modify the plug-in for the scroll bar style every time the scroll bar style of the table is involved. However, this has the problem of low efficiency in the use of the plug-in. Therefore, for this plug-in, repackaging it according to the personalized needs of the website can effectively improve the efficiency of the use of the plug-in.

[0058] This application proposes a plug-in configuration method that optimizes the first plug-in on the basis of the existing Element-UI to improve the efficiency of the first plug-in in the process of website personalization. When the first plug-in is an original plug-in in the Element-UI, such as a table plug-in, the server can add at least one first attribute to the first plug-in. The first attribute can be a scroll bar style attribute, an empty value text attribute, a scroll bar update attribute, etc. The server can configure the default parameters of each first attribute according to the first attribute. After completing the above modification, the server can also package the first plug-in. When the first plug-in is an original plug-in in the Element-UI, the server can also modify the second attribute in the first plug-in according to the demand. Among them, the second attribute is the original attribute in the first plug-in. For example, when the first plug-in is a dialog plug-in and the second attribute is a page mask, the server can modify the default parameter of the second attribute to the default mask. In this application, the server optimizes the plug-in function and adjusts the attributes by adding plug-in attributes, modifying the configuration of the plug-in, and repackaging the plug-in, so that the plug-in can meet the needs of asset management technology network construction.

[0059] The technical solution of the present application is described in detail with specific embodiments below. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0060] Figure 1 A schematic diagram of an application scenario of a plug-in provided by an embodiment of the present application is shown. As shown in the figure, before installing the UI framework of Element-ui, the administrator needs to install the development environment of Vue on the server. Among them, Vue is a progressive JavaScript framework for building front-end interfaces. The Vue framework can be applied layer by layer from the bottom up during the construction of the front-end interface. The core library of Vue only focuses on the view layer. Therefore, Vue is easy to integrate with third-party libraries or existing projects during use. After the administrator has installed the development environment of Vue, the administrator can import the plug-in library of Element-ui in the development environment. The plug-in library of Element-ui can be a plug-in library after the administrator completes the configuration according to the plug-in configuration method of the following embodiment. After the import is completed, the administrator can call the plug-in during the development process of the front-end interface to achieve rapid construction of the front-end interface.

[0061] During use, after the server has set up the operating environment, it can create a business project in the operating environment. The server installs the UI framework in the corresponding business project. The operating instruction may include:

[0062] npm i git+http: / / jcode.cbpmgt.com / git / element-ui.git#components

[0063] {

[0064] “@jr.jd / element-ui-jd”:

[0065] "git+http: / / jcode.cbpmgt.com / git / element-ui.git#components",

[0066] }

[0067] Considering that in the following plug-in configuration method, the UI framework will be frequently changed as the plug-in is updated, therefore, when the UI framework is updated, the server can use the following instructions to synchronize the dependencies in the business project:

[0068] npm update@jr.jd / element-ui-jd

[0069] Moreover, when the business project is stable and npm publish is completed, the server can smoothly switch to a specific npm version.

[0070] In this application, the server is used as the execution subject to execute the plug-in configuration method of the following embodiment. Specifically, the execution subject can be a hardware device of the server, or a software application that implements the following embodiment in the server, or a computer-readable storage medium installed with the software application that implements the following embodiment, or a code that implements the software application of the following embodiment.

[0071] Figure 2 A flow chart of a plug-in configuration method provided by an embodiment of the present application is shown. Figure 1 Based on the embodiment shown, Figure 2 As shown, with the server as the execution subject, the method of this embodiment may include the following steps:

[0072] S101. Add at least one first attribute to a first plug-in, the first plug-in is used to build a website function in a website, the first attribute is used to increase the function of the first plug-in, the first attribute includes at least one attribute parameter, and each attribute parameter is used to implement a function of the first plug-in.

[0073] In this embodiment, the server may obtain personalized demand information for website construction. The server may determine the first plug-in that needs to be optimized based on the personalized demand information. The server may determine at least one first attribute that needs to be added to the first plug-in based on the demand information of the personalized website. The first attribute is used to add a new function to the first plug-in. The first attribute may include at least one attribute parameter. Each attribute parameter may correspond to a function of the first attribute.

[0074] In one example, when the first plug-in is a table, the server may add at least one of the first attributes, such as a scroll bar style barBottomStyle attribute, an empty value text emptyCellText attribute, and a scroll bar update elscrollbar attribute, to the first plug-in.

[0075] The barBottomStyle attribute is used to define the scroll bar style of the table according to the scroll bar style in the style file. The barBottomStyle attribute may include multiple attribute parameters, each of which may correspond to a scroll bar style in the style file.

[0076] The emptyCellText property is used to output default text in the table when the value in the table is null or undefined. The default text can be "--". The "--" is the attribute parameter of the emptyCellText property. The value in the table can be the value between the table code "". Or, the value in the table can also be the value in a cell of the table code.

[0077] Among them, the elscrollbar attribute can include attribute parameters such as length and width. The elscrollbar attribute can call the update method therein to update the scroll bar. For example, the display interface can display content including 3 columns in a table. Assume that the width of each column in the table is fixed. When the table includes 5 columns, the scroll bar length is 60% of the table width. When the table content is updated to 8 columns, the scroll bar length needs to be updated to 37.5% of the table width. When the data in the table is asynchronous, elscrollbar can also call the update method.

[0078] In one example, the first plug-in can also be a method. The doLayoutScrollbar() method is used to synchronously update the scroll bar length when the table content is updated. The table plug-in can recalculate the scroll bar information of the table when the table content is updated. The new scroll bar information will be added to the elscrollbar attribute as an attribute parameter. The elscrollbar attribute implements the update of the scroll bar through the update method therein.

[0079] In another example, when the first plug-in is a selection box, the server can add a selection box active flax attribute to the first plug-in. The flax attribute can make the length and / or width of the selection box not fixed. During the selection box generation process, the server can dynamically adjust the length and / or width of the selection box according to the actual content of the selection box.

[0080] In another example, when the first plug-in is an input box Input, the server can add a focus event blur attribute to the first plug-in. The blur attribute is used to adjust the color of the input box according to the focus in the input box. For example, when the user keeps the focus in the input box input, the input box can be displayed in blue. Or, when the user moves the focus outside the input box, the input box can be displayed in yellow. Alternatively, the server can also modify the spaces that appear at the beginning and end of the text in the input box. The server can also add an input box active flax attribute to the first plug-in. The flax attribute can make the length and / or width of the input box not fixed. The server can dynamically adjust the length and / or width of the selection box according to the input text during the text input process of the input box.

[0081] In another example, when the first plug-in is a navigation bar navMenu, the server can add a scroll bar to the first plug-in so that a scroll bar is added to the submenu submenu. When the submenu contains a scroll bar, more submenu options can be displayed through the scroll bar without changing the size of the submenu. Alternatively, the server can also add a custom active custom-active attribute to the first plug-in. The custom-active attribute is used to determine whether the current submenu has a custom active style. The custom active style can be named is-active style.

[0082] In another example, when the first plug-in is a date picker datepick, the server can add a calendar display method input togger in the first plug-in. The user can switch the date by clicking datepick to select a suitable date.

[0083] In another example, when the first plug-in is a folding panel Collapse, the server can add "<slot name=‘arrow-msg’> " to define the folding and expanding of the text. At the same time, the server can also define the trigger of the folding panel as the arrow on the right side of the text.

[0084] In another example, when the first plug-in is a pop-up box Popover, the server can add a leave-delay attribute in the first plug-in to implement delayed display of the pop-up box. The pop-up box can be triggered by a mouseleave event. The mouseleave event is triggered when the mouse leaves the selected element. The delay time unit is milliseconds mu.

[0085] In another example, when the first plug-in is a tree control Tree, the server can add a button class name iconClassName attribute in the first plug-in. The iconClassName attribute is used to define the class class of the button icon of the tree data. Alternatively, the server can also add a double-click event @double-click in the first plug-in. The user can expand or collapse the tree control by double-clicking.

[0086] In another example, when the first plug-in is for upload, the server can add a file trigger before-trigger-file attribute in the first plug-in. The before-trigger-file attribute is used in conjunction with a judgment function to determine whether the parameter of the before-trigger-file attribute is true before the file upload box is called. When the parameter of the before-trigger-file attribute is true, the upload box of the file is opened.

[0087] In another example, when the first plug-in is a tab page, the server can add a default width attribute default-width to the first plug-in. When the parameter value of the default-width attribute is true, the width of the data bar corresponding to the tab is based on the width of the tab. Figure 3 The following are three schematic diagrams of top tabs. The three schematic diagrams are basic top tabs, borderless top tabs, and iconless top tabs. The properties of the top tab may include default-active and tabs-list properties. The default-active property is used to activate the tab item. Its parameter is a string. The tabs-list property includes the tab data in the top tab. Its parameter is a digital array.

[0088] The server can also set the border between the header and the text by adding the head border is-head-border attribute, the vertical alignment head-sub-position attribute, the head spacing is-head-bottom attribute and other attributes in the first plug-in. Figure 4 As shown, when the is-head-bottom attribute is false, the front-end interface can be displayed as a head without margins. When the is-head-border attribute is true, the front-end interface can be displayed as a head with a border. In addition, the attributes of the border can also include a default parameter for indicating that the body displays default content, a head parameter for indicating that the head displays default content, a head-title for indicating the actual content of the head, and a head-sub parameter for indicating a head submodule.

[0089] In addition, when the server selects the head-prepend attribute and the head-right attribute, the server can also obtain the following Figure 5 The head display effect shown. The head-prepend property can be used to determine whether the head component is inserted before the title. The head-right property can be used to determine whether the operation area on the right side of the head displays content.

[0090] In one example, the first plug-in may be an existing plug-in in the UI framework. The original plug-in already has a call interface in the UI framework. After adding a new attribute to the first plug-in, the server may repackage and create a new call interface to cover or replace the original call interface.

[0091] In another example, the first plug-in may also be a newly added plug-in that needs to be added to the UI framework. After being packaged, the newly added plug-in generates a new calling interface. The administrator can call the first plug-in by calling the new interface.

[0092] S102: modifying a default parameter of at least one second attribute in the first plug-in, where the second attribute is an original attribute in the first plug-in, the second attribute is used to implement a function of the first plug-in, and the default parameter is used to indicate a function implemented by the first plug-in when the first plug-in is directly called.

[0093] In this embodiment, the server can modify the original properties of the original plug-in in the UI framework according to the demand information of the asset management technology network construction. The server can optimize the function of the first plug-in by modifying the second property in the original plug-in.

[0094] In one example, when the first plug-in is a dialog box Dialog, the server can modify the default parameter of the modal-append-to-body attribute of the page in the first plug-in. The modal-append-to-body attribute of the page is the second attribute. After modification, the default parameter of the second attribute can be false. When the default parameter is false, the front-end page will be masked after the dialog box pops up.

[0095] In another example, when the first plug-in is a table, the server can set the width value of the scroll bar width attribute to be 1px larger than the original width. The widened scroll bar can be used to fix the white bar problem that occurs in some cases.

[0096] In another example, when the first plug-in is a cascading selector Cascader, the server may modify the native scroll bar of the Cascader to el-scrollbar.

[0097] S103: Pack the first plug-in to generate a functional interface of the website function.

[0098] In this embodiment, after the server obtains the second plug-in, the server packages the second plug-in. The user can call the packaged second plug-in after importing the UI framework. The server can implement the reduced packaging of the second plug-in through the instruction "npm run dist". Alternatively, the server can also use the instruction "npm run dist:all" to implement the overall packaging of the second plug-in. This packaging method can package all components of the second plug-in. The instruction "npm run dist:all" is the default instruction of the UI framework.

[0099] The plug-in configuration method provided in the present application can personalize the demand information of the website. The server determines the first plug-in that needs to be optimized based on the demand information. The server can determine at least one first attribute of each first plug-in. The first attribute is used to add a new function configuration for the first plug-in. The server can modify the original attributes of the original plug-in in the UI framework. The server can optimize the function of the first plug-in by modifying the second attribute in the original plug-in. The server can continue to configure default parameters for each first attribute based on the demand information of the asset management technology network construction. When the server obtains the second plug-in, the server packages the second plug-in. The user can call the packaged second plug-in after importing the UI framework. In the present application, by adding at least one first attribute to the first plug-in or modifying the second attribute in the first plug-in, the function in the first plug-in is updated, so that the function of the first plug-in is enriched to meet more needs when building a personalized website, thereby improving the efficiency of each plug-in when building the website.

[0100] Based on the above embodiment, the specific process of the plug-in configuration method of the present application in the packaging process may include:

[0101] Step 1: Determine the name of the first plug-in.

[0102] In this step, the server can determine the first plug-in name according to the plug-in name input by the user. The server can add the relationship mapping between the first plug-in name and the key value component in the ". / components-jt2.json" file. At the same time, the first plug-in name should be different from the original plug-in name in the UI framework to avoid plug-in conflicts caused by the same name.

[0103] Before obtaining the name of the first plug-in, the administrator takes high versatility as the naming principle of the plug-in name during the naming process. In the naming process, the plug-in is named in a way that forms a general consensus, and the specific business is not used as the starting point for the naming of the plug-in. In the naming process, the naming requirements mainly include the naming abstraction, naming semantics, naming form, naming method and other requirements.

[0104] The abstract naming is used to indicate that the plug-in name needs to be abstract. The abstract naming can make the plug-in name independent of the business, thereby reducing the coupling between the business and the plug-in. For each plug-in, an icon can also be included in the UI framework. The icon can be Figure 6 As shown. An icon is used to uniquely identify a plug-in. Therefore, the name can be defined only from the perspective of the diagram. For example: the plug-in scissors.svg, its literal translation means scissors, and its icon can be a pair of scissors. Its business scenario is to delete edges in the relationship graph. In order to achieve decoupling, the plug-in cannot be named with names directly related to the business, such as remove-edge.svg. In order to ensure abstraction, names with subordinate relationships should be avoided in the naming process. For example, in the names of sidebar-heart.svg, top-logo.svg, detail-settings.svg, etc., sidebar-, top-, etc. represent locations, and detail- can represent a certain detail module.

[0105] Among them, naming semantics is used to distinguish the functions of the plug-ins corresponding to each icon according to the pronunciation of the plug-in name when there are multiple similar icons. Therefore, in the naming process, the name needs to be defined based on the icon status, and the use of digital naming methods such as xxx1.svg, xxx2.svg, etc. is prohibited.

[0106] The naming format should be unified in the form of a middle dash, for example, shopping-cart.svg.

[0107] The naming method can include the icon and name it according to [icon]-[category]-[hollow solid state].svg, for example, shopping-cart-solid. In this name, shopping-cart is the icon, the category is empty, and solid is the solid state. It should be noted that in this naming process, the default is that the hollow state is used when no state is added.

[0108] Step 2: Add a directory with the same name as the first plug-in under the plug-in directory of " / packages / jd" in the compilation environment. The content of this plug-in can be determined by referring to other plug-ins.

[0109] Step 3: Add the style file of the first plugin to the plugin style directory of " / packages / theme-chalk / src / jd". The suffix of the style file is "*.scss".

[0110] Step 4. Add plugin documentation in the " / examples / docs / zh-CN / jt2 / " directory

[0111] Step 5. Add the plug-in styles required for plug-in document display in the " / examples / demo-styles / jt2 / " directory. This part of the plug-in style is only used for display and will not be packaged into dist.

[0112] Step 6. In the " / examples / nav.config.json" directory, add the newly added plug-in to the online display sidebar menu configuration.

[0113] Step 7. Use the command "npm run dist" to package the plug-in project. After packaging, the "src / index.js" file will be updated and replaced with the latest components. Figure 6 Each icon shown in the figure corresponds to a plug-in. Users can copy and call the plug-in by clicking the copy button on the icon. When the server does not add the icon to the project, its use effect can be as follows: Figure 7 The basic usage is shown below. After the icon is set up in the server, its usage effect can be as follows Figure 7 Set the icon as shown in the figure.

[0114] Figure 8 A schematic diagram of the structure of a plug-in configuration device provided by an embodiment of the present application is shown. Figure 8 As shown, the plug-in configuration device 10 of this embodiment is used to implement the operation corresponding to the server in any of the above method embodiments. The plug-in configuration device 10 of this embodiment includes:

[0115] A new module 11 is added, which is used to add at least one first attribute in the first plug-in, the first plug-in is used to build a website function in the website, the first attribute is used to increase the function of the first plug-in, the first attribute includes at least one attribute parameter, and each attribute parameter is used to implement a function of the first plug-in;

[0116] The packaging module 12 is used to package the first plug-in to generate a functional interface of the website function.

[0117] In one example, the first plug-in is an existing plug-in or a newly added plug-in. When the first plug-in is an existing plug-in, the first plug-in includes at least one second attribute.

[0118] In one example, the plug-in configuration device 10 may further include:

[0119] The modification module 13 is used to modify the default parameters of at least one second attribute in the first plug-in, where the second attribute is an original attribute in the first plug-in.

[0120] In one example, when the first plug-in is a table, a new module 11 is added, including at least one of the following:

[0121] Added scroll bar style attribute, which is used to define the scroll bar style of the table according to the scroll bar style in the style file;

[0122] Added the empty value text attribute, which is used to output default text in the table when the value of the table is empty or undefined;

[0123] Added scroll bar update property, which is used to update the scroll bar length synchronously when the table content is updated.

[0124] In one example, when the first plug-in is a selection box, a new module 11 is added, including:

[0125] Add active properties to the selection box. The active properties are used to dynamically adjust the length and / or width of the selection box based on the content added to the selection box.

[0126] In one example, when the first plug-in is an input box, a new module 11 is added, including:

[0127] Added focus event attribute, which is used to adjust the color of the input box according to the focus in the input box.

[0128] In one example, when the first plug-in is a dialog box, the modification module 13 includes:

[0129] The default parameter of the page property of the modification dialog box is the default mask. When the default parameter of the page property is the default mask, the dialog box plug-in is used to mask the front-end page when the dialog box pops up.

[0130] The plug-in configuration device 10 provided in the embodiment of the present application can execute the above method embodiment. Its specific implementation principle and technical effects can be found in the above method embodiment, and this embodiment will not be repeated here.

[0131] Fig. 9 FIG. 1 shows a hardware structure diagram of a server provided in an embodiment of the present application. Fig. 9 As shown, the server 20 is used to implement the operations corresponding to the server in any of the above method embodiments. The server 20 of this embodiment may include: a memory 21 and a processor 22.

[0132] The memory 21 is used to store computer programs. The memory 21 may include a high-speed random access memory (RAM), and may also include a non-volatile memory (NVM), such as at least one disk memory, and may also be a USB flash drive, a mobile hard disk, a read-only memory, a disk or an optical disk.

[0133] The processor 22 is used to execute the computer program stored in the memory to implement the plug-in configuration method in the above embodiment. For details, please refer to the relevant description in the above method embodiment. The processor 22 can be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), etc. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. The steps of the method disclosed in the invention can be directly embodied as being executed by a hardware processor, or can be executed by a combination of hardware and software modules in the processor.

[0134] Optionally, the memory 21 may be independent or integrated with the processor 22 .

[0135] When the memory 21 is a device independent of the processor 22, the server 20 may further include a bus 23. The bus 23 is used to connect the memory 21 and the processor 22. The bus 23 may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, and the like. For ease of representation, the bus in the drawings of the present application is not limited to only one bus or one type of bus.

[0136] The server provided in this embodiment can be used to execute the above-mentioned plug-in configuration method, and its implementation method and technical effect are similar, which will not be repeated in this embodiment.

[0137] The present application also provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, it is used to implement the methods provided in the various embodiments described above.

[0138] Among them, the computer-readable storage medium can be a computer storage medium or a communication medium. The communication medium includes any medium that facilitates the transmission of a computer program from one place to another. The computer storage medium can be any available medium that can be accessed by a general-purpose or special-purpose computer. For example, a computer-readable storage medium is coupled to a processor so that the processor can read information from the computer-readable storage medium and write information to the computer-readable storage medium. Of course, the computer-readable storage medium can also be a component of the processor. The processor and the computer-readable storage medium can be located in an application-specific integrated circuit (ASIC). In addition, the ASIC can be located in a user device. Of course, the processor and the computer-readable storage medium can also exist in a communication device as discrete components.

[0139] Specifically, the computer-readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk. The storage medium can be any available medium that can be accessed by a general or special-purpose computer.

[0140] The present application also provides a computer program product, which includes a computer program stored in a computer-readable storage medium. At least one processor of a device can read the computer program from the computer-readable storage medium, and at least one processor executes the computer program so that the device implements the methods provided in the various embodiments described above.

[0141] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of modules is only a logical function division. There may be other division methods in actual implementation. For example, multiple modules can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or modules, which can be electrical, mechanical or other forms.

[0142] Among them, each module can be physically separated, for example, installed in different locations of a device, or installed on different devices, or distributed on multiple network units, or distributed on multiple processors. Each module can also be integrated together, for example, installed in the same device, or integrated in a set of codes. Each module can exist in the form of hardware, or can also exist in the form of software, or can also be implemented in the form of software plus hardware. The present application can select some or all of the modules according to actual needs to achieve the purpose of the present embodiment.

[0143] When each module is implemented as an integrated module in the form of a software function module, it can be stored in a computer-readable storage medium. The above-mentioned software function module is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor to perform some steps of the methods of each embodiment of the present application.

[0144] It should be understood that, although the various steps in the flowcharts in the above-described embodiments are sequentially displayed according to the indications of the arrows, these steps are not necessarily executed sequentially in the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps is not strictly limited in order, and they can be executed in other orders. Moreover, at least a portion of the steps in the figure may include a plurality of sub-steps or a plurality of stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily to be carried out sequentially, but can be executed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0145] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the above embodiments, a person of ordinary skill in the art should understand that the technical solutions described in the above embodiments can still be modified, or some or all of the technical features can be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A plug-in configuration method, characterized in that: The method comprises: Adding at least one first attribute to a first plug-in, the first plug-in is used to construct a website function in the website, the first attribute is used to increase the function of the first plug-in, the first attribute includes at least one attribute parameter, each of the attribute parameters is used to implement a function of the first plug-in; the first plug-in is an existing plug-in or a newly added plug-in; Packaging the first plug-in to generate a functional interface of the website function; When the first plug-in is a pop-up box plug-in, adding at least one first attribute in the first plug-in includes: adding a leave-delay attribute in the first plug-in, wherein the leave-delay attribute is used to implement delayed display of the pop-up box; When the first plug-in is an existing plug-in, the method further includes: Modify a default parameter of at least one second attribute in the first plug-in, where the second attribute is an original attribute in the first plug-in, the second attribute is used to implement a function of the first plug-in, and the default parameter is used to indicate the function implemented by the first plug-in when the first plug-in is directly called.

2. The method according to claim 1, characterized in that When the first plug-in is a table plug-in, adding at least one first attribute in the first plug-in includes at least one of the following: Add a scroll bar style attribute, wherein the scroll bar style attribute is used to define the scroll bar style of the table according to the scroll bar style in the style file, and the attribute parameter is used to indicate the scroll bar style; Adding a null value text attribute, wherein the null value text attribute is used to output a default text in the table when the value of the table is null or undefined, and the attribute parameter is used to refer to the default text style; A scroll bar update attribute is added, wherein the scroll bar update attribute is used to synchronously update the scroll bar length when the table content is updated, and the attribute parameter is used to indicate whether the scroll bar update attribute is enabled.

3. The method according to claim 1, characterized in that: When the first plug-in is a selection box plug-in, adding at least one first attribute in the first plug-in includes: Add an active attribute of the selection box, the active attribute is used to dynamically adjust the length and / or width of the selection box according to the added content of the selection box, and the attribute parameter is used to indicate whether the active attribute of the selection box is enabled.

4. The method according to claim 1, characterized in that: When the first plug-in is an input box plug-in, adding at least one first attribute in the first plug-in includes: A focus event attribute is added, wherein the focus event attribute is used to adjust the color of the input box according to the focus in the input box, and the attribute parameter is used to indicate the color of the input box.

5. The method according to claim 1, characterized in that When the first plug-in is a dialog plug-in, modifying a default parameter of at least one second attribute in the first plug-in includes: The default parameter of the dialog plug-in is modified to be a default mask, so that the page of the website is masked when the dialog box pops up on the website.

6. A plug-in configuration device, characterized in that: The device comprises: A new module is used to add at least one first attribute to a first plug-in, the first plug-in is used to build a website function in a website, the first attribute is used to increase the function of the first plug-in, the first attribute includes at least one attribute parameter, each of the attribute parameters is used to implement a function of the first plug-in; the first plug-in is an existing plug-in or a new plug-in; A packaging module, used for packaging the first plug-in to generate a functional interface of the website function; When the first plug-in is a pop-up box plug-in, the newly added module is specifically used to add a leave-delay attribute in the first plug-in, and the leave-delay attribute is used to implement delayed display of the pop-up box; A modification module is used to modify the default parameters of at least one second attribute in the first plug-in, where the second attribute is an original attribute in the first plug-in, the second attribute is used to implement the function of the first plug-in, and the default parameter is used to indicate the function implemented by the first plug-in when the first plug-in is directly called.

7. A server, characterized in that: The server includes: a memory and a processor; The memory is used to store a computer program; the processor is used to implement the plug-in configuration method according to any one of claims 1 to 5 according to the computer program stored in the memory.

8. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it is used to implement the plug-in configuration method according to any one of claims 1 to 5.

9. A computer program product, characterized in that The computer program product comprises a computer program, characterized in that when the computer program is executed by a processor, the plug-in configuration method according to any one of claims 1 to 5 is implemented.

Images