带你7天玩转可视化建站平台

时间 2020-05-18

标签 7天可视化建站平台繁體版

原文原文链接

前言

对于互联网公司而言，活动运营页面发布频率高，每次开发又要人力成本不划算。所以须要有一套平台系统来知足运营产品自我快速建站。此类软件产品最先追溯到QQ空间，凡客建站等。html

此项目旨在用最少的代码实现可视化搭建、发布、预览、调试等核心功能。并对每个关键原理进行说明。
在此以前，但愿你对Javascript（ES2015，React hooks）、nodejs、webpack等基础知识有所了解，即可轻松设计开发属于你的建站平台（也许只须要你花费一周的时间ヽ(￣▽￣)ﾉ）。前端

首先咱们来看看效果：
node

目前支持的功能

编辑器相关：

拖拽菜单组件放入画布，能放置的位置标绿框，不能放的标红框；选中锚点、移入高亮。
鼠标按住拖动画布内组件四周改变宽高，拖动中心改变定位
属性面板输入样式、自定义属性配置，实时更新画布预览
页面编辑快捷键操做，包括：保存(Ctrl+S)，撤销(Ctrl+Z)，恢复(Ctrl+Y)，删除(DEL)，复制(Ctrl+C)，剪切(Ctrl+X)，粘贴(Ctr+V)，上移节点(↑)，下移节点(↓)，缩放移动画布(空格按下+左键拖动+滚轮缩放)
直接拖动左下方树结构批量移动节点

服务层相关：

提供平台前端页面（编辑器、预览页）的请求接口与路由模板
打包构建：对组件仓库的分包，对编辑器SDK的打包
开发组件调试模式的命令行脚本

预览相关：

将页面搭建配置建立React组件树，动态加载所需组件JS文件
组件懒加载功能

实现原理

主要划分为4个部分：编辑器、预览页、服务端、组件仓库
用户在编辑器内拖入组件仓库已开发的组件，设置样式与自定义属性，为页面生成JSON配置，将配置提交服务端保存。预览页请求返回配置，预览页根据配置动态下载组件文件并渲染。
react

1、页面JSON配置与渲染的关系

不论在编辑器内仍是预览页，页面都是根据JSON配置来递归渲染webpack

{
        "name": "View",
        "style": {
          "position": "relative",
          "width": "1089px",
          "height": "820px"
        },
        "props": {
          "lazy": true
        },
        "el": "wc12",
        "children": [
             //{ ...}
        ]
  }

这是一个简单的布局组件所映射的JSON结构，其中包括了该组件的样式，传入组件的props属性，以及其惟一的key(el)值，还有他的子组件children数组，数组里的内容就是其包裹组件的JSON结构。经过这样的嵌套关系，能够将其映射成组件树。
git

当页面JSON配置发生变化时，依靠react单向数据流会从新渲染，此时咱们须要一个通用方法，来递归的建立组件的占位DIV，可是须要注意的是，首次建立的只是一个空壳，return的子组件为null。

与此同时咱们调用异步加载组件js的方法，等该组件下载好后自动注入到这个壳里。这个方法的特色在于，咱们每次加载新的组件会优先从window.comp下找是否有已缓存的组件对象，若是为undefined，说明这是一个全新的组件，就请求对应的JS下载，而且将window.comp下的这个组件标识为正在请求的Promise，这样若是相同组件并发调用此方法，会awati同一个Promise不会重复请求，并且组件缓存后也能够直接用await拿到组件对象。
github

经过上述的几个方法,咱们已经可以将JSON配置渲染为页面DOM，而且动态加载组件JS文件了~web

2、编辑器内的操做

既然咱们的页面是根据JSON配置来渲染的，那么对页面任何的增删改查，均可以抽象为对JSON树内某个节点的数据结构修改。咱们须要一个通用的搜索方法，来搜索JSON树，并传入一个标识，来指明此次操做的类型。

searchTree是全部操做的通用方法，本质上是对JSON配置树的BFS搜索，只要找到对应的key节点，根据EnumEdit中的枚举类型操做数据后返回修改后的结果树，dispatch新的配置树通知react从新渲染。数据库

