最近幾年在軟件開(kāi)發(fā)領(lǐng)域，低代碼被吹捧的到了天際，好像你沒(méi)接觸過(guò)低代碼你都不好意思說(shuō)自己在軟件領(lǐng)域工作，其實(shí)，大可不必，這其中很大一部分是資本催生的結(jié)果，也有一部分是新技術(shù)的出現(xiàn)，讓一些玩文字的人創(chuàng)造了一個(gè)新名字而已，我應(yīng)該是10幾年前就在這方面開(kāi)發(fā)，所以很早就想總結(jié)下低代碼，春節(jié)期間沒(méi)有回老家，正好梳理下，一共有三篇文章，分別是起因、實(shí)現(xiàn)、未來(lái)，這篇文章是第二篇，總結(jié)下低代碼的落地、實(shí)現(xiàn)。

• 目前低代碼實(shí)現(xiàn)方式主要有兩種方式，包括目前市面上能看到的低代碼產(chǎn)品或者平臺(tái)也不例外，可以主要分為頁(yè)面驅(qū)動(dòng)、模型驅(qū)動(dòng)這這兩種方式，各有利弊，下面我們主要圍繞這兩種實(shí)現(xiàn)方式來(lái)闡述

低代碼實(shí)現(xiàn)流程

頁(yè)面驅(qū)動(dòng)

• 功能說(shuō)明：頁(yè)面驅(qū)動(dòng)就是指使用者直接設(shè)計(jì)頁(yè)面、表單、規(guī)則，不考慮數(shù)據(jù)模型，用戶根據(jù)提供的UI控件實(shí)現(xiàn)布局、表單、頁(yè)面、單據(jù)設(shè)計(jì)，頁(yè)面顯示就是把設(shè)計(jì)的時(shí)候還原呈現(xiàn)，最后直接供最終使用者使用。
• 使用場(chǎng)景：目前市場(chǎng)上常見(jiàn)的表單設(shè)計(jì)器、流程設(shè)計(jì)器、規(guī)則設(shè)計(jì)器基本都屬于頁(yè)面驅(qū)動(dòng)，這類(lèi)設(shè)計(jì)基本不用考慮數(shù)據(jù)模型，用戶設(shè)計(jì)成什么樣就是什么樣，用戶上手非常快，也容易上手，所以目前展示類(lèi)、快速原型、示意圖、To C類(lèi)多以這類(lèi)方式實(shí)現(xiàn)，
• 功能實(shí)現(xiàn)：頁(yè)面驅(qū)動(dòng)由于只考慮呈現(xiàn)效果，所以實(shí)現(xiàn)上也簡(jiǎn)單，且主要對(duì)前端有要求，實(shí)現(xiàn)過(guò)程可以使用如下示意圖表示

{ "formConfig": { "label-width": "80px" }, "fields": [{ "isRender": true, "isShow": true, "isAnalysis": true, "children": [], "__layoutConfig__": { "style": "", "props": { "span": 24 }, "attrs": {}, "on": {}, "userDefineProps": {} }, "__formItemConfig__": { "props": { "label": "活動(dòng)名稱(chēng)", "rules": [], "required": true }, "prop": "name" }, "__controlConfig__": { "props": {}, "attrs": {}, "userDefineProps": {} }, "tagName": "el-input", "__layout__": "colFormItem", "id": 1593757474090, "model": "name", "name": "單行文框", "tagIcon": "input", "controlPanel": "el-input", "uuid": "el-input-0", "sortNum": 0 }], "formApiValid": []}

• 推薦優(yōu)秀的參考項(xiàng)目：
• form-create-designer

gitee：form-create-designer: 可視化vue表單設(shè)計(jì)器組件

github：https://github.com/xaboy/form-create-designer

• k-form-design

gitee：k-form-design: 基于vue Ant-Design 的表單設(shè)計(jì)器，快速開(kāi)發(fā)

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

• vue-form-design

gitee：vue-form-design: 基于 Vue3 的可視化表單設(shè)計(jì)器；使用基于 Vue 3.0 的桌面端組件庫(kù) Elemnet-Plus ，使用廣泛，擴(kuò)展方便；通過(guò)可視化的操作，快速完成表單頁(yè)面的創(chuàng)建；提供功能強(qiáng)大的各種組件，可適用在各種復(fù)雜的場(chǎng)景中；豐富的API接口，方便快速的生成表單，驗(yàn)證和獲取表單數(shù)據(jù)；利于二次開(kāi)發(fā)

github：https://github.com/337547038/vue-form-design

