CN115617324A - 一种客户端网页的生成方法 - Google Patents

Abstract

本申请提供了一种客户端网页的生成方法，方法包括：显示网页编辑界面；通过针对至少一个目标网页组件所执行的拖拽操作，将至少一个目标网页组件放置在画布区域；针对每个目标网页组件，响应于针对该目标网页组件执行的选择操作，在组件属性配置区域显示与该目标网页组件对应的多个属性配置项；响应于针对每个属性配置项执行的配置操作，生成与该目标网页组件对应的属性配置数据并保存；根据各目标网页组件对应的属性配置数据，在画布区域上渲染出各目标网页组件，以形成客户端网页。本申请通过对不同类型网页组件针对性提供不同的属性配置项，以按需求对不同网页组件进行个性化配置形成针对不同活动的客户端页面，实现无代码的个性化页面定制。

Description

一种客户端网页的生成方法

技术领域

本申请涉及网页设计技术领域，尤其涉及一种客户端网页的生成方法。

背景技术

在当前技术中，开发网页页面时，每个客户针对页面设计的业务需求是不同的，具体开发实施中，往往需要在了解用户实际需求后，编写大量的代码以完成页面开发，降低开发效率的同时，也存在较高的开发成本。

发明内容

有鉴于此，本申请的目的在于至少提供一种客户端网页的生成方法，通过针对不同类型网页组件针对性提供不同的属性配置项，以按需求对不同网页组件进行个性化配置形成针对不同活动的客户端页面，实现无代码的个性化页面定制。

本申请主要包括以下几个方面：

第一方面，本申请实施例提供一种客户端网页的生成方法，方法包括：

响应于针对目标网页节点发出的网页创建请求，显示网页编辑界面，网页编辑界面包括画布区域、组件库区域以及组件属性配置区域，组件库区域包括多个网页组件；通过针对至少一个目标网页组件所执行的拖拽操作，将至少一个目标网页组件放置在画布区域；针对每个目标网页组件，响应于针对该目标网页组件执行的选择操作，在组件属性配置区域显示与该目标网页组件对应的多个属性配置项；针对每个目标网页组件，响应于针对每个属性配置项执行的配置操作，生成与该目标网页组件对应的属性配置数据并保存；根据各目标网页组件对应的属性配置数据，在画布区域上渲染出各目标网页组件，以形成客户端网页并保存。

在一种可能的实施方式中，属性配置数据包括外观显示数据，多个属性配置项包括组件尺寸配置项、组件位置配置项、组件颜色配置项以及组件界面样式配置项，其中，通过以下方式确定每个目标网页组件对应的外观显示数据：响应于对组件尺寸配置项执行的配置操作，确定该目标网页组件对应的尺寸信息；通过对组件位置配置项执行的配置操作，确定该目标网页组件在画布区域中所处的位置；响应于针对组件颜色配置项执行的配置操作，确定该目标网页组件对应的显示颜色；响应于针对组件界面样式配置项执行的配置操作，确定该目标网页组件对应的界面样式；由配置好的尺寸信息、在画布区域所处的位置、显示颜色以及界面样式，形成该目标网页组件对应的外观显示数据。

在一种可能的实施方式中，属性配置数据还包括特殊属性数据，多个网页组件包括用于进行表单制作的输入型组件，特殊属性数据还包括网页字段名称以及用于指示网页组件唯一性的唯一性标签，多个属性配置项还包括网页字段名称配置项及唯一性标签配置项，其中，通过以下方式确定每个目标输入型组件对应的网页字段名称以及唯一性标签：响应于针对网页字段名称配置项执行的网页字段名称输入配置操作，确定该目标输入型组件对应的网页字段名称；获取对唯一性标签配置项执行的唯一性标签添加操作，生成该网页字段名称对应的唯一性标签。

在一种可能的实施方式中，通过以下方式完成对每个目标输入型组件对应的属性配置数据的保存：判断该目标输入型组件对应的属性配置数据中是否存在唯一性标签；若该目标输入型组件存在唯一性标签，则将该目标输入型组件对应的网页字段名称分别与创建完成的其它网页字段名称进行比较；若其它网页字段名称内不存在该目标输入型组件对应的网页字段名称，则保存该目标输入型组件对应的属性配置数据；若其它网页字段名称内存在该目标输入型组件对应的网页字段名称，则对该目标输入型组件对应的网页字段名称进行修改，并返回执行将该目标输入型组件对应的网页字段名称分别与创建完成的其它网页字段名称进行比较。

