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

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

A method, system and device for generating web page code

【技术实现步骤摘要】
一种生成网页代码的方法、系统和装置
本专利技术属于计算机
，特别涉及一种生成网页代码的方法、系统和装置。
技术介绍
在计算机
中，特别是web应用方向，一个公司或者项目组往往需要开发多个具有相似性的系统，如各种业务和用户群体的后台管理平台。在开发一个新的web系统时，传统的开发流程方式是，先选择技术框架，再配置项目的基础架构，然后开始开发系统中需要的网页页面。其中，技术框架是行业内通用的一些技术工具，可以帮助开发人员简化开发难度，不同的技术框架的功能和用法各不相同。在开始开发一个项目前，开发人员通常会选择自己熟悉并适合项目特点的一个或多个技术框架。基础架构是开发人员在开始开发一个项目的初始阶段，需要对项目整体制定规范规则，需要对项目做整体的设计规划，需要准备一些全局通用的功能，这些工作内容称为基础架构。每一个页面的开发，需要先配置页面的路由(页面路由是每一个网页页面对应的唯一地址，也就是浏览器地址栏显示的地址)，再通过编写代码开发页面的功能。现有的系统开发存在这样的问题：开发多个这样的系统，技术选型和基础架构的工作每个系统都需要做一遍；同一系统和不同系统中，如果存在类似的页面，每个页面都需要从头写代码开发，代码复用率(同一份代码，在多处复调用的几率)低；因为系统中所有功能都需要从头手写代码开发，专业性强，工作量大，开发时间长。因此，如何提供一种高效、便捷、复用率高的网页系统开发方法是亟待解决的技术问题。
技术实现思路
针对上述问题，本专利技术提供一种生成网页代码的方法，所述方法包括：在页面配置器中设置页面组件，所述设置页面组件包括设置组件属性参数值；根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。进一步地，所述页面组件包括组件代码和组件信息配置表；所述组件信息配置表用于设置组件对外提供的组件属性参数；所述组件代码根据设置的所述组件属性参数实现组件功能。进一步地，在页面配置器中设置页面组件包括：从组件库中选择至少一个页面组件；将组件放置在UI交互的画布中进行编辑，所述编辑包括在所述画布中设置组件的空间关系。进一步地，所述编辑还包括：通过属性配置器设置所述组件属性参数值，所述组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码；所述属性配置器通过所述组件配置信息表获取所述页面组件的组件属性参数。进一步地，根据页面配置器中设置的页面组件和与所述组件相关联的组件代码，自动生成网页页面代码包括：解析组件设置信息；导入组件代码；根据解析的组件设置信息，拼接生成页面代码。进一步地，所述组件设置信息保存在页面配置文件中；解析组件设置信息包括：通过解析组件配置文件的节点和属性信息，确定页面包含的组件、组件关系、组件属性。进一步地，所述导入组件代码包括：根据解析的页面配置信息，提取页面用到的所有组件；去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目。进一步地，还包括生成页面路由代码：读取当前的路由配置文件，根据页面的信息，在路由配置中插入一条路由信息，并将路由信息写入到页面代码文件。进一步地，在生成网页页面代码前，将脚手架模板复制到项目中。本专利技术还提供一种生成网页代码的系统，所述系统包括：页面配置模块，用于设置页面组件，所述设置页面组件包括设置组件属性参数值；代码生成模块，用于根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。进一步地，所述页面组件包括组件代码和组件信息配置表；所述组件信息配置表用于设置组件对外提供的组件属性参数；所述组件代码根据设置的所述组件属性参数实现组件功能。进一步地，页面配置模块包括：组件选择单元，用于从组件库中选择至少一个页面组件；组件编辑单元，用于将组件放置在UI交互的画布中进行编辑，所述编辑包括在所述画布中设置组件的空间关系；所述组件编辑单元还用于：通过属性配置器设置所述组件属性参数值，所述组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码；所述属性配置器通过所述组件配置信息表获取所述页面组件的组件属性参数；页面配置转换单元，用于将所述组件设置信息保存在页面配置文件中。进一步地，所述代码生成模块包括：组件解析单元，用于解析组件设置信息，通过解析组件配置文件的信息，确定页面包含的组件、组件关系、组件属性；组件导入单元，用于导入组件代码；代码生成单元，用于根据解析的组件设置信息，拼接生成页面代码。进一步地，所述导入组件代码包括：根据解析的页面配置信息，提取页面用到的所有组件；去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目。本专利技术还提供一种生成网页代码的装置，包括至少一个处理器以及与所述至少一个处理器通信连接的存储器，其特征在于，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，使所述至少一个处理器执行上述网页代码生成方法。本专利技术的网页代码生成方法、系统和装置具有以下优点：用户在页面配置器(或模块)中配置页面，结合关联的组件代码，自动生成网页代码，降低了页面开发的难度，提高了页面设计的直观性，从而非专业前端工程师也可以开发页面；通过解析配置就能自动生成页面代码(网页代码)，快速完成项目的开发，节省了项目的开发时间；通过复制“脚手架模板”代码，快速生成项目的基础框架，节省了前端架构的工作量；前端工程师开发完的组件，完放到组件库中，可以在多个项目中重复使用，节省了前端开发工作量，提高了代码复用率；通过多个组件的组合，和每个组件的属性配置，生成个性化的页面；通过将页面配置转换为页面配置文件，实现了采用规范统一文本结构保存页面设计成果，方便统一解析页面配置文件文本自动生成页面代码；方便开发人员通过修改页面配置文件文本中字段参数直接调整页面；方便对页面设计规范性进行检测；并且能够将页面设计结果通过页面配置文件转换为页面配置中的画布上，方便后续调整设计。本专利技术的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本专利技术而了解。本专利技术的目的和其他优点可通过在说明书、权利要求书以及附图中所指出的结构来实现和获得。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1示出了根据本文档来自技高网...

