CN114518881A - 一种页面生成方法、系统及存储介质 - Google Patents

Abstract

本发明实施例公开了一种页面生成方法、系统及存储介质。该方法包括：客户端响应于字段选择操作，将被选择字段的字段信息发送给服务端；服务端确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成结果发送给客户端；客户端对接收到的服务端报文进行解析，得到客户端组件，并且响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面；客户端根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。本发明实施例的技术方案，可以快速生成对应有高质量代码并且页面风格统一的目标页面。

Description

一种页面生成方法、系统及存储介质

技术领域

本发明实施例涉及计算机应用技术领域，尤其是涉及一种页面生成方法、系统及存储介质。

背景技术

页面开发是信息技术(Information Technology，IT)项目开发中的重要环节。近年在页面开发(即页面生成)过程中，主要是采用人工硬编码的方式进行。

上述的页面生成方案存在如下问题：一是效率低下，人力资源浪费严重，难以短时间内完成系统重构；二是代码质量难以保证，这在后期维护和运行等方面均存在风险；三是页面风格难以统一，客户体验不佳。

发明内容

本发明实施例提供了一种页面生成方法、系统及存储介质，以实现对应有高质量代码并且页面风格统一的目标页面的快速生成的效果。

根据本发明的一方面，提供了一种页面生成方法，可以包括：

客户端响应于字段选择操作，将被选择字段的字段信息发送给服务端；

服务端确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成结果发送给客户端；

客户端对接收到的服务端报文进行解析，得到客户端组件，并响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面；

客户端根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。

根据本发明的另一方面，提供了一种页面生成系统，可以包括：客户端和服务端；其中，

客户端，用于响应于字段选择操作，将被选择字段的字段信息发送服务端；

服务端，用于确定与接收到的字段信息对应的被选择字段，根据被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系生成服务端代码和服务端报文，并将生成结果发送给客户端；

客户端，还用于对接收的服务端报文进行解析，得到客户端组件，响应于模板选择操作，获取被选择模板，基于被选择模板和客户端组件生成初始页面；

客户端，还用于根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。

根据本发明的另一方面，提供了一种计算机可读存储介质，其上存储有计算机指令，该计算机指令用于使处理器执行时实现本发明任意实施例所提供的页面生成方法。

本发明实施例的技术方案，客户端通过响应于字段选择操作，将由此获取的被选择字段的字段信息发送给服务端；服务端通过确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型和针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成的服务端代码和服务端报文发送给客户端；客户端通过对接收到的服务端报文进行解析，得到客户端组件，并且响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面，由于该初始页面是用于确定目标页面上设置有什么样的客户端组件和各客户端组件的呈现形式的页面，其是根据业务需求和预先设置的模板直接确定的页面，这里不再涉及到人工硬编码，由此保证了后续生成的目标页面的页面风格的统一；进一步，客户端根据初始页面和接收到的服务端代码生成在被运行后用于生成目标页面的客户端代码，由于客户端代码是根据目标页面和服务端代码自动生成的代码，这里亦不再涉及到人工硬编码，由此保证了与目标页面对应的客户端代码的高质量。上述技术方案，通过客户端和服务端相互配合(即前后端全栈式支撑)的方式，达到了对应有高质量代码并且页面风格统一的目标页面的快速生成的效果。

应当理解，本部分所描述的内容并非旨在标识本发明的实施例的关键或是重要特征，也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例一提供的一种页面生成方法的流程图；

图2是根据本发明实施例二提供的一种页面生成方法的流程图；

图3是根据本发明实施例三提供的一种页面生成方法的流程图；

图4是根据本发明实施例四提供的一种页面生成方法的时序图；

图5是根据本发明实施例四提供的一种页面生成方法中可选示例的示意图

图6是根据本发明实施例五提供的一种页面生成系统的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。“目标”、“原始”等的情况类似，在此不再赘述。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例一

图1是本发明实施例一中提供的一种页面生成方法的流程图。本实施例可适用于快速生成对应有高质量代码且页面风格统一的目标页面的情况。该方法可以由本发明实施例提供的页面生成系统来执行，该系统可以由软件和/或硬件的方式实现，该系统可以包括客户端和服务端。

参见图1，本发明实施例的方法具体包括如下步骤：

S110、客户端响应于字段选择操作，将被选择字段的字段信息发送给服务端。

