WO2021036448A1 - 一种网页编辑方法及装置 - Google Patents

一种网页编辑方法及装置 Download PDF

Info

Publication number
WO2021036448A1
WO2021036448A1 PCT/CN2020/097833 CN2020097833W WO2021036448A1 WO 2021036448 A1 WO2021036448 A1 WO 2021036448A1 CN 2020097833 W CN2020097833 W CN 2020097833W WO 2021036448 A1 WO2021036448 A1 WO 2021036448A1
Authority
WO
WIPO (PCT)
Prior art keywords
data
control
rendering
data acquisition
request
Prior art date
Application number
PCT/CN2020/097833
Other languages
English (en)
French (fr)
Inventor
孙海涛
时亚秋
丁一鸣
杨成颖
孙迁
Original Assignee
苏宁云计算有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 苏宁云计算有限公司 filed Critical 苏宁云计算有限公司
Priority to CA3152833A priority Critical patent/CA3152833C/en
Publication of WO2021036448A1 publication Critical patent/WO2021036448A1/zh

Links

Images

Classifications

    • 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/953—Querying, e.g. by the use of web search engines
    • 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/957—Browsing optimisation, e.g. caching or content distillation
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Definitions

  • the present invention relates to the field of computer information technology, in particular to a web page editing method and device.
  • the embodiments of the present invention provide a web page editing method and device.
  • the web page editing solution is not only equipped with embeddable controls that directly and easily obtain data sources, but also realizes an integrated process of filtering, editing, and rendering. , Realizing the real-time data update function, greatly improving the efficiency of content publishing.
  • the technical solution is as follows:
  • a web page editing method includes:
  • receiving the data acquisition request input by the user through the webpage control includes:
  • the web page control includes at least a time control, a data field control and/or a count number control
  • the condition input includes a field list option, a filter condition option, a sorting rule option, and/or a configuration condition.
  • sending the data acquisition request to the server and acquiring the data source returned by the server according to the data acquisition request includes:
  • the rendering mode includes at least one preset rendering scene.
  • the rendering operation includes: performing control style modification or data text modification on the web page control.
  • Another aspect provides a web page editing device, which includes:
  • the request receiving module is configured to receive a data acquisition request and a rendering request input by a user through a webpage control, and the webpage control is used to characterize the data attributes of the data source;
  • a data acquisition module configured to send the data acquisition request to the server, and acquire the data source returned by the server according to the data acquisition request;
  • the rendering operation module is configured to perform a rendering operation on the data source according to the rendering mode corresponding to the rendering request.
  • the request receiving module is used for:
  • the web page control includes at least a time control, a data field control, and/or a count number control
  • the condition input includes a field list option, a filter condition option, a sorting rule option, and/or a configuration condition.
  • the data acquisition module is used for:
  • the rendering mode includes at least one preset rendering scene.
  • the rendering operation includes: performing control style modification or data text modification on the web page control.
  • control can configure remote data sources, and then integrate the traditional editor to achieve the integration of filtering, editing, and rendering functions, which can be achieved at the same time through a single form
  • the functions of configuration, query, and rendering reduce the cost of window switching, especially in the era of big data, it provides real-time data content update function in the face of massive data, which greatly improves the efficiency of content publishing;
  • the configuration area supports multiple conditional queries, such as time, indicators, dimensions, sorting, filtering, etc., according to these configurations. Generate desired data quickly;
  • the improved web page editing method can save the previously edited content format as a template. With its internal dynamic date and other controls and other query conditions collection, it can dynamically generate directly readable text, which greatly improves editing Productivity.
  • Figure 1 is a flowchart of a web page editing method provided by an embodiment of the present invention
  • Figure 2 is a web page editing device provided by an embodiment of the present invention.
  • FIG. 3 is a demonstration diagram of the functional area of a web editor implemented by the web page editing method and device provided by the embodiments of the present invention
  • Figure 4 is a schematic diagram of the interactive process of web page editing performed by the web editor
  • Figure 5 is a schematic diagram of the editing state of the web editor
  • Figure 6 is a schematic diagram of a control pop-up window of a web page control
  • Figure 7 is a schematic diagram of the effect after rendering.
  • the control can configure a remote data source, and then integrate the traditional editor to realize the integrated functions of filtering, editing, and rendering.
  • the control provides real-time data content update function in the face of massive data, which greatly improves the efficiency of content publishing; secondly, through the collection of time, indicators, dimensions and other controls to achieve dynamic rendering and automatic update of web page editing; and,
  • the improved web page editing method can save the format of the previously edited content as a template.
  • the web page editing method can be promoted in a variety of application scenarios involving web page editing, and is especially suitable for work scenarios such as report reports where data often needs to be updated in real time.
  • Fig. 1 is a flowchart of a web page editing method provided by an embodiment of the present invention. As shown in Fig. 1, the web page editing method provided by an embodiment of the present invention includes the following steps:
  • the web control here includes at least time control, data field control and/or count quantity control, and may also include any other possible web control that can be implemented in the prior art.
  • Each web control will be configured with its corresponding data interface for adjustment. Take the corresponding data source, therefore, the web control can characterize the data attributes of the data source.
  • two access interfaces can be configured on the back end: the data field list interface and the data field data query interface.
  • condition input it is mainly to set multiple filter conditions when applying web controls, including field list options, filter condition options, sorting rule options, and/or configuration conditions for users to choose.
  • step 101 may also be implemented in other manners, and the embodiment of the present invention does not limit the specific manner.
  • the target query interface is matched from the preset query interface list, and then the data acquisition request is sent to the target query interface to obtain the data source.
  • the data identification information in the data acquisition request is mainly the user identification of the web page control category in the data acquisition request.
  • the data identification information can be a data field, and its corresponding data query interface has a mapping correspondence relationship, and can match according to this correspondence relationship Go to the corresponding target query interface.
  • the server here can be a front-end server or a back-end server, which can be set accordingly.
  • the data source can be obtained from the front-end server.
  • the web control is a data field control or a count control
  • the data source needs to be obtained from the backend.
  • the server is a back-end server.
  • step 102 may also be implemented in other manners, and the embodiment of the present invention does not limit the specific manner.
  • the rendering operation is performed on the data source according to the preset rendering scene of the rendering mode.
  • the rendering mode includes at least one preset rendering scene.
  • the user can select the rendering scene when performing the rendering operation.
  • the rendering operation includes: modifying the control style or data text of the web page control. .
  • step 104 may also be implemented in other manners, and the embodiment of the present invention does not limit the specific manner.
  • the step 103 of receiving the rendering request may also be completed at the same time when the step 101 is performed.
  • FIG. 2 is a web page editing device provided by an embodiment of the present invention. As shown in FIG. 2, the web page editing device 2 includes a request receiving module 21, a data acquiring module 22 and a rendering operation module 23.
  • the request receiving module 21 is used to receive data acquisition requests and rendering requests input by the user through the web control, and the web control is used to characterize the data attributes of the data source. Specifically, the request receiving module 21 is configured to: receive a user's request for selection of a web control; and receive a user's conditional input for the selected web control.
  • the data acquisition module 22 is configured to send a data acquisition request to the server, and acquire the data source returned by the server according to the data acquisition request. Specifically, the data acquisition module 22 is configured to: match the target query interface from the preset query interface list according to the data identification information in the data acquisition request and the correspondence between the prestored data identification and the query interface; send the data acquisition request to the target query interface Get the data source.
  • the rendering operation module 23 is configured to perform rendering operations on the data source according to the rendering mode corresponding to the rendering request.
  • the rendering mode includes at least one preset rendering scene. When there are multiple preset rendering scenes, the user can select the rendering scene when performing the rendering operation.
  • the rendering operation includes: modifying the control style or data text of the web page control. .
  • the web page editing device provided in the above embodiment only uses the division of the above functional modules to illustrate the web page editing service.
  • the above functions can be allocated by different functional modules according to needs. That is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above.
  • the web page editing device provided in the foregoing embodiment and the web page editing method embodiment belong to the same concept, and the specific implementation process is detailed in the method embodiment, and will not be repeated here.
  • Fig. 3 is a demonstration diagram of the functional area of the web editor
  • Fig. 4 is a schematic diagram of the interactive process of the web editor for web page editing.
  • Figure 5 is a schematic diagram of the editing state of the web editor.
  • Fig. 6 is a schematic diagram of a control pop-up window of a web page control.
  • Figure 7 is a schematic diagram of the effect after rendering.
  • the web editor is a visual web front-end editor based on the B/S architecture. Its main devices include nodejs server, browser, control area, configuration area, editing area, rendering area, and backend. Services, databases.
  • the nodejs server provides a front-end operating environment, and the browser is equivalent to a user terminal; the control area, editing area, configuration area, and rendering area are displayed in the browser, and the control area, editing area, and configuration area provide user interaction functions.
  • control area provides controls such as time control, data field, count number, etc., and this area can interact with the user.
  • the configuration is divided into two areas. On the left is the list of controls selected by the user, and on the right is the details of the controls selected on the left.
  • the control details are different depending on the control.
  • the date control can provide time conditions, which can be queried according to different granularities of day, week, month, quarter, and year.
  • the data field control can provide field conditions, select the required field through the back-end field list, and add some filtering and sorting conditions. This area can interact with the user.
  • the editing area provides an editing environment for text and controls.
  • the text and control style can be modified in this area.
  • This area can be interactive.
  • the server mainly provides remote operating environment support for the program.
  • the backend mainly provides data interface services, and provides corresponding data according to the front-end parameters.
  • This application mainly provides two access interfaces, namely: 1data field (index) list interface; 2rely on data field data query interface.
  • the database mainly provides support for data storage, reading, and modification.
  • Step 1 Insert the controls configured with the back-end data source on the original editor.
  • the control carries a globally unique ID (the icon is realized through the ⁇ img/> tag to realize the overall deletion and movement);
  • Step 2 Configure the request parameters of the control.
  • the request parameter of the data field information of the configuration control includes at least a data field list and filter condition options.
  • the pop-up window is divided into two columns, the left side is the list of existing controls in the editing area. On the right are the details of each control.
  • the first checkbox on the right is the data field checkbox, which is a list of data fields requested from the background based on the current user information.
  • the second, third, and fourth are filter conditions such as dimension, dimension value, sorting, and TOPN.
  • Step 3 According to the request parameters, request the information parameters of the control from the backend, and save all the data results of the control, including the parameters of the control.
  • start splicing the request parameters of the background data query interface (the parameters include the information of the currently logged-in user), and initiate a request to the back-end interface.
  • the orderly storage of the data return result is realized through the ES6 syntax Promise.all() method, that is, the data result corresponding to the ID is saved.
  • Step 4 According to the data result, combined with the original content of the original editor to perform the replacement operation of the control.
  • the web page editing method and device provided by the embodiments of the present invention have the following beneficial effects compared with the prior art:
  • control can configure remote data sources, and then integrate the traditional editor to achieve the integration of filtering, editing, and rendering functions, which can be achieved at the same time through a single form
  • the functions of configuration, query, and rendering reduce the cost of window switching, especially in the era of big data. It provides real-time data content update function in the face of massive data, which greatly improves the efficiency of content publishing;
  • the configuration area supports multiple conditional queries, such as time, indicators, dimensions, sorting, filtering, etc., according to these configurations. Generate desired data quickly;
  • the improved web page editing method can save the previously edited content format as a template. With its internal dynamic date and other controls and other query conditions collection, it can dynamically generate directly readable text, which greatly improves editing Productivity.
  • the program can be stored in a computer-readable storage medium.
  • the storage medium mentioned can be a read-only memory, a magnetic disk or an optical disk, etc.
  • These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing equipment to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing equipment are generated It is a device that realizes the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram.
  • These computer program instructions can also be stored in a computer-readable memory that can guide a computer or other programmable data processing equipment to work in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including the instruction device.
  • the device implements the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram.
  • These computer program instructions can also be loaded on a computer or other programmable data processing equipment, so that a series of operation steps are executed on the computer or other programmable equipment to produce computer-implemented processing, so that the computer or other programmable equipment is executed
  • the instructions provide steps for implementing the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the block diagram.

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