在一种可能的实施方式中，特殊属性数据还包括用于对输入型组件进行输入约束的限制映射关系，多个属性配置项还包括限制开关配置项，其中，通过以下方式确定每个目标输入型组件对应的限制映射关系：响应于针对限制开关配置项执行的限制开启配置操作，显示限制表单选择配置项以及限制字段映射配置项，限制字段映射配置项包括限制表单中的表单字段配置项以及与该目标输入型组件对应的网页字段配置项；接收对限制表单选择配置项执行的选择操作，从预先存储的多个限制表单中确定目标限制表单；响应于针对表单字段配置项执行的选择操作，显示目标限制表单所包括的多个表单字段选择项；响应于对目标表单字段选择项执行的选择操作，确定该目标输入型组件对应的限制字段；获取该目标输入型组件对应的网页字段名称并填入网页字段配置项，以建立所确定的限制字段与该目标输入型组件之间的限制映射关系。

在一种可能的实施方式中，多个属性配置项还包括跳转类型配置项、跳转地址配置项以及跳转条件配置项，属性配置数据还包括页面跳转数据，其中，通过以下方式确定每个目标网页组件对应的页面跳转数据：响应于针对跳转条件配置项执行的跳转条件配置操作，确定该目标网页组件对应的跳转触发条件；响应于针对跳转类型配置项执行的配置操作，确定该目标网页组件对应的目标跳转类型；响应于针对跳转地址配置项执行的配置操作，确定该目标网页组件对应的跳转地址；由配置好的跳转触发条件、目标跳转类型以及跳转地址，形成该网页组件对应的页面跳转数据。

在一种可能的实施方式中，响应于针对跳转地址配置项执行的配置操作，确定该目标网页组件对应的跳转地址的步骤包括：若目标跳转类型为外部链接跳转，则响应于在跳转地址配置项输入的外部网页链接，将输入的外部网页链接确定为该目标网页组件对应的跳转地址；若目标跳转类型为网页节点内部跳转，则响应于对跳转地址配置项执行的选择操作，显示目标网页组件所在的目标网页节点内的每个网页对应的网页名称；响应于针对目标网页名称执行的选择操作，将该目标网页名称所指示的网页地址确定为该目标网页组件对应的跳转地址；若目标跳转类型为网页活动内部跳转，则响应于对跳转地址配置项执行的选择操作，显示目标网页组件所在的目标活动内的每个网页节点对应的网页节点名称；响应于针对目标网页节点名称执行的选择操作，将该目标网页节点中的首网页所在地址确定为该目标网页组件对应的跳转地址。

第二方面，本申请实施例还提供一种客户端网页的生成方法，方法包括：

响应于针对目标网页的显示触发事件，调用目标网页对应的各目标网页组件对应的属性配置数据；按照各目标网页组件对应的属性配置数据，渲染客户端网页并进行显示；接收用户针对客户端网页上的各目标网页组件执行的操作，获取与每个目标网页组件对应的操作数据并提交至数据库。

在一种可能的实施方式中，若目标网页组件为输入型组件，通过以下方式获取与每个目标网页组件对应的操作数据并提交至数据库：从客户端网页中获取携带输入标记的目标网页组件，输入标记用于指示网页组件为输入型组件，针对每个携带输入标记的目标网页组件，获取用户针对该目标网页组件执行输入操作所形成的输入数据值；若输入数据值为空，则在客户端网页上进行提示；若输入数据值不为空，则按照该目标网页组件所对应的属性配置数据中的特殊属性数据对该输入数据值进行校验；将校验通过的每个输入数据值，建立该输入数据值、及其对应的目标网页组件、用户身份标识之间的映射关系，以形成携带输入标记的目标网页组件对应的操作数据。

在一种可能的实施方式中，特殊属性数据包括限制映射关系，其中，通过以下方式利用每个目标网页组件对应的限制映射关系对该目标网页组件对应的输入数据值进行校验：判断该输入数据值所属的目标网页组件对应的属性配置数据中是否存在限制映射关系；若该输入数据值所属的目标网页组件对应的属性配置数据中存在限制映射关系，则判断该输入数据值所属的目标网页组件对应的网页字段名与限制映射关系所指示的限制字段是否相同；若该输入数据值所属的目标网页组件对应的网页字段名与限制字段相同，则判断限制字段对应的多个字段数据值中是否存在该输入数据值；若限制字段对应的多个字段数据值中是存在该输入数据值，则该输入数据值属于限制字段所属的限制表单，确定该输入数据值通过限制字段校验；若限制字段对应的多个字段数据值中是不存在该输入数据值，则该输入数据值不属于限制字段所属的限制表单，则确定该输入数据值未通过限制字段校验。

本申请实施例提供的一种客户端网页的生成方法，方法包括：响应于针对目标网页节点发出的网页创建请求，显示网页编辑界面；通过针对至少一个目标网页组件所执行的拖拽操作，将至少一个目标网页组件放置在画布区域；针对每个目标网页组件，响应于针对该目标网页组件执行的选择操作，在组件属性配置区域显示与该目标网页组件对应的多个属性配置项；响应于针对每个属性配置项执行的配置操作，生成与该目标网页组件对应的属性配置数据并保存；根据各目标网页组件对应的属性配置数据，在画布区域上渲染出各目标网页组件，以形成目标网页。本申请通过对不同类型网页组件针对性提供不同的属性配置项，以按需求对不同网页组件进行个性化配置形成针对不同活动的客户端页面，实现无代码的个性化页面定制。

