欧美人与禽2O2O性论交,秋霞免费视频,国产美女视频免费观看网址,国产成人亚洲综合网色欲网

低代碼三部曲之實現(xiàn)(低代碼原理)

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

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

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

低代碼三部曲之實現(xiàn)(低代碼原理)

頁面驅(qū)動

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

{ "formConfig": { "label-width": "80px" }, "fields": [{ "isRender": true, "isShow": true, "isAnalysis": true, "children": [], "__layoutConfig__": { "style": "", "props": { "span": 24 }, "attrs": {}, "on": {}, "userDefineProps": {} }, "__formItemConfig__": { "props": { "label": "活動名稱", "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)秀的參考項目:
  • form-create-designer

gitee:form-create-designer: 可視化vue表單設計器組件

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

  • k-form-design

gitee:k-form-design: 基于vue Ant-Design 的表單設計器,快速開發(fā)

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

  • vue-form-design

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

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

  • 如果您有更好的項目或者產(chǎn)品請留言,我及時更新到推薦到列表

低代碼三部曲之實現(xiàn)(低代碼原理)

模型驅(qū)動

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

{ "formConfig": { "label-width": "80px" }, "fields": [{ "isRender": true, "isShow": true, "isAnalysis": true, "children": [], "__layoutConfig__": { "props": { "span": 24 }, "attrs": {}, "on": {}, "userDefineProps": {} }, "__formItemConfig__": { "props": { "label": "學歷", "rules": [] }, "prop": "random50" }, "__controlConfig__": { "props": {}, "attrs": {}, "userDefineProps": { "optionType": "static", "optionCollection": [{ "label": "高中", "value": "1" }, { "label": "???#034;, "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": []}

總結(jié)

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

這篇文章先寫到這里,下一篇文章介紹低代碼的未來趨勢。

喜歡的朋友記得給個關注~

相關新聞

聯(lián)系我們
聯(lián)系我們
公眾號
公眾號
在線咨詢
分享本頁
返回頂部