鲁班H5作者：@小小鲁班

前言

偶然的机会在github上逛，看到一个diy H5的项目叫鲁班，多么眼熟的项目名。毕竟曾经有梦想过但最后没做好。那今天我们就来认识下这个项目。

自我介绍

就叫小小鲁班吧（真名可以不说吗） 一只没有去过大厂，一直在某创业公司的前端工程师，平时的工作以 ToB 端的平台开发为主（没错，就是大家理解上的那些管理后台 😂）

在公司用的技术栈以 Vue.js 为主，React 也有涉猎。python可以写一些简单的demo。对能够通过技术手段提高效率的 Project 都比较感兴趣，相信技术是提高生产效率的手段

希望大家能够用技术服务业务，提高自己的开发效率，帮助身边的小伙伴提高效率，早点回家，幸福生活

鲁班H5 是什么？

GitHub地址：https://github.com/ly525/luban-h5 预览地址：https://ly525.github.io/luban-h5 文档地址：https://ly525.github.io/luban-h5

鲁班H5 是一个前后端都开源的h5快速制作平台，类似于开源版本的易企秀、人人秀，可以通过拖拽的形式，快速生成H5，前端和后端都已经开源了，而且在持续迭代中

鲁班H5 诞生的原由

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

在ToB 端后台的开发过程中，表单是绕不过去的，它经常包含非常多的交互、验证逻辑。我们发现有一些通过JSON 来配置生成表单的项目，在某种程度上可以有效的提升开发效率和体验。从这些项目中得到了一些灵感，也有了一些挥之不去的想法：

可不可以做一个根据 JSON 或者 拖拽生成 管理后台的东西呢，这样的话，再有这样的需求，我们可以快速弄出来一个带有交互的原型，让产品同学自己去试用，或者说让产品同学自己去快速做一个出来。

做不到啊：在研究拖拽生成管理后台的时候，慢慢的发现技术难度略大，自己的能力不足以支持这么大的一个架构。

那把想法向移动端偏移点吧，心想：如果以后有简单的移动端的需求，就可以让产品或者设计师同学自己去拖拖拽拽生成了。

有复杂的需求，技术同学再做支持，甚至可以考虑支持脚本编程，这样在产品或者设计师同学做的基础上，我们直接补充业务逻辑就OK了（后面研究了下，发现确实可行，有兴趣的同学，我们可以一起交流） 到现在的结果：

在业余时间的研究（找了GitHub的很多demo，以及请教了网路上的很多厉害的同学，最后会提到），发现技术上确实可行。经过了两三个月的调研，阅读资料，加上两个月左右的 coding。终于有了一个略微能拿出手的小项目了：这时候 鲁班H5 宣告诞生了

技术栈

前端： Vue.js + Ant Design Vue(JSX）

因为几乎都是采用 jsx + antd vue 写的，感兴趣的同学可以改写成 react 版本，后面会出一个迁移到 react 版本的文章

后端：Strapi

数据库：dev 环境为 sqlite（快速简单），生产环境为：mysql

有没遇到哪些技术难点？

😄，技术当然是有的，大家看看鲁班H5 的issues 列表大概就应该大概能够理解 😂（还有一些还在解决中）

大概列举下，自己记忆非常深刻的技术问题： 

插件放到到画布上之后，最后的数据究竟是什么样子的？

对于这个问题，自己有两个思路：

1. 去 GitHub 找了很多类似的项目 ，非常感谢各位大大开源的优秀项目，从这些项目中汲取了到非常多的知识，再次表示感谢（后面可以补充一份感谢列表）

2. 去研究易企秀、百度H5 在保存作品的时候，发给服务器端的数据究竟是什么？

3. 最后发现，开源的项目和易企秀、百度H5 大部分的思路是 使用 JSON 来存储 H5 作品

4. 自己也仔细思考了，为何会采用 JSON 来存储数据：

5. 结构化 + 方便解析，和 Vue 或者 React 的 render 函数要渲染的数据结构结构很相似，可读性很强

6. 易更新：当用户在后台更新了作品了之后，在手机端只要刷新一下页面，取到最新的 JSON 即可渲染最新版的页面，不用担心静态资源缓存等问题。

编辑画布上的组件的时候，在整个编辑器的右边，如何显示该组件对应的属性？

如果画布上的元素的可编辑的属性，要求的是一个复杂组件：比如文字对齐 或 添加一个多选按钮，该怎么把这些组件对应的自定义编辑器注入到编辑器的面板中，根据不同组件调用不同的属性编辑器？

表单，比如表单输入框、单选、多选的数据，如何收集？以及如何在管理后台显示统计结果呢？

技术核心或原理是怎么样的？

因为鲁班H5的已经开源了，上面的问题的答案在GitHub 的代码中大家都可以找到，我在关键实现处都会近两天假源码注释，其中 #!zh 表示中文注释， #!en 表示英文注释。

鲁班H5的 核心原理，也就是 JSON 是如何转换成 H5页面的，大家在这篇文章https://juejin.im/post/5d6df27a6fb9a06b2d77eef9里面可以一窥究竟。表单提交数据的思路，大家可以看看 这篇文章：https://juejin.im/post/5d79f5a3f265da03df5f3ee9

编辑属性和自定义属性编辑器，这个大家可以自行探索，后期也会写一些文章，对这部分做解读的，敬请期待

跟市面上的那些系统，有哪些优势？

最主要的优势应该是开源吧，有需要的同学可以了解下实现思路，然后给鲁班提PR 以及反馈Bug，非常欢迎😄

已经实现的一些亮点功能😄

• 表单数据收集和统计

• 模板系统 ，大家可以将作品保存为模板，以及从模板快速制作作品（也可以支持快速解析其它平台的作品）

• PSD 转H5 : 设计师同学可以上传制作好的PSD，鲁班可以在一分钟之内，帮你制作出来和设计稿几乎一致的H5作品。（这个功能已经上线了，不过还是alpha 版本，后面会支持文字解析、渐变色解析的）

• 带有后端API，支持数据的存储

• 支持动画系统

以及后续的计划是怎么样的

这个也可以理解为 正在实现以及打算实现的亮点功能吧

第三方无版权图片库：大家都知道，上次的视觉中国事件引起了一些波澜，我们也尊重版权，鲁班会去对接一些 无版权争议的图片库，方便大家快速、放心地查找、使用图片。

图片库系统（借鉴自百度H5和易企秀等平台，大家可以快速查找自己曾经上传过的图片，别人共享给自己的图片）

用户系统（可选）

• 目前的鲁班没有没有用户系统，如果需要集成到自己的项目中，可以直接加一个简单的登录或者权限页面，就可以了，至于是账户密码登录、auth2还是 SSO 单点登录，完全取决于业务需要

• 鲁班支持用户系统，用户可以新建项目，然后把多个作品划归到某个项目中，这样就可以邀请同事、朋友进行协作了，也可以分享作品、转移作品了

增加自定义脚本编辑

增加插件模块，丰富生态系统

借助 Matomo：https://matomo.org/ 实现 PV、UV 数据统计

为你推荐

有兴趣的童鞋可以去体验下demo，欢迎交流你的想法