为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本申请实施例所提供的一种客户端网页的生成方法的流程图；

图2示出了本申请实施例提供的另一种客户端网页生成方法的流程图；

图3示出了本申请实施例提供的一种客户端网页的生成装置的结构示意图；

图4示出了本申请实施例提供的另一种客户端网页的生成装置的结构示意图；

图5示出了本申请实施例所提供的一种电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，应当理解，本申请中的附图仅起到说明和描述的目的，并不用于限定本申请的保护范围。另外，应当理解，示意性的附图并未按实物比例绘制。本申请中使用的流程图示出了根据本申请的一些实施例实现的操作。应当理解，流程图的操作可以不按顺序实现，没有逻辑的上下文关系的步骤可以反转顺序或者同时实施。此外，本领域技术人员在本申请内容的指引下，可以向流程图添加一个或多个其他操作，也可以从流程图中移除一个或多个操作。

另外，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的全部其他实施例，都属于本申请保护的范围。

在当前技术中，开发网页页面时，有的页面是固定设计好的，还有一部分页面需要根据客户主观需求进行布局开发，然而每个客户的业务需求都不大相同，开发人员需要编写大量的代码进行页面开发，开发过程复杂，开发效率低，且大量冗杂的代码，降低了最后生成的网页的准确率并且开发的成本较高。

基于此，本申请实施例提供了一种客户端网页的生成方法，通过对不同类型网页组件针对性提供不同的属性配置项，以按需求对不同网页组件进行个性化配置形成针对不同活动的客户端页面，实现无代码的个性化页面定制，具体如下：

请参阅图1，图1示出了本申请实施例所提供的一种客户端网页的生成方法的流程图。如图1所示，本申请实施例提供的方法，包括以下步骤：

S100、响应于针对目标网页节点发出的网页创建请求，显示网页编辑界面。

其中，网页编辑界面包括画布区域、组件库区域以及组件属性配置区域，组件库区域包括多个网页组件。

在一具体实施例中，本申请提供有网页活动创建页面，在网页活动创建界面，可以根据客户的活动流程需求，在网页活动创建界面添加多个网页节点，每个网页节点对应客户提供的活动流程中的一个流程节点，每个网页节点内可按照实际需求添加多个网页，在此过程中，响应于用户对多个网页节点中的目标网页节点的选择操作，可显示网页编辑界面，在该网页编辑界面，可实现对目标网页节点内的网页的设计添加。

在网页编辑界面中，还包括页面添加标识，响应于对页面添加标识的选择操作，可以添加一个空白网页并在网页编辑界面中的网页管理区域，形成对应的网页标识，其中，网页编辑界面上还包括页面设置区域，响应于针对网页标识的选择操作，即可对该网页标识对应的页面进行编辑，且在页面设置区域会显示与该网页标识对应的页面的多个页面配置项，多个页面配置项包括页面尺寸配置项和页面背景配置项等。

在画布区域上可以执行针对网页的设计，组件库区域包括用于进行网页制作的不同功能的多个网页组件，多个网页组件包括用于进行表单制作的网页组件和用于进行展示的网页组件，用于进行表单制作的组件包括但不限于以下项中的至少一项：输入框组件、文本域组件、单选框组件、复选框组件、下拉框组件、级联选择组件、评分组件、日历-时间组件、滑块验证组件、表单提交组件、跳转小程序组件和验证码组件，用于展示的网页组件包括但不限于以下项中的至少一项：普通按钮组件、图片组件、轮播图组件、文字组件、视频组件、背景音乐组件、分割线组件、通知栏组件和导航栏组件。

S200、通过针对至少一个目标网页组件所执行的拖拽操作，将至少一个目标网页组件放置在画布区域。

在具体实施中，针对网页设计需求，用户可以将选中的目标网页组件拖拽至画布区域，在该过程中，用户可以直接将选中的目标网页组件拖拽至画布区域中的任意位置。

S300、针对每个目标网页组件，响应于针对该目标网页组件执行的选择操作，在组件属性配置区域显示与该目标网页组件对应的多个属性配置项。

具体的，被放置在画布区域上的目标网页组件未被选中之前，组件属性配置区域是一个空白区域，当目标网页组件被选中时，会在组件属性配置区域显示针对该目标网页组件的多个属性配置项，根据所选中的目标网页组件不同，每个目标网页组件对应的多个属性配置项也是不同的。

S400、针对每个目标网页组件，响应于针对每个属性配置项执行的配置操作，生成与该目标网页组件对应的属性配置数据并保存。

其中，属性配置数据包括外观显示数据，外观显示数据包括但不限于以下项中的至少一项：网页组件的尺寸信息、在画布区域中所处的位置、显示颜色、边框样式，多个属性配置项包括组件尺寸配置项、组件位置配置项、组件颜色配置项以及组件边框样式配置项。

