前言

想快速实现可视化页面制作，在进行大量搜索后鲁班H5 和 夸克H5 两个项目非常适合我的需求，可用在此项目基础上继续扩展；通过对比了两个项目技术栈，发现quarkH5更符合我的需求，因此在此基础上对项目进行二开。

主要技术和环境

| node v14.16.0 | npm 6.14.11 | vue @vue/cli 4.5.11 | koa 2.0 | echarts ^4.9.0 | elementUI ^2.4.5 | mongodb

请先查阅原项目

quarkH5演示地址：传送门

quarkH5掘金文章：Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5

主要修改部分：

1. 页面
   • 修改Logo和项目名
   • 修改页面主题颜色
   • 仅支持PC页面
   • 编辑页组件库修改为折叠菜单
   • 我的数据添加图片和数据上传部分
   • 实现不同组件数据实时修改、更换
   • 删除PSD部分
2. 可视化组件
   • 封装 Echarts 大部分图表
   • 封装 DataV 大部分图表
   • 不同组件的配置
3. 后端接口
   • 完善图片上传和删除接口
   • 完善模板发布
   • 实现数据源连接
     • Excel文件上传数据
     • 数据库连接上传数据(仅支持可远程访问MySQL、Oracle、Sql Server)
4. 存在问题
   • 改为PC页面只是修改了页面的 width:1920px ，height:1080px，没有做适配；所以发布的页面可能跟编辑的页面有所不同
   • Excel实时编辑操作不友好

注：数据库连接部分是Java JDBC实现的，项目地址 ，该项目不启动，数据库连接部分会报404；启动后修改 client/api/modules/jdbc.js 文件下的service

项目预览：