其中，字段选择操作可以是对客户端上显示的某字段进行选择的操作，如通过对客户端上显示的某字段进行点击或是按压以选择该字段的操作，该字段可以是某数据源下的某数据表中的字段，被选择的该字段可以称为被选择字段。示例性的，页面开发人员在开发某页面(即目标页面)时，可以根据业务需求(即目标页面需要实现的页面功能)确定与其相关联的数据源、该数据源下的数据表和该数据表下的字段(即被选择字段)，并通过对客户端上显示的各字段中的被选择字段进行点击以选择该被选择字段，由此客户端可以接收到相应的字段选择操作。实际应用中，可选的，客户端可以通过显示各字段的字段名称来显示各字段。客户端响应于该字段选择操作，获取被选择字段的字段信息，该字段信息可以包括被选择字段的属性信息，如字段名称、字段标识和/或字段位置(如被选择字段所在的数据源下的数据表)等。客户端将该字段信息发送给服务端，以使服务端根据接收到的该字段信息确定被选择字段是什么字段。

S120、服务端确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成结果发送给客户端。

其中，服务端根据接收到的字段信息确定与其对应的被选择字段，并获取被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系，其中，字段名称可以是被选择字段的名称，如name、time或money等；字段类型可以是被选择字段的类型，如数值型、字符串型或是时间型等；约束关系可以是被选择字段或是说被选择字段下的字段数据需要满足的关系(即条件)，如非空、正数或是小数点后是5位数等。在此基础上，服务端根据获取到的字段名称、字段类型和约束关系生成服务端代码和服务端报文，该服务端代码可以是与被选择字段匹配的可被服务端运行的代码，实际应用中，可选的，其可以是能够对字段数据进行增删改查的代码；该服务端报文可以理解为针对服务端的输入输出报文，其至少可以体现出字段类型、字段名称和约束关系等信息。然后，服务端将生成结果(即生成的服务端代码和服务端报文)发送给客户端，以使客户端根据接收到的服务端代码和服务端报文生成和/或得到为生成目标页面而需要的相关内容，如客户端组件、客户端代码等。

S130、客户端对接收到的服务端报文进行解析，得到客户端组件，并响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面。

其中，由于服务端报文可以体现出与被选择字段相关的信息，如字段类型、字段名称和/或约束关系等，因此客户端在对接收到的服务端报文进行解析后，可以得到与被选择字段相匹配的可视化的客户端组件。

模板选择操作可以是对客户端上显示的某模板进行选择的操作，如通过对客户端上显示的某模板进行点击或按压以选择该模板的操作，被选择的该模板可以称为被选择模板。示例性的，页面开发人员可以根据上述的业务需求确定目标页面的呈现形式，如表单、表格、查询或综合查询等，由于客户端上显示的模板可以是对应有某种呈现形式的模板，如表单模板(可用于实现新增修改的模板)、表格模板、查询模板(可用于查询出某表单的模板，只读)或是综合查询模板(可包含表单、表格、机构树、电梯导航等多种内容的模板)等等，因此页面开发人员可以通过对在客户端上显示的各模板中的被选择模板(即与目标页面的呈现形式对应的模板)进行点击以选择该被选择模板，由此客户端可以接收到相应的模板选择操作，响应于该模板选择操作，获取该被选择模板。

进而，由于客户端组件是目标页面上的组件，且被选择模板是对应于目标页面的呈现形式的模板，因此客户端可以基于被选择模板和客户端组件这二者生成初始页面，如客户端基于与被选择模板对应的呈现形式对这些客户端组件进行组装，生成初始页面。需要强调的是，目标页面可以是通过运行下述步骤生成的客户端代码后生成的页面，初始页面可以是用于确定目标页面上设置有什么样的客户端组件和各客户端组件的呈现形式的页面，从表现形式上来看，二者可以相同或是不同，在此未做具体限定。

S140、客户端根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。

其中，由于初始页面可以表示出目标页面上设置有什么样的客户端组件和各客户端组件的呈现形式，服务端代码可以是与被选择字段匹配(即与客户端组件匹配)的可被服务端运行的代码，因此可以根据二者生成与目标页面匹配的可被客户端运行的客户端代码，如通过运行服务端代码以从服务端中获取被选择字段下的字段数据，然后根据字段数据和目标页面生成客户端代码，以便后续通过运行该客户端代码来生成目标页面。需要强调的是，运行上述客户端代码的客户端可以是本发明实施例中的客户端，也可以是其余的客户端，也就是说，上述目标页面可以是在本发明实施例中的客户端上生成的，也可以是在其余的客户端上生成的，在此未做具体限定。

