【技术实现步骤摘要】
本专利技术涉及互联网计算机领域，尤其涉及一种基于数据化的静态页面代码生成方法、系统、低代码平台及计算机可读存储介质。
技术介绍
1、低代码开发平台(lcdp)是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法(参考可视编程语言)，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。
2、通过低代码平台可视化拖拽完成页面的设计，生成一套json数据并存储到数据库中，当需要渲染页面时，需要借助内置的解析器(低代码平台将json数据渲染为页面)，归根结底，离不开低代码平台的解析器这个容器。如果快速设计好页面后，希望能直接打包并发送给用户查看当前页面的编排展示，在不基于任何容器情况下能够通过浏览器展示静态页面，此类需求目前无法得到满足。
3、因此，现有技术还有待于改进和发展。
技术实现思路
1、本专利技术的主要目的在于提供一种基于数据化的静态页面代码生成方法、系统、低代码平台及计算机可读存储介质，旨在解决现有技术中快速设计好页面后，无法直接打包并发送给用户查看当前页面的编排展示，无法在不基于任何容器情况下能够通过浏览器展示静态页面的问题。
2、为实现上述目的，本专利技术提供一种基于数据化的静态页面代码生成方法，所述基于数据化的静态页面代码生成方法包括如下步骤：
3、在低代码平台通过可视化拖拽组件生成页面；
4、通过所述低代码平
5、通过所述html模板解析器、所述css解析器和所述js解析器的解析函数将所述html语法代码、所述css样式代码和所述javascript文件代码解析成符合vue框架的模板代码；
6、基于webpack打包工具将所述模板代码打包构建为静态html+js+css代码，以直接运行在浏览器进行查看。
7、可选地，所述的基于数据化的静态页面代码生成方法，其中，所述在低代码平台通过可视化拖拽组件生成页面，具体包括：
8、打开低代码配置界面，通过低代码配置容器根据不同业务场景的需要拖拽不同组件；
9、所述低代码平台根据拖拽的组件生成一套json数据，根据所述json数据生成所述低代码平台的页面。
10、可选地，所述的基于数据化的静态页面代码生成方法，其中，所述通过所述低代码平台获取json数据，将所述json数据分别输入到html模板解析器、css解析器和js解析器，分别输出html语法代码、css样式代码和javascript文件代码，具体包括：
11、预先定义三个文件解析器，分别为html模板解析器、css解析器和js解析器；
12、所述低代码平台获取json数后，将所述json数据分别输入到所述html模板解析器、所述css解析器和所述js解析器；
13、所述html模板解析器将所述json数据的数据格式解析成浏览器可识别的html语法代码；
14、所述css解析器将所述json数据的数据格式解析成浏览器可识别的css样式代码；
15、所述js解析器将所述json数据解析为浏览器可识别的javascript文件代码。
16、可选地，所述的基于数据化的静态页面代码生成方法，其中，所述通过所述html模板解析器、所述css解析器和所述js解析器的解析函数将所述html语法代码、所述css样式代码和所述javascript文件代码解析成符合vue框架的模板代码，之前还包括：
17、预先定义所述html模板解析器、所述css解析器和所述js解析器的解析函数；
18、所述html模板解析器的解析函数定义为模板构造器；
19、所述css解析器的解析函数定义为样式构造器；
20、所述js解析器的解析函数定义为脚本程序构造器。
21、可选地，所述的基于数据化的静态页面代码生成方法，其中，所述通过所述html模板解析器、所述css解析器和所述js解析器的解析函数将所述html语法代码、所述css样式代码和所述javascript文件代码解析成符合vue框架的模板代码，具体包括：
22、通过json反序列化函数解析所述json数据得到一个对象数据，通过javascript语法得到fields字段数据，所述fields字段数据为数组数据类型，循环所述fields字段数据，获取到每一个对象数据，通过遍历得到的每个对象数据构建符合vue框架的模板html语法代码；
23、循环所述fields字段数据时，获取到每个对象中的style字段，将每个组件的tag作为样式的key，style字段中属性值作为组件样式的value，获得完整的模板css样式代码；
24、循环所述fields字段数据时获取已配置好的值，将值存储到模板data中，如果组件有配置必填选项时，将数据填充到props中，将所有配置信息按照约定好的数据格式解析方式填充到不同字段中组装成一套完整的符合vue框架的模板javascript文件代码。
25、可选地，所述的基于数据化的静态页面代码生成方法，其中，所述基于webpack打包工具将所述模板代码打包构建为静态html+js+css代码，以直接运行在浏览器进行查看，具体包括：
26、获取所述模板html语法代码、所述模板css样式代码和所述模板javascript文件代码；
27、基于webpack打包工具将所述模板html语法代码、所述模板css样式代码和所述模板javascript文件代码打包构建为静态html+js+css代码，以通过打开index.html文件运行在浏览器进行查看。
28、可选地，所述的基于数据化的静态页面代码生成方法，其中，所述index.html文件包括：html文件、样式文件和脚本文件。
29、此外，为实现上述目的，本专利技术还提供一种基于数据化的静态页面代码生成系统，其中，所述基于数据化的静态页面代码生成系统包括：
30、页面生成模块，用于在低代码平台通过可视化拖拽组件生成页面；
31、代码输出模块，用于通过所述低代码平台获取json数据，将所述json数据分别输入到html模板解析器、css解析器和js解析器，分别输出html语法代码、css样式代码和javascript文件代码；
32、代码解析模块，用于通过所述html模板解析器、所述css解析器和所述js解析器的解析函数将所述html语法代码、所述css样式代码和所述javascript文件代码解析成符合vue框架的模板代码；
33、代码生成模块，用于基于webpack打包本文档来自技高网...
【技术保护点】
1.一种基于数据化的静态页面代码生成方法，其特征在于，所述基于数据化的静态页面代码生成方法包括：
2.根据权利要求1所述的基于数据化的静态页面代码生成方法，其特征在于，所述在低代码平台通过可视化拖拽组件生成页面，具体包括：
3.根据权利要求1所述的基于数据化的静态页面代码生成方法，其特征在于，所述通过所述低代码平台获取JSON数据，将所述JSON数据分别输入到HTML模板解析器、CSS解析器和JS解析器，分别输出HTML语法代码、CSS样式代码和JavaScript文件代码，具体包括：
4.根据权利要求1所述的基于数据化的静态页面代码生成方法，其特征在于，所述通过所述HTML模板解析器、所述CSS解析器和所述JS解析器的解析函数将所述HTML语法代码、所述CSS样式代码和所述JavaScript文件代码解析成符合VUE框架的模板代码，之前还包括：
5.根据权利要求4所述的基于数据化的静态页面代码生成方法，其特征在于，所述通过所述HTML模板解析器、所述CSS解析器和所述JS解析器的解析函数将所述HTML语法代码、所述CSS样式代码和
6.根据权利要求5所述的基于数据化的静态页面代码生成方法，其特征在于，所述基于WebPack打包工具将所述模板代码打包构建为静态HTML+JS+CSS代码，以直接运行在浏览器进行查看，具体包括：
7.根据权利要求6所述的基于数据化的静态页面代码生成方法，其特征在于，所述index.html文件包括：HTML文件、样式文件和脚本文件。
8.一种基于数据化的静态页面代码生成系统，其特征在于，所述基于数据化的静态页面代码生成系统包括：
9.一种低代码平台，其特征在于，所述低代码平台包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于数据化的静态页面代码生成程序，所述基于数据化的静态页面代码生成程序被所述处理器执行时实现如权利要求1-7任一项所述的基于数据化的静态页面代码生成方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有基于数据化的静态页面代码生成程序，所述基于数据化的静态页面代码生成程序被处理器执行时实现如权利要求1-7任一项所述的基于数据化的静态页面代码生成方法的步骤。
...【技术特征摘要】
1.一种基于数据化的静态页面代码生成方法，其特征在于，所述基于数据化的静态页面代码生成方法包括：
2.根据权利要求1所述的基于数据化的静态页面代码生成方法，其特征在于，所述在低代码平台通过可视化拖拽组件生成页面，具体包括：
3.根据权利要求1所述的基于数据化的静态页面代码生成方法，其特征在于，所述通过所述低代码平台获取json数据，将所述json数据分别输入到html模板解析器、css解析器和js解析器，分别输出html语法代码、css样式代码和javascript文件代码，具体包括：
4.根据权利要求1所述的基于数据化的静态页面代码生成方法，其特征在于，所述通过所述html模板解析器、所述css解析器和所述js解析器的解析函数将所述html语法代码、所述css样式代码和所述javascript文件代码解析成符合vue框架的模板代码，之前还包括：
5.根据权利要求4所述的基于数据化的静态页面代码生成方法，其特征在于，所述通过所述html模板解析器、所述css解析器和所述js解析器的解析函数将所述html语法代码、所述css样式代码和所述javascript文件代码解析成...
【专利技术属性】
技术研发人员：刘诚，郑佳鹏，
申请(专利权)人：深圳市酷开网络科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。