网页代码生成工具构建方法及系统技术方案

本发明专利技术公开了网页代码生成工具构建方法及系统，属于产品设计工具技术领域，要解决的技术问题为如何提供一种双向性、灵活且高效的产品设计及代码生成组件。包括如下步骤：对element组件的前端内容进行解析，分解出元件和交互动作；将element组件解析出的元件纳入Axure的元件库中；将element组件解析出的交互动作与Axure的元件库中元件进行匹配，完成元件基础样式的匹配，得到配置后Axure，所述配置后Axure用于提供产品原型设计以及对于产品的前端代码开发。前端代码开发。前端代码开发。

【技术实现步骤摘要】
网页代码生成工具构建方法及系统


[0001]本专利技术涉及产品设计工具
，具体地说是网页代码生成工具构建方法及系统。

技术介绍

[0002]大数据时代，面对公司络绎不绝的项目需求，对产品经理及研发的要求也愈发严格，需要做到及时有效的沟通；其次，项目产品的验收环节也愈发正规，难度也越来越大，因此，产品经理与研发人员如何做好沟通，将客户所设想的原型按照需求开发出来，产品设计软件需要同步更新进步。
[0003]Axure RP是一款专业的快速原型设计工具，能够协助产品经理等角色快速建立交互，制作出产品原型，流程图、线框图、架构图、批注、示意图、HTML模板等，通过Axure RP设计出产品原型可以完整清晰地表达给各个方面的设计人员，让各个部门能够通过这个产品原理设计进行讨论并进行协同工作，最终让项目达成需求。
[0004]Element是一套为开发者准备的基于Vue 2.0的组件库，提供了配套设计资源，帮助网站快速成型。
[0005]可以清楚的分辨出，Axure是针对产品的原型设计工具，Element是针对开发人员的工具组件库。本专利将Element组件库融入到Axure产品原型设计元件库中，实现了开发与设计的融合，解决了产品经理与前端开发人员选型不统一的问题。
[0006]现有的Axure元件库，实现了页面元件的新增删除及简单交互，生成的代码也是静态代码，研发无法参考使用，导致原型中的部分组件研发无法实现，对产品的交付造成了困扰。如何提供一种双向性、灵活且高效的产品设计及代码生成组件，是需要解决的技术问题。

技术实现思路

