【技术实现步骤摘要】
本专利技术涉及计算机，具体地说是一种基于bs架构的前端代码生成方法、系统、设备及介质。
技术介绍
1、随着计算机技术的发展，各种网站开发需求不断增加，各类企业对前端页面展示效果的多样性、定制性需求也日益增大，需要开发人员针对性的进行手动编码，对开发人员开发效率的要求不断提高。目前主流的前端代码生成模式有基于库表驱动和基于表单驱动，基于库表驱动的代码生成系统创建数据库表方式有使用数据库建表语句和可视化页面添加两种，使用数据库建表语句要求开发者掌握数据库技术，可视化页面添加操作繁多耗时，效率低下，面向库表的配置方式生成的前端页面样式、布局相对单一，需要开发人员二次编辑，才能满足不同客户的需求。而基于表单驱动的代码生成系统提供直观的布局和ui组件，允许用户通过可视化配置快速搭建业务表单，生成相应的数据库表和功能页面，面向表单的配置方式适用于构建一些简单的业务功能，对于复杂的业务功能则回天乏力。
2、前端代码生成技术支持的不足，使得开发过程依赖于专业的开发人员，极大地增加了人工成本，开发效率低下，难以满足如今多样化的前端开发需求。
3、故如何减少前端代码生成过程中对专业开发人员的依赖，降低人工成本，提高开发效率是目前亟待解决的技术问题。
技术实现思路
1、本专利技术的技术任务是提供一种基于bs架构的前端代码生成方法、系统、设备及介质，来解决如何减少前端代码生成过程中对专业开发人员的依赖，降低人工成本，提高开发效率的问题。
2、本专利技术的技术任务是按以下
3、创建数据库表：采用excel导入方式同步创建数据库表，数据库字段填写中文汉字；
4、通过代码生成器基于数据库表生成初始前端代码：使用handlebars代码模板和node.js脚本生成包含全部字段的列表和表单初始代码；
5、通过可视化编辑器修改初始前端页面：运用画布编辑生成的列表和表单，通过拖拽方式调整元素顺序、位置和页面布局，并通过预先设定的配置项修改元素的配置组件、组件属性及组件样式；
6、通过界面与交互代码生成器生成前端代码：通过界面与交互代码生成器接收并解析画布中的组件配置，生成二次编辑后的前端代码，实现利用可视化页面即可完成代码的二次开发而无需开发人员手写布局和样式代码。
7、作为优选，创建数据库表具体如下：
8、预设创建数据库表的excel模板，excel模板从前端页面下载，并根据excel模板要求填充数据获取excel表格并将excel表格上传至服务器；其中，根据excel模板要求填充的数据包括表名、表描述、中文字段、字段长度、字段类型、字段是否必填及字段是否主键；
9、内置的翻译字典表补全excel表格中中文字段对应的英文字段；若翻译字典表中无相应字段，则在翻译字典表中新增相应字段对应的中英文翻译数据，减少人工翻译时间；
10、导入填写完成的excel表格，后端服务器接收并解析文件内容；
11、根据解析后的文件数据，生成创建数据库表的sql语句；
12、将生成的sql语句发送到数据库执行，完成数据库表的创建。
13、作为优选，通过代码生成器基于数据库表生成初始前端代码具体如下：
14、代码生成器预设handlebars代码模板，handlebars代码模板中包含占位符，用于插入从数据库模型动态获取的字段；
15、使用node.js编写脚本，连接数据库并获取数据库模型字段，根据数据库模型字段生成包含全部字段的表单组件和表格组件代码，并同步到前端代码目录。
16、作为优选，可视化编辑器包括画布、组件库、组件属性部分、脚本事件和操作栏；
17、其中，画布是进行编排页面的有限空间，初始化时显示代码生成器生成的最新前端页面，用户通过拖拽方式调整组件顺序、位置和页面布局，点击选中组件或表格列后点击右键，显示复制、删除按钮，点击复制按钮，画布中增加复制的组件或表格列，点击删除按钮，从画布中删除组件或表格列；
18、组件库提供构成页面的主要元素，通过选中组件后拖拽到画布的方式新增组件；并通过点击画布选中要编辑的组件，再点击组件库中的组件修改当前编辑组件的类型，如由input输入框修改为select下拉框；
19、组件属性部分预置组件的全部属性配置，根据画布中选中的组件，显示对应组件可配置的属性，通过点击选中属性如input的只读、禁用、隐藏等属性，实时更新组件在画布中的显示状态；
20、脚本事件预置组件的全部事件配置，根据画布中当前选中的组件，显示对应组件可配置的事件，如添加按钮1的click事件配置过程为：选中按钮1，点击click事件配置，弹出配置窗口，输入js语句，完成按钮1点击事件处理代码，点击画布中的按钮1可测试脚本事件是否添加成功；
21、操作栏提供撤销、恢复、保存操作按钮，点击撤销按钮，撤销可视化编辑器的前一次操作；点击恢复按钮，恢复撤销的前一次操作；点击保存按钮，保存可视化编辑器画布中的组件配置。
22、作为优选，可视化编辑器修改初始前端代码具体如下：
23、展示页面和拖拽操作组件的画布；
24、基于内置的组件库和组件属性修改画布包含组件的类型和属性；
25、为画布内组件添加响应事件；
26、保存画布中的组件配置。
27、更优地，界面与交互代码生成器生成前端代码具体如下：
28、界面与交互代码生成器接收可视化编辑器画布中的组件配置，按照预定义的handlebars代码模板，handlebars代码模板中包含占位符，用于插入从画布中获取的组件位置、类型、属性及交互数据；
29、使用node.js编写脚本，根据可视化编辑器保存的画布中解析到的数据，基于handlebars代码模板生成二次编辑后的前端代码，并同步到前端代码目录；其中，二次编辑后的前端代码包括页面布局、控件样式及交互效果。
30、一种基于bs架构的前端代码生成系统，该系统包括：
31、数据库表创建模块，用于生成数据库表；
32、代码生成器，用于生成初始化前端代码；
33、可视化编辑器，用于通过可视化页面编辑前端代码；
34、界面与交互代码生成器，用于依据可视化编辑器生成二次代码。
35、作为优选，所述数据库表创建模块包括：
36、文件上传模块，用于根据excel模板要求填充数据获取excel表格并将excel表格上传至服务器；其中，根据excel模板要求填充的数据包括表名、表描述、中文字段、字段长度、字段类型、字段是否必填及字段是否主键；excel模板从前端页面下载；
37、数据补全模块，用于通过内置的翻译字典表补全excel表格中中文字段对应的英文字段；若翻译字典表中无相应字段，则在翻译本文档来自技高网...
【技术保护点】
1.一种基于BS架构的前端代码生成方法，其特征在于，该方法具体如下：
2.根据权利要求1所述的基于BS架构的前端代码生成方法，其特征在于，创建数据库表具体如下：
3.根据权利要求1所述的基于BS架构的前端代码生成方法，其特征在于，通过代码生成器基于数据库表生成初始前端代码具体如下：
4.根据权利要求1所述的基于BS架构的前端代码生成方法，其特征在于，可视化编辑器包括画布、组件库、组件属性部分、脚本事件和操作栏；
5.根据权利要求1所述的基于BS架构的前端代码生成方法，其特征在于，可视化编辑器修改初始前端代码具体如下：
6.根据权利要求1至5中任一项所述的基于BS架构的前端代码生成方法，其特征在于，界面与交互代码生成器生成前端代码具体如下：
7.一种基于BS架构的前端代码生成系统，其特征在于，该系统包括：
8.根据权利要求7所述的基于BS架构的前端代码生成系统，其特征在于，所述数据库表创建模块包括：
9.一种电子设备，其特征在于，包括：存储器和至少一个处理器；
10.一种计算
...【技术特征摘要】
1.一种基于bs架构的前端代码生成方法，其特征在于，该方法具体如下：
2.根据权利要求1所述的基于bs架构的前端代码生成方法，其特征在于，创建数据库表具体如下：
3.根据权利要求1所述的基于bs架构的前端代码生成方法，其特征在于，通过代码生成器基于数据库表生成初始前端代码具体如下：
4.根据权利要求1所述的基于bs架构的前端代码生成方法，其特征在于，可视化编辑器包括画布、组件库、组件属性部分、脚本事件和操作栏；
5.根据权利要求1所述的基于bs架构的前端代码生成方法，其特征在于，可视化编辑器修改初始前端代码具体如下：
<...【专利技术属性】
技术研发人员：李亚丽，英杰，郑孝青，刘圣楠，
申请(专利权)人：浪潮智慧城市科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。