背景

之前参与开发一个小程序商城，涉及非常多的落地页面需要前端开发维护，又由于小程序包大小限制，不能完成用小程序代码一一实现，所以最后决定把落地页的需求拆成一个单独的产品-落地页管理系统，通过可视化的界面编辑维护小程序和H5的落地页面，落地页面通过获取后台数据动态生成页面内容。
对于运营同事来说，在没有前端同事配合的情况下，也可通过可视化的操作来搭建所需的落地页面。解决页面生成的效率问题，同时释放开发人员。

落地页管理系统的需求

• 页面的可维护（新建、编辑、删除、状态管理等）。
• 页面的常见功能或属性编辑（标题，背景、有效期、微信自定义分享、返回顶部功能等）。
• 组成页面的元素组件化，可自由拖拽组装，编辑修改组件属性。
• 页面结构数据化，客户端根据数据动态渲染落地页面。

功能需求的技术实现

技术栈

后端技术栈 node+Koa+mongodb，提供落地页的更删改查API服务、素材的上传更新及有效期定时检测等。
前端技术栈 Vue+Vuex+Vue-route+EmenetUI+Axios，开发实现组成页面所需的基础组件及业务营销组件。
后端只是简单存储记录，本篇主要分享可视化页面编辑和渲染的前端技术实现。

项目目录说明

src							
|-- App.vue								
|-- main.js                       // 项目入口
|-- components                    // 公共组件目录
|   |-- BreadCrumb                	// 面包屑导航组件
|   |   |-- breadcrumb.scss
|   |   |-- index.vue
|   |-- Carousel                  	// 轮播图组件
|   |   |-- carousel.scss
|   |   |-- index.vue
|   |-- CarouselSet               	// 轮播图属性编辑组件
|   |   |-- index.vue
|   |-- ContextMenu               	// 右键菜单组件
|   |   |-- contextmenu.scss
|   |   |-- index.vue
|   |-- Event                     	// 事件组件
|   |   |-- event.scss
|   |   |-- index.vue
|   |-- EventSet                  	// 事件属性编辑组件
|   |   |-- index.vue
|   |-- Goods                     	// 商品组件
|   |   |-- goods.scss
|   |   |-- index.vue
|   |-- GoodsSet                  	// 商品属性编辑组件
|   |   |-- index.vue
|   |-- HeadInfo                  	// 头部显示组件
|   |   |-- headinfo.scss
|   |   |-- index.vue
|   |-- Picture                   	// 图片组件
|   |   |-- index.vue
|   |   |-- picture.scss
|   |-- PictureSet                	// 图片属性编辑组件
|   |   |-- index.vue
|   |-- Video                     	// 视频组件
|   |   |-- index.vue
|   |   |-- video.scss
|   |-- VideoSet                  	// 视频属性编辑组件
|       |-- index.vue
|-- pages                         // 页面目录
|   |-- LandPage                  	// 落地页渲染页面
|   |   |-- index.vue
|   |   |-- landpage.scss
|   |-- Login                     	// 登陆页面
|   |   |-- index.vue
|   |   |-- login.scss
|   |-- PageCreate                	// 落地页创建页面
|   |   |-- index.vue
|   |   |-- pagecreate.scss
|   |   |-- components            	// 创建页面分成左侧组件列表、中间窗口渲染组件、右侧属性编辑组件
|   |       |-- pageCenter        	// 中间窗口渲染组件
|   |       |   |-- index.vue
|   |       |   |-- pagecenter.scss
|   |       |-- pageRight         	// 右侧属性编辑组件
|   |           |-- index.vue
|   |           |-- pageright.scss
|   |-- PageEditor                	// 落地页编辑页面，共享创建页面，根据路由判断实现不同业务需求
|   |   |-- index.vue
|   |   |-- pageeditor.scss
|   |-- PageList                  	// 落地页列表页面（新建、编辑、删除、状态管理等）
|   |   |-- index.vue
|   |   |-- pagelist.scss
|   |-- PagePreview               	// 落地页预览页面
|       |-- index.vue
|       |-- pagepreview.scss
|-- assets                        // 资源目录（样式文件）
|   |-- style
|       |-- animate.css
|       |-- common.scss
|       |-- normalize.css
|       |-- var.scss
|-- http                          // http请求的接口与方法
|   |-- index.js
|   |-- request.js
|-- router                        // 页面路由目录
|   |-- index.js
|   |-- permission.js
|-- store                         // vuex状态管理目录
|   |-- actions.js
|   |-- index.js
|   |-- mutations.js
|   |-- state.js
|-- utility                       // 常用工具类函数与静态配置文件目录
	|-- const.js
	|-- filter.js
	|-- index.js
	|-- landpage.js

