CN114417215A - 一种设计器及页面设计方法 - Google Patents

Abstract

本申请提供了一种设计器及页面设计方法，涉及互联网技术领域。该设计器包括显示模块，用于提供一个显示区域，显示区域包括组件模板区域、页面视图编辑区域以及配置区域，组件模板区域内显示有组件和模板，组件和模板能够被拖拽至页面视图编辑区域；接口模块，用于从数据源调取数据；处理模块，用于将组件和/或模板与相应数据进行双向绑定。以此方式，可以实现自定义页面内容以及站点的快速开发。

Description

一种设计器及页面设计方法

技术领域

本申请涉及互联网技术领域，尤其是涉及一种设计器及页面设计方法。

背景技术

目前，网站站点页面开发方式包括两种：一种是使用开源公开的内容管理***(content management system，CMS)建站产品；还有一种是企业自研站点内容管理***。

其中，开源公开的CMS建站产品功能成熟、简单易用，但行业定制化功能欠缺、产品扩展能力不强，且二次开发的成本较高；而企业自研站点内容管理***的定制化扩展能力强，但模板资源不足，且对于一些非互联网行业的企业而言，其在***使用操作方面会稍有难度，因此，企业自研站点内容管理***的站点配置能力较为有限，开发成本也较高。

发明内容

为了实现自定义页面内容以及站点的快速开发，本申请提供了一种设计器及页面设计方法。

在本申请的第一方面，提供了一种设计器，包括：

显示模块，用于提供一个显示区域，显示区域包括组件模板区域、页面视图编辑区域以及配置区域，所述组件模板区域内显示有组件和模板，所述组件和所述模板能够被拖拽至所述页面视图编辑区域；

接口模块，用于从数据源调取数据；

处理模块，用于将所述组件和/或所述模板与相应数据进行双向绑定。

通过采用上述方案，设计人员只需要进行简单的拖拽，即可快速灵活的布局页面，降低了页面开发难度，且采用数据与组件、模板双向绑定的方式，实现了当数据源中数据改变时，组件显示的数据同步变化；或当组件显示的数据变化，数据源中的数据同步变化。

可选的，所述处理模块具体用于：配置监听函数并通过所述监听函数实现所述组件和/或所述模板与相应数据进行双向绑定；所述监听函数用于监听页面视图中的组件中显示的数据和数据源中的数据；在组件中显示的数据发生变化时，更新与该组件绑定的数据源中的数据；在数据源中的数据发生变化时，更新与该数据源绑定的组件中显示的数据。

可选的，所述处理模块还用于配置所述组件的默认静态数据和显示所述默认静态数据的默认数据格式。

可选的，所述处理模块还用于将从数据源中获取的数据的格式过滤，并转换为所述默认数据格式。

可选的，所述处理模块还用于声明全局变量，所述全局变量中存储有不同组件所需的共同数据。

可选的，所述处理模块还用于配置轮询时间，所述轮询时间为从数据源处请求数据的间隔时间。

可选的，所述处理模块还用于判断所述页面视图编辑区域内是否存在相同的组件；若是，则后加载的组件使用首次加载组件时的渲染数据。

可选的，所述处理模块具体用于：获取组件的DOM结构；对比组件DOM结构中同一层级的节点ID是否相同；若是，则两个组件为相同组件。

在本申请的第二方面，提供了一种页面设计方法。该方法包括：

将组件模板区域内的组件或模板拖拽至页面视图编辑区；从数据源中获取数据；将所述组件和/或所述模板与相应数据进行双向绑定。

可选的，该方法还包括：配置监听函数并通过所述监听函数实现所述组件和/或所述模板与相应数据进行双向绑定；所述监听函数用于监听页面视图中的组件中显示的数据和数据源中的数据；在组件中显示的数据发生变化时，更新与该组件绑定的数据源中的数据；在数据源中的数据发生变化时，更新与该数据源绑定的组件中显示的数据。

应当理解，发明内容部分中所描述的内容并非旨在限定本申请的实施例的关键或重要特征，亦非用于限制本申请的范围。本申请的其它特征将通过以下的描述变得容易理解。

附图说明

