往期热门文章:


 
1、使用 @Autowired 为什么会被 IDEA 警告,应该怎么修改最佳?
2、每天 100 万次登陆请求,8G 内存该如何设置 JVM 参数?
3、12种接口优化的通用方案,我又偷偷学到一波~
4、如何搭建一台永久运行的个人服务器?
5、谷歌裁员细节曝光:开源主管被裁,61岁程序员在线求职,有人60天找不到工作就被遣返

老逛每天都会去 ProductHunt 看看,这是一个发掘有意思产品的国外平台。

这个平台现在已经成为了用户发现新产品、创业者们获得灵感、投资人们寻找新机会,以及创始人对自己的产品进行推广的最佳去处。

最近一段时间,ProductHunt 平台诞生了很多受欢迎的新产品,这些新产品大都有一个标签:low code。

8fc44c493b210a9069bb68c435edf40b.png

低代码是通过可视化方式创建应用的一种概念,特点是代码量比传统开发少得多,甚至无代码,能显著提升开发效率。而如今,低代码不仅仅局限于软件应用的研发,只要是通过可视化的交互来帮助使用者完成一个作品都属于低代码的范畴。

如果你还不明白低代码是什么概念,可以看一下本文章提及的开源项目。这篇文章盘点了 10 款 GitHub 和码云上最受欢迎的低代码开源项目,记得收藏。


01.  快速搭建 H5 页面

鲁班 H5 生成器

鲁班 H5 是基于 Vue2.0 开发的快速生成页面的平台,通过简单的拖拽交互方式即可迅速的完成一个页面的制作,类似 易企秀、Maka、百度 H5 等平台。

左侧是常用的组件,右侧是组件的属性调节界面,中间区域就是编辑和预览区域。鲁班 H5 包含了丰富的组件可以选择,其中包括:

  • 雷达图、折线图、柱状图、饼状图、漏斗图

  • 图片、评分、表单、文字、地图、视频等

60790b3b5c55e1b1b14f0de9f8526506.png

图标和地图组件

2f468bf2406fff4fa98091d1a13f3155.png

折线图组件

bc5aba20c95962602d9c0eb346f9fa10.png


个人作品低代码平台

这个项目基于 Vue.js 技术栈,平台主页面分为四个部分,分别是工具栏、组件列表、画布、属性区域。将组件拖至画布区域。

用户可以将组件列表的组件拖到画布,对画布上的元素进行编辑。这仅仅是一个 Demo,其余更丰富的组件可以二次开发。

505919f5032e0275a58565c735d347f5.png

05f50fdc03c432365d0c053055234cb7.png


构建页面可视化编辑器

还有一个页面可视化的 Demo,基于 next.js 构建页面可视化编辑器。整个编辑器的研发逻辑为前端开发组件库,编辑器读取组件完成页面搭建,将页面数据发送至服务端保存。访问页面,从服务端拉取页面数据,前端渲染页面即可。

86fe0c1bb99ae9618ee6a36eba6a9155.png


随心秀 react 版 H5 微场景编辑器

编辑器功能:拖拽、缩放、旋转、动画、撤销、重做、组合元素

组件:物料、文本、图片、QQ语言通话、背景、地图、音效、模板、视频、艺术字

4c1ca348316b6ae952862caaf9f1fa8e.png


H5-factory

H5 专题页面可视化编辑工具,拖拽编辑,灵活切换,一键生成  HTML 文件。关于这个开源项目的系统架构设计和组件拆分原则可阅读文章:

https://juejin.cn/post/6844903858401968136

7ff3d9f74b686ab526abfd3c5b5b158d.png

60954952deaff597ef30d44611f1f3c1.png


H5 移动端低代码平台

vue3.x vite2.x vant element-plus H5 移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具

f407591b987fc40ef51e6d26e1d9fa81.png


02.  一个海报生成器

海报编辑器最左侧是组件列表。可以在最左侧选择组件,比如文本、二维码、图片等添加到最中间的画布区域,通过右侧的属性调节面板调节添加组件的样式。

快速:三步完成海报开发工作:启动服务 > 编辑海报 > 生成代码

简单:组件丰富、支持拖拽、复制、所见即所得、下载等功能。

动态:无需更改代码,直接在编辑器修改海报即可获得最新的海报。

2e9c9aab57f65fd37a8fe3984fb5245c.png

上传头像

6c9d24ff68ea8cc61d24e60b97fdce38.png

进行预览

6f396a943836c3105ce5fe00969b4ed1.png

获取代码:点击 代码,可以查看相关的接⼝调⽤代码。

76de5ce47972967d9cf6bb43989b5c56.png


03.  JEECG BOOT 低代码开发平台

JeecgBoot 是一款基于代码生成器的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT,支持微服务。强大的代码生成器让前后端代码一键生成,实现低代码开发!

Online表单开发、Online报表、报表配置能力、在线图表设计、大屏设计、移动配置能力、表单设计器、在线设计流程、流程自动化配置、插件能力(可插拔)等等!

1e8ef1578ea31f332c60459b7b163392.png

69d9a034f7d52cea3c59a73a70becd09.png

883f370a1c3231d0e740a97db7828352.jpeg


04.  amis 低代码工具

作者认为:对于大部分常用页面,应该使用最简单的方法来实现,甚至不需要学习前端框架和工具。

amix 就是这么一款低代码工具。它通过 JSON 配置就能生成各种后台页面,极大减少开发成本,甚至可以不需要了解前端。它的独特好处是:

  • 不需要懂前端也能能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的;

  • 不受前端技术更新的影响;

  • 可以完全使用可视化页面编辑器来制作页面;

a76a40df9fb5250cd3e465305bb6cd50.png


05.  Seezoon Stack 

Seezoon Stack 是一款基于当前最前沿的前端和后台实现的低代码开发平台。前端技术栈基于 Vue3 + Vite + Antdv,后端技术栈基于 Spring boot。

它以快速开发为目的,在开发速度和代码结构上做出一定取舍,无论如何,你将看到非常地道的 Java 常用开发框架使用。该项目采用主流开发框架,无论打包、编译、部署都按着大公司的标准完成并不断逐步完善。

4935d443a2e6cf292ec5bc4b0567b630.png

21e11cd748edc20226b70cf9b0a7f5cb.png

往期热门文章:
1、京东一面:MySQL 中的 distinct 和 group by 哪个效率更高?太刁钻了吧!
2、使用 try-catch 捕获异常真的会影响性能?
3、你的 IDE 太重了,试试 Emacs吧!
4、还在手写CRUD代码?试试这款代码生成工具吧,彻底解放双手!
5、JetBrains 如何看待自己的软件在中国被频繁破解?
6、无话可说,北邮211本科不符合华为OD要求,清华硕士符合!
7、RESTful真垃圾?试试 GraphQL?
8、这 7 个GitHub仓库,够学一辈子!
9、低欲望的后厂村:“遍地”985、211,高收入低消费,偏爱996
10、Javalin:一个超轻量级Web Framework!
Logo

低代码爱好者的网上家园

更多推荐