背景

前端可视化编辑器在当初大公司中都有各样的实现形式，不同的业务会赋予不一样的性能，能够参考上面这个文章：https://github.com/taowen/awe...，外面介绍了国内很多厂商低代码平台的实现形式。
行业里有许多利用 AI 去切割页面、生产页面的案例，但在短时间要实现产出，须要耗费大量的人力和精力，不倡议在个别团队去做这样的事件。

目标

设计这样一款可视化编辑器，须要达成以下目标

  • 可视化编辑，能够在画布拖拽元素
  • 丰盛的款式配置
  • 将罕用业务抽离成组件，并能够配置组件的参数

设计思路

将这个我的项目分为三个局部：

  • 编辑器
    提供用户治理我的项目、拖拽元素、配置参数、预览公布等能力
  • 组件库
    抽离业务逻辑，将其封装成组件库治理保护
  • 服务端
    存储管理我的项目，最重要的是将编辑器生产进去的数据进行解析生成页面

技术栈

  1. 因为团队里对vue比拟相熟，前端的编辑器和组件库都应用 vue 作为开发框架
  2. 服务端应用 egg.js，思考到 egg 较为成熟，不须要本人再从0搭起。当然，也能够抉择其余框架。

技术能够依据集体或者团队偏好本人决定。

设计思路

一、JSON Schema

整个我的项目除了设计成三个外围工程之外，还有一段JSON Schema，这段JSON在整个我的项目中起到至关重要的局部，它是形成页面的基石。JSON Schema 是由编辑器生产，并且每个生产出的JSON Scheme的格局必须保持一致，这样，服务端渲染的时候才能够对我的项目的JSOn进行解析，并且最终渲染出页面。
将 JSON 划分为三个层级

1. 我的项目级

我的项目级的 JSON 次要是介绍我的项目的根本信息