本发明实施例的技术方案，客户端通过响应于字段选择操作，将由此获取的被选择字段的字段信息发送给服务端；服务端通过确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型和针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成的服务端代码和服务端报文发送给客户端；客户端通过对接收到的服务端报文进行解析，得到客户端组件，并且响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面，由于该初始页面是用于确定目标页面上设置有什么样的客户端组件和各客户端组件的呈现形式的页面，其是根据业务需求和预先设置的模板直接确定的页面，这里不再涉及到人工硬编码，由此保证了后续生成的目标页面的页面风格的统一；进一步，客户端根据初始页面和接收到的服务端代码生成在被运行后用于生成目标页面的客户端代码，由于客户端代码是根据目标页面和服务端代码自动生成的代码，这里亦不再涉及到人工硬编码，由此保证了与目标页面对应的客户端代码的高质量。上述技术方案，通过客户端和服务端相互配合(即前后端全栈式支撑)的方式，达到了对应有高质量代码并且页面风格统一的目标页面的快速生成的效果。

一种可选的技术方案，客户端对接收到的服务端报文进行解析，得到客户端组件，可包括：客户端响应于技术栈选择操作，获取被选择技术栈，根据被选择技术栈对接收到的服务端报文进行解析，得到与被选择技术栈匹配的客户端报文，并根据客户端报文得到客户端组件。其中，由于客户端上应用的技术栈和服务端上应用的技术栈有可能存在差别，这意味着与服务端适配的服务端报文不一定与客户端相适配；而且，可在客户端上应用的技术栈可能存在一个或是多个。为此，客户端可以响应于技术栈选择操作，该技术栈选择操作可以是用于为客户端选择某个技术栈(即被选择技术栈)的操作，该被选择技术栈可以理解为与待生成的客户端代码匹配的技术栈。客户端根据被选择技术栈对接收到的服务端报文进行解析，由此得到与被选择技术栈匹配的客户端报文，然后将客户端报文可视化为客户端组件。示例性的，以被选择字段是币种为例，假设币种在服务端报文中是字典，其在客户端中可以通过下拉框(即某客户端组件)的形式进行表示；再以被选择字段是金额为例，假设金额在服务端报文中是数值，其在客户端中可以通过汉字(即某客户端组件)的形式进行表示。上述技术方案，可以支持多技术栈下的目标页面的开发，由此降低了页面开发人员在技术栈切换方面的成本，提高了目标页面的开发效率。

另一种可选的技术方案，在得到客户端组件之后，上述页面生成方法，还可包括：响应于针对于客户端组件的类型更改操作，获取被更改类型，并基于被更改类型更新客户端组件。其中，类型更改操作可以是用于对客户端组件的组件类型进行更改的操作，由于可在服务端定义的组件类型较为有限，如普通输入型、数值输入型和时间输入型等，当这些组件类型无法满足业务需求时，页面开发人员可以对服务端定义(即客户端解析出)的客户端组件的组件类型进行更改。因此，客户端在接收到针对于客户端组件的类型更改操作时，可以响应于该类型更改操作，获取被更改类型，然后基于被更改类型对客户端组件进行更新，由此达到了满足业务需求的客户端组件的有效生成的效果。示例性，可以将某客户端组件的组件类型由普通输入型更改为多行文本、整数输入型、浮点输入型和金融输入型中的一个。

再一种可选的技术方案，在客户端根据初始页面和接收到的服务端代码生成客户端代码之后，上述页面生成方法，还可以包括：对客户端代码进行代码校验，如果根据代码校验结果确定客户端代码中存在错误代码，则对错误代码进行代码修复，根据代码修复结果更新客户端代码；和/或，响应于作用在客户端代码上的代码编辑操作，对客户端代码进行代码编辑，并根据代码编辑结果更新客户端代码；和/或，响应于代码导出指令，输出服务端代码和客户端代码。即，在生成客户端代码后，可以自动对已生成的客户端代码进行代码校验，并自动对其中存在的错误代码进行代码修复，由此保证了客户端代码的高质量。代码编辑操作可以是用于对客户端代码进行代码编辑的操作，响应于这一操作，通过对客户端代码进行代码编辑，得到更加符合业务需求的客户端代码，由此达到了在线编辑预览客户端代码，并实时呈现编辑后的目标页面的效果。代码导出指令可以是用于导出客户端代码和服务端代码的指令，页面开发人员可以基于导出的客户端代码和服务端代码进行运行、调试、打包和发布，以便其余的客户端和服务端可以基于此快速生成目标页面。

