CN111241454B - 一种生成网页代码的方法、系统和装置 - Google Patents

Abstract

本发明提供一种生成网页代码的方法、系统和装置，方法包括：在页面配置器中设置页面组件，所述设置页面组件包括设置组件属性参数值；根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。通过本发明的方法，用户在页面配置器中配置页面，结合关联的组件代码，自动生成网页代码，降低了页面开发的难度，提高了页面设计的直观性，通过解析配置就能自动生成页面代码(网页代码)，快速完成项目的开发，节省了项目的开发时间。

Description

一种生成网页代码的方法、系统和装置

技术领域

本发明属于计算机技术领域，特别涉及一种生成网页代码的方法、系统和装置。

背景技术

在计算机技术领域中，特别是web应用方向，一个公司或者项目组往往需要开发多个具有相似性的系统，如各种业务和用户群体的后台管理平台。在开发一个新的web系统时，传统的开发流程方式是，先选择技术框架，再配置项目的基础架构，然后开始开发系统中需要的网页页面。其中，技术框架是行业内通用的一些技术工具，可以帮助开发人员简化开发难度，不同的技术框架的功能和用法各不相同。在开始开发一个项目前，开发人员通常会选择自己熟悉并适合项目特点的一个或多个技术框架。基础架构是开发人员在开始开发一个项目的初始阶段，需要对项目整体制定规范规则，需要对项目做整体的设计规划，需要准备一些全局通用的功能，这些工作内容称为基础架构。每一个页面的开发，需要先配置页面的路由(页面路由是每一个网页页面对应的唯一地址，也就是浏览器地址栏显示的地址)，再通过编写代码开发页面的功能。

现有的系统开发存在这样的问题：开发多个这样的系统，技术选型和基础架构的工作每个系统都需要做一遍；同一系统和不同系统中，如果存在类似的页面，每个页面都需要从头写代码开发，代码复用率(同一份代码，在多处复调用的几率)低；因为系统中所有功能都需要从头手写代码开发，专业性强，工作量大，开发时间长。

因此，如何提供一种高效、便捷、复用率高的网页系统开发方法是亟待解决的技术问题。

发明内容

针对上述问题，本发明提供一种生成网页代码的方法，所述方法包括：

在页面配置器中设置页面组件，所述设置页面组件包括设置组件属性参数值；

根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。

进一步地，

所述页面组件包括组件代码和组件信息配置表；

所述组件信息配置表用于设置组件对外提供的组件属性参数；

所述组件代码根据设置的所述组件属性参数实现组件功能。

进一步地，

在页面配置器中设置页面组件包括：

从组件库中选择至少一个页面组件；

将组件放置在UI交互的画布中进行编辑，所述编辑包括在所述画布中设置组件的空间关系。

进一步地，

所述编辑还包括：

通过属性配置器设置所述组件属性参数值，所述组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码；

所述属性配置器通过所述组件配置信息表获取所述页面组件的组件属性参数。

进一步地，

根据页面配置器中设置的页面组件和与所述组件相关联的组件代码，自动生成网页页面代码包括：

解析组件设置信息；

导入组件代码；

根据解析的组件设置信息，拼接生成页面代码。

进一步地，

所述组件设置信息保存在页面配置文件中；

解析组件设置信息包括：通过解析组件配置文件的节点和属性信息，确定页面包含的组件、组件关系、组件属性。

进一步地，

所述导入组件代码包括：

根据解析的页面配置信息，提取页面用到的所有组件；

去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目。

进一步地，

还包括生成页面路由代码：

读取当前的路由配置文件，根据页面的信息，在路由配置中插入一条路由信息，并将路由信息写入到页面代码文件。

进一步地，

在生成网页页面代码前，将脚手架模板复制到项目中。

本发明还提供一种生成网页代码的系统，所述系统包括：

页面配置模块，用于设置页面组件，所述设置页面组件包括设置组件属性参数值；

代码生成模块，用于根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。