一种网页编辑方法及装置，属于计算机信息技术领域。所述方法包括：接收用户通过网页控件输入的数据获取请求，所述网页控件用于表征数据源的数据属性（101）；发送所述数据获取请求至服务器，并获取所述服务器根据所述数据获取请求返回的数据源（102）；接收渲染请求（103）；根据所述渲染请求对应的渲染模式，对所述数据源进行渲染操作（104）。该方法不仅配置了直接方便获取数据源的可嵌入控件，同时实现过滤、编辑、渲染一体化的流程，实现了实时数据更新功能，提高了内容发布的效率。

Description

一种网页编辑方法及装置 技术领域
本发明涉及计算机信息技术领域，特别涉及一种网页编辑方法及装置。
背景技术
市面上现有基于浏览器的文本编辑器，基本上都是对文本样式的修改，比如加粗、倾斜、字号、颜色、位置、图片插入等功能。在信息爆炸的今天，如何把每天产生的大量数据，及时的呈现给用户呢？通过传统的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和replaceChildAPI替换img标签为数据结果。
上述所有可选技术方案，可以采用任意结合形成本发明的可选实施例，在此不再一一赘述。
综上所述，本发明实施例提供的网页编辑方法及装置，相比现有技术具有以下有益效果：
1、高效性：通过在传统编辑器增加可嵌入控件，该控件可配置远端数据源，再集合传统编辑器，实现了过滤、编辑、渲染一体化的功能，通过一个窗体便可同时实现配置、查询、渲染的功能，降低窗体切换成本，特别是在大数据时代， 面对海量数据提供了实时数据内容更新功能，大大提高内容发布的效率；
2、动态性：通过集合时间、指标、维度等控件实现了网页编辑的可动态渲染以及自动更新，配置区域支持多种条件查询，如时间、指标、维度、排序、过滤等，根据这些配置可以快速的生成想要数据；
3、实时性：在配置了日期控件后，无需再次配置，便可观看到每日最新数据信息；
4、复用性：改进后的网页编辑方法，可以把之前编辑内容格式保存为模板，与其内部动态日期等控件以及其他查询条件集合，便能动态生成可直接阅读的文本，大大提升了编辑的生产效率。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。
本申请实施例中是参照根据本申请实施例中实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理， 从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本申请实施例中的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例中范围的所有变更和修改。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims (10)

  1. 一种网页编辑方法，其特征在于，所述方法包括：
    接收用户通过网页控件输入的数据获取请求，所述网页控件用于表征数据源的数据属性；
    发送所述数据获取请求至服务器，并获取所述服务器根据所述数据获取请求返回的数据源；
    接收渲染请求；
    根据所述渲染请求对应的渲染模式，对所述数据源进行渲染操作。
  2. 根据权利要求1所述的方法，其特征在于，接收用户通过网页控件输入的数据获取请求，包括：
    接收用户对网页控件的选择请求；
    接收用户针对选择的网页控件的条件输入。
  3. 根据权利要求2所述的方法，其特征在于，所述网页控件至少包括时间控件、数据字段控件和/或计数数量控件，所述条件输入包括字段列表选项、过滤条件选项、排序规则选项和/或配置条件。
  4. 根据权利要求1所述的方法，其特征在于，发送所述数据获取请求至服务器，并获取所述服务器根据所述数据获取请求返回的数据源，包括：
    根据所述数据获取请求中的数据标识信息以及预存的数据标识与查询接口的对应关系，从预设查询接口列表匹配目标查询接口；
    发送所述数据获取请求至所述目标查询接口获取所述数据源。
  5. 根据权利要求1所述的方法，其特征在于，所述渲染模式包括至少一个预设渲染场景。
  6. 根据权利要求1所述的方法，其特征在于，所述渲染操作包括：对所述网页控件进行控件样式修改或数据文本修改。
  7. 一种网页编辑装置，其特征在于，所述装置包括：
    请求接收模块，用于接收用户通过网页控件输入的数据获取请求以及渲染请求，所述网页控件用于表征数据源的数据属性；
    数据获取模块，用于发送所述数据获取请求至服务器，并获取所述服务器根据所述数据获取请求返回的数据源；
    渲染操作模块，用于根据所述渲染请求对应的渲染模式，对所述数据源进行渲染操作。
  8. 根据权利要求7所述的装置，其特征在于，所述请求接收模块用于：
    接收用户对网页控件的选择请求；
    接收用户针对选择的网页控件的条件输入。
  9. 根据权利要求7所述的装置，其特征在于，所述数据获取模块用于：
    根据所述数据获取请求中的数据标识信息以及预存的数据标识与查询接口的对应关系，从预设查询接口列表匹配目标查询接口；
    发送所述数据获取请求至所述目标查询接口获取所述数据源。
  10. 根据权利要求7所述的装置，其特征在于，所述渲染操作包括：
    对所述网页控件进行控件样式修改或数据文本修改。
