原创 用React仿釘釘審批流

引言 這幾天幫朋友忙,用了一週時間,高仿了一個釘釘審批流。這個東西會有不少朋友有類似需求,就分享出來,希望能有所幫助。爲了方便朋友的使用,設計製作的時候,儘量做到節點配置可定製,減少集成成本。如果您的項目有審批流需求,這個項目可以直接拿過去

原创 前、後端通用的可視化邏輯編排

前一段時間寫過一篇文章《實戰,一個高擴展、可視化低代碼前端,詳實、完整》,得到了很多朋友的關注。 其中的邏輯編排部分過於簡略,不少朋友希望能寫一些關於邏輯編排的內容,本文就詳細講述一下邏輯編排的實現原理。 邏輯編排的目的,是用最少甚至不用代

原创 實踐,製作一個高擴展、可視化低代碼前端,詳實、完整

RxEditor是一款開源企業級可視化低代碼前端,目標是可以編輯所有 HTML 基礎的組件。比如支持 React、VUE、小程序等,目前僅實現了 React 版。 RxEditor運行快照: 項目地址:https://github.com

原创 用彈性盒子實現一個後臺管理界面,多標籤,多窗口

由於要改版前幾天做的HTML編輯器,編輯器頁面重新設計了一下,整個界面全部用flex box實現:     可能有的朋友會有類似需求,就把純靜態html和CSS發佈到github上了,在這個項目下面: https://github

原创 VUE實現Studio管理後臺(二):Slot實現選項卡tab切換效果,可自由填裝內容

作爲RXEditor的主界面,Studio UI要使用大量的選項卡TAB切換,我夢想的TAB切換是可以自由填充內容的。可惜自己不會實現,只好在網上搜索一下,就跟現在你做的一樣,看看有沒有好事者實現了類似功能,並分享了出來,百度到的結果不甚理

原创 VUE實現Studio管理後臺(一):鼠標拖放改變窗口大小

近期改版RXEditor,把改版過程,用到的技術點,記錄下來。昨天完成了靜態頁面的製作,製作過程並未詳細記錄,後期已經不願再補了,有些遺憾。不過工作成果完整保留在github上,地址:https://github.com/vularsoft

原创 一個基於Bootstrap實現的HMTL可視化編輯工具

疫情禁足在家,用原生的JS實現了一個HTML可視化編輯工具,頁面佈局基於Bootstrap。大約一個月時間,打通主要技術關卡,實現了第一版:可以拖放編輯,實現了幾乎所有的bootstrap預定義工具類。設計時,儘量讓其可以靈活擴展,支持多主

原创 開源低代碼平臺開發實踐二:從 0 構建一個基於 ER 圖的低代碼後端

前後端分離了! 第一次知道這個事情的時候,內心是困惑的。 前端都出去搞 SPA,SEO 們同意嗎? 後來,SSR 來了。 他說:“SEO 們同意了!” 任何人的反對,都沒用了,時代變了。 各種各樣的 SPA 們都來了,還有穿着跟 SPA 們

原创 開源低代碼平臺開發實踐一:低代碼開發探討與技術選型

開源、全站、低代碼項目 rxDrag 的前、後端演示終於全都上線了,停下來喘口氣,把開發實踐通過系列文章的方式分享出來,順便整理一下思路。 當決定要做這個低代碼項目的時候,低代碼還不像現在這樣火。 開發過程中,只是覺得前端後端合起來,有很多

原创 VUE 實現 Studio 管理後臺(八):用右鍵菜單 contextmenu,編輯樹形結構

RXEdior 預設會有文件管理功能,但是靈活性需求不大,目前的設想是文件夾不允許修改,只允許增刪改文件。基於這樣的設想,把界面實現成這個效果:這個功能並不是一個通用功能,並且我們做的代碼,也沒有按照類庫的標準要求,這種編輯功能實現有些複雜

原创 VUE實現Studio管理後臺(四):狀態模式實現窗口停靠,靈動、自由

昨天做的tabs窗口,非常滿意,今天乘勝追擊,把它做成了可以根據自身大小改變顯示樣式,自身寬度過小時,tab頁可以浮動停靠其一側。具體效果:左側右側向來喜歡簡單明瞭的東西,所以想實現的簡單一點,無奈現實不允許啊,功能實在有一丟丟複雜。硬着頭

原创 VUE 實現 Studio 管理後臺(十):OptionBox,一個綜合屬性輸入界面,可以級聯重置

爲了便於閱讀代碼,已經把測試數據分離出來,放在了 mock 目錄下:閱讀代碼的話,稍微留意一下就好。本次介紹 RXEditor 界面最重要的部分,屬性輸入組件,該組件可以顯示是否有數據被修改,還可以批量重置到缺省值,效果如下:這個界面是動態

原创 VUE 實現 Studio 管理後臺(六):鼠標懸停顯示彈出窗口

這次介紹的控件相對比較簡單,鼠標懸停時顯示彈出內容,效果如下:爲了增加靈活性,用 slot 實現,調用時的代碼:                    <MouseOverPop class="toolbox-element">     

原创 VUE 實現 Studio 管理後臺(五):手風琴式摺疊組件(Accordion)

作爲一個有目標的人(目標是做一個好用的 Bootstrap 可視化編輯器,第一個版本已經實現,演示地址:https://vular.cn/rxeditor/,代碼地址:https://github.com/vularsoft/rxedito

原创 VUE 實現 Studio 管理後臺(七):樹形結構,文件樹,節點樹共用一套代碼 NodeTree

本次介紹的內容,稍稍複雜了一點,用 VUE 實現樹形結構。目前這個屬性結構還沒有編輯功能,僅僅是展示。明天再開一篇文章,介紹如何增加編輯功能,標題都想好了。先看今天的展示效果:構建樹必須用到遞歸,使用 slot 這種直觀明瞭的方式,已經行不