鲁班H5开源可视化建站系统

今天介绍的是类似易企秀的H5制作、建站工具、可视化搭建系统.
鲁班H5
1.鲁班H5是基于Vue2.0开发、通过拖拽快速生成页面的平台

2. 类似 易企秀、Maka、百度 H5 等平台

image

Features

1. 编辑器
   • 参考线
   • 吸附线、组件对齐
   • 拖拽改变组件形状
   • 元素: 复制（画布）
   • 元素: 删除（画布）
   • 元素: 编辑（画布）
   • 页面：新增
   • 页面：复制
   • 页面：删除
   • 快速预览
   • 撤销、重做
2. 组件系统
   • 文字
   • 普通按钮
   • 表单按钮
   • 表单输入框
   • 普通图片
   • 背景图
   • 背景音乐
   • 视频（Iframe形式）
3. 增强功能
   • 上传 PSD，一键转换为 H5(已经调研，可以实现)
   • 图片库
   • 第三方无版权图片搜索
   • 自定义脚本(已经调研，可以实现)
4. 后端 API
   • 创建、保存、更新作品
   • 表单数据收集
   • 表单数据展示
   • 在线预览

网站地址：https://ly525.gitee.io/luban-h5-landing-page/#/

体验地址：https://h5.luban-h5.com/#/work-manager/list

项目源代码地址:https://github.com/ly525/luban-h5

使用文档： https://ly525.github.io/luban-h5/zh/

系统截图：

image image

作者开发的目的自己的工作：自己大部分时间在做的都是 ToB 端的项目，也就是大家通常认为的各种管理后台等等，确实是的。

三年的经历：在从事前端工作的三年时间中，在前面两年时间里，是没有产品经理、交互设计师、UI 设计师的，大部分时间是老大说需求，自己和后端同事商量，向运营、后端了解学习业务，上线，上线之后，有不合适的，再修改。第三年的时候，有了产品经理，流程并没有太大的区别，因为没有接触到交互设计师，产品同学在开始有一些并没有考虑到的需求，我们做了一个版本之后，发现又要改回在另外一个平台的交互，有些痛苦。

一些挥之不去的想法

可不可以做一个根据 JSON 或者 拖拽生成 管理后台的东西呢，这样的话，再有这样的需求，我们可以快速弄出来一个带有交互的原型，让产品同学自己去试用，或者说让产品同学自己去快速做一个出来（有的同学说，为何产品不用axure做一个，?，不太会?）做不到啊：在研究拖拽生成管理后台的时候，慢慢的发现技术难度略大，自己的能力不足以支持这么大的一个架构。

那把想法向移动端偏移点吧：心想：如果以后有简单的移动端的需求，就可以让产品或者设计师同学自己去拖拖拽拽生成了。有复杂的需求，技术同学再做支持，甚至可以考虑支持脚本编程，这样在产品或者设计师同学做的基础上，我们直接补充业务逻辑就OK了（后面研究了下，发现确实可行，有兴趣的同学，我们可以一起交流）

到现在的结果：

在业余时间的研究（找了GitHub的很多demo，以及请教了网路上的很多厉害的同学，最后会提到），发现技术上确实可行。经过了两三个月的调研，阅读资料，加上两个月左右的 coding。终于有了一个略微能拿出手的小项目了，也就是标题中提到的：[鲁班H5]，一款前后端都开源的H5开发工具，可以理解为开源版本的易企秀或人人秀。

image

小编试了一下，还可以做出来一个简单的表单，今天只是做一个系统介绍、后续会尝试更多的使用方法分享给大家。