關於低代碼平臺的思考

      在項目實戰開發中，尤其是在大平臺系統的搭建中，針對不同的業務場景，需要爲用戶多次編寫不同的表單頁面用於錄入、修改、展示操作，一旦表單過多，對於開發人員來說，算是一種重複開發，甚至是一種繁雜的工作。但是，隨着技術發展，前端JS框架的不斷成熟，降低前端開發工作量，自動生成統一表單的技術，越來越成熟，隨之而來，誕生了低代碼的思路。

低代碼，簡單理解就是通過拖拽，即可生成頁面，同時能夠保持頁面的統一風格，快速搭建頁面，生成前端代碼。

前端開發框架VUE的風靡全球，簡單，快速，結合VUE，表單生成器誕生，下面是基於VUE的幾種比較不錯的表單生成器，通過拖拽即可實現表單的佈局、代碼的生成

1.Form Generator

Element UI表單設計及代碼生成器，可將生成的代碼直接運行在基於Element的vue項目中；也可導出JSON表單，使用配套的解析器將JSON解析成真實的表單。

 

 

碼雲倉庫： form-generator: Element UI表單設計及代碼生成器

演示地址： form-generator

安裝依賴：

npm install
JSON解析器：

// 安裝
npm i form-gen-parser
vscode插件 form-generator-plugin

此項目將form-generator的vscode-plugin分支封裝爲一個vscode插件，拓展了form-generator的文件寫入能力； 幫助使用element UI的開發者完成基本的表單代碼搭建任務，減少重複的勞動。

2. 基於vue+ant-design-vue的表單設計器 k-form-design

設計器佈局參考form-generator項目，基於vue和ant-design-vue實現的表單設計器，樣式使用less作爲開發語言，主要功能是能通過簡單操作來生成配置表單，生成可保存的JSON數據，並能將JSON還原成表單，使表單開發更簡單更快速。

 

 

 

github倉庫：https://github.com/Kchengz/k-form-design

演示地址：http://cdn.kcz66.com/form-design.html

組件

KFormDesign 表單設計器（基於可視化操作快速設計出表單頁面，生成配置json或頁面）
KFormBuild 表單構建器（根據設計器中獲取的配置json數據，快速構建出表單頁面）
安裝

# 使用yarn
yarn add k-form-design

# 使用npm
npm i k-form-design --save
引入組件

// 在main.js引入

import KFormDesign from 'k-form-design'
import 'k-form-design/lib/k-form-design.css'
Vue.use(KFormDesign)
使用組件

<template>
<div>
<k-form-design />
</div>
</template>

 

3.基於vue的表單生成器（支持iview，element-ui,ant-design-vue） form-create

 

 

 

form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成組件。支持3個UI框架，並且支持生成任何 Vue 組件。內置20種常用表單組件和自定義組件。

安裝

iview

npm install @form-create/iview
iview

npm install @form-create/iview4
element-ui

npm install @form-create/element-ui
ant-design-vue

npm install @form-create/ant-design-vue

4.基於vue+ElementUI的表單設計器form-designer

 

 

 

碼雲倉庫：https://gitee.com/wurong19870715/formDesigner

演示地址：http://wurong19870715.gitee.io/formdesigner

 ----------------分割線----------------------------------

 

以上表單生成都不錯，從我自己的角度，都是爲了生成JSON文件，如果再深入思考下，從實際開發流程來說，一旦業務場景確定，往往都是先確定數據表結構，再進入開發。

是不是可以考慮，基於業務數據庫表結構，利用這個表單生成器，先生成一版通用的，生成主業務場景畫面的表單，然後由開發人員再根據實際進行調整，例如通用的都生成是普通text表單，然後可以根據需要調整成其他類型的表單，例如日期選擇、下拉選擇等，然後再保存到數據庫中，這樣可以不用前端開發人員的協助，能夠自動生成畫面，甚至直接推送到項目代碼中，整個過程甚至直接脫離前端開發人員？

這樣起碼來說，增刪改查列表的通用畫面就能夠快速完成，這樣速度會大大提升。

我相信，國內應該已經有公司這麼做了。

 

 

參考資料

https://blog.csdn.net/weixin_43765747/article/details/122995904