低程式碼 yyds

逛逛GitHub發表於2021-07-12

老逛每天都會去 ProductHunt 看看，這是一個發掘有意思產品的國外平臺。

這個平臺現在已經成為了使用者發現新產品、創業者們獲得靈感、投資人們尋找新機會，以及創始人對自己的產品進行推廣的最佳去處。

最近一段時間，ProductHunt 平臺誕生了很多受歡迎的新產品，這些新產品大都有一個標籤：low code。

圖片

低程式碼是通過視覺化方式建立應用的一種概念，特點是程式碼量比傳統開發少得多，甚至無程式碼，能顯著提升開發效率。而如今，低程式碼不僅僅侷限於軟體應用的研發，只要是通過視覺化的互動來幫助使用者完成一個作品都屬於低程式碼的範疇。

如果你還不明白低程式碼是什麼概念，可以看一下本文章提及的開源專案。這篇文章盤點了 10 款 GitHub 和碼雲上最受歡迎的低程式碼開源專案，記得收藏。

01. 快速搭建 H5 頁面

魯班 H5 生成器

魯班 H5 是基於 Vue2.0 開發的快速生成頁面的平臺，通過簡單的拖拽互動方式即可迅速的完成一個頁面的製作，類似 易企秀、Maka、百度 H5 等平臺。

左側是常用的元件，右側是元件的屬性調節介面，中間區域就是編輯和預覽區域。魯班 H5 包含了豐富的元件可以選擇，其中包括：

  • 雷達圖、折線圖、柱狀圖、餅狀圖、漏斗圖

  • 圖片、評分、表單、文字、地圖、視訊等

圖片

圖示和地圖元件

圖片

折線圖元件

圖片

個人作品低程式碼平臺

這個專案基於 Vue.js 技術棧，平臺主頁面分為四個部分，分別是工具欄、元件列表、畫布、屬性區域。將元件拖至畫布區域。

使用者可以將元件列表的元件拖到畫布，對畫布上的元素進行編輯。這僅僅是一個 Demo，其餘更豐富的元件可以二次開發。

圖片

圖片

構建頁面視覺化編輯器

還有一個頁面視覺化的 Demo，基於 next.js 構建頁面視覺化編輯器。整個編輯器的研發邏輯為前端開發元件庫，編輯器讀取元件完成頁面搭建，將頁面資料傳送至服務端儲存。訪問頁面，從服務端拉取頁面資料，前端渲染頁面即可。

圖片

隨心秀 react 版 H5 微場景編輯器

編輯器功能：拖拽、縮放、旋轉、動畫、撤銷、重做、組合元素

元件：物料、文字、圖片、QQ語言通話、背景、地圖、音效、模板、視訊、藝術字

圖片

H5-factory

H5 專題頁面視覺化編輯工具，拖拽編輯，靈活切換，一鍵生成  HTML 檔案。關於這個開源專案的系統架構設計和元件拆分原則可閱讀文章：

https://juejin.cn/post/6844903858401968136
複製程式碼

圖片

圖片

H5 移動端低程式碼平臺

vue3.x vite2.x vant element-plus H5 移動端低程式碼平臺 lowcode 視覺化拖拽 視覺化編輯器 visual editor 類似易企秀的H5製作、建站工具、視覺化搭建工具

圖片

02. 一個海報生成器

海報編輯器最左側是元件列表。可以在最左側選擇元件，比如文字、二維碼、圖片等新增到最中間的畫布區域，通過右側的屬性調節皮膚調節新增元件的樣式。

快速：三步完成海報開發工作：啟動服務 > 編輯海報 > 生成程式碼

簡單：元件豐富、支援拖拽、複製、所見即所得、下載等功能。

動態：無需更改程式碼，直接在編輯器修改海報即可獲得最新的海報。

圖片

上傳頭像

圖片

進行預覽

圖片

獲取程式碼：點選 程式碼，可以檢視相關的接⼝調⽤程式碼。

圖片

03. JEECG BOOT 低程式碼開發平臺

JeecgBoot 是一款基於程式碼生成器的低程式碼平臺！前後端分離架構 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支援微服務。強大的程式碼生成器讓前後端程式碼一鍵生成，實現低程式碼開發!

Online表單開發、Online報表、報表配置能力、線上圖表設計、大屏設計、移動配置能力、表單設計器、線上設計流程、流程自動化配置、外掛能力（可插拔）等等！

圖片

圖片

圖片

04. amis 低程式碼工具

作者認為：對於大部分常用頁面，應該使用最簡單的方法來實現，甚至不需要學習前端框架和工具。

amix 就是這麼一款低程式碼工具。它通過 JSON 配置就能生成各種後臺頁面，極大減少開發成本，甚至可以不需要了解前端。它的獨特好處是：

  • 不需要懂前端也能能做出專業且複雜的後臺介面，這是所有其他前端 UI 庫都無法做到的；

  • 不受前端技術更新的影響；

  • 可以完全使用視覺化頁面編輯器來製作頁面；

圖片

05. Seezoon Stack

Seezoon Stack 是一款基於當前最前沿的前端和後臺實現的低程式碼開發平臺。前端技術棧基於 Vue3 + Vite + Antdv，後端技術棧基於 Spring boot。

它以快速開發為目的，在開發速度和程式碼結構上做出一定取捨，無論如何，你將看到非常地道的 Java 常用開發框架使用。該專案採用主流開發框架，無論打包、編譯、部署都按著大公司的標準完成並不斷逐步完善。

圖片

圖片

這些開源專案: 魯班 h5：地址：github.com/ly525/luban…

個人作品低程式碼：地址：github.com/woai3c/visu…

構建頁面視覺化：地址：github.com/fantasticit…

隨心秀：地址：github.com/lzuntalente…

h5-factory：地址：github.com/yangyuji/h5…

H5 移動端低程式碼平臺：github.com/buqiyuan/vi…

海報生成器：地址：gitee.com/vitojc/fast…

jeecg-boot：地址：gitee.com/jeecg/jeecg…

amis：gitee.com/baidu/amis

seezoon-stack：地址：gitee.com/huangdf/see…

最後，防止找不到本篇文章，可以收藏點贊，方便翻閱查詢。歡迎關注公眾號 逛逛GitHub（ggGithub）。

相關文章