进一步地，

所述页面组件包括组件代码和组件信息配置表；

所述组件信息配置表用于设置组件对外提供的组件属性参数；

所述组件代码根据设置的所述组件属性参数实现组件功能。

进一步地，

页面配置模块包括：

组件选择单元，用于从组件库中选择至少一个页面组件；

组件编辑单元，用于将组件放置在UI交互的画布中进行编辑，所述编辑包括在所述画布中设置组件的空间关系；

所述组件编辑单元还用于：

通过属性配置器设置所述组件属性参数值，所述组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码；

所述属性配置器通过所述组件配置信息表获取所述页面组件的组件属性参数；

页面配置转换单元，用于将所述组件设置信息保存在页面配置文件中。

进一步地，

所述代码生成模块包括：

组件解析单元，用于解析组件设置信息，通过解析组件配置文件的信息，确定页面包含的组件、组件关系、组件属性；

组件导入单元，用于导入组件代码；

代码生成单元，用于根据解析的组件设置信息，拼接生成页面代码。

进一步地，

所述导入组件代码包括：

根据解析的页面配置信息，提取页面用到的所有组件；

去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目。

本发明还提供一种生成网页代码的装置，包括至少一个处理器以及与所述至少一个处理器通信连接的存储器，其特征在于，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，使所述至少一个处理器执行上述网页代码生成方法。

本发明的网页代码生成方法、系统和装置具有以下优点：

用户在页面配置器(或模块)中配置页面，结合关联的组件代码，自动生成网页代码，降低了页面开发的难度，提高了页面设计的直观性，从而非专业前端工程师也可以开发页面；

通过解析配置就能自动生成页面代码(网页代码)，快速完成项目的开发，节省了项目的开发时间；

通过复制“脚手架模板”代码，快速生成项目的基础框架，节省了前端架构的工作量；

前端工程师开发完的组件，完放到组件库中，可以在多个项目中重复使用，节省了前端开发工作量，提高了代码复用率；

通过多个组件的组合，和每个组件的属性配置，生成个性化的页面；

通过将页面配置转换为页面配置文件，实现了采用规范统一文本结构保存页面设计成果，方便统一解析页面配置文件文本自动生成页面代码；方便开发人员通过修改页面配置文件文本中字段参数直接调整页面；方便对页面设计规范性进行检测；并且能够将页面设计结果通过页面配置文件转换为页面配置中的画布上，方便后续调整设计。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所指出的结构来实现和获得。

附图说明

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

图1示出了根据本发明实施例的一种生成网页代码的方法步骤图；

图2示出了根据本发明实施例的一种在项目中生成网页代码流程图；

图3示出了根据本发明实施例的一种页面配置流程图；

图4示出了根据本发明实施例的一种生成网页代码的系统结构示意图；

图5示出了根据本发明实施例的一种生成网页代码的装置结构示意图。

具体实施方式

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

如图1所示，本发明实施例提供一种生成网页代码的方法，包括：

在页面配置器中设置页面组件，设置页面组件包括设置组件参数值；

根据页面配置器中设置的页面组件和与所述组件相关联的组件代码，自动生成网页页面代码。本发明实施例中，组件设置包括组件空间布局、组件属性参数设置等，具体步骤在后续进一步说明。

下面以开发多个相似后台管理系统中的一个为例，对web网站的网页生成方法做详细说明。实际应用中，开发一个web网站，往往包括技术选型、新建项目、搭建框架，代码需要从头编写，工作量大，专业性强，代码复用率低。