结合附图并参考以下详细说明，本申请各实施例的上述和其他特征、优点及方面将变得更加明显。在附图中，相同或相似的附图标记表示相同或相似的元素，其中：

图1是本申请实施例中的页面设计***的方框图；

图2是本申请实施例中设计器的方框图；

图3是本申请实施例中显示模块显示的用户端的示意图；

图4是本申请实施例中组件数据双向绑定以及全局变量的示意图；

图5是本申请实施例中组件和API键值映射的示意图；

图6是本申请实施例中Diff算法中双端比较算法的示意图；

图7是本申请实施例中页面设计方法的流程图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。

为了便于对本申请实施例的理解，首先对本申请实施例涉及的部分术语进行解释。

在本申请的描述中，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

随着各行业互联网信息化程度加深，通过企业网站的形式作为对外展示公司形象的一个重要的信息窗口，大部分企业都会建立自己的专业网站。

但是对于一些非互联网企业来说，建立一个网站，不仅开发难度大，且成本也较高，加重了企业经营负担；若要使用开源公开的CMS建站产品，其定制化程度低，因此也很难满足企业的需求。尤其对于教育行业中的学校而言，更是如此。

基于上述技术问题，本申请实施例提供一种设计器140，内含丰富的组件和模板和多样的数据源150，设计器140也集成了各种功能，从而使设计人员能够快速完成站点开发。

图1示出了本申请实施例中的页面设计***的方框图。

参见图1，页面设计***包括用于对站点进行管理的站点管理模块110、用于对站点内容进行管理的内容管理模块120、用于提供组件模板的组件模板模块130、用于提供网页画布进行设计页面的设计器140以及提供数据资源的数据源150。其中，站点管理模块110、内容管理模块120、组件模板模块130、设计器140、数据源150均设置有接口，这五个模块通过接口进行通讯。

其中，站点管理模块110用于支持多级站点的建设和管理，站点管理模块110包括站点属性管理单元111、页面管理单元112以及栏目管理单元113。需要说明的是，多级站点是指一个站点下有多个子站点。

站点属性管理单元111主要用于站点导入、站点导出、站点发布、权限管理、访问控制、站点配置、站点主题切换。页面管理单元112用于进行母版设置(例如：公共页头页脚、页面模板布局)、页面设计、权限管理、访问控制等。栏目管理单元113用于栏目导入、栏目导出、栏目排序、访问控制，在栏目管理单元113中，通过在栏目列表中拖拽栏目上下级顺序实现对栏目的顺序调整，控制栏目显示隐藏、导航显示隐藏功能就能实时展示页面不同效果。

内容管理模块120用于管理提供用户观看的内容，例如：新闻、视频、音频、文档、图片集、超链接等。内容管理模块120能够对文本进行编辑和排版，提供清除格式、全选、草稿箱、预览等功能，也可以对内容进行新建、修改、审核、发布以及站点推送等操作。

组件模板模块130用于提供多种组件和模板。在申请实施例中，组件模板模块130包括一个组件模板库，组件模板库中可以按照功能的不同对组件或模板进行分类。其中，组件类型包括但不限于：通用组件、地图组件、图表组件、文本组件、交互组件、列表组件、媒体组件、业务组件等。模板的类型包括但不限于***模板、站点模板，例如：常用的资讯详情、评价评分、问卷调查、表单模板、***模板等。

在一些实施方式中，在组件模板模块130中，可以将多个组件进行自定义组合，并保存在组件模板库中，来获得用户需求的站点模板。

设计器140用于提供设计人员进行页面的具体设计，设计人员通过设计器140来实现对组件拖拽操作，和页面的布局，从而实现设计人员接近零代码也能快速搭建一站式多级资讯站点。

图2示出了本申请实施例中设计器140的方框图。参见图2，设计器140包括用于提供显示区域的显示模块210、用于从数据源150调取数据的接口模块220以及用于将组件和/或模板与相应数据进行双向绑定的处理模块230。需要说明的是，显示模块210、接口模块220以及处理模块230均通过接口相互通信。

下面对显示模块210、接口模块220以及处理模块230进行具体介绍。