实施例二

图2是本发明实施例二中提供的一种页面生成方法的流程图。本实施例以上述各技术方案为基础进行优化。本实施例中，可选的，在服务端确定与接收到的字段信息对应的被选择字段之后，上述页面生成方法，还可以包括：确定被选择字段在被选择字段所在的被选择数据源中的字段数据，并对字段数据进行数据校验；如果数据校验失败，则根据数据校验结果进行信息提示；否则，获取字段名称、字段类型和约束关系。其中，与上述各实施例相同或是相应的术语的解释在此不再赘述。

参见图2，本实施例的方法具体可以包括如下步骤：

S210、客户端响应于字段选择操作，将被选择字段的字段信息发送给服务端。

S220、服务端确定与接收到的字段信息对应的被选择字段，并确定被选择字段在被选择字段所在的被选择数据源中的字段数据，并对字段数据进行数据校验，如果数据校验失败，则根据数据校验结果进行信息提示，否则获取字段名称、字段类型和约束关系。

其中，为了保证后续生成的服务端代码和客户端代码的高质量，针对于被选择字段所在的被选择数据源，服务端可以获取被选择字段在被选择数据源中的字段数据，然后对这些字段数据进行数据校验，如校验关键字段是否缺失、数据类型是否规范、利率数据的小数点后的位数是否为5位等。如果数据校验失败，这说明字段数据本身和/或被选择字段所在的被选择数据表的结构设计存在问题，那么可以根据数据校验结果对相关人员进行信息提示，以便相关人员根据提示信息解决问题，以防出现因为这些问题而导致后续生成的服务端代码不规范的情况。否则，这说明字段数据本身和被选择数据表的结构设计正确，可以通过执行后续步骤生成服务端代码，由此保证了服务端代码的质量。

S230、服务端根据被选择字段的字段名称、字段类型和针对于被选择字段的约束关系生成服务端代码和服务端报文，并将生成结果发送给客户端。

S240、客户端对接收到的服务端报文进行解析，得到客户端组件，并响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面。

S250、客户端根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。

本发明实施例的技术方案，通过对被选择字段在被选择字段所在的被选择数据源中的字段数据进行数据校验，并在数据校验失败时，根据数据校验结果进行信息提示；否则，通过执行获取字段名称、字段类型和约束关系的步骤来生成服务端代码，由此保证了生成的服务端代码的高质量。

在此基础上，一种可选的技术方案，在确定被选择字段在被选择字段所在的被选择数据源中的字段数据之后，上述页面生成方法，还可以包括：根据被选择数据源的数据源类型，将字段数据转换为与预先设置的数据校验规则匹配的标准数据；对字段数据进行数据校验，可以包括：基于数据校验规则对标准数据进行数据校验。其中，上述数据校验过程可以是基于预先设置的数据校验规则实现的，在此基础上，被选择数据源可以是从各数据源中选择出的数据源，由于这些数据源的数据源类型可能存在差别，为了让该数据校验规则可以适用于任一数据源下的字段数据，可以根据被选择数据源的数据源类型对字段数据进行转换，得到与该数据校验规则匹配的标准数据，后续可以基于该数据校验规则对标准数据进行数据校验，由此实现了支持多种数据源的数据校验的效果。

实施例三

图3是本发明实施例三中提供的一种页面生成方法的流程图。本实施例以上述各技术方案为基础进行优化。在本实施例中，可选的，在基于被选择模板和客户端组件生成初始页面之后，上述页面生成方法，还可以包括：展示初始页面，其中，初始页面上设置有客户端组件；响应于作用在初始页面上的组件拖拽操作，获取被拖拽组件和初始页面上的组件拖拽终点，其中，被拖拽组件包括已设置在初始页面上的客户端组件和/或存储在组件资源库中的组件；将被拖拽组件设置在组件拖拽终点上，根据组件设置结果更新初始页面，展示初始页面；客户端根据初始页面和接收到的服务端代码生成客户端代码，可以包括：客户端响应于代码生成指令，根据初始页面和接收到的服务端代码生成客户端代码。再可选的，在基于被选择模板和客户端组件生成初始页面后，上述页面生成方法，还可以包括：展示初始页面，其中，初始页面上设置有客户端组件；响应于针对于客户端组件的属性更改操作，对客户端组件进行属性更改，根据属性更改结果更新客户端组件；根据客户端组件更新初始页面，展示初始页面；客户端根据初始页面和接收到的服务端代码生成客户端代码，可以包括：客户端响应于代码生成指令，根据初始页面和接收到的服务端代码生成客户端代码。其中，与上述各实施例相同或相应的术语的解释在此不再赘述。