其中，通过以下方式确定每个目标网页组件对应的外观显示数据：

响应于对组件尺寸配置项执行的配置操作，确定该目标网页组件对应的尺寸信息，通过对组件位置配置项执行的配置操作，确定该目标网页组件在画布区域中所处的位置，响应于针对组件颜色配置项执行的配置操作，确定该目标网页组件对应的显示颜色，响应于针对组件边框样式配置项执行的配置操作，确定该目标网页组件对应的边框样式，由配置好的尺寸信息、在画布区域所处的位置、显示颜色以及界面样式，形成该目标网页组件对应的外观显示数据。

在一优选实施例中，多个网页组件包括用于进行表单制作的输入型组件，即用于进行表单制作的网页组件中包括输入型组件，例如输入框组件、提交表单组件等，针对至少一个目标网页组件中的每个目标输入型组件，在对每个目标输入型组件进行配置时，多个属性配置项还包括组件标签配置项、是否允许点击配置项，组件标签配置项用于配置每个目标输入型组件在当前页面中的标签或名称，例如，通过组件标签配置项为输入框组件配置组件标签为“姓名”，则表示该目标输入型组件为姓名输入框组件。

其中，属性配置数据还包括特殊属性数据，多个属性配置项还包括网页字段名称配置项及唯一性标签配置项，特殊属性数据还包括网页字段名称以及用于指示网页组件唯一性的唯一性标签，其中，通过以下方式确定每个目标输入型组件对应的网页字段名称以及唯一性标签：

响应于针对网页字段名称配置项执行的网页字段名称输入配置操作，确定该目标输入型组件对应的网页字段名称，获取对唯一性标签配置项执行的唯一性标签添加操作，生成该网页字段名称对应的唯一性标签。

在一具体实施例中，网页字段名称与组件标签不同之处在于，网页字段名称用于指示目标输入型组件在整个网页活动中的身份，也就是说，在网页活动中，组件标签可以重复，但是网页字段名称不可重复，因此，唯一性标签即可实现网页字段名称在网页活动中的唯一性，例如，同一网页中的两个输入框组件，其对应的组件标签可以同为“姓名”，但其对应的网页字段名称不可以相同，可以设置为“name1”和“name2”，以便于为后续获取各自对应的数据进行区分。

在一优选实施例中，针对目标输入型组件，因网页字段名称的存在，在对配置好的属性配置数据进行保存时，需要考虑需要保证网页字段名称的唯一性，因此，本申请通过以下方式完成对每个目标输入型组件对应的属性配置数据的保存：

判断该目标输入型组件对应的属性配置数据中是否存在唯一性标签，若该目标输入型组件存在唯一性标签，则将该目标输入型组件对应的网页字段名称分别与创建完成的其它网页字段名称进行比较，若其它网页字段名称内不存在该目标输入型组件对应的网页字段名称，则保存该目标输入型组件对应的属性配置数据，若其它网页字段名称内存在与该目标输入型组件对应的网页字段名称，则对该目标输入型组件对应的网页字段名称进行修改，并返回执行将该目标输入型组件对应的网页字段名称分别与创建完成的其它网页字段名称进行比较。

在一具体实施例中，如果目标输入型组件设置了唯一性标签，则该目标输入型组件对应的网页字段名称在所有用户提交的相关数据中，不能存在重复字段值，目标输入型组件未设置唯一性标签，则该目标输入型组对应的网页字段名称涉及的相同字段值可以被多人提交。

例如：某输入型组件用于手机号或者身份证号的输入，若设置唯一性标签，则用户在进行注册时，如果存在之前提交过相同手机号或相同身份证号的用户，则用户无法提交网页中相关数据。

在一具体实施例中，在各网页组件配置完成后，需要对各网页组件对应的网页配置数据进行循环检查，即检查每个属性配置数据中是否存在唯一性标签，其中，若该目标输入型组件存在唯一性标签，还需要先获取该目标输入型组件对应的网页字段名称，若属性配置数据中并不存在该目标输入型组件对应的网页字段名称，则说明并未配置网页字段名称，需要先自动为该目标输入型组件配置唯一的网页字段名称，再进行后续过程。

多个属性配置项还包括输入数据长度配置项、是否为必填配置项以及数据输入类型配置项等，这些配置项可以规定用户在输入组件输入的数据值的格式。

在一优选实施例中，属性配置数据还包括用于对输入型组件进行输入约束的限制映射关系，多个属性配置项还包括限制开关配置项。

其中，通过以下方式确定每个目标输入型组件对应的限制映射关系：