[0007]本专利技术的技术任务是针对以上不足，提供网页代码生成工具构建方法及系统，来解决如何提供一种双向性、灵活且高效的产品设计及代码生成组件的技术问题。
[0008]第一方面，本专利技术一种网页代码生成工具构建方法，将element组件的元件融合到Axure的元件库中，所述方法包括如下步骤：
[0009]对element组件的前端内容进行解析，分解出元件和交互动作；
[0010]将element组件解析出的元件纳入Axure的元件库中；
[0011]将element组件解析出的交互动作与Axure的元件库中元件进行匹配，完成元件基础样式的匹配，得到配置后Axure，所述配置后Axure用于提供产品原型设计以及对于产品的前端代码开发。
[0012]更优的，所述方法还包括如下步骤：
[0013]通过Axure提供的界面自定义交互动作，并将自定义的交互动作与Axure的元件库中元件进行匹配，扩展元件基础样式的匹配。
[0014]作为优选，在Axure提供的界面中，通过拖拽元件的方式实现交互动作与Axure的元件库中元件的匹配。
[0015]作为优选，将element组件解析出的元件按照类别纳入Axure的元件库文件中。
[0016]第二方面，本专利技术一种网页代码生成工具构建系统，用于通过如第一方面任一项所述的网页代码生成工具构建方法将Element组件的元件融入到Axure的元件库中，实现开发与设计的融合，所述系统包括：
[0017]解析模块，所述解析模块用于对element组件的前端内容进行解析，分解出元件和交互动作；
[0018]元件融入模块，所述元件融入模块用于将element组件解析出的元件纳入Axure的元件库中；
[0019]匹配模块，所述匹配模块用于将element组件解析出的交互动作与Axure的元件库中元件进行匹配，完成元件基础样式的匹配，得到配置后Axure，所述配置后Axure用于提供产品原型设计以及对于产品的前端代码开发。
[0020]作为优选，所述匹配模块用于通过Axure提供的界面自定义交互动作，并将自定义的交互动作与Axure的元件库中元件进行匹配，扩展元件基础样式的匹配。
[0021]作为优选，所述匹配模块用于在Axure提供的界面中，通过拖拽元件的方式实现交互动作与Axure的元件库中元件的匹配。
[0022]作为优选，所述元件融入模块用于将element组件解析出的元件按照类别纳入Axure的元件库文件中。
[0023]本专利技术的网页代码生成工具构建方法及系统具有以下优点：
[0024]1、解析Element组件的元件和交互动作，将解析的元件融入Axure的元件库中，并将解析的交互动作与Axure的元件库中元件进行匹配，配置后可基于Element组件库自动生成元件交互动作，无需产品设计时单独配置，大大减轻了产品设计的工作量，依赖于Element组件，实现了前端页面代码自动生成的功能，前端页面开发可直接复用；
[0025]2、通过Axure提供的界面自定义交互动作，并将自定义的交互动作与Axure中的元件匹配，扩展了元件的基础样式。
附图说明
[0026]为了更清楚地说明本专利技术实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0027]下面结合附图对本专利技术进一步说明。
[0028]图1为实施例1一种网页代码生成工具构建方法的流程框图。
具体实施方式
[0029]下面结合附图和具体实施例对本专利技术作进一步说明，以使本领域的技术人员可以更好地理解本专利技术并能予以实施，但所举实施例不作为对本专利技术的限定，在不冲突的情况下，本专利技术实施例以及实施例中的技术特征可以相互结合。
[0030]本专利技术实施例提供网页代码生成工具构建方法及系统，用于解决如何如何提供一种双向性、灵活且高效的产品设计及代码生成组件的技术问题。
[0031]实施例1：
[0032]本专利技术一种网页代码生成工具构建方法，将element组件的元件融合到Axure的元件库中，所述方法包括如下步骤：
[0033]S100、对element组件的前端内容进行解析，分解出元件和交互动作；
[0034]S200、将element组件解析出的元件纳入Axure的元件库中；
[0035]S300、将element组件解析出的交互动作与Axure的元件库中元件进行匹配，完成元件基础样式的匹配，得到配置后Axure，所述配置后Axure用于提供产品原型设计以及对于产品的前端代码开发。
[0036]本实施例Element组件提供相应的封装效果，通过步骤S100将Element组件的前端内容进行解析，分解出元件与其交互动作。
[0037]步骤S200中将Element组件解析出的元件分门别类纳入到Axure的元件库文件中。
[0038]步骤S300在匹配时，在Axure提供的界面中，通过拖拽元件的方式实现交互动作与Axure的元件库中元件的匹配。
[0039]通过上述操作将Element组件库融入本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页代码生成工具构建方法，其特征在于，将element组件的元件融合到Axure的元件库中，所述方法包括如下步骤：对element组件的前端内容进行解析，分解出元件和交互动作；将element组件解析出的元件纳入Axure的元件库中；将element组件解析出的交互动作与Axure的元件库中元件进行匹配，完成元件基础样式的匹配，得到配置后Axure，所述配置后Axure用于提供产品原型设计以及对于产品的前端代码开发。2.根据权利要求1所述的网页代码生成工具构建方法，其特征在于，所述方法还包括如下步骤：通过Axure提供的界面自定义交互动作，并将自定义的交互动作与Axure的元件库中元件进行匹配，扩展元件基础样式的匹配。3.根据权利要求1或2所述的网页代码生成工具构建方法，其特征在于，在Axure提供的界面中，通过拖拽元件的方式实现交互动作与Axure的元件库中元件的匹配。4.根据权利要求1或2所述的网页代码生成工具构建方法，其特征在于，将element组件解析出的元件按照类别纳入Axure的元件库文件中。5.一种网页代码生成工具构建系统，其特征在于，用于通过如权利要求1
‑
4任一项所述的网页...

【专利技术属性】
技术研发人员：张正阳，
申请(专利权)人：山东浪潮智慧医疗科技有限公司，
类型：发明
国别省市：