如图2所示，是根据本发明实施例的一种在项目中生成网页代码流程图。整个项目的代码由两部分组成，包括基础架构代码和用于实现项目业务功能的页面代码。项目创建后只是创建一个空的文件夹。本发明实施例中，首先通过步骤1：把“脚手架模板”的代码复制到项目中，使项目具备完整的框架，拥有基本功能，可以独立运行。本发明实施例中，脚手架包括了一个最小完整项目运行所需要的初始必要文件，包括：开发框架、项目配置文件、项目说明文件、公共页面、公共组件、资源文件等。还可以包括工具模块。开发框架是指项目开发所选用的架构技术的代码包等。本发明实施通过总结提取多个相似项目的常规必要文件，整理为脚手架，即模板，方便在新建项目中直接复制使用。复制模板后，需要根据当前项目的信息，替换模板里的部分内容，比如项目名称、项目访问地址等。本发明实施例中，对于具有相似性多个管理系统中的一个进行开发时，可以基于脚手架模板提高项目开发的效率。

在此基础上，进行步骤2：页面代码添加，添加的页面代码直接与脚手架基础架构形成可以运行的开发中的系统。通过复制“脚手架模板”代码，快速生成项目的基础框架，节省了前端架构的工作量。基于脚手架模板增加页面代码时，方面页面代码对于脚手架的引用和依赖，从而在逐步添加完善页面的过程中，随时可以运行查看较为完整的页面效果。页面代码通过页面配置器配置生成。下面对页面生成过程做进一步介绍。

如图3所示，为根据本发明实施例的一种页面配置流程图。本发明实施例中，页面生成是通过页面配置容器中配置页面，然后通过程序解析配置，自动生成页面代码。不失一般性地，在交互式可视化的画布，在页面配置器中设置页面组件包括：

步骤2-1：从组件库中选择至少一个页面组件。

步骤2-2：将组件放置在UI交互的画布中进行编辑。

示例性地，用户在系统中创建一个页面后，点编辑页面就进入到页面配置器配置页面的内容。页面配置器包含组件库、画布、属性配置器三部分，用户从组件库中选择合适的组件拖拽到画布上。组件是网页页面的要素控件，如按钮、导航栏、表单等。

本发明实施例中，组件库是独立存放在一个项目中，给所有产出的项目共用。组件库中包含了多个可以复用的组件，实际应用中，组件由专业的前端工程师来开发和维护，组件库中的组件会持续增加。组件库中的组件越丰富，用户在页面配置器中配置页面时，可以实现的场景就越丰富。通过组件库管理组件，能够为多个系统的开发提供组件支持，提高了代码复用率，提高了系统开发的效率，并行开发多个系统的能力和系统组件缺陷的可维护性。网页组件有专业工程师开发，具体的网页页面开发可以通过交互式设置直接使用组件，从而降低了页面开发人员的负担。

每个组件由组件代码和组件信息配置表两部分组成。组件属性参数包括组件版本号、容器属性、启用属性、组件API等。其中组件基础信息包括组件名称、备注、版本号、是否作为容器、是否启用等。组件非基础信息包括组件提供的API和当前组件的依赖组件等。组件信息配置表用于设置组件对外提供的组件属性参数，定义组件需要什么样的属性，定义每个属性的类型、格式、默认值，定义组件可以提供的可以被其他组件调用的API、指定当前组件运行过程中的依赖的组件等。类型是指属性值的展示类型，比如有：字符串、布尔型、数字、对象、数组、时间、组件选择、下拉选择、后端接口、只读字符串等。格式是指属性的值在指定类型的基础上，还需要符合指定的约束范围，比如数字类型，格式可指定范围必须是1-100；字符串类型，格式可指定范围为手机号格式。组件代码根据所述属性参数设置实现组件功能，具体地，组件代码通过接收用户配置的信息和实现组件的功能。

示例性地，将页面组件对应的组件属性参数信息设置到对应的组件信息配置表中，对于每个属性设置其类型、格式、默认值，如对于是否启用属性，设置属性类型为布尔，默认值为true，即可用。同时，还可以设置组件的可用API(Application ProgrammingInterface，即应用程序接口，是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。其目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节)，例如点击组件时触发的相关动作API等，如控件被点击时的触发动作API、动态节点展开时的动作API等，每个组件根据自身的特性对外提供相应的API。