参见图3，本实施例的方法具体可以包括如下步骤：

S310、客户端响应于字段选择操作，将被选择字段的字段信息发送给服务端。

S320、服务端确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成结果发送给客户端。

S330、客户端对接收到的服务端报文进行解析，得到客户端组件，并响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面。

S340、客户端展示初始页面，其中，初始页面上设置有客户端组件。

其中，将初始页面进行展示，以使页面开发人员判断当前的初始页面是否满足业务需求，如果否，则可以通过组件拖拽和/属性更改操作来间接更新初始页面，直至得到满足业务需求的初始页面。

S350、客户端响应于作用在初始页面上的组件拖拽操作，获取被拖拽组件和初始页面上的组件拖拽终点，将被拖拽组件设置在组件拖拽终点上，并根据组件设置结果更新初始页面，展示初始页面，其中，被拖拽组件包括已设置在初始页面上的客户端组件和/或存储在组件资源库中的组件。

其中，组件拖拽操作可以是作用在初始页面上的对被拖拽组件进行拖拽的操作，如对已设置在初始页面上的客户端组件进行拖拽以改变其在初始页面上的摆放位置的操作；再如将存储在组件资源库中的被拖拽组件拖拽到初始页面上的操作；等等。组件拖拽终点可以是对被拖拽组件进行拖拽后，拖拽后的被拖拽组件在初始页面上的最终位置。因此，客户端响应于组件拖拽操作，将被拖拽组件设置在组件拖拽终点上，根据组件设置结果更新已展示的初始页面，即在更新初始页面后，展示初始页面，由此通过“拖拽”的方式即可完善页面布局，让不懂编码的页面开发人员也能快速完成页面开发。

S360、客户端响应于针对于客户端组件的属性更改操作，对客户端组件进行属性更改，根据属性更改结果更新客户端组件，并根据客户端组件更新初始页面，展示初始页面。

其中，属性更改操作可以是用于对客户端组件的组件属性进行更改的操作，该组件属性可以是组件类型、组件布局(如每行设置几个客户端组件)、只读模式、组件名称、组件默认值(如是否存在默认值)等。客户端响应于该属性更改操作，对客户端组件进行属性更改，然后依次更新客户端组件和初始页面，并展示更新后的初始页面，由此达到了实时渲染页面的效果。

S370、客户端响应于代码生成指令，根据初始页面和接收到的服务端代码生成客户端代码，其中客户端代码被运行后生成目标页面。

其中，在页面开发人员确认初始页面可以满足业务需求时，可以一键触发代码生成指令，以使客户端来响应于这一指令，生成客户端代码，由此达到了一键生成高质量(即符合规范)的客户端代码的效果。

本发明实施例的技术方案，客户端通过展示初始页面，以使页面开发人员确认此时的初始页面是否满足业务需求，并在未满足时通过拖拽组件和/或更改属性来调整客户端组件；客户端通过响应于组件拖拽操作和/或属性更改操作来调整客户端组件，并展示更新后的初始页面，以使页面开发人员再次确认此时的初始页面是否满足业务需求；客户端在接收到代码生成指令时，这说明页面开发人员确认此时的初始页面满足业务需求，可以通过响应于该代码生成指令来生成客户端代码，以使后续运行该客户端代码生成满足业务需求的目标页面。

实施例四

图4是本发明实施例四中提供的一种页面生成方法的时序图，并且图5是本发明实施例四中的一种页面生成方法中可选示例的示意图，两张图可以相互配合理解。本实施例以上述实施例中各个可选方案为基础进行优化。其中，与上述各实施例相同或是相应的术语的解释在此不再赘述。

相应的，如图4所示，本实施例的方法涉及到客户端410与服务端420，该方法具体可以包括如下步骤：

S1、客户端410响应于作用在字段选择界面的字段选择操作，获取被选择字段的字段信息，并将字段信息发送给服务端420，其中字段信息包括被选择字段的字段名称、被选择字段所在的被选择数据表的数据表名称和被选择数据表所在的被选择数据源的数据源名称。

S2、服务端420确定与接收到的字段信息对应的被选择字段，确定被选择字段在被选择数据源中的字段数据，根据被选择数据源的数据源类型，将字段数据转换为与预先设置的数据校验规则匹配的标准数据，数据源类型至少包括oracle和/或mysql。