{  id: '', // 我的项目惟一标记  name: '', // 项目名称  label: [], // 我的项目标签  description: '', // 我的项目形容  author: '', // 作者  pages: [] // 页面}

2. 页面级

页面级的 JSON 能够了解为咱们的一个 html 页面，外面包含页面脚本，页面款式、元素等

{  id: '', // 页面惟一标记  type: '', // 页面类型  route: '', // 页面路由  title: '', // 页面题目  style: { // 页面根元素的款式    width: '',    height: '',    ......  },  elements: [], // 组件  plugins: [], // 页面插件服务}

3. 组件级

组件是组成页面的外围局部，能够了解为页面都是由一个个具备特定性能的积木沉积而成。

{  id: '', // 组件惟一标记  elementName: '', // 组件名  style: { // 组件通用款式    position: '',    width: '',    height: '',    border: ''  },  props: {}, // 组件属性参数  children: [], // 子组件  ......}

其中值得一提的是，props 能够了解 vue 里的 props，通过给组件传入 props，组件能够依据参数给于绝对应的体现，置信学习过 vue 的组件相干常识的人肯定了解。

最初一个残缺的我的项目的 JSON 长这样

{  id: '_clv_fPQu',  name: 'FAB页',  label: ['fab', '游戏'],  description: 'Feature、Advantage和Benefit，依照这样的程序来介绍，就是压服性演讲的构造，它达到的成果就是让客户置信你的是最好的',  author: 'lujintao',  pages: [    {      id: '_Tmy_CdpY',      type: 'pc',      route: 'fab',      title: '游戏页',      style: {        width: '750px',        height: '1334px',        position: 'relative',        margin: '0 auto',        padding: '',        overflow: '',        backgroundColor: '',        backgroundImage: '',        backgroundSize: '',        backgroundRepeat: '',        backgroundPosition: ''      },      elements: [        {          id: '_aIv_SesL',          elementName: 'aicc-image',          style: {            position: 'absolute',            width: '100px',            height: '100px',            border: '1px solid #eeeeee'          },          props: {            src: '***/test1.png'          },          children: [],        }      ],      plugins: [        {          name: 'mobile',          state: true        },        {          name: 'weixinShare',          state: true,          data: {            title: '微信分享的题目',            description: '微信分享的文案'，            img: '***/wxshare.png'          }        }      ],    }  ]}

二、组件库

作为页面的积木，组件是非常重要的局部。组件除了须要有像文本组件、图片组件、视频组件等一些根底的性能，还须要一些贴近业务的组件。比方在官网制作中常常能够看到的轮播图组件，亦或者导航栏组件等等，这些组件都须要联合业务进行提炼出通用能力，能力不便用户疾速搭建一个残缺页面的。
搭建组件库须要开发两份代码，一份是组件自身，一份是用来配置组件props的配置面板。

1. 组件

组件的作用有两个，一个是提供给编辑器，在画板上可能展现组件，另外一个作用则是将组件打包后提供给服务端作为脚本插入。
比方写一个视频组件，代码很简略，定义好 props 就能够了

<template>    <video :src="src" :autoplay="autoplay" /></template><script>export default {  name: 'aicc-video',  props: {    src: {      type: String,      default: ''    },    autoplay: {      type: String,      default: ''    }  }}</script>
  • 在编辑器里的引入形式
import AICCVideo from '@/components/AICCVideo'
  • 在服务端的引入形式，在浏览器环境下，组件是曾经被打包好作为script脚本插入。
<script src="https:**/**/aiccvideo.min.js">

2. 组件配置面板

跟组件须要利用到服务端不同，组件配置面板所要做的事件就是生产出自定义数据（JSON Scheme），因而只须要提供给编辑器注册。
还是拿下面的视频组件举例

<template>  <div class="props-video">    <input v-model="propsValue.src" />    <input v-model="propsValue.autoplay" />  </div></template><script>export default {  name: 'props-video',  props: {    value: { // 配置面板在编辑器里挂载的时候是通过v-model="props"传入的      type: Object,      default: () => {}    }  },  data() {    propsValue: {}  },  watch: {    value(val) { this.propsValue = val },    // 配置面板更新的时候，子传父    propsValue(val) { this.$emit('input', val) }  }}</script>

组件配置面板在编辑器的引入形式和组件的引入统一，只须要 require 进来注册挂载到 component 组件上就好了，同时 v-model 绑定以后组件的 props 数据。

三、编辑器

编辑器作为用户应用的惟一窗口，在几个板块里显得重中之重。咱们曾经晓得，整个我的项目的基石是第一点所提到的 JSON Schema。编辑器也不例外，编辑器实质上做的事件就是批改/增加/删除这段 JSON 数据的各种参数。

1. 如何保护数据

在编辑器中，只须要保护一份 JSON 数据，所以思考应用 vuex 去治理我的项目数据。依据 vuex 官网形容，非常合乎编辑器这种中大型的我的项目

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化

实现过程

  1. 写一个 name 为 editor 的 store

    • state.js: 存储要保护的数据
    const state = {  projectData: {}, // 工程项目数据  activePageUUID: '', // 以后正在编辑的页面  activeElementUUID: '', //以后被选中的组件UUID}
    • action.js
    // 初始化我的项目export function initProject({ commit, state }, data) { let projectData = data if (!data) projectData = initProject() // 空我的项目时生成默认 JSON Data dispatch('setActivePageUUID', projectData.pages[0].uuid)}// 设置以后被选中的页面的UUIDexport function setActivePageUUID({ commit }, uuid) {  state.activePageUUID = uuid}// 设置以后被选中的元素的UUIDexport function setActiveElementUUID({ commit }, uuid) {  state.activeElementUUID = uuid}
    • getter.js
    // 以后选中页面的 JSON 数据export function activePage(state) {  const idx = state.projectData.pages.findIndex(p => { return state.activePageUUID === p.uuid })  return state.projectData.pages[idx]}// 以后选中组件的 JSON 数据export function activeElement(state) {  const pIdx = state.projectData.pages.findIndex(p => { return state.activePageUUID === p.uuid })  const activePage = state.projectData.pages[pIdx]  const eIdx = activePage.elements.findIndex(e => { return state.activeElementUUID === e.uuid })}
  2. 编辑器里各页面绑定数据，通过 mapGetters 获取以后页面，以后元素，以及我的项目数据
<template>  <div>    <component :is="activeElement.elementName" v-model="activeElement.props" />  </div></template> <script>import { mapGetters, mapState } from 'vuex'export default {  computed: {    ...mapGetters({      'activeElement': 'editor/activeElement'    }),    ...mapState({      pages: state => state.editor.projectData.pages,      activePageUUID: state => state.editor.activePageUUID,      activeElementUUID: state => state.editor.activeElementUUID,    })  }}</script>

2. 如何实现画布拖拽

对于可视化编辑器来说，用户心愿能够可能拖拽画布中的元素进行更改地位。实现思路非常简略

  • 选中元素，监听 mousedown 事件
  • 获取以后按下元素的 offsetTop 和 offsetLeft
  • 获取以后按下鼠标的坐标地位（e.clientX, e.cliengY）
  • 监听 mousemove 事件，获取鼠标挪动的长度，计算出间隔
  • 元素的新坐标 = 间隔 + 按下时元素的 offset 信息

代码如下

function mousedown(e) {  let newTop = null  let newLeft = null  // 记录按下时以后元素地位  const cTop = e.currentTarget.offsetTop  const cLeft = e.currentTarget.offsetLeft  // 记录按下时以后鼠标地位  const mouseX = e.clientX  const mouseY = e.clientY    const move = mEvent => {    // 只是单纯挪动地位，不须要传递事件给后辈    mEvent.stopPropagation()    mEvent.preventDefault()    const cX = mEvent.clientX    const cY = mEvent.clientY    // 挪动的地位    const distanceX = cX - mouseX    const distanceY = cY - mouseY    // 新坐标    newTop = distanceX + cTop    newLeft = distanceY + cLeft  }  const up = () => {    document.removeEventListener('mousemove', move, true)    document.removeEventListener('mouseup', up, true)  }  document.addEventListener('mousemove', move, true)  document.addEventListener('mouseup', up, true)}

这里其实有优化的空间，在元素进行拖拽的时候，如果实时去扭转top，left时，会引起重排。解决办法也很简略，在 mousemove 的过程中咱们应用 transform 去实时显示以后组件的地位，等 mouseup 开释鼠标的时候，咱们再把实在的坐标地位赋值给组件的 Style 里。

四、服务端渲染

咱们在后面编辑器里生产进去的我的项目 JSON 数据，最终须要让服务端这边进行 DSL 解析。因为咱们驳回的技术栈是 Vue，想要生成一个结构化的页面也非常容易，应用 vue 的 render 函数。
具体能够参考官网文档：渲染函数 & jSX
拿第一局部 JSON Schema 的示例，渲染步骤大抵如下：

  • 拿到页面的 page 信息生成页面的 title/seo 等页面配置信息，依据路由生成对应的 ${name}.html 文件
  • 挂载打包好的组件库 <script src="*/*/aiccvideo.cdn.js">
  • 因为应用的render函数，不须要编译器，只须要挂载 vue.runtime.js 脚本即可
  • 应用模板引擎进行字符串替换，替换的信息有页面信息、render 函数里的组件数组等
  • 遍历 elements，用 vue 的 render 函数 createElement('组件名', { props: { ...生产进去的element JSON数据 }})
  • 解析 style 的 JSON 数据，生成 选择器{ ${key}: ${value} }的样式表
  • 写入文件fs.writeFileSync(文件门路，htmlString)

结语

文章到这就差不多完结了，因为只是简略阐明一下整个我的项目怎么搭建，在具体细节里没有太详尽形容。要写下来，每一块都能够作为一个单元去写。比方

  • 组件库如何打包
  • 我的项目的治理保护，怎么应用 lerna 治理我的项目
  • 如何实现拖拽元素实时扭转元素大小
  • 如何保障提交数据的格局符合要求
  • 如何实现插件化服务，如微信分享等

……
要上线一个残缺可能生产的产品，细节的中央还有很多技术点能够探讨，在这里仅仅只是谈及整个我的项目技术的组成部分和根本实现原理。
欢送有更好的想法～