使用這個(gè)工具, 人人都可以擁有自己的網(wǎng)站!
接下來(lái)給大家介紹的工具,不僅可以通過(guò)拖拽的方式制作H5頁(yè)面,PC頁(yè)面, 還可以制作可視化大屏應(yīng)用. 最關(guān)鍵的是, 完全免費(fèi)使用哦! 目前它的H5編輯器和PC端編輯器已在github部分或全部開(kāi)源. 接下來(lái)我就帶大家一起來(lái)了解一下這個(gè)頁(yè)面制作神器.
github: https://github.com/MrXujiang/h5-Dooring
官網(wǎng)地址: http://h5.dooring.cn
Nocode/Lowcode
Dooring
沒(méi)錯(cuò), 這個(gè)工具就是Dooring, 其中包含了
H5-Dooring(h5頁(yè)面搭建),
PC-Dooring(pc頁(yè)面搭建),
V6.Dooring(可視化大屏搭建)。
從2020年在github開(kāi)源上線(xiàn)以來(lái)已經(jīng)收獲4300+ star, 積累了1000+用戶(hù), 產(chǎn)生了700+頁(yè)面, 接近100+模版.目前仍在持續(xù)迭代和升級(jí). 并且有相對(duì)完整的開(kāi)發(fā)和使用文檔, 方便大家快速了解和使用Dooring.
Dooring文檔截圖
H5-Dooring | 零開(kāi)發(fā)極速制作H5
作者最開(kāi)始開(kāi)發(fā)這個(gè)項(xiàng)目的主要目的是提高個(gè)人和企業(yè)開(kāi)發(fā) H5 頁(yè)面的成本和效率, 可以通過(guò)搭積木的方式, 利用已有組件庫(kù)或外部組件資源(正在設(shè)計(jì))搭建出適合不同場(chǎng)景的 H5 應(yīng)用, 并且支持一鍵下載代碼, 讓技術(shù)人員或者非技術(shù)人員輕松將H5頁(yè)面部署到自己的服務(wù)器中. 所以打算把H5-Dooring好好落地, 做成一個(gè)真正有價(jià)值的項(xiàng)目.
整體架構(gòu) ? Dooring
使用Dooring搭建的移動(dòng)端產(chǎn)物和依賴(lài)的資源非常少, 并且在webpack層和服務(wù)器層做了優(yōu)化, 所以移動(dòng)端訪問(wèn)H5頁(yè)面會(huì)非常快, 這塊優(yōu)化在公眾號(hào)《趣談前端》的可視化專(zhuān)欄里有詳細(xì)的介紹, 目前對(duì)性能這塊還在持續(xù)優(yōu)化. 接下來(lái)看看預(yù)覽的大致原理圖:
H5-Dooring
PC-Dooring · Github完全開(kāi)源
PC-Dooring
整體技術(shù)架構(gòu)和H5-Dooring類(lèi)非常相似, 也是遵循作者的產(chǎn)品設(shè)計(jì)哲學(xué)—— 不要讓用戶(hù)思考. 降低一切拖拽復(fù)雜度, 采用智能網(wǎng)格的交互模式來(lái)實(shí)現(xiàn)(這種設(shè)計(jì)方式有一定的局限, 僅供大家參考, 當(dāng)然也可以使用V6.Dooring的自由布局模式). 整體架構(gòu)如下圖所示:
V6.Dooring · 拖拽式搭建可視化大屏
目前很多企業(yè)或多或少的面臨“信息孤島”問(wèn)題，各個(gè)系統(tǒng)平臺(tái)之間的數(shù)據(jù)無(wú)法實(shí)現(xiàn)互通共享，難以實(shí)現(xiàn)一體化的數(shù)據(jù)分析和實(shí)時(shí)呈現(xiàn)。
相比于傳統(tǒng)手工定制的圖表與數(shù)據(jù)儀表盤(pán)，可視化大屏制作平臺(tái)的出現(xiàn)，可以打破抵消的定制開(kāi)發(fā), 數(shù)據(jù)分散的問(wèn)題，通過(guò)數(shù)據(jù)采集、清洗、分析到直觀實(shí)時(shí)的數(shù)據(jù)可視化展現(xiàn)，能夠多方位、多角度、全景展現(xiàn)各項(xiàng)指標(biāo)，實(shí)時(shí)監(jiān)控，動(dòng)態(tài)一目了然。
針對(duì)以上需求, Dooring團(tuán)隊(duì)設(shè)計(jì)了一套可視化大屏解決方案, 具體包含如下幾點(diǎn):
V6.Dooring
可視化大屏數(shù)據(jù)自治探索
目前Dooring實(shí)現(xiàn)的搭建平臺(tái)可以靜態(tài)的設(shè)計(jì)數(shù)據(jù)源, 也可以注入第三方接口, 如下:
我們可以調(diào)用內(nèi)部接口來(lái)實(shí)時(shí)獲取數(shù)據(jù), 這塊在可視化監(jiān)控平臺(tái)用的場(chǎng)景比較多, 方式如下:
請(qǐng)你喝杯?? 記得三連哦～
1.閱讀完記得給?? 醬點(diǎn)個(gè)贊哦，有?? 有動(dòng)力
2.關(guān)注公眾號(hào)前端那些趣事，陪你聊聊前端的趣事
3.文章收錄在Github frontendThings 感謝Star?
原文鏈接是dooring的訪問(wèn)鏈接 歡迎體驗(yàn)！