懂球帝官网-我会不才面列出著述的大纲
你的位置:懂球帝官网 > 懂球帝首页 > 我会不才面列出著述的大纲
我会不才面列出著述的大纲
发布日期:2022-02-16 13:18    点击次数:182

我会不才面列出著述的大纲

懂球帝官网

之前一直在做 lowcode 和可视化关连的神态,也围绕可视化技能输出了一系列技能著述,今天我接续和宇宙来聊聊可视化平台关连的话题——组件商店。这个需求其实很早在我开源 H5-Dooring 之后就有网友建议过 issue ,如下:

偶合最近也做了一系列的重构和优化,合计是时侯入部属手组件商店了,是以借此契机和宇宙注释聊聊怎么遐想可视化搭建平台的组件商店。

按照我一向的写稿作风,我会不才面列出著述的大纲,以便宇宙有采取且高着力的阅读和学习:

什么是组件商店,为什么要遐想组件商店

组件商店责任流遐想

组件商店责任流具体有策画杀青

杀青在线代码裁剪器 组件提交有策画遐想 组件审批有策画遐想 组件上架更新有策画

可视化搭建平台组件商店回归及后期诡计

著述视图如下,宇宙在平时在责任中也不错通过思维导图的样貌来整理头绪。

什么是组件商店, 为什么要遐想组件商店

“商店”宇宙也许并不目生,对用户而言,其基本用途是餍足平日的耗尽需求;对供应商而言,商店提供了一种销售本身居品的营销试验渠道;对商店本身而言,一方面赢得了客流和利润,另一方面还能提供本身价值在空间上的蔓延。

通过以上的图例讲明,咱们很容易猜测一个词——生态。因为每一个法子都在相互促进,相互影响。那么关于商店这个实体有了具象的知道之后,咱们再来望望技能限度的“组件商店”。

关于可视化搭建平台而言,其中一个中枢的法子便是组件财富。用户在遐想搭建页面时会耗尽各式种种的组件,然则关于不同的用户而言,组件的需求频频是不一样的,大部分的 lowcode 或者 nocode 平台都不可很好的处罚用户这些定制化的组件需求,是以为了处罚这一问题,组件商店就滋长而生。

咱们需要在平台中提供一种机制,守旧分娩者分娩组件,界说组件,同期照顾者不错对分娩者分娩的组件进行分类照顾(比如上架/下架/删除/排序等)。做过电商系统的至好可能会发现,它和电商平台的商品发布上线是一个逻辑过程:

那么接下来我就带宇宙一道遐想一个这么的过程,供宇宙参考。

组件商店责任流遐想 左证上头的先容和分析,咱们要想杀青齐全的组件商店责任流,需要餍足以下几点: 组件线上裁剪(上传)模块 组件审核模块

组件更新/发布模块

组件照顾(上架/下架/删除/下载)

有了以上4块的维持,基本的组件商店就不错 work 了。具体过程如下: 懂球帝官网

懂球帝官网

组件商店责任流具体有策画杀青

在有了具体的诡计和遐想之后,咱们就不错一步步来杀青了。

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,奉告用户组件库已更新,教唆用户是否刷新组件列表,至此,一个齐全的组件上架更新过程就完成了。这里咱们杀青一下怎么线上打包裁剪器基座。

领先咱们需要对 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责任流。那么宇宙如果有更优雅更好的有策画,亦然不错随时在挑剔区换取。

可视化搭建平台组件商店回归及后期诡计

以上悉数的遐想有策画杀青都是基于骨子需求来遐想的,固然还有好多细节需要处理和优化,跟着需乞降,业务的复杂,后期还会做组件统计,组件数据分析,组件监控等才略,宇宙也不错参考以上的遐想有策画,遐想我方的组件商店。

本文转载自微信公众号「趣谈前端」

并发和并行,Go 刚发布时,官方就不断强调这两点的不同。可能新手依然迷糊。这次给大家弄一个系列,详细讲解并发和并行。

 



  • 上一篇:没有了
  • 下一篇:是一位申饬丰富的半导体操办师