我写了一个低代码平台

简介 ⛏️

  • Github
  • 点我体验
  • 当时写这个平台主要是因为毕业几年基本做的都是后台管理系统。后台管理系统用的最多且需要配置的组件的就是Table、Form和弹窗这三个组件。
  • 这几个组件都已经写的滚瓜烂熟,但是表格字段、表单项都是根据业务需求一直变化的。
  • 这就导致我们我们需要一直重复的写Tbale、Form这些表单组件,然后把字段信息填上去。
  • 工作一年后,我就在想可不可以写一个平台,提供方便配置表格字段和表单项的方式,然后把重复的代码根据模板生成出来,提供代码预览、复制和导出功能。

基本功能 🔥

css 复制代码
如下图所示,左侧分别是对应Table、Form、Modal和自定义内容的组件(组件可以添加表格、表单和普通文本)。
中间部分是预览区域,根据配置生成预览界面。同时预览区域也可以做一下配置,比如添加字段,拖拽改变字段顺序等等
右边则是配置区域,一般会有组件的属性配置,比如下图的Table配置就是全部填充到Table组件里面的参数
全部配置则有导出代码时。导出文件名及后缀名的配置(目前支持jsx和tsx两种文件导出)
此外还有组件的名称、保存配置生成模板的名称都在此处配置
复制代码
此外点击中间预览区域的表头,还会出现字段的配置

基本操作 ✏️

一. 代码预览

复制代码
当你做好配置时,可以点击左上角的预览按钮,右边就会打开一个抽屉
里面是包含该组件根据定义的配置生成的代码,可以直接复制到项目里使用

二. 导出代码

复制代码
如果希望将其导出为一个jsx或者tsx文件,复制到项目里使用可点击导出代码按钮,会下载一个文件
文件名后缀名可以在全局配置里面自定义

三. 保存配置

复制代码
点击保存按钮,会将本次配置的保存为一个模板,下次进来可以点击模板Tag快速加载配置。可以保存多个模板。

四. 导出模板 & 导入模板

  • 将保存的模板导出为配置文件,可以分享给别人,然后通过导入配置的方式,加载别人定义的模板配置
  • 比如我把这个平台丢给后端,然后说表格、表单的接口字段名可以在这上面进行配置,接口定义好之后将其保存为 模板,然后导出发给我
  • 直接减少接口定义之前,静态页面的开发时间。前提是后端会配合,哈哈哈,大概率不会。
  • 希望后续可以把这个平台开发成产品经理可用的,产品在这里画简单的原型,然后导出给前端使用。前端又有时间Touch Fish了,嘻嘻嘻

组件介绍 🏆

这里只介绍弹窗组件,因为弹窗的内容可以配置表格、表单Form和文本DOM

  • 各个组件的全局配置需要点击中间预览区域的空白处
  • 弹窗的内容,文本、表格、表单都是可以增删、拖拽排序的
  • 表格和表单的全局配置则需要点在表单、表格的空白处,但不是字段的区域
  • 那字段的配置,则是直接点击字段区域右侧就会加载对应的字段配置
  • 表格字段配置和字段拖拽排序都是需要点击表头
  • Form表单直接点击拖拽表单字段即可

最后 🚁

复制代码
功能其实非常简单,大家在上面的点我体验几分钟就能熟悉使用
既然看到这里了,码字不易多谢各位靓仔靓妹给个点赞收藏,最好Github上能给我点个小小的Star,万分感谢
最后觉得这个项目可以提高开发效率,可以加我微信vgbire。
我们拉群探讨一下低代码相关的知识、技能来完善这个项目。以减少开发时间,提高摸鱼效率(坏笑.jpg)
相关推荐
@大迁世界4 小时前
07.React 中的 createRoot 方法是什么?它具体如何运作?
前端·javascript·react.js·前端框架·ecmascript
发现一只大呆瓜6 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
发现一只大呆瓜7 小时前
React-路由监听 / 跳转 / 守卫全攻略(附实战代码)
前端·react.js·面试
Ruihong13 小时前
【VuReact】轻松实现 Vue 到 React 路由适配
前端·react.js
软弹16 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
前端炒粉16 小时前
React 面试高频题
前端·react.js·面试
张一凡9317 小时前
React 项目也能用依赖注入?我尝试了一下,真香
前端·react.js
Csvn17 小时前
Redux Toolkit 实战
react.js
snow_yan17 小时前
基于 json-render 的流式表单渲染方案
前端·react.js·llm
Csvn17 小时前
组件设计模式(下):HOC、Render Props 与 Compound Components
react.js