低代码前端后端【免费下载链接】luban-h5[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.项目地址https://gitcode.com/gh_mirrors/lu/luban-h5点击查看免费下载Luban-H5 是一款类易企秀的 H5 制作、移动端页面可视化搭建工具其核心价值在于让用户通过拖拽与点选的方式快速完成移动端页面作品的创建、编辑、预览与发布。本文基于仓库 docs/en/getting-started/features.md 的功能清单结合前后端源码逐项展开你会看到编辑器在参考线、吸附对齐、元素与页面管理上的完整交互逻辑组件系统从基础组件到表单组件的注册与拖拽机制以及后端围绕作品增删改查、表单数据采集、在线预览所暴露的完整 REST API。读完本文你既能获得一份可直接对照的功能清单也能理解这些能力在代码层面的具体落点。一、编辑器Editor画布级可视化交互能力编辑器是 Luban-H5 的核心交互层围绕「中间画布 左右面板 顶部工具」的经典布局展开。文档所列能力可归纳为「对齐辅助」「元素操作」「页面管理」「快捷预览」「撤销重做」五类下面逐一对应到源码。1.1 参考线Reference Line与吸附对齐Adsorption Line, Assembly Alignment在拖动元素的过程中编辑器会实时计算当前元素与其他元素之间水平、垂直方向的对齐关系并绘制出参考线当偏移量小于 5px 时自动吸附对齐。实现位置canvas/edit.js 中的calcVHLine(point)方法。其核心逻辑是取当前编辑元素editingElement之外的所有元素作为参考referElements为每个参考元素计算左边界left、水平中线left width / 2、右边界left width三组 X 坐标以及上边界top、垂直中线top height / 2、下边界top height三组 Y 坐标再与当前元素自身的六组坐标逐一比对Math.abs(offset) 5时即触发吸附并通过drawVLine/drawHLine在画布上生成.v-line/.h-line参考线。吸附分为两类场景整体拖动元素handleElementMove时同时修正left/top拖动元素边缘的缩放手柄handlePointMove参数为lt/rt/lb/rb/l/r/t/b等方位点时只修正对应的宽度/高度与坐标代码注释中特别标注了 issue #360 的处理逻辑。拖拽结束mouseup时调用clearHLine/clearVLine清除参考线并通过recordElementRect记录元素位置快照为撤销重做提供历史节点详见 1.5。1.2 拖拽改变组件形状Towing Change Component Shape选中元素后其外框会渲染 8 个缩放手柄四角lt/rt/lb/rb与四边中点l/r/t/b实现缩放。实现位置shape.js。手柄的样式由getPointStyle计算依据方位字母t/b/l/r映射到东南西北方向并生成对应的*-resize鼠标样式mousedownForMark监听手柄的 mousedown在 mousemove 中根据手柄方位对高度、宽度、left、top 做增量计算上/左手柄为负向变化下/右手柄为正向变化同时通过handlePointMoveProp实时回写元素样式并借助calcVHLine(point)让缩放过程同样参与参考线吸附。此外画布底部还提供了可拖拽的「调整线」edit.js 的mousedownForAdjustLine配合输入框可直接修改作品的width/height默认作品宽度 320px见 Work.settings.json 中的width默认值拖动时滚动条自动同步至底部。1.3 元素操作复制、删除、编辑Canvas元素层面的增删改查统一收敛在 Vuex 模块 store/modules/element.js 的elementManagermutation 中支持add、copy、delete、move2Top、move2Bottom、addZindex、minusZindex、reOrder等操作类型复制elements.push(state.editingElement.clone({ zindex: len 1 }))新元素自动获得递增的层级zindex该操作可通过顶部固定工具 fixed-tools/options.js 触发。删除先找到当前编辑元素的索引若用户在偏好设置local-preferences.js 的IS_CONFIRM_BEFORE_DELETE_ELEMENT中开启了删除确认则弹出Modal.confirm二次确认后再执行splice。同时 shape.js 支持键盘 Backspace / Delete 快捷键删除handleDeleteByKeyboard并会$emit(delete)回调elementManager({ type: delete })。编辑画布上的每个元素在 mousedown 时即通过setEditingElement(element)成为editingElement随之展示外框、手柄与右侧属性面板点击画布空白区域class 不含element-on-edit-canvas则清空选中态edit.js。层级管理move2Top/move2Bottom通过数组重排并重置zindex实现addZindex/minusZindex借助 utils/element.js 的swapZindex交换相邻元素层级。1.4 页面操作新增、复制、删除Page页面管理由 store/modules/page.js 的pageManagermutation 驱动对应左侧「页面管理」面板 page-manager/index.js 与下拉菜单 page-manager/title-menu.js菜单项add/copy/delete面板底部另有加号按钮新增new Page(value)创建新页并 push 到work.pages。复制state.editingPage.clone()克隆当前页追加到末尾。删除为保证作品中始终保留至少一个页面当pages.length 1时会提示「作品中至少需要保留一个页面」并直接返回否则依据editingPage.uuid找到索引并移除。标题编辑editTitle直接改写work.pages[pageIndex].title保存后通过saveWork({ isSaveCover: false })持久化。页面切换setEditingPage(pageIndex)将editingPage指向目标页画布随之切换到对应页的元素集合。1.5 撤销 / 重做Undo, Redo撤销重做采用「订阅 Vuex mutation 快照入栈」的实现方式实现位置store/plugins/undo-redo/index.js 与 store/plugins/undo-redo/History.js。仅将三类「有状态意义的变更」计入历史editor/recordRect拖动/缩放结束时的位置快照、editor/elementManager增删复制等元素操作、editor/setEditingPage作为作品初始状态。代码注释明确指出setElementCommonStyle在 mousemove 期间触发过于频繁因此被排除在历史记录之外保证撤销粒度停留在「一次完整操作」而非「逐像素移动」。历史栈通过history数组与currentIndex游标实现addState时若游标之后存在 redo 分支则先splice丢弃undo从history[currentIndex - 1]取快照并以store.replaceState(cloneDeep(prevState))整体回放redo同理。代码中特别注释了「firstState 不能提前入栈」的原因——否则撤销到最后会回放到 work 为 null 的编辑器初始态导致画布空白。canUndo/canRedo分别以currentIndex 0与history.length currentIndex 1判定。二、组件系统Component SystemLuban-H5 将画布中的可放置单元抽象为「插件Plugin」——每个插件即一个 Vue 组件注册在 plugins/index.js 的pluginsList中并全局注册Vue.component(plugin.name, plugin.component)此举也便于后续加载 npm 插件扩展。左侧「组件快捷面板」shortcuts-panel/index.js 渲染pluginsList中visible: true的插件点击或拖拽即可把插件实例化到画布。2.1 基础组件Basic Component组件插件注册名说明普通文字LbpTextlbp-text.js画布内直接编辑文字内容通过input事件回写pluginProps.text富文本文字LbpTextTinymcelbp-text-tinymce.js基于 TinyMCE 的富文本组件普通按钮LbpButtonlbp-button.js支持点击跳转/触发动作普通图片LbpPicturelbp-picture.js支持图库、本地上传背景图片LbpBackgroundlbp-background.js画布渲染时特殊处理见下背景颜色背景组件的样式能力通过属性面板配置背景音乐LbpBgMusiclbp-bg-music.js支持循环播放与开关控制样式见 bg-music.scss视频Iframe 形式LbpVideolbp-video.js以 Iframe 方式嵌入外部视频样式见 video.scss从源码看实际插件列表还额外包含轮播图LbpSlide、地图LbpQQMap、评分LbpRate、公告LbpNoticeBar、表格LbpTable含默认/斑马线/淡蓝三套主题、新闻列表LbpNewsList以及基于同一图表的雷达图、折线图、柱状图、饼状图、漏斗图等图表组件说明组件系统具备良好的可扩展性。背景组件的特殊性在于画布渲染逻辑renderCanvas会优先识别element.name lbp-background的元素并直接渲染为lbp-background不套用可拖动外框使背景始终铺满页面底层edit.js。2.2 表单组件Form Component组件插件注册名说明表单按钮提交LbpFormButtonlbp-form-button.js触发表单提交POST 到后端采集接口表单输入框LbpFormInputlbp-form-input.js文本输入placeholder会被后端用作字段别名表单列表表单组件组合由输入框等组合构成表单多选框LbpFormCheckboxGrouplbp-form-checkbox-group.js多选字段表单单选框LbpFormRadioGrouplbp-form-radio-group.js单选字段aliasName被后端用作字段别名表单组件与后端表单采集能力见 3.2一一对应后端在聚合表单数据时会识别lbp-form-input取其placeholder与lbp-form-radio-group取其aliasName作为字段名Work.js 的getUuidMap2Name。关于表单组件如何绑定数据源、如何提交可进一步阅读仓库文档 docs/en/implementation/form-submit.md中文版见 docs/zh/implementation/form-submit.md。2.3 组件如何被放置到画布组件的放置支持「点击添加」与「拖拽添加」两种方式点击shortcuts-panel的clone(elementShortcutConfig)直接调用elementManager({ type: add, value })以new Element({...basicElement, ...shortcutProps, zindex: len 1})实例化元素。拖拽由 mixins/drag.js 实现。mousedown 时克隆被拖拽的快捷按钮为dragDom浮层并计算layerX/layerY偏移mousemove 中跟随鼠标移动mouseup 时通过checkCanMousedown校验位移量默认minOffset: 10避免误触再以.canvas-wrapper为参照计算目标坐标dragStyle: { left, top }最终同样走clone创建元素。shortcutProps还支持为同一插件声明默认属性例如表格的theme主题、图表插件的type: radar/line/histogram/pie/funnel。三、开源增强功能Enhancements [open source]3.1 模板列表、基于模板制作 H5、作品另存为模板模板能力的端到端链路如下数据模型Work.settings.jsonback-end/h5-api/api/work/models/Work.settings.json定义is_template布尔与cover_image_url封面图字段page_mode支持h5_swipperH5 轮播、h5_long_pageH5 长页、h5_formH5 表单三种模式。后端接口routes.jsonPOST /works/set-as-template/:id→work.setAsTemplate复制当前作品的pages与cover_image_url到一个新的is_template: true记录中POST /works/use-template/:id→work.useTemplate读取模板的pages与datasources数据源随模板一并克隆创建新的非模板作品。前端入口views/work-manager/templates.vue 负责模板列表展示与基于模板创建作品。3.2 未开放项图片库 / 三方版权图片搜索 / SSO 登录features.md明确将这三项标记为未完成- [ ]图片库、第三方版权图片搜索、SSO 登录与第三方登录。尽管仓库中已存在图片画廊相关代码雏形support/image-gallery 含 Pixabay 与个人图片 Tab但按官方功能清单口径仍应视为规划中而非已交付的能力本文不做展开。四、可能不开源的增强功能Enhancements [may not open source]4.1 上传 PSD 一键转 H5文档标注此项「已调研、可实现、属于高阶功能」。后端确实预留了实现入口POST /works/psd→work.uploadPSD内部调用strapi.services.work.parsePSD(ctx.request.body.files.file)解析上传的 PSD 文件并返回页面 JSONWork.js。需要说明的是该能力在官方定位中属于「可能不开源」范畴仓库前端并未提供完整操作界面请以官方后续发布为准。4.2 自定义脚本Custom Script自定义脚本功能允许用户为作品编写自定义 JS 逻辑。前端入口位于 store/modules/script.js 与 editor/modals/script-list.vue脚本列表、脚本查看等弹窗常量定义见 constants/script.js后端对应 back-end/h5-api/api/script 下的 CRUD 接口routes.json、controllers/script.js。此功能官方同样将其列入「可能不开源」清单仓库仅保留前后端接口实现。五、后端 APIBackend API后端基于 Strapi 框架构建back-end/h5-api全部作品相关接口定义于 back-end/h5-api/api/work/config/routes.json由 controllers/Work.js 实现。5.1 作品创建、保存与更新Strapi 默认 REST 接口work.find/work.findOne/work.create/work.update/work.delete对应方法与路径说明GET /works作品列表GET /works/:id作品详情GET /works/count作品数量统计POST /works创建作品PUT /works/:id更新作品保存DELETE /works/:id删除作品作品的持久化字段Work.settings.json包括title、description、cover_image_url、pagesJSON页面与元素树、is_publish发布状态、is_template是否模板、page_mode三种页面模式、height默认 568、width默认 320以及关联数据源集合datasources。前端编辑器在每次操作后调用saveWorkaction 持久化。5.2 表单数据采集与展示表单采集走作品接口形成「作品 ↔ 表单数据」的一对多关系POST /works/form/submit/:id→submitForm接收前端提交的formData调用strapi.services.workform.create({ form: formData, work })创建一条表单记录并返回{ message: success, status: 0 }。GET /works/form/query/:id→queryFormsOfOneWork查询某作品的全部表单记录同时通过getUuidMap2Name将元素 UUID 映射为字段名lbp-form-input用placeholderlbp-form-radio-group用aliasName返回{ uuidMap2Name, formRecords }供前端统计页展示可读字段。GET /works/has-forms→queryWorksWithForms以groupBy(work.id)聚合各作品表单条数返回含form_count的作品列表用于在作品卡片上标识「有表单数据」。对应前端统计界面为 views/work-manager/form-stat含 index.vue、detail.vue、column.js。表单记录的数据模型见 back-end/h5-api/api/workform/models/Workform.settings.json。5.3 在线预览与二维码预览在线预览GET /works/preview/:id→previewOneWork.js。该接口通过view_mode查询参数控制访问权限只有view_mode preview预览模式或work.is_publish为真时才渲染完整pages否则清空页面内容即「未发布的作品只能通过预览链接查看」随后以默认宽度 320 渲染 EJS 模板engineviews/engine.ejs输出完整 H5 页面。二维码预览前端引入qrcode依赖生成二维码。编辑器内通过 editor/modals/share-info.js 的drawQRcode(this.$refs.qrcode, this.previewUrl)绘制分享二维码支持尺寸调节作品卡片上的二维码生成逻辑见 common/work/card-item.jsgenQRCodeUrlqrcode图标按钮。辅助能力GET /works/cors-proxy→corsProxy提供跨域代理request(ctx.query.url)便于前端在编辑态绕过跨域限制请求外部资源GET /works/editor→renderCoreEditor渲染编辑器服务端模板views/core-editor.ejs。六、功能状态一览与延伸阅读汇总features.md的功能状态如下表供快速检索功能域能力状态编辑器参考线 / 吸附对齐 / 拖拽变形 / 元素增删改 / 页面增删改 / 快捷预览 / 撤销重做✅ 已实现基础组件文本、按钮、图片、背景图、背景色、背景音乐、视频Iframe✅ 已实现表单组件表单按钮、输入框、列表、多选另含单选✅ 已实现开源增强模板列表 / 基于模板制作 / 另存为模板✅ 已实现开源增强图片库 / 三方版权图片搜索 / SSO 登录⏳ 未开放高级增强PSD 一键转 H5 / 自定义脚本✅ 已调研可能不开源后端 API作品增删改查 / 表单采集与展示 / 在线预览 / 二维码预览✅ 已实现如需进一步深入可继续阅读仓库内以下关联文档快速上手与部署见 docs/en/getting-started/quick-start.md中文版 docs/zh/getting-started/quick-start.md代码结构总览见 docs/en/implementation/code-structure.md表单提交实现细节见 docs/en/implementation/form-submit.md。需要说明的是功能清单是项目演进中的快照组件与接口数量以后续版本为准建议结合 CHANGELOG.md 追踪能力变化。赞分享低代码前端后端【免费下载链接】luban-h5[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.项目地址https://gitcode.com/gh_mirrors/lu/luban-h5点击查看免费下载相关推荐鲁班 H5Luban-H5项目全解析基于 Vue2.0 的移动端可视化搭建平台鲁班 H5Luban H5项目全解析基于 Vue2.0 的移动端可视化搭建平台 本文基于鲁班 H5 官方仓库的 README.md https://lin低代码前端后端鲁班H5快速入门指南从零开始搭建可视化H5编辑器鲁班H5快速入门指南从零开始搭建可视化H5编辑器 项目概述 鲁班H5是一款基于Vue.js和Strapi的开源可视化H5页面制作工具它允许用户通过拖拽方式快低代码前端后端鲁班H5核心功能解析拖拽式编辑、组件系统与数据源管理鲁班H5核心功能解析拖拽式编辑、组件系统与数据源管理 鲁班H5是一个功能强大的 可视化H5页面制作工具 通过 拖拽式编辑 让普通用户也能轻松创建专业的移动端低代码前端后端上一篇Lucebox 模型与显卡怎么选9款硬件矩阵与Qwen、DeepSeek V4、Gemma 4推荐配置清单下一篇DeepMind Lab 快速上手指南基于 Quake III Arena 的 3D 强化学习研究环境创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考