• 如果您有更好的項(xiàng)目或者產(chǎn)品請(qǐng)留言，我及時(shí)更新到推薦到列表

模型驅(qū)動(dòng)

• 功能說(shuō)明：模型驅(qū)動(dòng)是指先把要表示的對(duì)象模型及模型關(guān)系規(guī)劃并設(shè)計(jì)好，然后根據(jù)模型去設(shè)計(jì)頁(yè)面、表單、單據(jù)等等，頁(yè)面上能呈現(xiàn)的數(shù)據(jù)來(lái)源于提前設(shè)計(jì)好的數(shù)據(jù)模型，頁(yè)面顯示的時(shí)候跟頁(yè)面驅(qū)動(dòng)是一樣的，都是根據(jù)表單設(shè)計(jì)器設(shè)計(jì)去還原頁(yè)面，供使用者使用。
• 使用場(chǎng)景：目前這類(lèi)開(kāi)發(fā)方式主要用在系統(tǒng)性的平臺(tái)或者業(yè)務(wù)系統(tǒng)中，尤其是to B的系統(tǒng)、或者是在已有的系統(tǒng)上做擴(kuò)展功能需求，像OA、EHR、理賠、物流系統(tǒng)等等。
• 功能實(shí)現(xiàn)：功能實(shí)現(xiàn)其實(shí)跟頁(yè)面驅(qū)動(dòng)類(lèi)似，可以先設(shè)計(jì)頁(yè)面再跟模型映射，也可以根據(jù)模型映射頁(yè)面上的控件，這兩種方式都可以，最終形成的頁(yè)面的頁(yè)面設(shè)計(jì)結(jié)構(gòu)類(lèi)似

{ "formConfig": { "label-width": "80px" }, "fields": [{ "isRender": true, "isShow": true, "isAnalysis": true, "children": [], "__layoutConfig__": { "props": { "span": 24 }, "attrs": {}, "on": {}, "userDefineProps": {} }, "__formItemConfig__": { "props": { "label": "學(xué)歷", "rules": [] }, "prop": "random50" }, "__controlConfig__": { "props": {}, "attrs": {}, "userDefineProps": { "optionType": "static", "optionCollection": [{ "label": "高中", "value": "1" }, { "label": "專(zhuān)科", "value": "2" }] } }, "tagName": "LElSelect", "__layout__": "colFormItem", "id": 1594263810269, "model": "random50", "name": "選擇框", "tagIcon": "select", "serviceName": "LElSelect", "controlPanel": "LElSelect", "uuid": "LElSelect-3", "document": "https://element.eleme.cn/#/zh-CN/component/select", "sortNum": 0 }], "formApiValid": []}

• 推薦優(yōu)秀的參考項(xiàng)目：這塊幾乎沒(méi)有開(kāi)源的，不過(guò)基本都提供了試用，不管看到的是什么樣，但針對(duì)低代碼這塊實(shí)現(xiàn)方式相差不會(huì)太大，就看哪家沉淀的更久，做的更用心。
• 藍(lán)凌 藍(lán)凌智能OA
• 炎黃盈動(dòng) AWS PaaS – 簡(jiǎn)化企業(yè)流程應(yīng)用的開(kāi)發(fā)、運(yùn)行和維護(hù)
• 泛微工作流引擎 泛微OA系統(tǒng)—豐富應(yīng)用滿足不同組織辦公需求
• 如果您有更好的項(xiàng)目或者產(chǎn)品請(qǐng)留言，我及時(shí)更新到推薦到列表

總結(jié)

低代碼實(shí)現(xiàn)方式主流程就是設(shè)計(jì)頁(yè)面、流程、規(guī)則等等，然后再還原，供最終使用者使用，真正落地使用到的技術(shù)都相差不大，基本的開(kāi)發(fā)方式也就是文章中提到的頁(yè)面驅(qū)動(dòng)或者是模型驅(qū)動(dòng)，但在具體開(kāi)發(fā)過(guò)程中還是需要考慮很多問(wèn)題的，比如：數(shù)據(jù)怎么保存、權(quán)限怎么設(shè)計(jì)、如何跟具體的業(yè)務(wù)系統(tǒng)結(jié)合、數(shù)據(jù)如何再加工等等，這塊如果展開(kāi)來(lái)寫(xiě)太多了，計(jì)劃后面錄成視頻分享出來(lái)。

這篇文章先寫(xiě)到這里，下一篇文章介紹低代碼的未來(lái)趨勢(shì)。

喜歡的朋友記得給個(gè)關(guān)注~