【技术保护点】
1.一种生成网页代码的方法，其特征在于，所述方法包括：/n在页面配置器中设置页面组件，所述设置页面组件包括设置组件属性参数值；/n根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。/n

【技术特征摘要】
1.一种生成网页代码的方法，其特征在于，所述方法包括：
在页面配置器中设置页面组件，所述设置页面组件包括设置组件属性参数值；
根据页面配置器中设置的页面组件和与所述页面组件相关联的组件代码，自动生成网页页面代码。


2.根据权利要求1所述的生成网页代码的方法，其特征在于，
所述页面组件包括组件代码和组件信息配置表；
所述组件信息配置表用于设置组件对外提供的组件属性参数；
所述组件代码根据设置的所述组件属性参数实现组件功能。


3.根据权利要求1所述的生成网页代码的方法，其特征在于，在页面配置器中设置页面组件包括：
从组件库中选择至少一个页面组件；
将组件放置在UI交互的画布中进行编辑，所述编辑包括在所述画布中设置组件的空间关系。


4.根据权利要求3所述的生成网页代码的方法，其特征在于，所述编辑还包括：
通过属性配置器设置所述组件属性参数值，所述组件属性参数值用于自动生成页面代码时解析为组件相应的页面代码；
所述属性配置器通过所述组件配置信息表获取所述页面组件的组件属性参数。


5.根据权利要求1-4中任一项所述的生成网页代码的方法，其特征在于，根据页面配置器中设置的页面组件和与所述组件相关联的组件代码，自动生成网页页面代码包括：
解析组件设置信息；
导入组件代码；
根据解析的组件设置信息，拼接生成页面代码。


6.根据权利要求5所述的生成网页代码的方法，其特征在于，
所述组件设置信息保存在页面配置文件中；
解析组件设置信息包括：通过解析组件配置文件的节点和属性信息，确定页面包含的组件、组件关系、组件属性。


7.根据权利要求5所述的生成网页代码的方法，其特征在于，所述导入组件代码包括：
根据解析的页面配置信息，提取页面用到的所有组件；
去除重复组件，得到目标页面使用的组件列表，从组件库中复制到目标项目。


8.根据权利要求5所述的生成网页代码的方法，其特征在于，还包括生成页面路由代码：
读取当前的路由配置文件，根据页面的信息，在路由配置中插入一条路由信息，并将路由信息写入到页面代码文件。


9.根据权利要求1所述的生成网页代码的方...

【专利技术属性】
技术研发人员：崔顶峰，巩仔明，邱慧，
申请(专利权)人：优信拍北京信息科技有限公司，
类型：发明
国别省市：北京;11