步骤2-2中将组件放置在UI交互的画布中进行编辑包括设置组件的空间关系，如在画布上排列组件的位置、顺序、大小、包含关系等。自动生成代码时，解析画布记录的组件空间关系，按照组件关系生成具有嵌套关系、排列组合的控件元素标签，如“div”、“table”等。本发明实施例中，通过交互式操作直接简便的进行页面设计，提高了页面配置的效率，降低了前端页面开发的复杂度，充分利用了组件开发成果。

步骤2-2中将组件放置在UI交互的画布中进行编辑还包括：通过属性配置器设置所述组件属性参数值；属性配置器通过组件配置信息表获取所述页面组件的组件属性参数。具体地，针对画布上的每个组件，用户可以单击选中，然后在属性配置器中配置该组件可以配置的所有属性，以达到自己的需求。属性配置器根据组件的信息配置表来动态生成属性面板，根据每一个属性的类型、格式不同，在属性面板上会用不同的交互形式让用户设置属性值。属性配置器中用户设置的属性值实时的同步到画布上，在画布中显示出来效果。组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码，包括页面元素代码和组件代码等，具体在后续步骤中说明。组件属性参数是组件库中的组件对外提供的可设置的属性，组件属性参数值是指页面设计用户针对画布中组件的所述组件属性参数设置的具体值。通过多个组件在页面上组合，生成个性化的页面。本发明实施例中，通过组件配置信息表获取所述页面组件的组件属性参数，配置容器不需要完全依赖组件接口代码，只需要按照规则读取每个组件的属性信息表，即可获取组件的可编辑属性，从而将页面配置容器与组件库关联，在组件库动态增加、完善的过程中，页面配置容器始终可以通过不变的规则读取最新的属性信息表加载各种组件。

本发明实施例中，还将画布中编辑的内容转换为页面配置文件。具体地，将画布中的组件及其属性按照空间关系生成对应的结构化文本,如JSON文件。JSON文件中通过JSON节点关系保存画布中组件的空间组织关系，通过JSON节点属性保存组件的属性信息，包括组件基础信息和非基础信息。在另外的实施例中，也可以采用其他的结构化文本，如xml等。本发明实施例优选地采用JSON格式，方便修改、解析和保存数据库。下面对本发明实施例中

提取所述组件设置信息，生成组件设置JSON数据的过程进行详细说明。

JSON(JavaScript Object Notation),是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的JavaScript语言规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。其具有简洁和清晰的层次结构，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

本发明实施例中，用户在画布上配置完的每一个组件都对应一个JSON格式的描述信息，其中包含组件的类型ID、组件的版本号、组件的属性值。其中组件的属性值也是一个JSON格式的数据，保存用户配置的信息。画布上所有组件的JSON又组成了一个大的JSON数据，这个JSON数据包含了对应页面的所有信息。示例性地，一个页面JSON数据如下：

用户配置完页面后，首先把这个大JSON数据保存到数据库，需要生成页面时，先从数据库把JSON数据取出来，再解析JSON数据，生成最终页面的代码。在另外的实施例中，JSON数据也可以保存在文件型工作空间中。通过将用户页面设计转换为JSON，提供了保存设计成果的载体，简洁规范，方便统一解析JSON文本自动生成页面代码，方便开发人员通过修改JSON文本中字段参数直接调整页面，方便对页面设计规范性进行检测。进一步地，可以将JSON文本再转化为画布中的页面设计要素，从而方便后续调整设计。

按照上述步骤在画布中设置组建后，执行步骤3：根据页面配置器中设置的页面组件和与组件相关联的组件代码，自动生成网页页面代码。包括：

步骤3-1：解析组件设置信息；本发明实施中，组件设置信息包括页面包含的一个或多个组件及其空间关系、各组件的属性参数值等信息，组件的属性参数值包括用户通过属性配置器设置的组件基础信息和非基础信息等，组件设置信息保存在页面配置文件，即上述JSON文件中，不失一般性地，一个页面的设置信息对应一个JSON文件。具体地，通过解析JSON文件中的节点和属性信息，确定页面包含的组件、组件关系、组件属性。