S3、服务端420基于数据校验规则对标准数据进行数据校验，当数据校验失败时，根据数据校验结果进行信息提示；否则，获取被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系。

S4、服务端420根据字段名称、字段类型以及约束关系生成服务端代码和服务端报文，并将生成的服务端代码和服务端报文发送给客户端410。

S5、客户端410响应于技术栈选择操作，获取被选择技术栈，根据被选择技术栈对接收到的服务端报文进行解析，得到客户端报文，并根据客户端报文得到可视化的客户端组件，其中，被选择技术栈包括jquery或是vue。

S6、客户端410响应于针对客户端组件的类型更改操作，获取被更改类型，并基于被更改类型更新客户端组件，实现字段类型映射。

S7、客户端410展示出各模版，响应于模板选择操作，从各模版中获取被选择模板，并基于被选择模板对各客户端组件进行组装，生成初始页面。

S8、客户端410展示初始页面，其中，初始页面上设置有客户端组件。

S9、客户端410响应于作用在初始页面的组件拖拽操作，获取被拖拽组件和初始页面上的组件拖拽终点，将被拖拽组件设置在组件拖拽终点上，并根据组件设置结果更新初始页面，展示初始页面，其中，被拖拽组件包括已设置在初始页面上的客户端组件和/或存储在组件资源库中的组件。

其中，存储在组件资源库中的被拖拽组件可以包括业务组件和基础组件，在实际应用中，可选的，业务组件可以包括机构树、人员树、电梯导航和操作提示中的至少一个，基础组件可包括表格、下拉框、金额和级联中的至少一个。

S10、客户端410将设置在初始页面上的客户端组件和被拖拽组件作为页面组件，响应于针对于页面组件的属性更改操作，对页面组件进行属性更改，并根据属性更改结果依次更新页面组件和初始页面，展示初始页面。

S11、客户端410响应于代码生成指令，根据初始页面和接收到的服务端代码生成客户端代码，对客户端代码进行代码校验，如果根据代码校验结果确定客户端代码中存在错误代码，则对错误代码进行代码修复，根据代码修复结果更新客户端代码，否则运行客户端代码以生成目标页面，展示目标页面。

其中，在实际应用中，可选的，上述代码校验过程可以是校验客户端代码是否规范和/或文件类型是否规范等。

S12、客户端410展示客户端代码，响应于作用在客户端代码上的代码编辑操作，对客户端代码进行代码编辑，根据代码编辑结果更新客户端代码，运行客户端代码以生成目标页面，预览目标页面。

S13、客户端410响应于代码导出指令，输出服务端代码和客户端代码，其中，客户端代码包括页面风格、代码校验规则和国际化配置文件，国际化配置文件包括字典维护、缓存同步和多场景融合。

本发明实施例的技术方案，通过上述各技术步骤相互配合，加强了客户端代码的规范性，自动生成国际化配置文件，节约了大量的代码开发时间；可以在线编辑客户端代码，实时呈现出编辑后的目标页面；可以提供多种符合业务需求的模板，页面向导友好，设计体贴；通过拖拽即可完善页面布局，让不懂代码开发的页面开发人员也能开发页面。

实施例五

图6为本发明实施例五提供的页面生成系统的结构框图，该系统用于执行上述任意实施例所提供的页面生成方法。该系统与上述各实施例中的页面生成方法属于同一个发明构思，在页面生成系统的实施例中未详尽描述的细节内容，可以参考上述页面生成方法的实施例。参见图6，该系统具体可包括：客户端510和服务端520。

其中，客户端510，用于响应于字段选择操作，将被选择字段的字段信息发送给服务端520；

服务端520，用于确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成结果发送给客户端510；

客户端510，还用于对接收到的服务端报文进行解析，得到客户端组件，并且响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面；

客户端510，还用于根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。

可选的，服务端520，还可用于在确定与接收到的字段信息对应的被选择字段之后，确定被选择字段在被选择字段所在的被选择数据源中的字段数据，对字段数据进行数据校验，如果数据校验失败，则根据数据校验结果进行信息提示，否则，获取字段名称、字段类型和约束关系。

在此基础上，可选的，服务端520，具体用于在确定与接收到的字段信息对应的被选择字段之后，确定被选择字段在被选择字段所在的被选择数据源中的字段数据，根据被选择数据源的数据源类型，将字段数据转换为与预先设置的数据校验规则匹配的标准数据，基于数据校验规则对标准数据进行数据校验，如果数据校验失败，则根据数据校验结果进行信息提示，否则，获取字段名称、字段类型和约束关系。

