• a片在线观看 奈何設計可視化搭建平臺的組件商店?

    发布日期:2022-05-18 23:54    点击次数:162

    a片在线观看

    之前一直在做 lowcode 和可視化相關的項目,也圍繞可視化技術輸出了一系列技術著述,今天我繼續和人人來聊聊可視化平臺相關的話題——組件商店。這個需求其實很早在我開源 H5-Dooring 之后就有網友建议過 issue ,如下:

    正值最近也做了一系列的重構和優化,覺得是時侯著手組件商店了,是以借此機會和人人詳細聊聊奈何設計可視化搭建平臺的組件商店。

    按照我一向的寫作風格,我會不才面列出著述的大綱,以便人人有選擇且高遵循的閱讀和學習:

    什么是組件商店,為什么要設計組件商店

    組件商店使命流設計

    組件商店使命流具體决策實現

    實現在線代碼編輯器 組件提交决策設計 組件審批决策設計 組件上架更新决策

    可視化搭建平臺組件商店總結及后期規劃

    著述視圖如下,人人在平時在使命中也不错通過思維導圖的神气來整理端倪。

    什么是組件商店, 為什么要設計組件商店

    “商店”人人也許并不生分,對用戶而言,其基本用途是滿足浅近的消費需求;對供應商而言,商店提供了一種銷售自己產品的營銷推廣渠道;對商店自己而言,一方面獲得了客流和利潤,另一方面還能提供自己價值在空間上的蔓延。

    通過以上的圖例說明,我們很容易猜测一個詞——生態。因為每一個環節都在互相促進,互相影響。那么對于商店這個實體有了具象的認知之后,我們再來望望技術領域的“組件商店”。

    對于可視化搭建平臺而言,其中一個中枢的環節即是組件資產。用戶在設計搭建頁面時會消費各種各樣的組件,可是對于不同的用戶而言,組件的需求相同是不一樣的,大部分的 lowcode 或者 nocode 平臺都弗成很好的解決用戶這些定制化的組件需求,是以為了解決這一問題,組件商店就滋长而生。

    我們需要在平臺中提供一種機制,支撐生產者生產組件,定義組件,同時处治者不错對生產者生產的組件進行分類处治(比如上架/下架/刪除/排序等)。做過電商系統的知友可能會發現,它和電商平臺的商品發布上線是一個邏輯历程:

    那么接下來我就帶人人通盘設計一個這樣的历程,供人人參考。

    組件商店使命流設計 根據上头的介紹和分析,我們要想實現美满的組件商店使命流,需要滿足以下幾點: 組件線上編輯(上傳)模塊 組件審核模塊

    組件更新/發布模塊

    組件处治(上架/下架/刪除/下載)

    有了以上4塊的支持,基本的組件商店就不错 work 了。具體历程如下: a片在线观看

    a片在线观看

    組件商店使命流具體决策實現

    在有了具體的規劃和設計之后,我們就不错一步步來實現了。

    1.實現在線代碼編輯器

    在線代碼編輯器当今市面上有幾種锻炼的决策,比如:

    react-monaco-editor react-codemirror2 ace | 性能和功能上不错忘形土产货代碼編輯器

    人人不错選擇以上大肆一種决策,這里筆者摄取 react-codemirror2 來實現。實現后的恶果如下:

    由上圖不错看到我們不错在線編寫React,Css,Js 代碼,而况不错成立組件信息。当先我們來安轉一下插件:

    yarn add react-codemirror2 codemirror2 

    codemirror 給我們提供了许多語言支持和不同風格的代碼主題,我們不错很輕松的制作不同語言的編輯面板。接下來我帶人人實現一個React代碼編輯器:

    import {UnControlled as CodeMirror} from 'react-codemirror2'; require('codemirror/mode/jsx/jsx');  const react_code = `import styles from './index.less'; import React, { memo, useState } from 'react'; import ReactDOM from 'react-dom';  const MenuCp = memo((props) => {   const { visible, list, bgColor, top } = props;   return ReactDOM.createPortal(     <div className={styles.menuWrap} style={{display: visible ? 'block' : 'none', backgroundColor: bgColor, top: (top + 6) + 'px'}}>       H5-Dooring     </div>,     (document as any).querySelector('.react-grid-layout').parentNode,   ) })`  const ReactEditPanel = () => {   const codeEditorChange = (       _editor: CodeMirror.Editor,       _data: CodeMirror.EditorChange,       value: string,        type: string       ) => {       console.log(_data, value, type)     }   return <CodeMirror           value={react_code}           className={styles.codeWrap}           options={{               mode: 'jsx',               theme: 'material',               lineNumbers: true           }}           onChange={(editor, data,
    人与牲口性恔配视频免费 value) => codeEditorChange(editor, data, value, 'react')}       /> } 

    以上就實現了一個簡單的React代碼編輯器,是不是很簡單呢? 同理對于 css ,js 代碼編輯器,亦然同樣的神气,我們只需要定義 CodeMirror 屬性的mode 為 css ,javascript 即可。我們還不错設置 theme 來切換到我們喜歡的代碼主題,這里筆者使用的material風格。

    單純實現在線代碼編輯器還不夠,我們還需要對代碼進行處理,保存,對組件進行定義,接下來我們就來望望組件是奈何提交的。

    2.組件提交决策設計

    當“ 生產者 ”編寫好組件代碼之后,需要對組件自己進行定義。因為可視化平臺組件物料很依賴平臺的組件開發協議,我們需要按照平臺的規范去上傳規范的自定義組件,這樣平臺能力更好的通晓應用組件,保持用戶認知的一致性。

    組件描述信息筆者這里設計了如下字段:

    組件名稱 (中语) 組件名 (英文,便捷存庫) 組件分類 (基礎,可視化,營銷,媒體等) 組件默認大小 (寬高) 組件圖標 (便捷用戶認知,查找)

    人人也不错根據我方的平臺特质來定義和規范,這樣我們就不错提交一個美满的組件數據了。

    当今我的做法是將用戶提交的美满的組件數據存在庫中,以便審核轉化為可視化平臺不错消費的組件,當然人人也不错用更智能的神气,自動對組件代碼信息進行索求轉化,其缺點即是誤差率無法边界,以及無法對組件進行準確的描述。以下是我提交的恶果:

    組件提交邏輯也很簡單:

    form.validateFields().then(values => {   codeRef.current['form'] = {     ...values,免费看黄软件     icon: values.icon[0].url   };   req.post('/visible/cp/save', codeRef.current).then(res => {     setIsModalVisible(false);   }) }).catch(errorInfo => {   console.log(errorInfo)   setCurTab("4") }) 

    我們只需要用 antd 的Form 將用戶填寫的數據会聚起來提交給后臺接口即可。由于我的后臺摄取 nodejs 實現,上傳接口無非即是保存組件數據,實現比較簡單,這里就不逐一介紹了。對 nodejs 感興趣的知友不错參考我之前的開源項目從零搭建全棧CMS系統。

    3.組件審批决策設計

    組件審批主要由網站处治人員來操作,當用戶組件提交得手之后,客戶端會通過音书信令奉告处治員,处治員收到音书后會審核組件。那么整個過程也很簡單,我們不错使用 websocket 來實現音书雙向通讯,美满历程如下:

    我們先來實現 socket 通讯,這里我就摄取市面比較锻炼的 socket.io,來簡單买通一個客戶端, 服務端的雙向通讯历程。

    当先我們先按照一下依賴:

    # 服務端 yarn add socket.io  # 客戶端 yarn add socket.io-client 

    對于服務端,我們需要進行如下改寫:

    import koa from 'koa'; import http from 'http';  const app = new koa(); const server = http.createServer(app.callback()); const io = require('socket.io')(server);  // 一些業務邏輯...  // socket通讯 io.on('connection', (socket) => {     console.log('a user connected');     socket.on('component upload success', (msg) => {       // 奉告審批       io.emit('component review', msg)     })   });  server.listen(config.serverPort, () => {     console.log(`服務器地址:xxx.xxx.xxx`) }); 

    對于客戶端,邏輯如下:

    import io from 'socket.io-client' import { serverUrl } from '@/utils/tool'  const socket = io(serverUrl);  // ... 一些邏輯 useEffect(() => {    socket.on('connect', function(){      console.log('connect')    });    socket.on('htmlWorked', function(data){      const { result, message } = data      if(result !== 'error') {        // ...      }else {        // ...      }          });    socket.on('disconnect', function(e){      console.log('disconnect', e)    });  }, []) 

    通過以上的實現神气客戶端和服務端就不错隨時進行通讯了。接下來我們望望審批的恶果:

    用戶在 H5-Dooring 平臺提交的組件都會流入处治后臺,处治員不错對組件進行審查以及下載源碼等操作。審批同樣會用到 codemirror 這個庫,主若是將存到數據庫的字符串代碼進行回顯。當然還不错實現線上預覽組件上線后的恶果,這塊人人感興趣的不错我方嘗試一下實現决策,旨趣也很簡單。我們來望望審批的演示:

    4. 組件上架更新决策

    組件上架的决策也有许多,比如不错手動上架更新,也不错用治安自動化的完成。那么這里我介紹一下我的線上自動化上架的决策,這里還是需要借助上头介紹的 socket.io 和 nodejs。旨趣粗略如下:

    美满的历程即是平臺处治員對組件審批通過之后,會自動用 socket 向服務端發送審批通過信號,服務器會對組件數據進行贯通,寫入對應類別下的組件庫里(也即是組件入庫),并將組件信息元寫入到編輯器基座,此時為了更新基座拿到最新的恶果,需要 nodejs 贯通構建指示線上打包基座,基座更新完之后會用 socket 發送音书給 H5-Dooring,奉告用戶組件庫已更新,教唆用戶是否刷新組件列表,至此,一個美满的組件上架更新历程就完成了。這里我們實現一下奈何線上打包編輯器基座。

    根据调研机构麦肯锡公司的估计,2020年全球物联网市场规模为1.6万亿美元,到2030年B2B市场规模可能会增长到3.4至8.1万亿美元。这项评估表明,未来几年仍有大量价值机会有待实现。

    这家领先研究公司的分析师预计,全球将部署740万台医疗物联网设备,其中每家智能医院将部署超过 3,850 台。

    物联网几乎无处不在:家庭、企业、汽车、零售店和仓库。

    “智能开发”一词涵盖从建造到出租的小型场地到住宅、商业和零售单元的混合体,例如温布利公园 85 英亩的开发项目。智能开发模仿政府和企业在智能城市中部署的基础设施和技术,规模较小。

    当先我們需要對 nodejs 的父子進程有一定的了解,比如 child_process。我會使用child_process 的 exec 實現贯通并執行敕令行指示,如果人人對 nodejs 的父子進程不太稳当,也不错參考我之前的著述 基于NodeJS從零構建線上自動化打包使命流。

    因為整個過程需要自動化的去處理,弗成像我們之前打包項目一樣,手動執行 npm run build 或者 yarn build 。我們需要治安自動幫我們執行這個敕令行指示,具體决策如下:

    import { exec } from 'child_process' const outWorkDir = resolve(__dirname, '../h5_base_frame') const fid = uuid(8, 16) const cmdStr = `cd ${outWorkDir} && yarn build ${fid}`  router.post(api.generalConfig,     auth,     ctx => {       // ...       exec(cmdStr, function(err, stdout, stderr){        if(err) {          console.log('api error:'+stderr);          io.emit('htmlWorked', { result: 'error', message: stderr })        } else {          io.emit('component update success', { result: 'success', message: 'xxxx' })        }       })       // ...     } ); 

    通過以上的神气,我們就不错線上打包更新我們的項目基座,并植入任何參數,如果需要動態寫入文献,我們只需要用 fs 模塊處理即可,通過這樣的線上使命流,我們還不错實現更復雜的邏輯,以致實現一個袖珍的前端CI使命流。那么人人如果有更優雅更好的决策,亦然不错隨時在評論區调换。

    可視化搭建平臺組件商店總結及后期規劃

    以上扫数的設計决策實現都是基于實際需求來設計的,當然還有许多細節需要處理和優化,隨著需乞降,業務的復雜,后期還會做組件統計,組件數據分析,組件監控等才略,人人也不错參考以上的設計决策,設計我方的組件商店。

    本文轉載自微信公眾號「趣談前端」

     




Powered by 国产av一区二区三区香蕉 @2013-2022 RSS地图 HTML地图