PCT/CN2020/097833 2019-08-26 2020-06-24 一种网页编辑方法及装置 WO2021036448A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CA3152833A CA3152833C (en) 2019-08-26 2020-06-24 Webpage editing method and device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910790524.8A CN110705231B (zh) 2019-08-26 2019-08-26 一种网页编辑方法及装置
CN201910790524.8 2019-08-26

Publications (1)

Publication Number Publication Date
WO2021036448A1 true WO2021036448A1 (zh) 2021-03-04

Family

ID=69193549

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/097833 WO2021036448A1 (zh) 2019-08-26 2020-06-24 一种网页编辑方法及装置

Country Status (3)

Country Link
CN (1) CN110705231B (zh)
CA (1) CA3152833C (zh)
WO (1) WO2021036448A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113050942A (zh) * 2021-03-31 2021-06-29 北京字节跳动网络技术有限公司 页面生成方法、装置、可读介质及电子设备
CN113656717A (zh) * 2021-08-06 2021-11-16 上海硬通网络科技有限公司 一种网页的控件渲染方法、装置、设备及存储介质
CN115600035A (zh) * 2022-09-09 2023-01-13 中电金信软件有限公司（Cn） 一种邀约页面的生成方法及装置

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110705231B (zh) * 2019-08-26 2023-06-30 苏宁云计算有限公司 一种网页编辑方法及装置
CN112181394A (zh) * 2020-10-15 2021-01-05 洛阳众智软件科技股份有限公司 三维建筑模型构件创造方法、装置及设备
CN112363794B (zh) * 2020-11-30 2024-02-06 华云数据控股集团有限公司 一种前端列表类组件的渲染方法及电子设备
CN112417340B (zh) * 2020-12-07 2022-07-15 常州微亿智造科技有限公司 网页图片处理方法、计算机设备和存储介质
CN113343157B (zh) * 2021-07-05 2023-07-14 湖南快乐阳光互动娱乐传媒有限公司 一种基于领域专用语言的内容编辑方法和装置
CN113850993B (zh) * 2021-09-09 2022-12-30 安徽科力信息产业有限责任公司 一种交通道路路口的信号渠化渲染方法及系统

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070245224A1 (en) * 2006-04-07 2007-10-18 Wen-Hao Hsu Web page editing system with database drill-down
CN101408899A (zh) * 2008-11-21 2009-04-15 北京中企开源信息技术有限公司 一种网站多数据源切换方法和装置
CN104572092A (zh) * 2014-12-26 2015-04-29 北京奇虎科技有限公司 网页制作方法与装置
CN106096049A (zh) * 2016-06-29 2016-11-09 江苏中威科技软件系统有限公司 一种可视化生成网页模板的方法及系统
CN107402775A (zh) * 2016-05-19 2017-11-28 百度在线网络技术（北京）有限公司 网页的生成方法、装置和系统
CN109634598A (zh) * 2018-12-14 2019-04-16 北京字节跳动网络技术有限公司 一种页面显示方法、装置、设备及存储介质
CN110705231A (zh) * 2019-08-26 2020-01-17 苏宁云计算有限公司 一种网页编辑方法及装置

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103309806B (zh) * 2013-05-03 2016-06-01 上海证券交易所 一种快速开发测试的装置及方法
CN106708480B (zh) * 2015-07-29 2021-02-26 腾讯科技（深圳）有限公司 管理平台实现方法和装置

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070245224A1 (en) * 2006-04-07 2007-10-18 Wen-Hao Hsu Web page editing system with database drill-down
CN101408899A (zh) * 2008-11-21 2009-04-15 北京中企开源信息技术有限公司 一种网站多数据源切换方法和装置
CN104572092A (zh) * 2014-12-26 2015-04-29 北京奇虎科技有限公司 网页制作方法与装置
CN107402775A (zh) * 2016-05-19 2017-11-28 百度在线网络技术（北京）有限公司 网页的生成方法、装置和系统
CN106096049A (zh) * 2016-06-29 2016-11-09 江苏中威科技软件系统有限公司 一种可视化生成网页模板的方法及系统
CN109634598A (zh) * 2018-12-14 2019-04-16 北京字节跳动网络技术有限公司 一种页面显示方法、装置、设备及存储介质
CN110705231A (zh) * 2019-08-26 2020-01-17 苏宁云计算有限公司 一种网页编辑方法及装置

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113050942A (zh) * 2021-03-31 2021-06-29 北京字节跳动网络技术有限公司 页面生成方法、装置、可读介质及电子设备
CN113656717A (zh) * 2021-08-06 2021-11-16 上海硬通网络科技有限公司 一种网页的控件渲染方法、装置、设备及存储介质
CN113656717B (zh) * 2021-08-06 2024-05-28 上海硬通网络科技有限公司 一种网页的控件渲染方法、装置、设备及存储介质
CN115600035A (zh) * 2022-09-09 2023-01-13 中电金信软件有限公司（Cn） 一种邀约页面的生成方法及装置