响应于针对限制开关配置项执行的限制开启配置操作，显示限制表单选择配置项以及限制字段映射配置项，限制字段映射配置项包括限制表单中的表单字段配置项以及与该目标输入型组件对应的网页字段配置项，接收对限制表单选择配置项执行的选择操作，从预先存储的多个限制表单中确定目标限制表单，响应于针对表单字段配置项执行的选择操作，显示目标限制表单所包括的多个表单字段选择项，响应于对目标表单字段选择项执行的选择操作，确定该目标输入型组件对应的限制字段，获取该目标输入型组件对应的网页字段名称并填入网页字段配置项，以建立所确定的限制字段与该目标输入型组件之间的限制映射关系。

具体的，预先存储的多个限制表单来源于网页活动中的多个网页节点，每个网页节点都对应一个限制表单，其中，最终形成的限制字段与该目标输入型组件之间的限制映射关系，用于对用户针对该目标输入型组件输入的数据进行限制。

在另一具体实施例中，若网页组件为表单提交组件，且表单提交组件的属性配置数据中不存在对应的限制映射关系或未配置限制表单，说明所有用户都可对表单提交组件进行操作以完成数据提交。

具体的，针对表单提交组件，多个属性配置项还包括提交时间限制开关配置项，属性配置数据还包括提交时间限制数据，提交时间限制数据包括开始限制时间和结束限制时间，开始限制时间和结束限制时间之间的时间段即为允许用户进行表单提交的时间段。

在一优选实施例中，多个属性配置项还包括跳转类型配置项、跳转地址配置项以及跳转条件配置项，属性配置数据还包括页面跳转数据。

其中，通过以下方式确定每个目标网页组件对应的页面跳转数据：

响应于针对跳转条件配置项执行的跳转条件配置操作，确定该目标网页组件对应的跳转触发条件，具体的，例如，若网页组件为表单提交组件，则跳转触发条件可以设置为数据提交成功后跳转。

响应于针对跳转类型配置项执行的配置操作，确定该目标网页组件对应的目标跳转类型，跳转类型包括外部链接跳转、网页活动内部跳转和网页节点内部跳转。

响应于针对跳转地址配置项执行的配置操作，确定该目标网页组件对应的跳转地址，由配置好的跳转触发条件、目标跳转类型以及跳转地址，形成该网页组件对应的页面跳转数据。

响应于针对跳转地址配置项执行的配置操作，确定该目标网页组件对应的跳转地址的步骤包括：

若目标跳转类型为外部链接跳转，则响应于在跳转地址配置项输入的外部网页链接，将输入的外部网页链接确定为该目标网页组件对应的跳转地址，在后续的使用中，可以直接跳转到外部网页链接所指示的页面。

若目标跳转类型为网页节点内部跳转，则响应于对跳转地址配置项执行的选择操作，显示目标网页组件所在的目标网页节点内的每个网页对应的网页名称，响应于针对目标网页名称执行的选择操作，将该目标网页名称所指示的网页地址确定为该目标网页组件对应的跳转地址，网页节点内部跳转即同一网页节点下的多个网页之间进行跳转，在后续的使用中，可以直接根据跳转地址配置项所配置的同一节点中的网页名称，重新获取该网页名称所指示的网页对应的多个属性配置数据，并利用获取到的多个属性配置数据在当前页面重新渲染，以完成页面跳转。

若目标跳转类型为网页活动内部跳转，则响应于对跳转地址配置项执行的选择操作，显示目标网页组件所在的目标活动内的每个网页节点对应的网页节点名称，响应于针对目标网页节点名称执行的选择操作，则将该目标网页节点中的首网页所在地址确定为该目标网页组件对应的跳转地址。

在另一具体实施例中，还可以在每个网页节点对应的网页节点配置界面开启同一网页节点内的多个网页之间的轮播翻页，具体的，网页节点配置界面包括轮播翻页配置项和轮播翻页方式配置项，响应于针对轮播翻页配置项以及和轮播翻页方式配置项执行的配置操作，可以确定置同一网页节点内的多个网页之间执行轮播翻页时对应的轮播翻页方式，轮播翻页方式包括上下滑动翻页、左右滑动翻页等，通过设置的轮播翻页方式，在后续过程中，可通过获取用户手势，在同一页面中进行网页显示内容的渲染修改，从而达到网页切换的效果。

在一优选实施例中，网页编辑界面还包括模板选择区域，模板选择区域包括多个预设网页模板，在对目标网页进行配置时，可以在模板选择区域选择一个目标预设网页模板，复制目标预设网页模板内的内容至目标网页对应的画布区域，可以得到一个与目标预设网页模板相同的网页。

S500、根据各目标网页组件对应的属性配置数据，在画布区域上渲染出各目标网页组件，以形成客户端网页并保存。

具体的，本申请通过对不同网页组件进行个性化配置，实现灵活编辑动态页面，还可以将配置好的网页引入至活动流程中，以使活动编辑与上线不需要代码开发。

请参阅图2，图2示出了本申请实施例提供的另一种客户端网页生成方法的流程图。如图2所示，方法包括：

