一种页面模块的代码生成方法、装置及系统制造方法及图纸

本申请提供了一种页面模块的代码生成方法、装置及系统，其中，该方法将页面中的页面元素抽象成可枚举的视觉组件，并通过第一数据库为页面模块的代码自动生成打好代码数据基础，在页面模块代码的自动生成过程中，自动从视觉稿中提取页面模块的视觉组件，再生成页面模块描述文件，基于该视觉组件描述文件调用第一数据库自动生成页面模块的代码。该方法可以有效降低页面开发成本，提高页面开发灵活性，并且保证页面开发质量，同时便于统一维护。

A Code Generation Method, Device and System for Page Module

【技术实现步骤摘要】
一种页面模块的代码生成方法、装置及系统
本申请涉及计算机
，特别涉及一种页面模块的代码生成方法、装置及系统。
技术介绍
随着互联网的快速发展，页面开发的需求量日益剧增，而现阶段的页面开发过程是：由设计师先设计出视觉稿，前端工程师再基于该视觉稿，采用页面模块化的方式，针对视觉稿中的每个模块编写每个模块的代码，最后根据这些模块的代码组装生成页面的代码。在实际开发过程中，一个页面的不同模块会分给不同的前端工程师进行开发，等待一个页面的所有模块的代码都编写完成时，才能够组装生成一个页面的代码。这种手动编写代码的效率并不高，有时甚至会影响页面版本的更新发布；并且由于前端工程师是基于个人经验来解读视觉稿的，因此，在页面开发过程中会出现页面视觉还原度差的问题。
技术实现思路
本专利技术提供了一种页面模块的代码生成方法，该方法能够自动生成页面模块的代码，从而有效提高页面开发效率，并且能够保证页面质量，同时还便于页面代码更新和维护。另外，专利技术人还提出了一种页面模块的代码生成装置和系统，以保证上述方法在实际中的实现及应用。在本专利技术第一方面提供了一种页面模块的代码生成系统，包括：客户端，用于从视觉稿中提取页面模块的视觉组件；生成页面模块描述文件，所述页面模块描述文件至少包括所述视觉组件的属性信息；根据所述页面模块描述文件，从第一数据库中调用与视觉组件对应的视觉组件解释器，组装生成所述页面模块的代码；服务端，用于存储所述客户端生成的页面模块的代码。在本专利技术第二方面提供了一种页面模块的代码生成方法，包括：从视觉稿中提取页面模块的视觉组件；生成页面模块描述文件，所述页面模块描述文件至少包括所述视觉组件的属性信息；根据所述页面模块描述文件，从第一数据库中调用与视觉组件对应的视觉组件解释器，组装生成所述页面模块的代码。在本专利技术第三方面提供了一种页面模块的代码生成装置，包括：提取模块，用于从视觉稿中提取页面模块的视觉组件；生成模块，用于生成页面模块描述文件，所述页面模块描述文件至少包括所述视觉组件的属性信息；组装模块，用于根据所述页面模块描述文件，从第一数据库中调用与视觉组件对应的视觉组件解释器，组装生成所述页面模块的代码。与现有技术相比，本专利技术提供的技术方案具有以下优点：在本专利技术中，将页面中的页面元素抽象成可枚举的视觉组件，并通过第一数据库为页面模块的代码自动生成打好代码数据基础，在页面模块代码的自动生成过程中，自动从视觉稿中提取页面模块的视觉组件，再生成页面模块描述文件，基于该视觉组件描述文件调用第一数据库自动生成页面模块的代码。该方法可以有效降低页面开发成本，提高页面开发灵活性，并且保证页面开发质量，同时便于统一维护。当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。附图说明为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1是本申请在实际应用中的场景框架图；图2是本申请实施例提供的一种页面布局模块的生成系统的结构图；图3是本申请实施例提供的一种页面布局模块的生成方法的流程图；图4是本申请实施例提供的一种页面布局模块的生成装置的结构图。具体实施方式下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。在介绍本专利技术技术方案之前，先对本专利技术技术方案的研究过程进行简单说明。专利技术人研究发现：大部分页面，尤其是电子商务平台中的页面基本属于“单状态弱交互”型页面，所谓单状态弱交互是指一旦页面渲染就不会再有其他状态变化，可能只会有简单的跳转等弱交互，另外页面的功能和逻辑大部分趋同，只是视觉展示会变化多端，即展示方式以及展示具体数据不同而已，但功能和内部逻辑相同，这些页面的开发多属于重复开发，开发成本高，复用性差，而且人工方式的页面视觉还原度不高。基于此，专利技术人在本申请中提出了针对页面模块的代码的自动生成方法，自动生成的页面模块的代码可以被重复利用，提高了开发结果的复用性，提高了页面灵活性，整个过程无需人工解析视觉稿，提高了视觉还原度，保证页面模块的代码的质量，并且这种方式便于统一维护。下面开始介绍本专利技术技术方案。首先对本专利技术技术方案的实际应用场景进行介绍。参见图1,图1为本申请在实际应用中的场景示例图，如图1所示，本申请应用于终端和服务器的场景中，终端是指能够安装运行客户端的设备，如计算机、笔记本、手机等设备；终端中安装有客户端101，客户端101是面向开发人员的，是能够生成页面模块代码的应用程序或者功能模块；如图1所示，为了开发一个页面的代码，该页面可以划分为N个页面模块，则不同的开发人员可以使用不同的终端，如开发人员分别使用终端1,2，······N，每个终端中均安装有客户端101，开发人员启动客户端101导入设计师提供的视觉稿，分别对不同的页面模块1,2，······N进行开发，每个终端中的客户端101均用于通过计算机程序实现本申请的页面模块的代码生方法的功能，以自动生成页面模块的代码，如页面模块1，2······N各自对应的代码。客户端101生成页面模块的代码之后，将页面模块的代码存储在服务器中，也方便其他开发人员重复利用已开发的页面模块的代码，提高代码资源的复用性。可见：整个开发过程，无需开发人员在手动编写代码，一方面降低了代码开发对开发人员的技术要求，降低了企业的人工开发成本，另一方面避免了人工编写代码容易由人为因素导致代码错误，更重要的是，本申请将页面模块中的页面元素抽象成可枚举的视觉组件，从视觉组件的视觉属性层面和数据属性层面全面分析了页面模块的基本元素，进而通过第一数据库为页面模块的代码自动生成打好代码数据基础，提高页面开发灵活性，并且保证页面模块的开发质量，同时便于统一维护。为了适应于实际页面开发场景，本申请实施例提供了一种页面模块的代码生成系统，参见图2，图2示出了包括：客户端201，用于从视觉稿中提取页面模块的视觉组件；生成页面模块描述文件，所述页面模块描述文件至少包括所述视觉组件的属性信息；根据所述页面模块描述文件，从第一数据库中调用与视觉组件对应的视觉组件解释器，组装生成所述页面模块的代码；其中，所述视觉组件解释器是视觉组件的代码；可选的，所述客户端可以应用于图1所示的终端中，客户端具体实现过程参见下文图3所示方法实施例的实现。服务端202，用于存储所述客户端生成的页面模块的代码。可选的，所述服务端应用于图1所示的服务器中；该服务器在实际硬件部署时，可以是独立的具有数据存储功能的服务设备，也可以是集群服务器。利用本申请实施例提供的页面模块的代码生成系统，客户端面向开发人员，开发人员利用客户端能够快速生成页面模块的代码，利用服务端存储代码，即能够提高页面模块的开发效率和质量，大大降低页面开发成本，又能够提高代码复用率。下面从面向开发人员的终端的角度，对本申请实施例提供的一种页面模块的代码生成方法进行介本文档来自技高网...