显示模块210中的显示区域包括组件模板区域、页面视图编辑区域以及配置区域。图3示出了本申请实施例中显示模块210显示的用户端的示意图。参见图3，左边区域即为组件模板区域；中间的区域即为页面视图编辑区域；右边的区域即为配置区域。

其中，组件模板区域用于显示组件模板模块130中的组件或模板，且组件模板区域中的组件或模板能够被拖拽至页面视图编辑区中进行设计排版。

具体地，显示模块210与组件模板模块130通过接口进行通讯，组件模板区域能够显示存储在组件模板库中的所有组件和模板。参见图3，在组件模板区域中还分有功能控件区域和列表区域。组件模板区域上方为功能控件区域；功能控件区域的下方为列表区域。功能控件区域显示有组件控件、模板控件、图层控件、区块控件，用户通过点击控件来切换列表区域中显示的内容。比如，用户点击组件控件，则列表区域会显示组件模板库中的所有组件。

在一些实施方式中，在显示组件和模板的同时还会显示组件或模板对应的功能名称，方便用户找到所需功能的组件或模板。在创建或存储组件或模板时，其功能名称就已经设置了相应的ID。例如，用于弹窗的组件，可以命名为弹窗组件。

页面视图编辑区域包括一个画布，供用户设计页面。在设计过程中，用户只需将组件或模板拖拽至画布中，即可对该组件或模板进行配置操作。

其中，用户终端不同，其拖拽方式不同。若用户终端的显示屏为触控屏，则用户通过触控操作对组件或模板进行拖拽；若用户终端的显示屏为非触控屏，则用户通过点击、拖动操作来对组件或模板进行拖拽。

配置区域显示的配置功能包括(但不限于)站点配置、页面配置、组件配置、调试配置等。其中，组件配置中可以对组件的属性进行配置、对组件绑定的数据进行管理等，例如，属性配置中，可以对组件的名称和ID进行修改，或者调整组件大小等。

显示模块210设置组件需要绑定的数据或数据源，接口模块220从数据源150中调取相应的数据，调取的数据会先发送至处理模块230，处理模块230将组件和数据进行绑定，再呈现在显示的组件视图上。

在一些实施方式中，处理模块230具体用于：配置监听函数并通过监听函数实现组件和/或模板与相应数据进行双向绑定；监听函数用于监听页面视图中的组件中显示的数据和数据源150中的数据；在组件中显示的数据发生变化时，更新与该组件绑定的数据源150中的数据；在数据源150中的数据发生变化时，更新与该数据源150绑定的组件中显示的数据。

在本实施例中需要使用两种监听函数，一种为监听组件是否发生变化的第一监听函数，另一种为监听后端数据源150中数据是否发生变化的第二监听函数。

具体地，第一监听函数需要与组件和对应的数据先进行绑定，绑定后，第一监听函数即能够获取组件视图显示的数据和与组件绑定的数据源150中的数据，当监听到组件视图显示的数据发生变化，则第一监听函数获取组件视图显示的数据，并将数据发送至数据源150中进行同步更新。同样的，第二监听函数也需要与组件和对应的数据进行绑定，不同的是，第二监听函数监听的是数据源150中的数据是否发生变化，若数据源150中的数据发生变化，则第二监听数据获取变化后的数据，并传输至显示模块210，使组件视图显示的数据进行同步更新。

所使用的监听函数可以根据前端使用的架构的不同，来使用不同的监听函数。示例地，假设前端使用的js框架为vue，则第一监听函数可以使用watch监听函数等，第二监听函数可以使用Object.defineProperty监听函数等。

示例地，假设前端采用的框架为Vue，使用watch函数监听页面中的一个input输入框，当input输入框中的文本数据发生变化时，watch函数更新该input输入框中文本数据对应的后端数据为input框中输入的文本数据。

在一些实施方式中，处理模块230还用于声明全局变量，所述全局变量中存储有不同组件所需的共同数据。在实际应用过程中，当同一页面上不同组件都需要使用共同的变量时，将该变量定义(声明)为全局变量，在组件与数据双向绑定时，只需要包含该声明，就可以绑定到该变量。将变量设置为全局变量后，在实际请求时，只需要对该变量请求一次，请求后获得的变量存储在全局变量中，前端浏览器本地会将全局变量进行缓存，在其他组件需要调用该数据时，只需要直接在本地中调用该数据即可。