页面元素组件化和数据化

对落地页中的布局和功能需求进行分析总结并抽象出大概元素组件，分为基础组件（图片、视频、轮播图）和营销组件（事件、商品）。
落地页面的数据结构如下：

page:{
	//页面名称
	name:'',
	//页面标题
	title:'',
	//页面唯一的key
	urlKey:'',
	//是否需要有效期
	needExpire:false,
	expireDate:'',  
	//额外功能字段
	extra:{
		//页面背景色
		backgroundColor:'',
		//是否需要返回顶部按钮
		needBackTop:false,
		backTopImage:'',
		//是否需要自定义分享
		needShare:false,
		shareText:'',
		shareImage:'',
	},
	//页面中的组件
	components:[
		{ type:'Picture', name:'图片' }
	]
}

落地页的创建页面大致如下，分为左侧元素组件列表、中间实时渲染窗口和右侧组件属性编辑区域。

页面中可以有多个元素组件，然后每个元素组件都有自己的特有属性，每个元素组件对应一个属性组件用来编辑该组件的特有属性，在公共组件目录中可以看到对应的Set组件。

从组件的拖拽到属性编辑与实时渲染

从左侧拖拽组件到中间窗口即为页面中添加一个元素组件，新组件为当前激活组件，右侧区域会根据当前激活组件动态加载对应的属性编辑组件。

当拖拽左侧元素组件时，使用@dragstart事件记录当前拖拽的元素，中间窗口使用@dragover计算正在拖拽元素的位置坐标实现拖拽排序和层级元素的判断，@drop事件中根据之前的记录和判断生成元素组件数据到page.components或元素组件的children层级数组中。

<!-- 中间窗口的渲染模版代码 -->
<div class="page-wraper" @dragover="dragover" @drop="drop" :style="style">
    <div
      v-for="(component) in components"
      :key="component.id"
      :class="`component-wraper`">
      <!-- 动态组件加载 -->
      <component :class="`${component.id==activeComponent.id?'active':''} ${relativeComponent&&relativeComponent.id==component.id?('hover-'+relativeType):''}`"
        v-bind:is="component.type"
        v-bind="component"
        @contextmenu.native.prevent="contextmenu($event)"
        @mousedown.native="setActiveComponent(component)"
        @dragover.native.stop="checkDragOver(component,$event)"></component>
        <!-- 动态层级子组件加载 -->
        <component  v-for="child in component.children"
          :key="child.id" 
          :class="`component-child ${child.id==activeComponent.id?'active':''}`"
          v-bind:is="child.type"
          v-bind="child"         
          @contextmenu.native.prevent="contextmenu($event)"
          @mousedown.native="setActiveComponent(child)"
          @dragover.native.stop="checkDragOver(component, $event, child)"></component>
    </div>
</div>

左侧组件到中间窗口组件及右侧属性编辑组件的通信使用vuex的commit触发响应。当编辑右侧属性组件时会触发修改vuex的state,中间窗口组件通过mapState映射当前编辑组件的实时数据，vue会自动响应中间窗口中元素组件的渲染更新。

动态渲染落地页面

请求接口获取当前落地页面数据，判断不同属性值添加不同功能，渲染页面的代码类似之前中间窗口的渲染模版代码，没有对应的事件处理。

<div class="page-wraper" :style="style">
    <div class="component-wraper" v-for="(component) in components" :key="component.id">
      <!-- 动态组件加载 -->
      <component v-bind:is="component.type"  v-bind="component"> </component> 
        <!-- 动态层级子组件加载 -->
        <component  v-for="child in component.children" class="component-child"
          :key="child.id"         
          v-bind:is="child.type"
          v-bind="child"></component>
    </div>

    <transition name="el-fade-in">
    <div class="backTop" v-if="scrollTop&&page&&page.extra.needBackTop" @click="backTop">
      <img :src="staticURL+page.extra.backTopImage" />
    </div>   
    </transition>
</div>

vue内置组件component通过v-bind:is动态加载所需的元素组件,并传递组件数据。
元素组件内部获取组件属性并渲染组件，组件会根据环境的不同响应事件，例如：在中间渲染窗口中假如给图片组件添加链接属性，点击并没有响应，但是在落地页面中加载图片组件点击则会响应该事件。

待完善的功能

• 逐步实现事件组件、商品组件等。
• 小程序端的渲染实现（数据结构相同，需使用小程序语法实现），目前只实现H5端。

最后

篇幅有限，细节性问题就不在此描述啦，代码已开源，感兴趣的朋友欢迎 猛戳围观地址。
此次分享属个人拙见，如有不足之处欢迎指正，谢谢。

讨论是绝佳的反思，被别人指出问题正是改进的空间。