除此以外，具体操做这里涉及到各类键盘、鼠标事件的绑定，这部分暂不作赘述，可自行查询MDN文档。express

3、样式、自定义属性的注入

咱们在右侧编辑区填写的内容，都会在渲染时注入到对应的组件里，样式style会注入在包裹组件的壳里，自定义属性会当作prop传入子组件，在组件开发中，咱们能够从props中拿到编辑器内填写的属性值。

4、编辑历史记录管理

历史记录为一个队列的数据结构，若是咱们保存1000条记录，每修改一次JSON配置，就将其入队，每次入队时发现记录大于1000，就将队列头部抛弃。
当前页面显示的配置为一个指针，指向队列中某条记录，撤销就指针后移，恢复就指针前移。每次触发compile时，将新的配置树计入队列，不须要手动记录。利用hooks自带的缓存机制很是容易实现。

5、画布的缩放处理

在搭建使用程中，咱们寄但愿于画布设计尺寸永远为1920（移动端则为750），可是视口显然没那么大，因此咱们要将画布以左上角为缩放焦点transform-origin: 0 0，拖动导航slide或按下空格利用滚轮缩放。这个过程当中不断改变transform: scale来刷新视图。
须要注意的是，scale的改变为浏览器重绘，并不会改变原有的DOM占位尺寸，所以缩小画布会有很大的空白区域，为了解决这个问题，咱们须要在画布外再包一层div，每次画布改变缩放后，利用getBoundingClientRect()来获取缩放后画布实际的宽高，并将这个数值定义在外层div上，外层div设置为overflow: hidden，这样窗口滚动的距离就会依据外层容器来出滚动条。

画布的高度计算时，要计算出一个min-height，为当前搭建区域的offsetHeight，保证画布内没有组件撑开时，也可以铺满一个屏幕。

此外对画布根节点要设置一个padding-bottom: 300px，做用是保证底部永远有一个空白区域，可以让搭建者拖入新的组件到根节点下。

6、组件的开发

每个组件都的固有结构，index.js，config.json是必须存在的（服务层会根据此文件构建，稍后会提到）：

入口文件即为业务代码，配置为一个JSON文件，决定了编辑器内所能编辑的自定义选项:

{
    "name": "图片",
    "staticProps": [
        {
            "name": "点击连接",
            "prop": "link",
            "size": "long"
        },
        {
            "name": "是否在新窗口打开连接",
            "prop": "blank",
            "type": "switch",      // 配置类型，目前支持`text`默认,`select`,`switch`,`color`
            "size": "long"          // 配置是否占满编辑器一行
        },
        {
            "name": "图片地址",
            "prop": "src",
            "size": "long"
        }
    ],
    "defaultStyles": {        // 拖入组件到画布时默认的样式
        "position": "relative",
        "width": "180px",
        "height": "180px",
        "marginTop": "0px"
    },
    "defaultProps": {      // 拖入组件到画布时默认的自定义属性
        "src": "http://r.photo.store.qq.com/psb?/V14dALyK4PrHuj/h50SMf97hSy.BJlJw31fagrw.NUaJD83gvydmoGN77w!/r/dLgAAAAAAAAA",
        "blank": true
    },
    "hasChild": false,        // 是否容许有子组件，若是不容许拖拽的时候移入会标红，提示当前节点不能被注入
    "canResizeByMouse": true       // 是否容许经过拖动九宫格蒙版来修改组件的宽高位置
}

上述这样的一个图片组件，在编辑器内对应的配置项即为：

7、组件的构建打包

这是构建阶段很是重要的一环，咱们上面说过，每个组件对应一个JS文件，那么咱们就须要在页面生成前将当前全部组件都构建好。

这里首先找出仓库中的组件，加入打包的entry入口，而后利用webpack的library,libraryTarget配置，将组件打包到window[name]下，name为组件名（好比Image,View），咱们来看看打包后的组件代码：

