可视化全栈开发平台：3D、游戏、图表一网打尽

在线开发平台的实现前端开发全可视化操作界面组件与后台变量无缝结合所见即所得方便快捷随时上新新功能。支持3D组件支持基于SVG的二维图形开发支持可视图表配置还支持游戏开发。所有组件都通过属性配置实现具体业务。组件的属性值可以是固定数据也可以绑定变量。固定数据仅能用于展示绑定变量则可以进行交互。所有组件的基本操作都是先从组件面板拖拽组件到主窗口区域然后进行组件的属性配置。涉及变量绑定的组件事先应先添加变量。具体界面如图所示图1.窗口全貌图2.变量编辑图3.组件面板图4.属性配置图5.创建变量普通组件element plus包装所有element-plus的组件el组件分为基础组件、表单组件、数据展示、导航、反馈组件以及两个其它组件。基础组件的使用以按钮为例图6.按钮使用截图3D实现threejs添加一个方盒子图7.方盒子图表工具echarts样例演示图8.图表配置游戏界面phaser简单角色移动演示图9.Phaser游戏样例图形工具svg简单SVG样例图10.打地鼠游戏图11.总体展示自定义组件HTTP请求组件的使用样例图12.HTTP请求数据库管理主要包括数据库创建数据库的连接管理表创建字段管理索引和约束维护图13.数据库管理基本流程后端开发数据访问entity当表结构保存成功且已连接数据库系统后台自动创建对应实体类mapper当实体类自动创建后系统会自动创建对应的mapper类service创建完mapper后系统自动创建一个service类模块开发简单模块:以脱敏处理为例制作模块分为创建模块创建配置界面、编辑代码三部分使用时配置就好图14.创建模块并设置相关属性图15.根据规划的功能设计配置界面图16.模块逻辑代码编辑(从配置界面获取相关数据进行处理)模块间调用图17.在模块中引用另外的模块右侧会显示被引用模块的配置入口配置好引用的模块就好接口开发接口定义接口定义即是对接口的属性进行配置包括名称、类型、中间变量、访问地址、请求参数、请求类型、返回类型返回数据等属性配置接口类型接口类型包括HTTP服务、定时任务、消息通知和web socket。HTTP服务即是创建一个HTTP Rest接口、定时任务则是定时执行的接口、消息通知则是通过接受消息来驱动流程的执行、web socket则是创建一个web socket接口请求类型请求类型即是HTTP请求类型仅HTTP服务需要url 参数这个就是说的url地址、请求方式、查询参数等等也是只有HTTP服务才需要的图18.创建查询接口并配置流程创建插入接口并配置流程图19.接口调用测试图20.插入验证图21.插入后查询验证运行时生成的DAO查询日志运行时生成的DAO插入日志运行时生成的DAO查询日志流程设计业务流程开发图22.添加一个脱敏处理模块模块数据配置图23.配置脱敏处理模块图24.添加脱敏处理模块后的请求结果