S600、响应于针对客户端网页的显示触发事件，调用客户端网页对应的各目标网页组件对应的属性配置数据。

S601、按照各目标网页组件对应的属性配置数据，渲染客户端网页并进行显示。

S602、接收用户针对客户端网页上的各目标网页组件执行的操作，获取与每个目标网页组件对应的操作数据并提交至数据库。

在一具体实施例中，显示触发事件可以为跳转事件，例如，用户通过对网页活动中的某一页面中的网页组件执行操作后，达到了该网页组件对应的跳转出发条件，需要跳转到目标网页，此时，则会根据该网页组件配置的跳转类型和跳转地址，调用目标网页对应的各目标网页组件对应的属性配置数据，按照各目标网页组件对应的属性配置数据在重新渲染当前网页，以实现对客户端页面的显示。

在一优选实施例中，若目标网页组件为输入型组件，通过以下方式获取与每个目标网页组件对应的操作数据并提交至数据库：

从客户端网页中获取携带输入标记的目标网页组件，输入标记用于指示网页组件为输入型组件，针对每个携带输入标记的目标网页组件，获取用户针对该目标网页组件执行输入操作所形成的输入数据值，若输入数据值为空，则在客户端网页上进行提示，若输入数据值不为空，则按照该目标网页组件所对应的属性配置数据中的特殊属性数据对该输入数据值进行校验，将校验通过的每个输入数据值，建立该输入数据值、及其对应的目标网页组件、用户身份标识之间的映射关系，以形成携带输入标记的目标网页组件对应的操作数据。

具体的，通过以下方式利用每个目标网页组件对应的限制映射关系对该目标网页组件对应的输入数据值进行校验：

判断该输入数据值所属的目标网页组件对应的属性配置数据中是否存在限制映射关系；

若该输入数据值所属的目标网页组件对应的属性配置数据中存在限制映射关系，则判断该输入数据值所属的目标网页组件对应的网页字段名与限制映射关系所指示的限制字段是否相同；

若该输入数据值所属的目标网页组件对应的网页字段名与限制字段相同，则判断限制字段对应的多个字段数据值中是否存在该输入数据值；

若限制字段对应的多个字段数据值中是存在该输入数据值，则该输入数据值属于限制字段所属的限制表单，确定该输入数据值通过限制字段校验；

若限制字段对应的多个字段数据值中是不存在该输入数据值，则该输入数据值不属于限制字段所属的限制表单，则确定该输入数据值未通过限制字段校验。

具体的，例如，目标输入型组件为名字输入组件，由上述可知，当用户在名字输入组件上输入用户对应的名字，需要先判断该名字输入组件是否配置了限制字段，若配置了限制字段，则判断用户输入的名字是否在限制名单对应的限制字段中出现，若出现，则在用户最后对表单提交组件进行操作执行数据提交时，允许客户提交输入的名字，若用户输入的名字是未在限制名单对应的限制字段中出现，则在用户最后对表单提交组件进行操作执行数据提交时，禁止整个表单网页的提交，以完成对用户提交数据的限制。

在另一具体实施例中，特殊属性数据还包括提交时间限制数据。

其中，若目标输入型组件为表单提交组件，则还通过以下方式利用每个目标网页组件对应的提交时间限制数据对该目标网页组件对应的输入数据值进行校验：

获取表单提交组件对应的开始限制时间和结束限制时间，确定用户对用户针对表单提交组件执行提交操作的提交时间，判断提交时间是否处于开始限制时间和结束限制时间之间的时间段，若提交时间处于开始限制时间和结束限制时间之间的时间段，则确定提交时间通过校验，允许用户提交数据，若提交时间不处于开始限制时间和结束限制时间之间的时间段，则确定提交时间未通过校验，不允许用户提交数据。

在另一优选实施例中，若某一网页组件为手机号输入组件，用户针对该手机号输入组件执行输入操作得到用户手机号，则利用特殊属性数据中的手机号格式数据对用户输入的手机号进行校验。

在移动端，当用户针对某一网页中的网页组件的操作满足该网页组件对应的跳转触发条件时，按照对应的跳转类型和跳转地址进行相应的网页跳转，其中，若网页组件为表单提交组件，如果表单提交组件被配置了不允许重复提交，则用户进行数据提交后直接将当前网页替换为所要跳转的网页，且此时无法再返回到表单提交组件所在的页面。

基于同一申请构思，本申请实施例中还提供了与上述实施例提供的网页的生成方法对应的网页的生成装置，由于本申请实施例中的装置解决问题的原理与本申请上述实施例的网页的生成方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

请参阅图3，图3示出了本申请实施例提供的一种客户端网页的生成装置的结构示意图。如图3所示，装置包括：

显示模块710，用于响应于针对目标网页节点的网页创建请求，显示网页编辑界面，网页编辑界面包括画布区域、组件库区域以及组件属性配置区域，组件库区域包括多个网页组件。

