我写了一个低代码平台

简介 ⛏️

  • 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)
相关推荐
kkkAloha1 小时前
常见error集合
前端·javascript·react.js
花花花17 小时前
RadSystems 自定义页面全攻略:个性化任务管理系统的实战设计
mysql·低代码·typescript·vue·开发工具·radsystems
喜欢踢足球的老罗7 小时前
RN开发搬砖经验之—React Native(RN)应用转原生化-Android 平台
android·react native·react.js
yqcoder7 小时前
react 中 useCallback Hook 作用
前端·javascript·react.js
jun7788957 小时前
React状态管理之Redux
前端·react.js·前端框架
熊的猫7 小时前
实现 Toy-React , 实现 JSX 渲染
前端·javascript·chrome·react.js·webpack·前端框架·node.js
qq_544329178 小时前
关于写React的一些反思和总结
前端·react.js·前端框架
搭贝9 小时前
安全生产管理的重要性:现状、痛点与改进之路
安全·低代码
前端熊猫15 小时前
React 项目与 Vue 项目的区别
javascript·vue.js·react.js