【技术保护点】
1.一种页面模块的代码生成系统，其特征在于，包括：客户端，用于从视觉稿中提取页面模块的视觉组件；生成页面模块描述文件，所述页面模块描述文件至少包括所述视觉组件的属性信息；根据所述页面模块描述文件，从第一数据库中调用与视觉组件对应的视觉组件解释器，组装生成所述页面模块的代码；服务端，用于存储所述客户端生成的页面模块的代码。

【技术特征摘要】
1.一种页面模块的代码生成系统，其特征在于，包括：客户端，用于从视觉稿中提取页面模块的视觉组件；生成页面模块描述文件，所述页面模块描述文件至少包括所述视觉组件的属性信息；根据所述页面模块描述文件，从第一数据库中调用与视觉组件对应的视觉组件解释器，组装生成所述页面模块的代码；服务端，用于存储所述客户端生成的页面模块的代码。2.一种页面模块的代码生成方法，其特征在于，应用于客户端，包括：从视觉稿中提取页面模块的视觉组件；生成页面模块描述文件，所述页面模块描述文件至少包括所述视觉组件的属性信息；根据所述页面模块描述文件，从第一数据库中调用与视觉组件对应的视觉组件解释器，组装生成所述页面模块的代码。3.根据权利要求2所述方法，其特征在于，所述方法还包括：提供视觉组件配置界面；确定在所述视觉组件配置界面上被选中的视觉组件作为所述页面模块的视觉组件。4.根据权利要求2所述方法，其特征在于，所述视觉组件配置界面上承载有配置控件，所述配置控件与预先建立的第一视觉组件库关联，所述第一视觉组件库包括逻辑型视觉组件。5.根据权利要求2所述方法，其特征在于，所述视觉组件的属性信息包括：视觉属性信息和数据属性信息。6.根据权利要求5所述方法，其特征在于，所述方法还包括：提供可视化编辑界面；接收在所述可视化编辑界面上的输入信息，根据所述输入信息更新所述视觉组件的视觉属性信息。7.根据权利要求5所述方法，其特征在于，所述方法还包括：提供数据源配置界面；根据在所述数据源配置界面上输入信息，确定视觉组件与数据源之间的数据映射信息；则所述数据属性信息包括所述数据映射信息，所述数据映射信息用于表征视觉组件与数据源之间的绑定关系。8.根据权利要求7所述方法，其特征在于，当所述数据源配置信息包括：能够引起页面响应的数据源类型时，则所述方法还包括：从第二数据库中调用与所述数据源类型对应的功能组件解释器；则所述组装生成所述页面模块的代码，包括：根据被...

【专利技术属性】
技术研发人员：夏洋，陈曦，陈江明，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛,KY