表单生成方法、装置及电子设备制造方法及图纸

本发明专利技术提供了一种表单生成方法、装置及电子设备，当需要开发人员开发界面中的某表单(记为目标表单)时，本发明专利技术将直接在预先构建的表单项组件中，设置该目标表单具有的表单元素属性，调用与该表单元素属性对应的表单项代码，以及与目标表单的布局对应的布局样式代码，从而快速生成目标表单，无需开发人员手动编写程序代码，大大提高了开发效率。

【技术实现步骤摘要】
表单生成方法、装置及电子设备
本专利技术主要涉及前端
，更具体地说是涉及一种用户界面处理方法、装置及电子设备。
技术介绍
在网页中主要负责数据采集的功能，是软件应用系统的重要元素，且在用户浏览网页过程中，界面中的表单还能够为用户起到指引作用，以使用户能够在表单的表单域(包含文本框、密码框、复选框、下拉选择框、文件上传框等表单元素)中准确填写格式正确的信息，非常方便。在实际应用中，表单通常是由表单标签、表单域和表单按钮三部分组成，在不同网页或不同应用版本的网页中，对表单的布局要求往往会不同，通常需要开发人员针对各表单布局，编写对应的程序代码，效率非常低。
技术实现思路
有鉴于此，本实施例提供了一种表单方法、装置及电子设备，利用预先构建的表单项组件，确定目标表单涉及到的表单元素属性后，直接调用相匹配的表单项代码及布局样式，即可生成目标表单，无需开发人员手动编写代码，提高了开发效率。为了实现上述目的，本实施例公开了以下技术方案：本实施例提供了一种表单生成方法，所述方法包括：获取目标表单具有的表单元素属性；从已构建的表单项组件中，调用与获取的所述表单元素属性对应的表单项代码；获取所述目标表单中各表单项的布局样式代码；基于所述表单项代码和所述布局样式代码，生成所述目标表单。本实施例提供了一种表单生成装置，所述装置包括：第一获取模块，用于获取目标表单具有的表单元素属性；表单项代码调用模块，用于从已构建的表单项组件中，调用与获取的所述表单元素属性对应的表单项代码；布局样式代码获取模块，用于获取所述目标表单中各表单项的布局样式代码；表单生成模块，用于基于所述表单项代码和所述布局样式代码，生成所述目标表单。本实施例提供了一种电子设备，所述电子设备包括：通信接口；显示器；存储器，用于存储实现如上所述的表单生成方法的程序；处理器，用于加载并执行所述存储器存储的程序，所述程序用于：获取目标表单具有的表单元素属性；从已构建的表单项组件中，调用与获取的所述表单元素属性对应的表单项代码；获取所述目标表单中各表单项的布局样式代码；基于所述表单项代码和所述布局样式代码，生成所述目标表单。由此可见，与现有技术相比，本专利技术提供了一种表单生成方法、装置及电子设备，当需要开发人员开发界面中的某表单(记为目标表单)时，本专利技术将直接在预先构建的表单项组件中，设置该目标表单具有的表单元素属性，调用与该表单元素属性对应的表单项代码，以及与目标表单的布局对应的布局样式代码，从而快速生成目标表单，无需开发人员手动编写程序代码，大大提高了开发效率。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。图1为本专利技术实施例提供的实现表单生成方法的系统结构示意图；图2为本专利技术实施例提供一种表单生成方法的流程示意图；图3为本专利技术实施例提供不同形态下的表单设计图；图4为本专利技术实施例提供表单项组件的应用示意图；图5a为一种登录表单的横向布局样式；图5b为一种登录表单的纵向布局样式；图5c为另一种登录表单的横向布局样式；图5d为另一种登录表单的纵向布局样式；图6为本专利技术实施例提供另一种表单生成方法的流程示意图；图7为本专利技术实施例提供又一种表单生成方法的流程示意图；图8为本专利技术实施例提供又一种表单生成方法的流程示意图；图9为本专利技术实施例提供一种表单生成装置的结构示意图；图10为本专利技术实施例提供另一种表单生成装置的结构示意图；图11为本专利技术实施例提供又一种表单生成装置的结构示意图；图12为本专利技术实施例提供一种电子设备的硬件结构示意图。具体实施方式下面将结合本实施例中的附图，对本实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开的一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。参照图1，为实现本专利技术提供的表单生成方法的系统结构示意图，如图1所示，该系统可以包括：电子设备100和数据服务器200，其中：电子设备100可以是电脑等终端，本实施例主要是指开发人员进行软件开发所使用的设备，通常具有较强的数据处理能力，本实施例对该电子设备100的具体组成部分不做限定，如通信接口、显示器、存储器及处理器等，该电子设备的硬件结构可以参照下文相应电子设备实施例的描述，本实施例在此不做详述。在实际应用中，开发人员可以使用该电子设备100完成表单设计中所涉及到的程序代码的编写，以生成网页界面中的表单，即得到该输出满足要求(如样式要求、组成元素要求等)的表单的程序代码，因此，该电子设备100通常可以安装编程所需的工具，本实施例对此不做限定。另外，为了提高各种布局的表单生成效率及准确性，本实施例提出获取网页界面通常使用的各种表单对应的程序代码，如具有不同表单标签的表单项分别对应的程序代码，具有相同表单标签的不同布局显示样式的各表单项对应的程序代码等等，本专利技术在此不再一一列举。之后，利用已有的这些表单项及其包含的各表单元素属性，基于React或Vue，封装成一个表单项组件，以供开发人员直接从中选择当前需要开发的目标表单具有的表单元素属性，直接调用已有的相应程序代码(如表单项的逻辑代码及表单布局的布局样式代码等)即可，不需要开发人员针对当前开发的表单，编写完整的程序代码，提高了开发效率。其中，React是一个为数据提供渲染为HTML(HyperTextMarkupLanguage，超级文本标记语言)视图的前端开源JavaScript框架，Vue是一套用于构建用户界面的渐进式JavaScript框架，本实施例对这两种JavaScript框架的使用方法不做详述。数据服务器200可以是设置在云端的数据存储设备，本实施例可以用来存储开发人员预先编写的各种表单项对应的程序代码。在实际应用中，不同开发人员都可以从中调用(即下载)所需的程序代码，且开发人员设计或优化的表单程序代码，也可以上传到该数据服务器，以供其他开发人员在进行表单开发时下载使用。需要说明，本实施例对该数据服务器200对其存储内容，及其存储的各种表单对应的程序代码的存储方式不做限定。参照图1所示的系统结构，本专利技术实施例提供的一种表单生成方法，如图2所示，为该表单生成方法的流程图，该方法可以应用于电子设备，如开发人员所使用的电子设备，具体实现步骤可以包括：步骤S11，获取目标表单具有的表单元素属性；在本实施例中，目标表单可以是当前网页界面要展示的表单，具体可以是网页界面设计人员确定的该网页界面涉及到的表单设计图，其包含了该网页界面展示的该表单包含的各表单元素属性及布局样式等信息，表单代码开发人员可以基于该表单设计图，来编写对应的程序代码，以生成该表单。参照图3所示的一种表单设计图，由该表单设计图可知，在每个表单项中，其包含了表单元素，表单元素属性(如说明文字、后缀、校验文字等)及表单标签label等几部分组成。若将表单看成一个包含表单元素的区域，表单元素可以是允许用户在表单中(如文本框、密码框、复选框、下拉选择框、文本文档来自技高网...

【技术保护点】
1.一种表单生成方法，其特征在于，所述方法包括：获取目标表单具有的表单元素属性；从已构建的表单项组件中，调用与获取的所述表单元素属性对应的表单项代码，所述表单项组件利用现有表单项的表单元素属性构建而成；获取所述目标表单中各表单项的布局样式代码；基于所述表单项代码和所述布局样式代码，生成所述目标表单。

【技术特征摘要】
1.一种表单生成方法，其特征在于，所述方法包括：获取目标表单具有的表单元素属性；从已构建的表单项组件中，调用与获取的所述表单元素属性对应的表单项代码，所述表单项组件利用现有表单项的表单元素属性构建而成；获取所述目标表单中各表单项的布局样式代码；基于所述表单项代码和所述布局样式代码，生成所述目标表单。2.根据权利要求1所述的方法，其特征在于，所述获取目标表单具有的表单元素属性，包括：接收开发人员基于目标表单设计图输入的表单元素属性；或者，获取目标表单设计图，并对所述目标表单设计图进行分析，得到目标表单具有的表单元素属性。3.根据权利要求1所述的方法，其特征在于，所述从已构建的表单项组件中，调用与获取的所述表单元素属性对应的表单项代码，包括：检测已构建的表单项组件是否包含获取的表单元素属性；若所述表单项组件包含所述表单元素属性，调用与该表单元素属性对应的表单项代码；若所述表单项组件未包含所述表单元素属性，输出编码提示信息，所述编码提示信息用于提醒开发人员编写该表单元素属性的表单项代码。4.根据权利要求3所述的方法，其特征在于，所述调用与该表单元素属性对应的表单项代码，包括：向数据服务器发送代码获取请求，所述代码获取请求携带有该表单元素属性或所述表元素属性的元素标识；接收所述数据服务器反馈的该表单元素属性对应的表单项代码。5.根据权利要求1所述的方法，其特征在于，所述从已构建的表单项组件中，调用与获取的所述表单元素属性对应的表单项代码，包括：从已构建的表单项组件中，确定与获取的所述表单元素属性对应的至少一个表单项；调用与确定的各表单项对应的表单项代码。6.根据权利要求5所述的方法，其特征在于，所述从已构建的表单项组件中，确定与获取的所述表单元素属性对应...

【专利技术属性】
技术研发人员：徐远朝，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东,44