步骤3-2：导入组件代码；根据解析的页面配置信息，提取页面用到的所有组件，包括直接使用的组件以及组件所依赖的组件。具体地，提取页面上用到的所有组件名称及其版本号，过滤重复组件后，遍历所有组件，根据组件的定义格式，获取到组件依赖的其它组件名称及版本号，如此递归，最终得到所有组件及依赖组件的名称和版本号。去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目(只复制用到的版本)。

步骤3-3：根据解析的组件设置信息，拼接生成页面代码。包括根据解析的组件空间关系和属性信息值生成页面元素代码；通过组件信息将组件代码的调用过程嵌入到所述页面代码中。

步骤3-4：生成页面路由代码。首先读取当前的路由配置文件，再根据页面的信息，在路由配置中插入一条路由信息，然后将路由信息写入到页面代码文件。生成路由信息时，可以根据页面所在目录结构及页面名称自动确定页面路由，示例性地，页面路由是通过访问页面的url，将该url写入到页面代码，即生成的页面通过该指定url访问，访问页面时，项目通过读取路由配置文件调用页面相关资源。本发明实施例中，自动生成页面路由代码，路由配置文件与页面代码相一致，避免了手动编写的繁琐和容易出错的问题。

上述步骤3-1到步骤3-4不限定执行顺序，具体执行过程中可以对JSON文本的部分或全部节点一边解析一边拼接为页面代码。生成路由代码的步骤可以放在解析之后，生成页面代码之前。

示例性地，页面配置完成后，执行页面代码自动生成，系统根据页面配置器中的配置信息，在“项目代码库”中自动生成这个页面的页面代码，包括页面元素代码、路由代码、组件代码。页面元素代码是通过用户在画布中放置的组件类型、缩放设置或通过属性参数设置的组件大小以及组件基本信息，如启用、可编辑属性等生成的页面元素代码。如用户在一个容器元素A中放置两个非容器元素B，则生成页面元素代码：

<元素A id＝’1’isContainer＝’1’version＝’101’>

</元素B id＝’2’isContainer＝’0’version＝’101’>

</元素B id＝’3’isContainer＝’0’version＝’101’>

</元素A>

以上生成的页面代码仅做示例性说明，实际应用中根据要生成的页面类型(html、jsp、php等)、元素类型、参数类型等，页面元素代码按照上述原理生成。

页面代码还包括组件代码，用于页面组件通过调用组件代码实现组件的功能动作，如在页面配置器中设置了上述第一个元素A被点击时的动作API为actionOnClick()，则在自动生成代码时将组件代码的调用过程嵌入到页面代码中，示例性地：

<元素A id＝’1’isContainer＝’1’onClick＝’actionOnClick()’version＝’101’>

</元素B id＝’2’isContainer＝’0’version＝’101’>

</元素B id＝’3’isContainer＝’0’version＝’101’>

</元素A>

本发明实施例中，用户交互式设计的页面能够自动生成网页代码，降低了页面开发的专业性难度，非专业前端工程师也可以开发页面，并且避免了传统的前端页面开发过程中密集的标签元素设置、函数调用的复杂性和易错性，元素关系通过直观的页面设计完成，属性设置、组件函数调用等通过在属性配置器进行选择，极大降低了错误率，缩短了调试时间。

通过本发明实施例提供的方法，用户可以在页面配置器中配置页面，结合关联的组件代码，自动生成网页代码，降低了页面开发的难度，提高了代码复用率。组件代码、页面代码、框架代码之间通过参数配置和解析进行关联，方便独立开发、持续升级。从而从整体上提高了多个相关系统前端网页的开发效率。

基于相同的发明构思，本发明实施例还提供一种生成网页代码的系统，如图4所示，系统包括：

