一种网页编辑方法及装置
技术领域
本发明涉及计算机信息技术领域,特别涉及一种网页编辑方法及装置。
背景技术
市面上现有基于浏览器的文本编辑器,基本上都是对文本样式的修改,比如加粗、倾斜、字号、颜色、位置、图片插入等功能。在信息爆炸的今天,如何把每天产生的大量数据,及时的呈现给用户呢?通过传统的Excel或人工查询后再编辑方式肯定跟不上时代的速度。因此亟需提出一种能够集成嵌入数据源、编辑、渲染为一体的网页编辑方案,以便解决现有技术存在的不足。
发明内容
为了解决现有技术的问题,本发明实施例提供了一种网页编辑方法及装置,该网页编辑方案不仅配置了直接方便获取数据源的可嵌入控件,同时实现过滤、编辑、渲染一体化的流程,实现了实时数据更新功能,大大提高了内容发布的效率。所述技术方案如下:
一方面,提供了一种网页编辑方法,所述方法包括:
接收用户通过网页控件输入的数据获取请求,所述网页控件用于表征数据源的数据属性;
发送所述数据获取请求至服务器,并获取所述服务器根据所述数据获取请求返回的数据源;
接收渲染请求;
根据所述渲染请求对应的渲染模式,对所述数据源进行渲染操作。
进一步地,接收用户通过网页控件输入的数据获取请求,包括:
接收用户对网页控件的选择请求;
接收用户针对选择的网页控件的条件输入。
进一步地,所述网页控件至少包括时间控件、数据字段控件和/或计数数量控件,所述条件输入包括字段列表选项、过滤条件选项、排序规则选项和/或配置条件。
进一步地,发送所述数据获取请求至服务器,并获取所述服务器根据所述数据获取请求返回的数据源,包括:
根据所述数据获取请求中的数据标识信息以及预存的数据标识与查询接口的对应关系,从预设查询接口列表匹配目标查询接口;
发送所述数据获取请求至所述目标查询接口获取所述数据源。
进一步地,所述渲染模式包括至少一个预设渲染场景。
进一步地,所述渲染操作包括:对所述网页控件进行控件样式修改或数据文本修改。
另一方面提供了一种网页编辑装置,所述装置包括:
请求接收模块,用于接收用户通过网页控件输入的数据获取请求以及渲染请求,所述网页控件用于表征数据源的数据属性;
数据获取模块,用于发送所述数据获取请求至服务器,并获取所述服务器根据所述数据获取请求返回的数据源;
渲染操作模块,用于根据所述渲染请求对应的渲染模式,对所述数据源进行渲染操作。
进一步地,所述请求接收模块用于:
接收用户对网页控件的选择请求;
接收用户针对选择的网页控件的条件输入。
进一步地,所述网页控件至少包括时间控件、数据字段控件和/或计数数量控件,所述条件输入包括字段列表选项、过滤条件选项、排序规则选项和/或配置条件。
进一步地,所述数据获取模块用于:
根据所述数据获取请求中的数据标识信息以及预存的数据标识与查询接口的对应关系,从预设查询接口列表匹配目标查询接口;
发送所述数据获取请求至所述目标查询接口获取所述数据源。
进一步地,所述渲染模式包括至少一个预设渲染场景。
进一步地,所述渲染操作包括:对所述网页控件进行控件样式修改或数据文本修改。
本发明实施例提供的技术方案带来的有益效果是:
1、高效性:通过在传统编辑器增加可嵌入控件,该控件可配置远端数据源,再集合传统编辑器,实现了过滤、编辑、渲染一体化的功能,通过一个窗体便可同时实现配置、查询、渲染的功能,降低窗体切换成本,特别是在大数据时代,面对海量数据提供了实时数据内容更新功能,大大提高内容发布的效率;
2、动态性:通过集合时间、指标、维度等控件实现了网页编辑的可动态渲染以及自动更新,配置区域支持多种条件查询,如时间、指标、维度、排序、过滤等,根据这些配置可以快速的生成想要数据;
3、实时性:在配置了日期控件后,无需再次配置,便可观看到每日最新数据信息;
4、复用性:改进后的网页编辑方法,可以把之前编辑内容格式保存为模板,与其内部动态日期等控件以及其他查询条件集合,便能动态生成可直接阅读的文本,大大提升了编辑的生产效率。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的网页编辑方法流程图;
图2是本发明实施例提供的网页编辑装置;
图3是本发明实施例提供的网页编辑方法及装置实现的web编辑器的功能区域演示图;
图4是上述web编辑器进行网页编辑的交互过程示意图;
图5是上述web编辑器编辑状态的示意图;
图6是网页控件的控件弹窗示意图;
图7是渲染后的效果示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。需要说明的是,在本发明的描述中,“多个”的含义是两个以上,除非另有明确具体的限定。
本发明实施例提供的网页编辑方法及装置,通过在传统编辑器增加可嵌入控件,该控件可配置远端数据源,再集合传统编辑器,实现了过滤、编辑、渲染一体化的功能,特别是在大数据时代,面对海量数据提供了实时数据内容更新功能,大大提高内容发布的效率;其次,通过集合时间、指标、维度等控件实现了网页编辑的可动态渲染以及自动更新;并且,改进后的网页编辑方法,可以把之前编辑内容格式保存为模板,与其内部动态日期等控件以及其他查询条件集合,便能动态生成可直接阅读的文本,大大提升了编辑的生产效率。因此该网页编辑方法可在涉及网页编辑的多种应用场景中推广,尤其适用于数据经常需要实时更新的汇报报表等工作场景。
下面结合具体实施例及附图,对本发明实施例提供的网页编辑方法及装置作详细说明。
图1是本发明实施例提供的网页编辑方法流程图,如图1所示,本发明实施例提供的网页编辑方法,包括以下步骤:
101、接收用户通过网页控件输入的数据获取请求,网页控件用于表征数据源的数据属性。
具体地,接收用户对网页控件的选择请求,并接收用户针对选择的网页控件的条件输入。这里的网页控件至少包括时间控件、数据字段控件和/或计数数量控件,还可以包括现有技术可实现的其他任何可能的网页控件,每个网页控件会配置其对应的数据接口,用于调取相应的数据源,因此,网页控件能够表征数据源的数据属性。举例说明,对于数据字段控件,可在后端配置两个访问接口:数据字段列表接口和数据字段数据查询接口。对于条件输入,主要是设置在应用网页控件时的多个过滤条件,包括字段列表选项、过滤条件选项、排序规则选项和/或配置条件,以供用户选择。
值得注意的是,步骤101的过程,除了上述步骤所述的方式之外,还可以通过其他方式实现该过程,本发明实施例对具体的方式不加以限定。
102、发送数据获取请求至服务器,并获取服务器根据数据获取请求返回的数据源。
具体地,根据数据获取请求中的数据标识信息以及预存的数据标识与查询接口的对应关系,从预设查询接口列表匹配目标查询接口,然后发送数据获取请求至目标查询接口获取数据源。这里,数据获取请求中的数据标识信息主要用户标识数据获取请求中的网页控件类别,如数据标识信息可以是数据字段,与其对应的数据查询接口具有映射的对应关系,根据这种对应关系可以匹配到相应的目标查询接口。
另外,这里的服务器可以是前端服务器或后端服务器,可以根据需要进行相应设置,例如当网页控件为日期控件时,数据源可以从前端服务器获取,如果网页控件为数据字段控件或计数数量控件时,则数据源需要从后端获取。优选地,服务器为后端服务器。
值得注意的是,步骤102的过程,除了上述步骤所述的方式之外,还可以通过其他方式实现该过程,本发明实施例对具体的方式不加以限定。
103、接收渲染请求。
接收用户发出的渲染请求,以便满足用户对获取数据源的渲染需求。
104、根据渲染请求对应的渲染模式,对数据源进行渲染操作。
具体地,根据渲染模式的预设渲染场景,对数据源进行渲染操作。其中,渲染模式包括至少一个预设渲染场景,当具有多个预设渲染场景时,用户在进行渲染操作时可以对渲染场景进行选择,渲染操作包括:对网页控件进行控件样式修改或数据文本修改。
值得注意的是,步骤104的过程,除了上述步骤所述的方式之外,还可以通过其他方式实现该过程,本发明实施例对具体的方式不加以限定。
需要说明的是,在另一实施方式中,上述接收渲染请求的103步骤也可以在进行上述101步骤时同时完成。
另外,本发明实施例还提供了一种网页编辑装置。图2是本发明实施例提供的网页编辑装置,如图2所示,网页编辑装置2包括请求接收模块21、数据获取模块22和渲染操作模块23。
其中,请求接收模块21,用于接收用户通过网页控件输入的数据获取请求以及渲染请求,网页控件用于表征数据源的数据属性。具体地,请求接收模块21用于:接收用户对网页控件的选择请求;接收用户针对选择的网页控件的条件输入。
数据获取模块22,用于发送数据获取请求至服务器,并获取服务器根据数据获取请求返回的数据源。具体地,数据获取模块22用于:根据数据获取请求中的数据标识信息以及预存的数据标识与查询接口的对应关系,从预设查询接口列表匹配目标查询接口;发送数据获取请求至目标查询接口获取数据源。
渲染操作模块23,用于根据渲染请求对应的渲染模式,对数据源进行渲染操作。其中,渲染模式包括至少一个预设渲染场景,当具有多个预设渲染场景时,用户在进行渲染操作时可以对渲染场景进行选择,渲染操作包括:对网页控件进行控件样式修改或数据文本修改。
需要说明的是:上述实施例提供的网页编辑装置在网页编辑业务时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的网页编辑装置与网页编辑方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
下面介绍根据本发明实施例提供的网页编辑方法及装置实现的web编辑器。
图3是该web编辑器的功能区域演示图,图4是该web编辑器进行网页编辑的交互过程示意图。图5是该web编辑器编辑状态的示意图。图6是网页控件的控件弹窗示意图。图7是渲染后的效果示意图。
如图3至图7所示,该web编辑器是基于B/S架构的可视化Web前端编辑器,其主要装置有nodejs服务器、浏览器、控件区、配置区、编辑区、渲染区、后端服务、数据库。其中,nodejs服务器提供前端运行环境,浏览器相当于用户终端;控件区、编辑区、配置区、渲染区即在浏览器中展示,其中控件区、编辑区、配置区提供用户交互功能。
具体地,控件区提供时间控件、数据字段、计数数量等控件,该区域可与用户交互。
配置区分为两块区域,左边为用户已选控件列表,右边为左侧选中控件的详情。控件详情根据控件不同,有所区别。如日期控件,可以提供时间条件,可按日、周、月、季、年不同粒度查询。如数据字段控件,可提供字段条件,通过后端字段列表,选择所需字段,附加一些过滤排序条件等。该区域可与用户交互。
编辑区提供文本、控件的编辑环境。在此区域内可修改文本、控件样式。该区域可交互。
渲染区是在前面控件区、配置区、编辑区都准备好了之后,点击更新按钮将编辑区原始文本跟控件区、配置区请求后端服务返回的结果进行处理,根据预设的渲染场景,提供实时的渲染。
服务器主要提供程序的远端运行环境支持。后端主要提供数据接口服务,根据前端参数提供相应的数据,本应用主要提供两个访问接口,分别是:①数据字段(指标)列表接口;②依赖数据字段数据查询接口。数据库主要为数据的存储、读取、修改提供支持。
实现上述web编辑器具体操作步骤如下:
步骤一:在原有编辑器上插入与后端数据源配置的控件。
首先创建编辑器模型,通过浏览器DOM API设置DOM元素div的contenteditable属性为true,使它置于可编辑状态,即为编辑器的原型。将携带全局唯一ID的控件插入该编辑器中,通过浏览器DOM API document.execCommand()方法实现所述控件的插入动作。
该步骤一的优选实施方式如下:
①用户点击配置区控件,编辑区此时会插入已点击的控件,该控件携带全局唯一ID(该图标通过<img/>标签实现,实现整体删除、移动);
②编辑区通过浏览器DOM API设置DOM元素div的contenteditable属性实现可编辑效果;
③图标的插入动作通过浏览器DOM API document.execCommand()方法实现。
步骤二:配置控件的请求参数。
具体地,配置控件的数据字段信息的请求参数,数据字段信息至少包括数据字段列表以及过滤条件选项。
该步骤二的优选实施方式如下:
①用户点击编辑区控件,弹出窗体。弹窗分为两栏,左侧为编辑区已有的控件列表。右侧为每个控件的详情。
②选中左侧列表某一控件,在右侧进行配置。右侧第一个多选框为数据字段选取框,里面是跟据当前用户信息从后台请求的数据字段列表。第二、第三、第四分别是维度、维值、排序、TOPN等过滤条件。
步骤三:根据请求参数,向后端请求控件的信息参数,并保存控件的所有数据结果,其中包括控件的参数。
具体地,获取已配置的控件的控件信息;根据控件信息,拼接后端查询接口的信息参数;向后端发起请求,并通过ES6语法Promise.all()方法保存为ID对应数据结果。
该步骤三的优选实施方式如下:
①点击更新按钮,获取步骤二中所有已配置控件的信息;
②根据已经配置的控件信息,开始拼接后台数据查询接口的请求参数(参数中包含当前已登录的用户信息),向后端接口发起请求。通过ES6语法Promise.all()方法实现数据返回结果的有序存放,即保存为ID对应数据结果。
步骤四:根据数据结果,结合原有编辑器的初始内容进行控件的替换操作。
该步骤四的优选实施方式如下:
通过携带ID和配置信息生成的json串的img标签包装设置控件,并通过DOM选择器querySelectorAll(‘img’),查找出该img的ID和type是否匹配;
当控件匹配上后,通过DOM的createTextNode和replaceChild API替换img标签为数据结果。
上述所有可选技术方案,可以采用任意结合形成本发明的可选实施例,在此不再一一赘述。
综上所述,本发明实施例提供的网页编辑方法及装置,相比现有技术具有以下有益效果:
1、高效性:通过在传统编辑器增加可嵌入控件,该控件可配置远端数据源,再集合传统编辑器,实现了过滤、编辑、渲染一体化的功能,通过一个窗体便可同时实现配置、查询、渲染的功能,降低窗体切换成本,特别是在大数据时代,面对海量数据提供了实时数据内容更新功能,大大提高内容发布的效率;
2、动态性:通过集合时间、指标、维度等控件实现了网页编辑的可动态渲染以及自动更新,配置区域支持多种条件查询,如时间、指标、维度、排序、过滤等,根据这些配置可以快速的生成想要数据;
3、实时性:在配置了日期控件后,无需再次配置,便可观看到每日最新数据信息;
4、复用性:改进后的网页编辑方法,可以把之前编辑内容格式保存为模板,与其内部动态日期等控件以及其他查询条件集合,便能动态生成可直接阅读的文本,大大提升了编辑的生产效率。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成,也可以通过程序来指令相关的硬件完成,所述的程序可以存储于一种计算机可读存储介质中,上述提到的存储介质可以是只读存储器,磁盘或光盘等。
本申请实施例中是参照根据本申请实施例中实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本申请实施例中的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本申请实施例中范围的所有变更和修改。
显然,本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包含这些改动和变型在内。
以上所述仅为本发明的较佳实施例,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。