CN113342417A - 插件配置方法、装置和设备 - Google Patents
插件配置方法、装置和设备 Download PDFInfo
- Publication number
- CN113342417A CN113342417A CN202110663622.2A CN202110663622A CN113342417A CN 113342417 A CN113342417 A CN 113342417A CN 202110663622 A CN202110663622 A CN 202110663622A CN 113342417 A CN113342417 A CN 113342417A
- Authority
- CN
- China
- Prior art keywords
- plug
- attribute
- server
- parameter
- function
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
- G06F9/4451—User profiles; Roaming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
Abstract
本申请提供一种插件配置方法、装置和设备。该方法包括:服务器确定需要优化的第一插件。服务器可以根据该第一插件,确定每一第一插件需要增加的至少一个第一属性。该第一属性用于为该第一插件新增功能配置。服务器可以还可以通过修改该原有插件中的第二属性,实现该第一插件的功能优化。服务器可以为每一第一属性配置默认参数,并得到第二插件。该第二插件为完成第一属性的配置后的第一插件。当服务器得到第二插件后,服务器打包该第二插件。用户可以在导入该UI框架后,调用该打包后的第二插件。本申请的方法,增加了UI框架中插件的功能,使该插件可以满足资管科技网络构建的需求。
Description
技术领域
本申请涉及计算机领域,尤其涉及一种插件配置方法、装置和设备。
背景技术
终端技术的不断发展使终端成为用户娱乐办公的重要工具。在终端上,用户需要通过前端界面实现与终端之间的交互。其中,前端开发的技术可以包括html5、css3、javascript、Vue等技术。在使用上述前端开发技术进行前端开发时,管理员通常需要掌握大量前端开发技术的使用方法,并根据前端界面编写大量的程序代码。
为了提高前端开发的效率,现有技术中通过使用UI框架,实现了将UI组件的直接导入前端页面,极大的提高了管理员在前端页面编程过程中的编程效率。目前常用的UI框架可以包括Element-UI。管理员可以在将该Element-UI的UI框架导入前端界面的编程环境后,直接在编程过程中调用该Element-UI中的插件,实现前端界面的快速搭建。
然而,目前的Element-UI中的插件,存在使用效率低问题。
发明内容
本申请提供一种插件配置方法、装置和设备,用以解决目前的Element-UI中的插件,存在使用效率低的问题。
第一方面,本申请提供一种插件配置方法,包括:
在第一插件中增加至少一个第一属性,所述第一插件用于在网站中构建网站功能,所述第一属性用于增加所述第一插件的功能,所述第一属性中包括至少一个属性参数,每一所述属性参数用于实现所述第一插件的一种功能;
打包所述第一插件,以生成所述网站功能的功能接口。
可选地,所述第一插件为原有插件或者新增插件,当所述第一插件为原有插件时,所述第一插件中包括至少一个第二属性。
可选地,当所述第一插件为原有插件时,所述方法,还包括:
在所述第一插件中修改至少一个第二属性的默认参数,所述第二属性为所述第一插件中原有的属性,所述第二属性用于实现所述第一插件的功能,所述默认参数用于指示直接调用所述第一插件时所述第一插件实现的功能。
可选地,当所述第一插件为表格插件时,所述在第一插件中增加至少一个第一属性,包括以下至少一种:
增加滚动条样式属性,所述滚动条样式属性用于根据样式文件中的滚动条样式定义所述表格的滚动条样式,所述属性参数用于指示所述滚动条样式;
增加空值文本属性,所述空值文本属性用于在所述表格的值为空或者未定义时,在所述表格中输出默认文本,所述属性参数用于是指所述默认文本样式;
增加滚动条更新属性,所述滚动条更新属性用于在所述表格内容更新时同步更新所述滚动条长度,所述属性参数用于指示所述滚动条更新属性是否启用。
可选地,当所述第一插件为选择框插件时,所述在第一插件中增加至少一个第一属性,包括:
增加选择框活动属性,所述活动属性用于根据所述选择框的添加内容,动态调整所述选择框的长度和/或宽度,所述属性参数用于指示所述选择框活动属性是否启用。
可选地,当所述第一插件为输入框插件时,所述在第一插件中增加至少一个第一属性,包括:
增加焦点事件属性,所述焦点事件属性用于根据所述输入框中的焦点调整所述输入框的颜色,所述属性参数用于指示所述输入框的所述颜色。
可选地,当所述第一插件为对话框插件时,所述在所述第一插件中修改至少一个第二属性的默认参数,包括:
修改所述对话框插件的默认参数为默认遮罩,以使所述网站在弹出对话框时所述网站的页面被遮罩。
第二方面,本申请提供一种插件配置装置,包括:
新增模块,用于在第一插件中增加至少一个第一属性,所述第一插件用于在网站中构建网站功能,所述第一属性用于增加所述第一插件的功能,所述第一属性中包括至少一个属性参数,每一所述属性参数用于实现所述第一插件的一种功能;
打包模块,用于打包所述第一插件,以生成所述网站功能的功能接口。
可选地,所述第一插件为原有插件或者新增插件,当所述第一插件为原有插件时,所述第一插件中包括至少一个第二属性。
可选地,当所述第一插件为原有插件时,所述装置,还包括:
修改模块,用于在所述第一插件中修改至少一个第二属性的默认参数,所述第二属性为所述第一插件中原有的属性,所述第二属性用于实现所述第一插件的功能,所述默认参数用于指示直接调用所述第一插件时所述第一插件实现的功能。
可选地,当所述第一插件为表格时,所述新增模块,包括以下至少一种:
增加滚动条样式属性,所述滚动条样式属性用于根据样式文件中的滚动条样式定义所述表格的滚动条样式,所述属性参数用于指示所述滚动条样式;
增加空值文本属性,所述空值文本属性用于在所述表格的值为空或者未定义时,在所述表格中输出默认文本,所述属性参数用于是指所述默认文本样式;
增加滚动条更新属性,所述滚动条更新属性用于在所述表格内容更新时同步更新所述滚动条长度,所述属性参数用于指示所述滚动条更新属性是否启用。
可选地,当所述第一插件为选择框时,所述新增模块,包括:
增加选择框活动属性,所述活动属性用于根据所述选择框的添加内容,动态调整所述选择框的长度和/或宽度,所述属性参数用于指示所述选择框活动属性是否启用。
可选地,当所述第一插件为输入框时,所述新增模块,包括:
增加焦点事件属性,所述焦点事件属性用于根据所述输入框中的焦点调整所述输入框的颜色,所述属性参数用于指示所述输入框的所述颜色。
可选地,当所述第一插件为对话框时,所述修改模块,包括:
修改所述对话框插件的默认参数为默认遮罩,以使所述网站在弹出对话框时所述网站的页面被遮罩。
第三方面,本申请提供一种服务器,包括:存储器和处理器;存储器用于存储程序指令;处理器用于调用存储器中的程序指令执行第一方面及第一方面任一种可能的设计中的插件配置方法。
第四方面,本申请提供一种可读存储介质,可读存储介质中存储有执行指令,当服务器的至少一个处理器执行该执行指令时,服务器执行第一方面及第一方面任一种可能的设计中的插件配置方法。
第五方面,本申请提供一种计算机程序产品,所述计算机程序产品包括计算机程序,当服务器的至少一个处理器执行该执行指令时,服务器执行第一方面及第一方面任一种可能的设计中的插件配置方法。
本申请提供的插件配置方法、装置和设备,通过确定需要优化的第一插件;可以根据该第一插件,确定每一第一插件需要增加的至少一个第一属性;该第一属性用于为该第一插件新增功能配置;可以还可以通过修改该原有插件中的第二属性,实现该第一插件的功能优化;可以为每一第一属性配置默认参数,并得到第二插件;该第二插件为完成第一属性的配置后的第一插件;当得到第二插件后,打包该第二插件;用户可以在导入该UI框架后,调用该打包后的第二插件手段,实现增加了UI框架中插件的功能,使该插件可以满足资管科技网络构建的需求的效果。
附图说明
为了更清楚地说明本申请或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本申请一实施例提供的一种插件的应用场景示意图;
图2为本申请一实施例提供的一种插件配置方法的流程图;
图3为本申请一实施例提供的一种前端页面示意图;
图4为本申请一实施例提供的一种前端页面示意图;
图5为本申请一实施例提供的一种前端页面示意图;
图6为本申请一实施例提供的一种图标示意图;
图7为本申请一实施例提供的一种前端页面示意图;
图8为本申请一实施例提供的一种服务器的硬件结构示意图;
图9为本申请一实施例提供的服务器的硬件结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚,下面将结合本申请中的附图,对本申请中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。
此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
终端技术的不断发展使终端成为用户娱乐办公的重要工具。在终端上,用户需要通过前端界面实现与终端之间的交互。其中,前端开发的技术可以包括html5、css3、javascript、VueJs等技术。在使用上述前端开发技术进行前端开发时,管理员通常需要掌握大量前端开发技术的使用方法,并根据前端界面编写大量的程序代码。
为了提高前端开发的效率,现有技术中通过使用UI框架,实现了将UI组件的直接导入前端页面,极大的提高了管理员在前端页面编程过程中的编程效率。目前常用的UI框架可以包括Element-UI。其中,Element-UI是一款专门提供给开发者、设计师和产品经理等多种职业使用的网站快速成型工具。管理员可以在将该Element-UI的UI框架导入前端界面的编程环境。该Element-UI中包括插件库。该插件库中包括大量的组件、表单、通知、菜单等插件。当管理员在进行前端开发时,管理员可以通过调用该Element-UI中的插件,实现前端界面的快速搭建。
然而,Element-UI作为一个通用型框架,其样式为通用样式,无法满足各个网站的个性化样式需求。同时,作为一个通用型框架,其功能仅包括通用的功能,无法满足各类网站的个性化功能需求。因此,在个各个网站的个性化需求中,通用型框架Element-UI存在使用效率低的问题。例如,网站的表格中滚动条式样无法自定义。管理员将无法根据网站的样式需求对该滚动条样式进行调整。针对这一问题,管理员可以在每次涉及表格的滚动条式样时,针对该滚动条样式修改其插件。然而,这样存在插件的使用效率低的问题。因此,针对该插件,根据网站的个性化需求进行重新打包,可以有效提高插件的使用效率。
本申请提出了一种插件配置方法正是通过在现有Element-UI的基础上,对第一插件进行优化,实现第一插件在网站个性化搭建过程中使用效率的提高。当第一插件为该Element-UI中的原有插件时,例如表格插件,服务器可以向该第一插件中增加至少一个第一属性。该第一属性可以为滚动条样式属性、空值文本属性、滚动条更新属性等。服务器可以根据该第一属性,配置每一第一属性的默认参数。当完成上述修改后,服务器还可以打包该第一插件。当该第一插件位Element-UI中的原有插件时,服务器还可以根据需求修改该第一插件中的第二属性。其中,第二属性为该第一插件中的原有属性。例如,当第一插件为对话框插件,第二属性为页面遮罩时,服务器可以修改该第二属性的默认参数为默认遮罩。本申请中,服务器通过增加插件的属性、修改插件的配置、重新封装插件等操作,实现插件功能的优化和属性的调整,使该插件可以满足资管科技网络构建的需求。
下面以具体地实施例对本申请的技术方案进行详细说明。下面这几个具体的实施例可以相互结合,对于相同或相似的概念或过程可能在某些实施例不再赘述。
图1示出了本申请一实施例提供的一种插件的应用场景示意图。如图所示,在安装Element-ui的UI框架之前,管理员需要在服务器上安装Vue的开发环境。其中,Vue是一套用于构建前端界面的渐进式JavaScript框架。Vue框架可以在前端界面的构建过程中实现自底向上逐层应用。Vue的核心库只关注视图层。因此,Vue在使用过程中便于与第三方库或既有项目整合。当管理员安装完成Vue的开发环境后,管理员可以在该开发环境中导入Element-ui的插件库。该Element-ui的插件库可以为管理员根据如下实施例的插件配置方法完成配置后的插件库。当完成导入后,管理员即可在前端界面的开发过程中调用该插件,实现前端界面的快速搭建。
在使用过程中,服务器在搭建好运行环境之后,可以在该运行环境中创建业务项目。服务器在对应的业务项目中安装UI框架。该运行指令可以包括:
npm i git+http://jcode.cbpmgt.com/git/element-ui.git#components
{
“@jr.jd/element-ui-jd”:
“git+http://jcode.cbpmgt.com/git/element-ui.git#components”,
}
考虑到在下述插件配置方法中,UI框架会随着插件的更新被频繁改动,因此,当UI框架有更新时,服务器可以通过使用下述指令实现业务项目中依赖的同步更新:
npm update@jr.jd/element-ui-jd
并且,当业务项目稳定,且npm publish后,服务器还可以平滑切换到具体的npm版本。
本申请中,以服务器为执行主体,执行如下实施例的插件配置方法。具体地,该执行主体可以为服务器的硬件装置,或者为服务器中实现下述实施例的软件应用,或者为安装有实现下述实施例的软件应用的计算机可读存储介质,或者为实现下述实施例的软件应用的代码。
图2示出了本申请一实施例提供的一种插件配置方法的流程图。在图1所示实施例的基础上,如图2所示,以服务器为执行主体,本实施例的方法可以包括如下步骤:
S101、在第一插件中增加至少一个第一属性,第一插件用于在网站中构建网站功能,第一属性用于增加第一插件的功能,第一属性中包括至少一个属性参数,每一属性参数用于实现第一插件的一种功能。
本实施例中,服务器可以网站构建的个性化的需求信息。服务器根据该个性化需求信息,确定需要优化的第一插件。服务器可以根据该个性化网站的需求信息,确定第一插件中需要添加的的至少一个第一属性。该第一属性用于为该第一插件增加新的功能。其中,第一属性中可以包括至少一个属性参数。每一属性参数可以对应于该第一属性的一种功能。
一种示例中,当第一插件为表格table时,服务器可以在第一插件中增加滚动条样式barBottomStyle属性、空值文本emptyCellText属性和滚动条更新elscrollbar属性等第一属性中的至少一个。
其中,barBottomStyle属性用于根据样式文件中的滚动条样式定义表格的滚动条样式。其中,该barBottomStyle属性可以包括多个属性参数,每一属性参数可以对应于样式文件中的一种滚动条样式。
其中,emptyCellText属性用于在表格table中的值为空null或者未定义undefined时,在表格中输出默认文本。该默认文本可以为“--”。该“--”即为该emptyCellText属性的属性参数。其中,table中的值可以为在该表格代码“<td></td>”之间的值。或者,该table中的值还可以为在该表格代码的一个cell中的值。
其中,elscrollbar属性中可以包括长度、宽度等属性参数。elscrollbar属性可以调用其中的update方法,实现该滚动条的更新。例如,显示界面上可以显示内容包括table中的3列。假设该table中每一列的宽度固定。当table中包括5列时,滚动条长度为该table宽度的60%。当table的内容更新为8列时,滚动条长度需要更新为该table宽度的37.5%。table中数据是异步时,elscrollbar也可以调用update方法。
一种示例中,第一插件还可以为方法。doLayoutScrollbar()方法用于在表格table内容更新时同步更新滚动条长度。该表格插件可以在table内容更新时,重新计算该table的滚动条信息。新的滚动条信息将作为属性参数,被添加到elscrollbar属性中。该elscrollbar属性通过其中的update方法,实现该滚动条的更新。
另一种示例中,当第一插件为选择框时,服务器可以在该第一插件中添加选择框活动flax属性。该flax属性可以使该选择框的长度和/或宽度不被固定。在该选择框生成过程中,服务器可以根据该选择框中的实际内容,动态调整选择框的长度和/或宽度。
再一种示例中,当第一插件为输入框Input时,服务器可以在该第一插件中添加焦点事件blur属性。该blur属性用于根据输入框中的焦点调整输入框的颜色。例如,当用户将焦点停留在该输入框input中时,该输入框可以显示为蓝色。或者,当用户将焦点移动到该输入框外吧,该输入框可以显示为黄色。或者,服务器还可以修改输入框中出现在文字首尾的空格。服务器还可以在该第一插件中添加输入框活动flax属性。该flax属性可以使该输入框的长度和/或宽度不固定。服务器可以在该输入框的文本输入过程中,根据输入的文本动态调整选择框的长度和/或宽度。
又一种示例中,当第一插件为导航栏navMenu时,服务器可以在该第一插件中添加滚动条,以使子菜单submenu中增加滚动条。当该子菜单包含滚动条时,可以在子菜单大小不变的情况下,通过滚动条展示更多的子菜单选项。或者,服务器还可以在该第一插件中增加自定义活动custom-active属性。该custom-active属性用于判断当前子菜单的是否具有自定义活动样式。该自定义活动样式可以命名为is-active样式。
又一种示例中,当第一插件为日期选择器datepick时,服务器可以在该第一插件中增加日历显示方法input togger。用户可以通过点击datepick,实现日期的切换,以选择合适的日期。
又一种示例中,当第一插件为折叠面板Collapse时,服务器可以在该第一插件的代码中增加“<slot name=‘arrow-msg’></slot>”,以实现对文字收起和展开的定义。同时,服务器还可以定义该折叠面板的触发为文字右侧的箭头。
又一种示例中,当第一插件为弹出框Popover时,服务器可以在第一插件中增加leave-delay属性,实现弹出框的延迟显示。其中该弹出框的触发方式可以为mouseleave事件。其中,mouseleave事件在鼠标离开被选中的元素时触发。其中,延迟的时间单位为毫秒mu。
又一种示例中,当第一插件为树形控件Tree时,服务器可以在第一插件中增加按钮类别名称iconClassName属性。该iconClassName属性用于定义树形数据的按钮icon的类别class。或者,服务器还可以在第一插件中增加双击事件@double-click。用户可以通过双击实现该树形控件的展开或者收拢。
又一种示例中,当第一插件为上传Upload时,服务器可以在第一插件中增加文件触发before-trigger-file属性。该before-trigger-file属性与判断函数配合使用,用于在文件的上传框调用前判断该before-trigger-file属性的参数是否为真true。当该before-trigger-file属性的参数为true时,打开该文件的上传框。
又一种示例中,当第一插件为标签页Tabs时,服务器可以在第一插件中增加默认宽度属default-width性。当该default-width性的参数值为真true时,该标签tab对应数据条bar的宽度以tab的宽度为准。如图3所示为顶部标签页的三种示意图。该三种示意图分别为基础顶部标签页、无边框顶部标签页和无icon顶部标签页。该顶部标签页的属性可以包括default-active属性和tabs-list属性。其中,default-active属性用于激活tab项。其参数为一个字符串。其中,tabs-list属性中包括该顶部标签页中的标签数据。其参数为一个数字array。
服务器还可以通过在第一插件中增加头部边框is-head-border属性、垂直对齐head-sub-postion属性、头部间距is-head-bottom属性等属性实现该头部与正文之间边框的设置。例如,如图4所示,当is-head-bottom属性为false时,其前端界面可以显示为头部无边距。当is-head-border属性为true时,其前端界面可以显示为头部有边框。此外,该边框的属性还可以包括用于指示body显示默认内容的default参数、用于指示头部显示默认内容的head参数、用于指示头部实际内容的head-title、用于指示头部子模块的head-sub参数。
此外,当服务器选择head-prepend属性和head-right属性时,服务器还可以得到如图5所示的头部显示效果。其中,head-prepend属性可以用于确定头部组件是否在标题前插入。head-right属性可以用于确定头部右侧操作区域是否显示内容。
一种示例中,该第一插件可以为该UI框架中的原有插件。该原有插件在UI框架内已经存在调用接口。在向该第一插件中新增属性后,服务器可以通过重新打包,创建新的调用接口覆盖或者替换原调用接口。
另一种示例中,该第一插件还可以为需要在该UI框架中添加的新增插件。该新增插件在打包后,生成新的调用接口。管理员可以通过调用该新的接口,实现该第一插件的调用。
S102、在第一插件中修改至少一个第二属性的默认参数,第二属性为第一插件中原有的属性,第二属性用于实现第一插件的功能,默认参数用于指示直接调用第一插件时第一插件实现的功能。
本实施例中,服务器可以根据该资管科技网络构建的需求信息,对UI框架中原有插件的原有属性进行修改。服务器可以通过修改该原有插件中的第二属性,实现该第一插件的功能优化。
一种示例中,当第一插件为对话框Dialog时,服务器可以修改第一插件中页面modal-append-to-body属性的默认参数。其中,该页面modal-append-to-body属性即为第二属性。修改后该第二属性的默认参数可以为false。当该默认参数为false时,在弹出对话框后该前端页面将被遮罩。
另一种示例中,当第一插件为表格table时,服务器可以将该滚动条宽度属性的宽度值设置为在原有基础上加1px。该加宽的滚动条可以用于修复某些情况下出现的白条问题。
再一种示例中,当第一插件为级联选择器Cascader时,服务器可以将该Cascader的原生滚动条修改为el-scrollbar。
S103、打包第一插件,以生成网站功能的功能接口。
本实施例中,当服务器得到第二插件后,服务器打包该第二插件。用户可以在导入该UI框架后,调用该打包后的第二插件。其中,服务器可以通过指令“npm run dist”实现第二插件的缩减打包。或者,服务器还可以使用指令“npm run dist:all”实现第二插件的整体打包。该打包方式可以打包第二插件的所有components。其中,指令“npm run dist:all”为UI框架的默认指令。
本申请提供的插件配置方法,服务器可以个性化网站的需求信息。服务器根据该需求信息,确定需要优化的第一插件。服务器可以确定每一第一插件的至少一个第一属性。该第一属性用于为该第一插件新增功能配置。服务器可以对UI框架中原有插件的原有属性进行修改。服务器可以通过修改该原有插件中的第二属性,实现该第一插件的功能优化。服务器可以继续根据该资管科技网络构建的需求信息,为每一第一属性配置默认参数。当服务器得到第二插件后,服务器打包该第二插件。用户可以在导入该UI框架后,调用该打包后的第二插件。本申请中,通过在第一插件中增加至少一个第一属性或者在第一插件中修改第二属性,实现该第一插件中功能的更新,使第一插件的功能更加丰富,以满足个性化网站构建时的更多需求,从而提高各个插件在网站构建时的使用效率。
在上述实施例的基础上,本申请的插件配置方法在打包过程中的具体过程可以包括:
步骤1、确定第一插件名称。
本步骤中,服务器可以根据用户输入的插件名称确定第一插件名称。服务器可以在“./components-jt2.json”文件中增加第一插件名称与key value组件的关系映射。同时,该第一插件名称应与该UI框架中的原有插件名称不同,避免名称相同导致的插件冲突问题。
其中,获取该第一插件名称前,管理员在对该插件进行命名过程中,以通用性高作为该插件名称的命名原则。且在命名过程中,以形成普遍共识的方式对插件进行命名,不以具体业务作为该插件命名的出发点。在该命名过程中,命名的要求主要包括命名抽象、命名语义、命名形式、命名方式等几点要求。
其中,命名抽象用于指示插件名称需要具有抽象性。该抽象性命名可以使该插件名称脱离业务独立存在,从而降低业务与插件之间的耦合性。针对每一插件,在该UI框架中还可以包括一个图标。该图标可以如图6所示。一个图标用于唯一标识一个插件。因此,该名称可以仅从图表视角进行定义。例如:插件scissors.svg,其直译是剪刀的意思,其图标可以为一把剪刀。其业务场景是用来删除关系图中的边。为了实现解耦合,该插件不能用remove-edge.svg等与业务直接相关的名称进行命名。为了保证抽象性,在命名过程中应避免带有从属关系的命名。例如,sidebar-heart.svg、top-logo.svg、detail-settings.svg等命名中,sidebar-、top-等命名代表位置,detail-可以代表某某明细模块。
其中,命名语意用于在有多个图标类似时,根据其插件名称的语音分辨各个图标对应的插件的作用。因此,在该命名过程中需要从图标状态定义名称,并禁止使用xxx1.svg,xxx2.svg等数字命名方式。
其中,命名形式应统一采用中横线形式。例如shopping-cart.svg。
其中,命名方式可以为包括图标按【图标】-【分类】-【空心实心状态】.svg进行命名,例如shopping-cart-solid。该名称中shopping-cart为图标,分类为空,solid为实心状态。需要注意的是,在该命名过程中,默认为不添加状态时为空心状态。
步骤2、在编译环境的“/packages/jd”的插件目录下,增加第一插件名称的同名目录。该插件的内容参考其他插件确定。
步骤3、在“/packages/theme-chalk/src/jd”的插件样式目录下,增加第一插件的样式文件。其中,样式文件的后缀名为“*.scss”。
步骤4、在“/examples/docs/zh-CN/jt2/”目录下增加插件文档
步骤5、在“/examples/demo-styles/jt2/”目录下增加插件文档展示需要的插件样式。该部分插件样式仅用于展示,不会被打包到dist中。
步骤6、在“/examples/nav.config.json”目录下,将新增的插件添加到在线展示侧边栏菜单配置中。
步骤7、使用指令“npm run dist”打包该插件项目。完成打包后,“src/index.js”文件会被更新,并替换为最新的组件。当完成打包后,如图6所示的每一图标对应一个插件。用户可以通过点击该图标上复制按钮的方式,实现该插件的复制和调用。当服务器未在项目中添加图标时,其使用效果可以如图7基础用法所示。当服务器中完成图标的设置后,其使用效果可以如图7中设置icon所示。
图8示出了本申请一实施例提供的一种插件配置装置的结构示意图,如图8所示,本实施例的插件配置装置10用于实现上述任一方法实施例中对应于服务器的操作,本实施例的插件配置装置10包括:
新增模块11,用于在第一插件中增加至少一个第一属性,第一插件用于在网站中构建网站功能,第一属性用于增加第一插件的功能,第一属性中包括至少一个属性参数,每一属性参数用于实现第一插件的一种功能;
打包模块12,用于打包第一插件,以生成网站功能的功能接口。
一种示例中,第一插件为原有插件或者新增插件,当第一插件为原有插件时,第一插件中包括至少一个第二属性。
一种示例中,插件配置装置10还可以包括:
修改模块13,用于在第一插件中修改至少一个第二属性的默认参数,第二属性为第一插件中原有的属性。
一种示例中,当第一插件为表格时,新增模块11,包括以下至少一种:
增加滚动条样式属性,滚动条样式属性用于根据样式文件中的滚动条样式定义表格的滚动条样式;
增加空值文本属性,空值文本属性用于在表格的值为空或者未定义时,在表格中输出默认文本;
增加滚动条更新属性,滚动条更新属性用于在表格内容更新时同步更新滚动条长度。
一种示例中,当第一插件为选择框时,新增模块11,包括:
增加选择框活动属性,活动属性用于根据选择框的添加内容,动态调整选择框的长度和/或宽度。
一种示例中,当第一插件为输入框时,新增模块11,包括:
增加焦点事件属性,焦点事件属性用于根据输入框中的焦点调整输入框的颜色。
一种示例中,当第一插件为对话框时,修改模块13,包括:
修改对话框的页面属性的默认参数为默认遮罩,当页面属性的默认参数为默认遮罩是,话框插件用于在弹出对话框时使前端页面被遮罩。
本申请实施例提供的插件配置装置10,可执行上述方法实施例,其具体实现原理和技术效果,可参见上述方法实施例,本实施例此处不再赘述。
图9示出了本申请实施例提供的一种服务器的硬件结构示意图。如图9所示,该服务器20,用于实现上述任一方法实施例中对应于服务器的操作,本实施例的服务器20可以包括:存储器21,处理器22。
存储器21,用于存储计算机程序。该存储器21可能包含高速随机存取存储器(Random Access Memory,RAM),也可能还包括非易失性存储(Non-Volatile Memory,NVM),例如至少一个磁盘存储器,还可以为U盘、移动硬盘、只读存储器、磁盘或光盘等。
处理器22,用于执行存储器存储的计算机程序,以实现上述实施例中的插件配置方法。具体可以参见前述方法实施例中的相关描述。该处理器22可以是中央处理单元(Central Processing Unit,CPU),还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合发明所公开的方法的步骤可以直接体现为硬件处理器执行完成,或者用处理器中的硬件及软件模块组合执行完成。
可选地,存储器21既可以是独立的,也可以跟处理器22集成在一起。
当存储器21是独立于处理器22之外的器件时,服务器20还可以包括总线23。该总线23用于连接存储器21和处理器22。该总线23可以是工业标准体系结构(IndustryStandard Architecture,ISA)总线、外部设备互连(Peripheral ComponentInterconnect,PCI)总线或扩展工业标准体系结构(Extended Industry StandardArchitecture,EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示,本申请附图中的总线并不限定仅有一根总线或一种类型的总线。
本实施例提供的服务器可用于执行上述的插件配置方法,其实现方式和技术效果类似,本实施例此处不再赘述。
本申请还提供一种计算机可读存储介质,计算机可读存储介质中存储有计算机程序,计算机程序被处理器执行时用于实现上述的各种实施方式提供的方法。
其中,计算机可读存储介质可以是计算机存储介质,也可以是通信介质。通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。计算机存储介质可以是通用或专用计算机能够存取的任何可用介质。例如,计算机可读存储介质耦合至处理器,从而使处理器能够从该计算机可读存储介质读取信息,且可向该计算机可读存储介质写入信息。当然,计算机可读存储介质也可以是处理器的组成部分。处理器和计算机可读存储介质可以位于专用集成电路(Application Specific Integrated Circuits,ASIC)中。另外,该ASIC可以位于用户设备中。当然,处理器和计算机可读存储介质也可以作为分立组件存在于通信设备中。
具体地,该计算机可读存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(Static Random-Access Memory,SRAM),电可擦除可编程只读存储器(Electrically-Erasable Programmable Read-Only Memory,EEPROM),可擦除可编程只读存储器(Erasable Programmable Read Only Memory,EPROM),可编程只读存储器(Programmable read-only memory,PROM),只读存储器(Read-OnlyMemory,ROM),磁存储器,快闪存储器,磁盘或光盘。存储介质可以是通用或专用计算机能够存取的任何可用介质。
本申请还提供一种计算机程序产品,该计算机程序产品包括计算机程序,该计算机程序存储在计算机可读存储介质中。设备的至少一个处理器可以从计算机可读存储介质中读取该计算机程序,至少一个处理器执行该计算机程序使得设备实施上述的各种实施方式提供的方法。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅是示意性的,例如,模块的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个模块可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或模块的间接耦合或通信连接,可以是电性,机械或其它的形式。
其中,各个模块可以是物理上分开的,例如安装于一个的设备的不同位置,或者安装于不同的设备上,或者分布到多个网络单元上,或者分布到多个处理器上。各个模块也可以是集成在一起的,例如,安装于同一个设备中,或者,集成在一套代码中。各个模块可以以硬件的形式存在,或者也可以以软件的形式存在,或者也可以采用软件加硬件的形式实现。本申请可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
当各个模块以软件功能模块的形式实现的集成的模块,可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器执行本申请各个实施例方法的部分步骤。
应该理解的是,虽然上述实施例中的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,其可以以其他的顺序执行。而且,图中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,其执行顺序也不必然是依次进行,而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
最后应说明的是:以上各实施例仅用以说明本申请的技术方案,而非对其限制。尽管参照前述各实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换。而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
Claims (11)
1.一种插件配置方法,其特征在于,所述方法包括:
在第一插件中增加至少一个第一属性,所述第一插件用于在网站中构建网站功能,所述第一属性用于增加所述第一插件的功能,所述第一属性中包括至少一个属性参数,每一所述属性参数用于实现所述第一插件的一种功能;
打包所述第一插件,以生成所述网站功能的功能接口。
2.根据权利要求1所述的方法,其特征在于,所述第一插件为原有插件或者新增插件,当所述第一插件为原有插件时,所述第一插件中包括至少一个第二属性。
3.根据权利要求2所述的方法,其特征在于,当所述第一插件为原有插件时,所述方法,还包括:
在所述第一插件中修改至少一个第二属性的默认参数,所述第二属性为所述第一插件中原有的属性,所述第二属性用于实现所述第一插件的功能,所述默认参数用于指示直接调用所述第一插件时所述第一插件实现的功能。
4.根据权利要求1-3中任意一项所述的方法,其特征在于,当所述第一插件为表格插件时,所述在第一插件中增加至少一个第一属性,包括以下至少一种:
增加滚动条样式属性,所述滚动条样式属性用于根据样式文件中的滚动条样式定义所述表格的滚动条样式,所述属性参数用于指示所述滚动条样式;
增加空值文本属性,所述空值文本属性用于在所述表格的值为空或者未定义时,在所述表格中输出默认文本,所述属性参数用于是指所述默认文本样式;
增加滚动条更新属性,所述滚动条更新属性用于在所述表格内容更新时同步更新所述滚动条长度,所述属性参数用于指示所述滚动条更新属性是否启用。
5.根据权利要求1-3中任意一项所述的方法,其特征在于,当所述第一插件为选择框插件时,所述在第一插件中增加至少一个第一属性,包括:
增加选择框活动属性,所述活动属性用于根据所述选择框的添加内容,动态调整所述选择框的长度和/或宽度,所述属性参数用于指示所述选择框活动属性是否启用。
6.根据权利要求1-3中任意一项所述的方法,其特征在于,当所述第一插件为输入框插件时,所述在第一插件中增加至少一个第一属性,包括:
增加焦点事件属性,所述焦点事件属性用于根据所述输入框中的焦点调整所述输入框的颜色,所述属性参数用于指示所述输入框的所述颜色。
7.根据权利要求2所述的方法,其特征在于,当所述第一插件为对话框插件时,所述在所述第一插件中修改至少一个第二属性的默认参数,包括:
修改所述对话框插件的默认参数为默认遮罩,以使所述网站在弹出对话框时所述网站的页面被遮罩。
8.一种插件配置装置,其特征在于,所述装置,包括:
新增模块,用于在第一插件中增加至少一个第一属性,所述第一插件用于在网站中构建网站功能,所述第一属性用于增加所述第一插件的功能,所述第一属性中包括至少一个属性参数,每一所述属性参数用于实现所述第一插件的一种功能;
打包模块,用于打包所述第一插件,以生成所述网站功能的功能接口。
9.一种服务器,其特征在于,所述服务器,包括:存储器,处理器;
所述存储器用于存储计算机程序;所述处理器用于根据所述存储器存储的计算机程序,实现如权利要求1-7中任意一项所述的插件配置方法。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有计算机程序,所述计算机程序被处理器执行时用于实现如权利要求1-7任一项所述的插件配置方法。
11.一种计算机程序产品,其特征在于,所述计算机程序产品包括计算机程序,其特征在于,该计算机程序被处理器执行时实现权利要求1-7任一项所述的插件配置方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110663622.2A CN113342417A (zh) | 2021-06-15 | 2021-06-15 | 插件配置方法、装置和设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110663622.2A CN113342417A (zh) | 2021-06-15 | 2021-06-15 | 插件配置方法、装置和设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113342417A true CN113342417A (zh) | 2021-09-03 |
Family
ID=77477296
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110663622.2A Pending CN113342417A (zh) | 2021-06-15 | 2021-06-15 | 插件配置方法、装置和设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113342417A (zh) |
Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104426967A (zh) * | 2013-08-30 | 2015-03-18 | 中国石油天然气股份有限公司 | 一种跨平台和跨设备的移动应用构建方法 |
CN105095348A (zh) * | 2015-06-09 | 2015-11-25 | 北京织星科技有限公司 | 一种通过xml动态配置网站的方法 |
CN109040767A (zh) * | 2018-06-29 | 2018-12-18 | 武汉斗鱼网络科技有限公司 | 一种直播间加载方法、系统、服务器及存储介质 |
CN109240692A (zh) * | 2018-11-16 | 2019-01-18 | 重庆满惠网络科技有限公司 | 一种基于通用模板的网页数据库开发的建立方法和系统 |
CN110399583A (zh) * | 2019-06-14 | 2019-11-01 | 深圳绿米联创科技有限公司 | 页面显示方法、装置、电子设备以及存储介质 |
CN110647278A (zh) * | 2019-09-05 | 2020-01-03 | 珠海格力电器股份有限公司 | 一种控制插件显示的方法、装置、计算设备及存储介质 |
CN111048153A (zh) * | 2019-12-09 | 2020-04-21 | 上海美吉生物医药科技有限公司 | 一种大数据可视化图表插件的实现方法及系统 |
CN111124525A (zh) * | 2018-10-31 | 2020-05-08 | 北京国双科技有限公司 | 一种网站功能实现方法和装置 |
CN111832272A (zh) * | 2020-07-20 | 2020-10-27 | 苏州易卖东西信息技术有限公司 | 一种基于element-ui实现表格嵌套表单功能的方法 |
CN112416343A (zh) * | 2020-11-04 | 2021-02-26 | 广州小鹏汽车科技有限公司 | 自定义控件的批量处理方法、装置、电子设备和存储介质 |
CN112506494A (zh) * | 2020-11-02 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | 基于vue的可扩展动态组件的实现方法、装置、设备和介质 |
CN112506493A (zh) * | 2020-10-30 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | 一种基于vue的表格配置方法、装置、设备和介质 |
CN112784529A (zh) * | 2021-02-03 | 2021-05-11 | 叮当快药科技集团有限公司 | 基于BetterScroll的移动端排序表格及其构建方法 |
-
2021
- 2021-06-15 CN CN202110663622.2A patent/CN113342417A/zh active Pending
Patent Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104426967A (zh) * | 2013-08-30 | 2015-03-18 | 中国石油天然气股份有限公司 | 一种跨平台和跨设备的移动应用构建方法 |
CN105095348A (zh) * | 2015-06-09 | 2015-11-25 | 北京织星科技有限公司 | 一种通过xml动态配置网站的方法 |
CN109040767A (zh) * | 2018-06-29 | 2018-12-18 | 武汉斗鱼网络科技有限公司 | 一种直播间加载方法、系统、服务器及存储介质 |
CN111124525A (zh) * | 2018-10-31 | 2020-05-08 | 北京国双科技有限公司 | 一种网站功能实现方法和装置 |
CN109240692A (zh) * | 2018-11-16 | 2019-01-18 | 重庆满惠网络科技有限公司 | 一种基于通用模板的网页数据库开发的建立方法和系统 |
CN110399583A (zh) * | 2019-06-14 | 2019-11-01 | 深圳绿米联创科技有限公司 | 页面显示方法、装置、电子设备以及存储介质 |
CN110647278A (zh) * | 2019-09-05 | 2020-01-03 | 珠海格力电器股份有限公司 | 一种控制插件显示的方法、装置、计算设备及存储介质 |
CN111048153A (zh) * | 2019-12-09 | 2020-04-21 | 上海美吉生物医药科技有限公司 | 一种大数据可视化图表插件的实现方法及系统 |
CN111832272A (zh) * | 2020-07-20 | 2020-10-27 | 苏州易卖东西信息技术有限公司 | 一种基于element-ui实现表格嵌套表单功能的方法 |
CN112506493A (zh) * | 2020-10-30 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | 一种基于vue的表格配置方法、装置、设备和介质 |
CN112506494A (zh) * | 2020-11-02 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | 基于vue的可扩展动态组件的实现方法、装置、设备和介质 |
CN112416343A (zh) * | 2020-11-04 | 2021-02-26 | 广州小鹏汽车科技有限公司 | 自定义控件的批量处理方法、装置、电子设备和存储介质 |
CN112784529A (zh) * | 2021-02-03 | 2021-05-11 | 叮当快药科技集团有限公司 | 基于BetterScroll的移动端排序表格及其构建方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10726195B2 (en) | Filtered stylesheets | |
US7895179B2 (en) | Asynchronous updating of web page data views | |
CN102929599B (zh) | 移动终端浏览器界面的修改方法及装置、移动终端 | |
JP2016224923A (ja) | ユーザフォームインタフェースの自動生成の方法およびシステム | |
US20150074561A1 (en) | Customizable themes for browsers and web content | |
US20100185954A1 (en) | Collaborative Environment Project Extensibility with Composition Containers | |
US7992128B2 (en) | Computer software adaptation method and system | |
US9280327B2 (en) | Simplifying development of user interfaces of applications | |
Nelson | Getting to know Vue. js | |
JP2011159284A (ja) | ウェブサイトフォントのプレビュー | |
CN107832052B (zh) | 展示预览页面的方法、装置和存储介质以及电子设备 | |
CN111104635A (zh) | 一种表格网页的生成方法和装置 | |
CN111381920B (zh) | 弹窗组件的显示方法、装置以及电子终端 | |
WO2020004156A1 (ja) | 表示制御装置、表示制御方法、および表示制御プログラム | |
CN111506312B (zh) | 页面生成方法、装置、计算机设备及存储介质 | |
CN110333859B (zh) | 页面创建方法、装置、电子设备和计算机可读存储介质 | |
CN113342417A (zh) | 插件配置方法、装置和设备 | |
CN111984887A (zh) | 网页组件库加载方法、装置、存储介质及电子设备 | |
CN110399077A (zh) | 元素处理方法及装置、存储介质、电子装置 | |
CN113741891A (zh) | 一种页面处理方法、装置、电子设备及存储介质 | |
CN114253536A (zh) | 界面设计组件的调用方法、终端设备以及可读存储介质 | |
CN114201253B (zh) | 标签页调用方法、装置、电子设备及计算机可读存储介质 | |
CN114741637A (zh) | 一种生成表单页面的方法、装置、设备及可读存储介质 | |
CN114675763A (zh) | 菜单处理方法和装置 | |
CN117785361A (zh) | 多语言提示实现方法、装置、电子设备及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
CB02 | Change of applicant information |
Address after: 601, 6 / F, building 2, No. 18, Kechuang 11th Street, Daxing District, Beijing, 100176 Applicant after: Jingdong Technology Information Technology Co.,Ltd. Address before: 601, 6 / F, building 2, No. 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone, Beijing 100176 Applicant before: Jingdong Shuke Haiyi Information Technology Co., Ltd |
|
CB02 | Change of applicant information |