果不其然，组件js下载执行后直接被挂载到window下了，此时此刻你能够回头看开头提到的loadAsync加载组件的方法，是否恍然大悟了呢。
这里你可能又发现一个问题，组件都依赖react库，那每一个组件单独打包，岂不是都要加载一遍，那包得多大？

从JS体积能够看出，实际上根本没有打包这些通用库，只包含了业务代码而已。这里一样利用webpack的externals属性，能够指定某些依赖直接从window下取：

那么是何时将react注入window下的呢？

在编辑器或者预览页面，加载全局配置，也就是SDK初始化以前，就将组件所依赖的全局对象注入好了，这样后续组件异步下载后就能够直接执行。
关于编辑器和预览页的打包不作特别说明，就是普通的webpack配置打包，记得抽出公共模块就好。

7、组件的代理调试

平台开发好了，这个时候咱们要往里开发业务组件了，那么如何调试呢。
经过npm run dev:comp debug=XXX,YYY命令(XXX为组件名)来执行调试脚本

脚本首先经过process.argv传入的参数获取要调试的组件

而后使用node API来调用webpack-dev-server
须要注意的是，这里仅仅是在本地建立了组件的代理，还须要在组件资源加载上区分哪些组件须要请求本地调试地址，详情可见上方loadAsync方法，咱们经过在预览页和编辑器后方加入debug_comp=XXX参数来告诉此方法该组件要请求本地调试地址

最后记得若是当前用户请求的URL是调试模式，在node express服务的ejs模板接口里加上webpack-dev-server的代码script标签，

8、服务端对页面配置的管理

由于此项目为演示项目，并无对页面配置用id进行区分，每次提交都是存取同一个配置文件page.json

生产环境下须要链接数据库，将每一份配置生产一个ID，在打开编辑时取对应的请求ID返回配置。
要额外注意的一点，咱们在返回配置接口数据时，要去搜索当前构建文件夹中存在的js与哈希值的映射，这样保证前端页面能正确的加载最新构建的js地址

项目结构

├─config.js            // 先后端通用配置
├─comp                // 组件仓库
│  ├─Image                   // 组件名
│  │      config.json            // 组件配置    
│  │      index.js                // 组件入口
│  │      index.less            // 组件样式
│  │      
│  ├─Text
│  │    ...
│  │      
│  └─View
│       ...
│          
├─script                // 配置脚本
│      debugComp.js                    // 组件调试脚本
│      webpack.config.comp.js        // 组件打包配置
│      webpack.config.edit.js        // 编辑器打包配置
│      webpack.config.page.js        // 预览页打包配置
│      
├─server                // 建站平台服务端
│  │  getCompUrlHook.js        // 生成组件js文件哈希映射
│  │  getCompJSONconfig.js        // 查询组件仓库内当前全部存在的组件配置
│  │  index.js            // 服务端总入口 
│  │  opPageJSON.js        // 存取页面对应的配置JSON树
│  │  
│  └─template            // 模板
│          index.ejs            // html渲染模板
│          page.json            // 页面配置JSON树
│          
└─src                // 建站平台前端SDK
    │  context.js            // 全局状态对象
    │  global.js            // 全局配置依赖
    │  reducer.js            // 全局状态管理
    │  
    ├─edit                // 编辑器
    │  │  compile.js        // 编译配置树为组件树
    │  │  board.js            // 编辑器可视区域面板
    │  │  index.js            // 编辑器总入口
    │  │  menu.js            // 编辑器组件菜单
    │  │  option.js            // 编辑器属性操做面板
    │  │  record.js            // 操做历史记录管理
    │  │  tree.js            // 搭建树层级展现
    │  │  search.js        // 搜索页面配置树方法
    │  │  
    │  └─style            // 编辑器样式
    │          
    └─page            // 预览页
        compile.js    // 渲染组件配置
        index.js        // 预览页总入口

结语

此项目对可视化建站的总体先后端流程有一个完整实现。基于此基础上，能够根据须要拓展定制化的编辑器功能、页面渲染功能等。

因篇幅缘由文中缩减了不少代码片断，可是自己代码量也很少，我尽量在每个方法都标有详细的注释说明。更多详情能够下载此项目，直接npm start根据指引操做