[发明专利]基于DSL的多技术栈前端代码生成方法及装置

说明书

本发明属于大数据技术领域，本发明提供了一种基于DSL的多技术栈前端代码生成方法及装置，所述基于DSL的多技术栈前端代码生成方法包括：根据用户对页面的编辑操作生成DSL配置文件；遍历所述DSL配置文件，以确定所述DSL配置文件中的代码片段；根据所述代码片段生成栈前端代码。本发明实现了“一次开发，多技术栈输出”的效果，解决了为一种页面布局开发多套技术栈代码的问题。用户只需要在编辑预览模块中完成页面绘制，就能直接转译出对应多技术栈的原生代码，当需要将在多技术栈下开发同类页面时，可以节约大量人力。另一方面，如果需要支持其他技术栈，只需单独增加对应的转译模块即可，可以满足未来的兼容需求。

技术领域

本申请可用于金融领域，具体涉及一种基于DSL的多技术栈前端代码生成方法及装置。

背景技术

通常可视化拖拽生成前端代码的工具都是提供给设计人员使用，以往的这类前端代码生成工具只是针对某一个技术栈，例如仅适用于Vue而不适用于React，这就导致适用范围受到了限制，并导致设计人员在为其他技术栈开发人员提供服务时，无法使用不同技术栈下的代码生成工具，为了拓展这类工具的适用范围，亟需一种能够转译为多种技术栈原生代码的生成方法。

发明内容

本发明可用于金融领域在基于DSL的多技术栈前端代码生成技术领域，也可用于除金融领域之外的任意领域，本发明公开的基于DSL的多技术栈前端代码生成方法及装置的应用领域不做限定。本发明实现了“一次开发，多技术栈输出”的效果，解决了为一种页面布局开发多套技术栈代码的问题。用户只需要在编辑预览模块中完成页面绘制，就能直接转译出对应多技术栈的原生代码，当需要将在多技术栈下开发同类页面时，可以节约大量人力。同时如果需要支持其他技术栈，只需单独增加对应的转译模块即可，可以满足未来的兼容需求。

为解决上述技术问题，本发明提供以下技术方案：

第一方面，本发明提供一种基于DSL的多技术栈前端代码生成方法，包括：

根据用户对页面的编辑操作生成DSL配置文件；

遍历所述DSL配置文件，以确定所述DSL配置文件中的代码片段；

根据所述代码片段生成栈前端代码。

一实施例中，所述遍历所述DSL配置文件，以确定所述DSL配置文件中的代码片段，包括：

遍历所述DSL配置文件中的子节点，识别所述DSL配置文件中的组件；

判断所述组件中是否含有布局组件；

如果含有，遍历所述布局组件中的子组件，以确定所述子组件中的代码片段；

如果不含有，遍历所述DSL配置文件，以确定所述DSL配置文件中的代码片段。

一实施例中，所述根据所述代码片段生成栈前端代码包括：

拼接所述代码片段，以生成所述栈前端代码。

一实施例中，所述根据用户对页面的编辑操作生成DSL配置文件包括：

接收用户对页面的编辑操作；

将所述编辑操作转换为多个技术栈对应的原生代码；

根据所述原生代码生成所述DSL配置文件。

第二方面，本发明提供一种基于DSL的多技术栈前端代码生成装置，该装置包括：

配置文件生成模块，用于根据用户对页面的编辑操作生成DSL配置文件；

代码片段确定模块，用于遍历所述DSL配置文件，以确定所述DSL配置文件中的代码片段；

前端代码生成模块，用于根据所述代码片段生成栈前端代码。