拖拽模块720，用于通过针对至少一个目标网页组件所执行的拖拽操作，将至少一个目标网页组件放置在画布区域。

选择模块730，用于针对每个目标网页组件，响应于针对该目标网页组件执行的选择操作，在组件属性配置区域显示与该目标网页组件对应的多个属性配置项。

配置模块740，用于针对每个目标网页组件，响应于针对每个属性配置项执行的配置操作，生成与该目标网页组件对应的属性配置数据并保存。

渲染模块750，用于根据各目标网页组件对应的属性配置数据，在画布区域上渲染出各目标网页组件，以形成客户端网页。

请参阅图4，图4示出了本申请实施例提供的另一种客户端网页的生成装置的结构示意图。如图4所示，装置包括：

调用模块760，用于响应于针对客户端网页的显示触发事件，调用客户端网页对应的各目标网页组件对应的属性配置数据。

显示渲染模块770，用于按照各目标网页组件对应的属性配置数据，渲染客户端网页并进行显示。

提交模块780，用于接收用户针对目标客户端网页上的各目标网页组件执行的操作，获取与每个目标网页组件对应的操作数据并提交至数据库。

基于同一申请构思，请参阅图5，图5示出了为本申请实施例提供的一种电子设备的结构示意图，电子设备900包括：处理器910、存储器920和总线930，所述存储器920存储有所述处理器910可执行的机器可读指令，当电子设备900运行时，所述处理器910与所述存储器920之间通过所述总线930进行通信，所述机器可读指令被所述处理器910运行时执行如上述实施例中任一所述的网页的生成方法的步骤。

基于同一申请构思，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述实施例提供的网页的生成方法的步骤。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本申请所提供的几个实施例中，应所述理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者所述技术方案的部分可以以软件产品的形式体现出来，所述计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种客户端网页的生成方法，其特征在于，所述方法包括：

响应于针对目标网页节点发出的网页创建请求，显示网页编辑界面，所述网页编辑界面包括画布区域、组件库区域以及组件属性配置区域，所述组件库区域包括多个网页组件；

通过针对至少一个目标网页组件所执行的拖拽操作，将所述至少一个目标网页组件放置在所述画布区域；

针对每个目标网页组件，响应于针对该目标网页组件执行的选择操作，在组件属性配置区域显示与该目标网页组件对应的多个属性配置项；

针对每个目标网页组件，响应于针对每个属性配置项执行的配置操作，生成与该目标网页组件对应的属性配置数据并保存；

根据各目标网页组件对应的属性配置数据，在所述画布区域上渲染出各目标网页组件，以形成客户端网页并保存。

2.根据权利要求1所述的方法，其特征在于，所述属性配置数据包括外观显示数据，所述多个属性配置项包括组件尺寸配置项、组件位置配置项、组件颜色配置项以及组件边框样式配置项，

其中，通过以下方式确定每个目标网页组件对应的外观显示数据：

响应于对组件尺寸配置项执行的配置操作，确定该目标网页组件对应的尺寸信息；

通过对组件位置配置项执行的配置操作，确定该目标网页组件在所述画布区域中所处的位置；

响应于针对组件颜色配置项执行的配置操作，确定该目标网页组件对应的显示颜色；

响应于针对组件边框样式配置项执行的配置操作，确定该目标网页组件对应的边框样式；

由配置好的尺寸信息、在所述画布区域所处的位置、显示颜色以及界面样式，形成该目标网页组件对应的外观显示数据。

3.根据权利要求1所述的方法，其特征在于，所述属性配置数据还包括特殊属性数据，所述多个网页组件包括用于进行表单制作的输入型组件，所述特殊属性数据还包括网页字段名称以及用于指示网页组件唯一性的唯一性标签，所述多个属性配置项还包括网页字段名称配置项及唯一性标签配置项，

其中，通过以下方式确定每个目标输入型组件对应的网页字段名称以及唯一性标签：

响应于针对网页字段名称配置项执行的网页字段名称输入配置操作，确定该目标输入型组件对应的网页字段名称；

获取对唯一性标签配置项执行的唯一性标签添加操作，生成该网页字段名称对应的唯一性标签。

4.根据权利要求3所述的方法，其特征在于，通过以下方式完成对每个目标输入型组件对应的所述属性配置数据的保存：

判断该目标输入型组件对应的属性配置数据中是否存在唯一性标签；

若该目标输入型组件存在唯一性标签，则将该目标输入型组件对应的网页字段名称分别与创建完成的其它网页字段名称进行比较；

若其它网页字段名称内不存在该目标输入型组件对应的网页字段名称，则保存该目标输入型组件对应的属性配置数据；

若其它网页字段名称内存在该目标输入型组件对应的网页字段名称，则对该目标输入型组件对应的网页字段名称进行修改，并返回执行将该目标输入型组件对应的网页字段名称分别与创建完成的其它网页字段名称进行比较。