(1)页面配置模块，用于设置页面组件，所述设置页面组件包括设置组件属性参数值。

其中，页面组件包括组件代码和组件信息配置表；组件信息配置表用于设置组件对外提供的组件属性参数；组件代码根据设置的所述组件属性参数实现组件功能。

进一步地，页面配置模块包括：

(1-1)组件选择单元，用于从组件库中选择至少一个页面组件。组件库中包含了多个可以复用的组件，实际应用中，组件由专业的前端工程师来开发和维护，组件库中的组件会持续增加。通过组件库管理组件，能够为多个系统的开发提供组件支持，提高了代码复用率，提高了系统开发的效率。

(1-2)组件编辑单元，用于将组件放置在U I交互的画布中进行编辑，所述编辑包括在所述画布中设置组件的空间关系。具体地，在画布上排列组件的位置、顺序、大小、包含关系等。代码生成模块解析画布记录的组件空间关系，按照组件关系生成具有嵌套关系、排列组合的控件元素标签，如“div”、“table”等。

组件编辑单元还用于：

通过属性配置器设置所述组件属性参数值，所述组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码；所述属性配置器通过所述组件配置信息表获取所述页面组件的组件属性参数。具体地，针对画布上的每个组件，用户可以单击选中，然后在属性配置器中配置该组件可以配置的所有属性，以达到自己的需求。属性配置器根据组件的信息配置表来动态生成属性面板，根据每一个属性的类型、格式不同，在属性面板上会用不同的交互形式让用户设置属性值。

(1-3)页面配置转换单元，用于将所述组件设置信息保存在页面配置文件中。本发明实施例中，将画布中编辑的内容转换为页面配置文件。具体地，将画布中的组件及其属性按照空间关系生成对应的结构化文本,如JSON文件。JSON文件中通过JSON节点关系保存画布中组件的空间组织关系，通过JSON节点属性保存组件的属性信息，包括组件基础信息和非基础信息。

(2)代码生成模块，用于根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。

进一步地，代码生成模块包括：

(2-1)组件解析单元，用于解析组件设置信息；组件解析单元通过解析组件配置文件的节点和属性信息，确定页面包含的组件、组件关系、组件属性；

(2-2)组件导入单元，用于导入组件代码。具体地，导入组件代码包括：根据解析的页面配置信息，提取页面用到的所有组件；去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目。

(2-3)代码生成单元，用于根据解析的组件设置信息，拼接生成页面代码。代码生成单元还用于生成页面路由代码，具体地，读取当前的路由配置文件，根据页面的信息，在路由配置中插入一条路由信息，并将路由信息写入到页面代码文件。

系统包括还包括(3)脚手架模块，用于在生成网页页面代码前，将脚手架模板复制到项目中。

本发明实施例中生成网页代码的系统各个模块的具体工作步骤及其相应的有益效果，可以根据上述方法实施例的步骤得出，不再赘述。

基于相同的发明构思，本发明实施例还提供了生成网页代码的装置，其结构如图5所示，包括：

至少一个处理器(processor)，图5中以一个处理器为例，但并非仅仅限于一个处理器；和存储器(memory)，还可以包括通信接口(Communication Interface)和总线。其中，处理器、通信接口、存储器可以通过数据连接完成相互间的通信。通信接口可以用于信息传输。处理器可以调用存储器中的逻辑指令，以执行上述实施例的生成网页代码方法。

此外，上述的存储器中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。

存储器作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序，如本发明实施例中的方法对应的程序指令/模块。处理器通过运行存储在存储器中的软件程序、指令以及模块，从而执行功能应用以及数据处理，即实现上述方法实施例中的生成网页代码方法。

存储器可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器。

本发明的网页代码生成方法、系统和装置，提供了通过交互式页面设置，结合关联的组件代码，自动生成网页代码的方案，降低了页面开发的难度，提高了页面设计的直观性，提高了开发的效率，避免了手动编写页面代码的易错性。

尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

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