需要说明的是，若将数据设置为全局变量，则上述的第一监听函数则与组件和对应的全局变量中的数据进行绑定，若组件视图显示的数据更新，则通过监听函数同步更新全局变量中的数据。同样的，第二监听函数监听的也是全局变量中的数据是否发生变化，若全局变量中的数据发生变化，则组件视图显示的数据也会同步变化。

在一些实施例中，处理模块230还用于配置轮询时间，轮询时间为从数据源150处请求数据的间隔时间。具体地，当声明全局变量后，配置轮询时间，需要说明的是，轮询时间是指，全局变量轮询后端数据源150的间隔时间，即全局变量每间隔设定的轮询时间就会自动对后端数据源150中的数据进行请求，若后端数据源150中的数据发生变化，则会同步更新前端存储在全局变量中的数据，当第二监听函数监听到全局变量中的数据发生变化时，会同步更新组件视图显示的数据。

示例地，图4示出了组件数据双向绑定以及全局变量的示意图。图4中，组件A和组件B均需要请求后端API-1接口，来获取数据，则将该数据定义为var1(全局变量1)。在实际请求时，假设组件A先请求该数据，前端站点将请求通过后端API-1接口发送至后端数据源150，来调用该数据，数据源150再通过API-1接口将数据返回至前端全局变量var1中进行缓存，根据组件与数据的绑定关系，组件A直接获取全局变量var1中的数据。当组件B也需要获取该数据时，可以直接在全局变量var1中获取。

在本实施例中，数据源150还包括一个静态数据源，该静态数据源中存储有组件需要显示的静态数据。

为了提升组件展示的友好性，在一些实施方式中，处理模块230还用于设置组件的默认静态数据和显示默认静态数据的默认数据格式。具体地实现方式多种多样，比如，可以在创建组件时，就将默认静态数据和默认数据格式充入该组件。在本实施例中，默认静态数据的设置，是将组件与静态数据库中的默认静态数据绑定，当监听页面视图编辑区域的监听函数监听到某组件被拖拽至页面视图编辑区域，监听函数从静态数据源中调取与该组件绑定的默认静态数据。

在一些实施方式中，处理模块230还用于将从数据源150中获取的数据的格式过滤，并转换为默认数据格式。具体地，将从后端数据源150中调取的数据的格式进行格式转换，转换为组件的默认数据格式。在本实施例中，采用过滤函数来将后端数据源150中调取的数据的格式进行格式转换。

具体地，采用过滤函数实现将后端数据源150中调取的数据格式转换为默认数据格式，实现逻辑为组件和API键值进行映射，即前端组件配置属性和后端API返回接口数据格式之间映射。

示例地，图5示出了本申请实施例中组件和API键值映射的示意图。图5中，假设前后端组件属性名称不一致，前端组件的属性名称为：ID，后端返回的数据中名称为：name。则采用过滤函数，定义前端要获取的数据widget为MAP(K，V)，即当K为ID时，V为后端数据集中的key，从而获得后端数据集中key对应的数据“205_99396”，实现组件和API键值之间映射，进而实现数据格式的转换。

为了提高页面加载效率，在一些实施方式中，处理模块230还用于判断页面视图编辑区域内是否存在相同的组件；若是，则后加载的组件使用首次加载组件时的渲染数据。具体地，对比同一页面中是否使用了相同的组件，若存在相同组件，在加载渲染过程中，将首次请求渲染该组件获得的渲染数据存储在GPU的显存中，后加载该组件时，只需直接从显存中获取渲染数据即可，不需要再次进行渲染，从而提高了页面的加载效率。

在一些实施方式中，处理模块230具体用于：获取组件的DOM结构；对比组件DOM结构中同一层级的节点ID是否相同；若是，则两个组件为相同组件。

需要说明的是，两个相同的组件产生类似的DOM结构，不同组件会有不同的DOM结构。且DOM结构中同一层级的一组节点，可以通过唯一的ID进行区分。