5.根据权利要求3所述的方法，其特征在于，所述特殊属性数据还包括用于对输入型组件进行输入约束的限制映射关系，所述多个属性配置项还包括限制开关配置项，

其中，通过以下方式确定每个目标输入型组件对应的限制映射关系：

响应于针对限制开关配置项执行的限制开启配置操作，显示限制表单选择配置项以及限制字段映射配置项，所述限制字段映射配置项包括限制表单中的表单字段配置项以及与该目标输入型组件对应的网页字段配置项；

接收对限制表单选择配置项执行的选择操作，从预先存储的多个限制表单中确定目标限制表单；

响应于针对表单字段配置项执行的选择操作，显示目标限制表单所包括的多个表单字段选择项；

响应于对目标表单字段选择项执行的选择操作，确定该目标输入型组件对应的限制字段；

获取该目标输入型组件对应的网页字段名称并填入网页字段配置项，以建立所确定的限制字段与该目标输入型组件之间的限制映射关系。

6.根据权利要求1所述的方法，其特征在于，所述多个属性配置项还包括跳转类型配置项、跳转地址配置项以及跳转条件配置项，所述属性配置数据还包括页面跳转数据，

其中，通过以下方式确定每个目标网页组件对应的页面跳转数据：

响应于针对跳转条件配置项执行的跳转条件配置操作，确定该目标网页组件对应的跳转触发条件；

响应于针对跳转类型配置项执行的配置操作，确定该目标网页组件对应的目标跳转类型；

响应于针对跳转地址配置项执行的配置操作，确定该目标网页组件对应的跳转地址；

由配置好的跳转触发条件、目标跳转类型以及跳转地址，形成该网页组件对应的页面跳转数据。

7.根据权利要求6所述的方法，其特征在于，所述响应于针对跳转地址配置项执行的配置操作，确定该目标网页组件对应的跳转地址的步骤包括：

若所述目标跳转类型为外部链接跳转，则响应于在跳转地址配置项输入的外部网页链接，将输入的外部网页链接确定为该目标网页组件对应的跳转地址；

若所述目标跳转类型为网页节点内部跳转，则响应于对跳转地址配置项执行的选择操作，显示目标网页组件所在的目标网页节点内的每个网页对应的网页名称；

响应于针对目标网页名称执行的选择操作，将该目标网页名称所指示的网页地址确定为该目标网页组件对应的跳转地址；

若所述目标跳转类型为网页活动内部跳转，则响应于对跳转地址配置项执行的选择操作，显示目标网页组件所在的目标活动内的每个网页节点对应的网页节点名称；

响应于针对目标网页节点名称执行的选择操作，将该目标网页节点中的首网页所在地址确定为该目标网页组件对应的跳转地址。

8.一种客户端网页的生成方法，其特征在于，所述方法包括：

响应于针对目标网页的显示触发事件，调用目标网页对应的各目标网页组件对应的属性配置数据；

按照各目标网页组件对应的属性配置数据，渲染客户端网页并进行显示；

接收用户针对客户端网页上的各目标网页组件执行的操作，获取与每个目标网页组件对应的操作数据并提交至数据库。

9.根据权利要求8所述的方法，其特征在于，若所述目标网页组件为输入型组件，通过以下方式获取与每个目标网页组件对应的操作数据并提交至数据库：

从客户端网页中获取携带输入标记的目标网页组件，所述输入标记用于指示网页组件为输入型组件，

针对每个携带输入标记的目标网页组件，获取用户针对该目标网页组件执行输入操作所形成的输入数据值；

若所述输入数据值为空，则在客户端网页上进行提示；

若所述输入数据值不为空，则按照该目标网页组件所对应的属性配置数据中的特殊属性数据对该输入数据值进行校验；

将校验通过的每个输入数据值，建立该输入数据值、及其对应的目标网页组件、用户身份标识之间的映射关系，以形成携带输入标记的目标网页组件对应的操作数据。

10.根据权利要求9所述的方法，其特征在于，所述特殊属性数据包括限制映射关系，

其中，通过以下方式利用每个目标网页组件对应的限制映射关系对该目标网页组件对应的输入数据值进行校验：

判断该输入数据值所属的目标网页组件对应的属性配置数据中是否存在限制映射关系；

若该输入数据值所属的目标网页组件对应的属性配置数据中存在限制映射关系，则判断该输入数据值所属的目标网页组件对应的网页字段名与限制映射关系所指示的限制字段是否相同；

若该输入数据值所属的目标网页组件对应的网页字段名与限制字段相同，则判断限制字段对应的多个字段数据值中是否存在该输入数据值；

若限制字段对应的多个字段数据值中是存在该输入数据值，则该输入数据值属于限制字段所属的限制表单，确定该输入数据值通过限制字段校验；

若限制字段对应的多个字段数据值中是不存在该输入数据值，则该输入数据值不属于限制字段所属的限制表单，则确定该输入数据值未通过限制字段校验。

Images