在页面配置器中设置页面组件，所述设置页面组件包括设置组件属性参数值；

在页面配置器中设置页面组件包括：

从组件库中选择至少一个页面组件；

将组件放置在UI交互的画布中进行编辑，所述编辑包括在所述画布中设置组件的空间关系；

所述编辑还包括：

通过属性配置器设置所述组件属性参数值，所述组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码；

所述属性配置器通过所述组件配置信息表获取所述页面组件的组件属性参数；

根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码；

所述页面组件包括组件代码和组件信息配置表；

所述组件信息配置表用于设置组件对外提供的组件属性参数；

所述组件代码根据设置的所述组件属性参数实现组件功能；

所述组件属性参数包括组件版本号、容器属性、启用属性、组件API；

所述编辑还包括：将页面组件对应的组件属性参数信息设置到对应的组件信息配置表中，对于每种组件属性参数设置类型、格式、默认，以及以设置所述页面组件的可用API。

2.根据权利要求1所述的生成网页代码的方法，其特征在于，根据页面配置器中设置的页面组件和与所述组件相关联的组件代码，自动生成网页页面代码包括：

解析组件设置信息；

导入组件代码；

根据解析的组件设置信息，拼接生成页面代码。

3.根据权利要求2所述的生成网页代码的方法，其特征在于，

所述组件设置信息保存在页面配置文件中；

解析组件设置信息包括：通过解析组件配置文件的节点和属性信息，确定页面包含的组件、组件关系、组件属性。

4.根据权利要求2所述的生成网页代码的方法，其特征在于，所述导入组件代码包括：

根据解析的页面配置信息，提取页面用到的所有组件；

去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目。

5.根据权利要求2所述的生成网页代码的方法，其特征在于，还包括生成页面路由代码：

读取当前的路由配置文件，根据页面的信息，在路由配置中插入一条路由信息，并将路由信息写入到页面代码文件。

6.根据权利要求1所述的生成网页代码的方法，其特征在于，

在生成网页页面代码前，将脚手架模板复制到项目中。

7.一种生成网页代码的系统，其特征在于，所述系统包括：

页面配置模块，用于设置页面组件，所述设置页面组件包括设置组件属性参数值；

所述页面组件包括组件代码和组件信息配置表；

所述组件信息配置表用于设置组件对外提供的组件属性参数；

所述组件代码根据设置的所述组件属性参数实现组件功能；

所述组件属性参数包括组件版本号、容器属性、启用属性、组件API；

页面配置模块包括：

组件选择单元，用于从组件库中选择至少一个页面组件；

组件编辑单元，用于将组件放置在UI交互的画布中进行编辑，所述编辑包括在所述画布中设置组件的空间关系；所述编辑还包括：将页面组件对应的组件属性参数信息设置到对应的组件信息配置表中，对于每种组件属性参数设置类型、格式、默认，以及以设置所述页面组件的可用API；

所述组件编辑单元还用于：

通过属性配置器设置所述组件属性参数值，所述组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码；

所述属性配置器通过所述组件配置信息表获取所述页面组件的组件属性参数；

页面配置转换单元，用于将所述组件设置信息保存在页面配置文件中；

代码生成模块，用于根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。

8.根据权利要求7所述的生成网页代码的系统，其特征在于，所述代码生成模块包括：

组件解析单元，用于解析组件设置信息，通过解析组件配置文件的信息，确定页面包含的组件、组件关系、组件属性；

组件导入单元，用于导入组件代码；

代码生成单元，用于根据解析的组件设置信息，拼接生成页面代码。

9.根据权利要求8所述的生成网页代码的系统，其特征在于，所述导入组件代码包括：

根据解析的页面配置信息，提取页面用到的所有组件；

去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目。

10.一种生成网页代码的装置，其特征在于，包括至少一个处理器以及与所述至少一个处理器通信连接的存储器，其特征在于，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，使所述至少一个处理器执行权利要求1-6中任一项所述的方法。