可选的，客户端510，具体用于响应于技术栈选择操作，获取被选择技术栈，根据被选择技术栈对接收到的服务端报文进行解析，得到与被选择技术栈匹配的客户端报文，并根据客户端报文得到客户端组件，并且响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面。

可选的，客户端510，还用于在得到客户端组件之后，响应于针对于客户端组件的类型更改操作，获取被更改类型，并基于被更改类型更新客户端组件。

可选的，客户端510，还可用于在基于被选择模板和客户端组件生成初始页面之后，展示初始页面，其中，初始页面上设置有客户端组件；响应于作用在初始页面上的组件拖拽操作，获取被拖拽组件和初始页面上的组件拖拽终点，其中，被拖拽组件包括已设置在初始页面上的客户端组件和/或存储在组件资源库中的组件；将被拖拽组件设置在组件拖拽终点上，并根据组件设置结果更新初始页面，展示初始页面；

相应，客户端510，具体用于响应于代码生成指令，根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。

可选的，客户端510，还可用于在基于被选择模板和客户端组件生成初始页面之后，展示初始页面，其中，初始页面上设置有客户端组件；响应于针对于客户端组件的属性更改操作，对客户端组件进行属性更改，并根据属性更改结果更新客户端组件；根据客户端组件更新初始页面，并展示初始页面；

相应，客户端510，具体用于响应于代码生成指令，根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。

可选的，客户端510，还用于在根据初始页面和接收到的服务端代码生成客户端代码之后，对客户端代码进行代码校验，如果根据代码校验结果确定客户端代码中存在错误代码，则对错误代码进行代码修复，并根据代码修复结果更新客户端代码；

和/或，

响应于作用在客户端代码上的代码编辑操作，对客户端代码进行代码编辑，并根据代码编辑结果更新客户端代码；

和/或，

响应于代码导出指令，输出服务端代码和客户端代码。

本发明实施例五提供的页面生成系统，客户端通过响应于字段选择操作，将由此获取的被选择字段的字段信息发送给服务端；服务端通过确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成的服务端代码和服务端报文发送给客户端；客户端通过对接收到的服务端报文进行解析，得到客户端组件，并且响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面，由于该初始页面是用于确定目标页面上设置有什么样的客户端组件和各客户端组件的呈现形式的页面，其是根据业务需求和预先设置的模板直接确定的页面，这里不再涉及到人工硬编码，由此保证了后续生成的目标页面的页面风格的统一；进一步，客户端根据初始页面和接收到的服务端代码生成在被运行后用于生成目标页面的客户端代码，由于客户端代码是根据目标页面和服务端代码自动生成的代码，这里亦不再涉及到人工硬编码，由此保证了与目标页面对应的客户端代码的高质量。上述系统，通过客户端和服务端相互配合(即前后端全栈式支撑)的方式，达到了对应有高质量代码并且页面风格统一的目标页面的快速生成的效果。

本发明实施例所提供的页面生成系统可执行本发明任意实施例所提供的页面生成方法，具备执行方法相应的功能模块和有益效果。

值得注意的是，上述页面生成系统的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

实施例六

本发明实施例六提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种页面生成方法，该方法包括：

客户端响应于字段选择操作，将被选择字段的字段信息发送给服务端；

服务端确定与接收到的字段信息对应的被选择字段，并根据被选择字段的字段名称、字段类型以及针对于被选择字段的约束关系生成服务端代码和服务端报文，将生成结果发送给客户端；

客户端对接收到的服务端报文进行解析，得到客户端组件，并响应于模板选择操作，获取被选择模板，并基于被选择模板和客户端组件生成初始页面；

客户端根据初始页面和接收到的服务端代码生成客户端代码，其中，客户端代码被运行后生成目标页面。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本发明的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种页面生成方法，其特征在于，包括：

客户端响应于字段选择操作，将被选择字段的字段信息发送给服务端；

所述服务端确定与接收到的所述字段信息对应的所述被选择字段，并根据所述被选择字段的字段名称、字段类型以及针对于所述被选择字段的约束关系生成服务端代码和服务端报文，将生成结果发送给所述客户端；

所述客户端对接收到的所述服务端报文进行解析，得到客户端组件，并且响应于模板选择操作，获取被选择模板，并基于所述被选择模板和所述客户端组件生成初始页面；

