八卦炉是一套静态页面生成工具，采用了node.js + vue + vuex + gulp/webpack等技术，实现了不用前端工程师参与便能上线一个静态页面的功能
功能简介
1、项目首页
2、编辑页（pc端）
3、编辑页（移动端）
4、预览页
5、组件的拖拽添加
6、第三方组件
7、布局管理
8、切换模板
9、撤销/恢复
演示地址
- 使用pc端打开
https://zt.zbj.com/dist/20171107-5001291/index.html - 使用移动端打开
https://zt.zbj.com/dist/20171107-5001291/index-mobile.html
组件结构
技术点介绍
- 第三方组件
项目实现了组件与项目的分离，第三方组件会预先通过打包工具将vue模板生成渲染函数，项目会在一开始打开页面的时候异步请求一个接口获取所有通过审核的第三方组件并注册到页面中。
- 数据存储
八卦炉分为3个项目，一个项目负责页面的编辑与存储，一个项目负责生成页面的渲染，还有一个项目负责调度将生成的页面推送到服务器。
数据的存储采用json的形式，通过json的层层嵌套表示一个页面的层级结构
- 服务端渲染
负责渲染的项目取到存储的json数据 + 所有组件生成的渲染函数 = 页面
由于项目开始的时候使用的是vue 1.0，并没有服务端渲染，因此功能的实现是通过将vue 2.0的编译模块提取出来，将组件模板编译成渲染函数实现的
- 实时推送页面
渲染项目包含2个进程，一个进程负责渲染页面，一个进程负责推送页面到服务器。
负责调度的项目会将所有上线的页面id写入redis的队列,渲染项目则会定时从这个队列里取页面并将其推送到服务器上
- 数据来源
所有数据都是通过node中间层请求dubbo接口来获取，node只负责数据的转发以及页面的渲染
- 移动端兼容性
移动端的兼容性是通过js来控制的。进入页面的时候，js会获取设备的宽度，通过调整视口的缩放比例来实现兼容不同宽度屏幕手机
- 模板功能
所有的模板字符串都会存在数据库中，渲染项目通过正则表达式，用变量内容替换掉模板上的占位标识符从而吐出页面html
- 动态获取公共头尾
由于整个公司的头尾都是通用的，并且提供了接口吐出对应html，因此渲染项目在渲染页面的时候会预先请求公共头尾接口获得html字符串，并拼接到页面上