Also Published As

Publication number Publication date
CN110705231A (zh) 2020-01-17
CA3152833C (en) 2023-04-25
CN110705231B (zh) 2023-06-30
CA3152833A1 (en) 2021-03-04

Similar Documents

Publication Publication Date Title
WO2021036448A1 (zh) 一种网页编辑方法及装置
US10025837B2 (en) Systems and methods for intelligent data preparation and visualization
CN110955717A (zh) 一种基于大数据的可视化动态展示方法及其系统
EP4020253A1 (en) A data model creation method and terminal thereof
CN110489116A (zh) 一种页面的渲染方法、装置及计算机存储介质
CN110543303B (zh) 一种可视化业务平台
EP3193261A1 (en) Method and system for editing virtual documents
CN104281447A (zh) 一种报表快速生成及发布的系统及其方法
US11176125B2 (en) Blended retrieval of data in transformed, normalized data models
CN112199373A (zh) 一种表单开发方法和系统
CN115840567A (zh) 一种应用编辑方法及相关设备
US20190188297A1 (en) Automatic core data service view generator
CN114756789A (zh) 一种可视化大屏生成系统
US20220405297A1 (en) Apparatus and method for filtering data from or across different analytics platforms
CN109739504B (zh) 一种根据后台配置自动生成h5业务办理页面的方法
CN116009862A (zh) 一种数据处理方法、系统、装置及存储介质
CN112817964A (zh) 一种基于流程机器人的指标看板设计与开发系统
CN114116686A (zh) 用于实现数据大屏的数据可视化方法
CN113254455A (zh) 数据库的动态配置方法、装置、计算机设备及存储介质
CN116611418B (zh) 基于在线编辑的报告处理方法、装置、电子设备及介质
CN113343656A (zh) 一种图表配置元素数据模型的二次编辑方法
CN114548062B (zh) 一种报表编排方法
US20240037325A1 (en) Ability to add non-direct ancestor columns in child spreadsheets
CN117033420B (zh) 一种知识图谱同概念下实体数据可视化展示方法及装置
CN113536756A (zh) 一种数据解读系统

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20857945

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 3152833

Country of ref document: CA

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 20857945

Country of ref document: EP

Kind code of ref document: A1