所述客户端根据所述初始页面和接收到的所述服务端代码生成客户端代码，其中，所述客户端代码被运行后生成目标页面。

2.根据权利要求1所述的方法，其特征在于，在所述服务端确定与接收到的所述字段信息对应的所述被选择字段之后，还包括：

确定所述被选择字段在所述被选择字段所在的被选择数据源中的字段数据，并对所述字段数据进行数据校验；

如果数据校验失败，则根据数据校验结果进行信息提示；

否则，获取所述字段名称、所述字段类型和所述约束关系。

3.根据权利要求2所述的方法，其特征在于，在所述确定所述被选择字段在所述被选择字段所在的被选择数据源中的字段数据之后，还包括：

根据所述被选择数据源的数据源类型，将所述字段数据转换为与预先设置的数据校验规则匹配的标准数据；

所述对所述字段数据进行数据校验，包括：

基于所述数据校验规则对所述标准数据进行数据校验。

4.根据权利要求1所述的方法，其特征在于，所述客户端对接收到的所述服务端报文进行解析，得到客户端组件，包括：

所述客户端响应于技术栈选择操作，获取被选择技术栈，根据所述被选择技术栈对接收到的所述服务端报文进行解析，得到与所述被选择技术栈匹配的客户端报文，并根据所述客户端报文得到客户端组件。

5.根据权利要求1所述的方法，其特征在于，在所述得到客户端组件之后，还包括：

响应于针对于所述客户端组件的类型更改操作，获取被更改类型，并基于所述被更改类型更新所述客户端组件。

6.根据权利要求1所述的方法，其特征在于，在所述基于所述被选择模板和所述客户端组件生成初始页面之后，还包括：

展示所述初始页面，其中，所述初始页面上设置有所述客户端组件；

响应于作用在所述初始页面上的组件拖拽操作，获取被拖拽组件和所述初始页面上的组件拖拽终点，其中，所述被拖拽组件包括已设置在所述初始页面上的所述客户端组件和/或存储在组件资源库中的组件；

将所述被拖拽组件设置在所述组件拖拽终点上，并根据组件设置结果更新所述初始页面，展示所述初始页面；

所述客户端根据所述初始页面和接收到的所述服务端代码生成客户端代码，包括：

所述客户端响应于代码生成指令，根据所述初始页面和接收到的所述服务端代码生成客户端代码。

7.根据权利要求1所述的方法，其特征在于，在所述基于所述被选择模板和所述客户端组件生成初始页面之后，还包括：

展示所述初始页面，其中，所述初始页面上设置有所述客户端组件；

响应于针对于所述客户端组件的属性更改操作，对所述客户端组件进行属性更改，并根据属性更改结果更新所述客户端组件；

根据所述客户端组件更新所述初始页面，并展示所述初始页面；

所述客户端根据所述初始页面和接收到的所述服务端代码生成客户端代码，包括：

所述客户端响应于代码生成指令，根据所述初始页面和接收到的所述服务端代码生成客户端代码。

8.根据权利要求1所述的方法，其特征在于，在所述客户端根据所述初始页面和接收到的所述服务端代码生成客户端代码之后，还包括：

对所述客户端代码进行代码校验，如果根据代码校验结果确定所述客户端代码中存在错误代码，则对所述错误代码进行代码修复，并根据代码修复结果更新所述客户端代码；

和/或，

响应于作用在所述客户端代码上的代码编辑操作，对所述客户端代码进行代码编辑，并根据代码编辑结果更新所述客户端代码；

和/或，

响应于代码导出指令，输出所述服务端代码和所述客户端代码。

9.一种页面生成系统，其特征在于，包括：客户端和服务端；其中，

所述客户端，用于响应于字段选择操作，将被选择字段的字段信息发送给所述服务端；

所述服务端，用于确定与接收到的所述字段信息对应的所述被选择字段，根据所述被选择字段的字段名称、字段类型以及针对于所述被选择字段的约束关系生成服务端代码和服务端报文，并将生成结果发送给所述客户端；

所述客户端，还用于对接收的所述服务端报文进行解析，得到客户端组件，并响应于模板选择操作，获取被选择模板，基于所述被选择模板和所述客户端组件生成初始页面；

所述客户端，还用于根据所述初始页面和接收到的所述服务端代码生成客户端代码，其中，所述客户端代码被运行后生成目标页面。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现如权利要求1-8中任一所述的页面生成方法。

Images