在本实施例中，判断同一页面上是否使用了相同的组件，采用的是Diff算法来进行比较判断，并且本实施例采用的是Diff算法中的双端比较的算法，采用双端比较，能够减少移动节点次数，减少不必要的性能损耗。具体地，图6示出了本申请实施例中Diff算法中双端比较算法的示意图。参见图6，先获取页面中所有组件的DOM结构，获取DOM结构后，同时从新节点newCh的开始节点newStartldx到结束节点newEndldx、从旧节点oldCh的开始节点oldStartldx到结束节点oldEndldx开始进行比较，比较同一层级的一组节点的ID。需要说明的是，新节点newCh是指未经渲染的组件的DOM结构中节点，旧节点oldCh是指经过渲染的组件的DOM结构中节点。若经过比较后两个组件的DOM结构相同，则说明两个组件为同一组件。需要说明的是，图6中位于同一竖直方向上的两个节点为同一层级的节点。

图7示出了本申请实施例中页面设计方法的流程图，参加图7，该方法包括以下步骤：

步骤710：将组件模板区域内的组件或模板拖拽至页面视图编辑区。

步骤720：从数据源150中获取数据。

步骤730：将组件和/或模板与相应数据进行双向绑定。

在一些实施方式中，该方法还包括：配置监听函数并通过监听函数实现组件和/或模板与相应数据进行双向绑定；监听函数用于监听页面视图中的组件中显示的数据和数据源150中的数据；在组件中显示的数据发生变化时，更新与该组件绑定的数据源150中的数据；在数据源150中的数据发生变化时，更新与该数据源150绑定的组件中显示的数据。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，所述描述的方法实现的过程，可以参考前述设计器140实施例中对应的模块工作过程，在此不再赘述。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的申请范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离前述申请构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中申请的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种设计器，其特征在于，包括：

显示模块，用于提供一个显示区域，显示区域包括组件模板区域、页面视图编辑区域以及配置区域，所述组件模板区域内显示有组件和模板，所述组件和所述模板能够被拖拽至所述页面视图编辑区域；

接口模块，用于从数据源调取数据；

处理模块，用于将所述组件和/或所述模板与相应数据进行双向绑定。

2.根据权利要求1所述的设计器，其特征在于，所述处理模块具体用于：

配置监听函数并通过所述监听函数实现所述组件和/或所述模板与相应数据进行双向绑定；

所述监听函数用于监听页面视图中的组件中显示的数据和数据源中的数据；在组件中显示的数据发生变化时，更新与该组件绑定的数据源中的数据；在数据源中的数据发生变化时，更新与该数据源绑定的组件中显示的数据。

3.根据权利要求1所述的设计器，其特征在于，所述处理模块还用于配置所述组件的默认静态数据和显示所述默认静态数据的默认数据格式。

4.根据权利要求3所述的设计器，其特征在于，所述处理模块还用于将从数据源中获取的数据的格式过滤，并转换为所述默认数据格式。

5.根据权利要求1所述的设计器，其特征在于，所述处理模块还用于声明全局变量，所述全局变量中存储有不同组件所需的共同数据。

6.根据权利要求1所述的设计器，其特征在于，所述处理模块还用于配置轮询时间，所述轮询时间为从数据源处请求数据的间隔时间。

7.根据权利要求1所述的设计器，其特征在于，所述处理模块还用于判断所述页面视图编辑区域内是否存在相同的组件；若是，则后加载的组件使用首次加载组件时的渲染数据。

8.根据权利要求7所述的设计器，其特征在于，所述处理模块具体用于：

获取组件的DOM结构；

对比组件DOM结构中同一层级的节点ID是否相同；

若是，则两个组件为相同组件。

9.一种页面设计方法，应用如权利要求1至8所述的设计器，其特征在于，包括：

将组件模板区域内的组件或模板拖拽至页面视图编辑区；

从数据源中获取数据；

将所述组件和/或所述模板与相应数据进行双向绑定。

10.根据权利要求9所述的页面设计方法，其特征在于，还包括：

配置监听函数并通过所述监听函数实现所述组件和/或所述模板与相应数据进行双向绑定；

所述监听函数用于监听页面视图中的组件中显示的数据和数据源中的数据；在组件中显示的数据发生变化时，更新与该组件绑定的数据源中的数据；在数据源中的数据发生变化时，更新与该数据源绑定的组件中显示的数据。

Images