Automan 可视化开发平台

介绍 Automan 可视化开发平台前端和后端的一些实现方式

Hex 为您分享 / Github: @hex-ci

Automan 简介

Automan 是一套基于 Vue.js – Node.js 架构下的，支持多团队的，
集开发与部署为一体的可视化 Web 页面制作平台

有什么特点？

项目管理方便
网页编辑操作高效
灵活丰富的扩展
组件接入简单

部署架构

核心架构

定义一套标准的数据规范，提供一个编辑器去编辑这个数据，
同时提供一个解析器去解析该数据，然后渲染出页面

核心架构

这是上图中一个 node 的数据格式


            {
              "id": "main/button1l",
              "type": "main/button",
              "label": "按钮1l",
              "version": "0.1.0",
              "visible": true,
              "style": {
                "position": "absolute",
                "width": "100px",
                "height": "40px"
              },
              "animate": [],
              "props": {
                "text": "输入文字",
                "type": "danger",
                "click": []
              },
              "path": "https://domain.com/main/button/0.1.0/index.js",
              "script": "",
              "events": []
            }

组件结构

组件自有逻辑 mixin 自定义脚本

组件结构

这是上图中一个 node 的 DOM 结构

一个 node 的逻辑功能=组件逻辑+脚本1+脚本2+脚本3...
核心代码如下


              // 通过加载到的组件代码所获得的全局对象来创建 Vue 对象
              // window['image_1.0.3'] 是加载组件代码后生成的对象
              let component = Vue.extend(window['image_1.0.3'])

              // 遍历所有加入的脚本 mixin 到组件对象中
              nodeInfo.script.forEach(value => {
                component = component.extend(value)
              })

              // 以节点 id 为组件名，注册最终组件对象
              Vue.component(nodeInfo.id, component)