# 可视化搭建系统
总结一下业务时间实现的运营活动平台（DEMO 版），以及最近调研到的一些可视化搭建系统的相关资料。
写这个文章有点乱，没有逻辑，没有重点，这个问题挺大的。
之后写文章，先搭好整体架子（就是要写什么），然后再去填充内容。
# 1、为什么要做可视化搭建系统呢？
为什么要做，这个问题很重要。 思考一下，并且大概算一下需要付出的时间，和收获的东西。算完你还觉得要去做，那么就去做。
技术是工具，工具为了解决问题。项目的存在也是为了解决问题，如果不能解决问题或者带来好处，那么这个项目不做也罢。
在目前公司工作的3年多时间里，开发的代码中，活动页面 + 后台CRUD页面 加起来占一半左右。
活动和后台 CRUD 页面有什么特点呢？页面功能大同小异、开发时间紧、下线快、技术成长低。
要是有一个直接可视化搭建出页面的系统，能解决80%的常见页面，那么就可以节省下大量前端劳动力了。
# 2、可视化后台系统
定位：解决80% CRUD 的后台页面。
# 2.1、特点
- 内部同事使用（基本PC上用，因此暂不做 H5兼容）
- 布局比较固定（可以固定出布局，还省去拖拽部分）
- 功能主要是 表格展示数据 + 表单提交数据
# 2.2、目标
- 多个业务线都可以使用该后台
- 不处理具体业务线的数据逻辑，只用来展示数据（CRUD）
- 权限管理，各个业务线的人互不影响
# 2.3、系统设计
# 2.3.1、多个业务线都可以使用该后台
因为可视化后台系统，不管理数据，因此数据还存在各个业务线，数据逻辑也由各个业务线来处理。
所以可视化后台系统的服务端，只做接口代理，把 CRUD 页面的接口代理到各个业务线。
# 2.3.2、权限设置
该可视化后台系统，需要支持多个业务线，因此权限分成了 开发者权限，应用使用者权限。
一个页面，必须属于某一个开发组，某一个服务下。 相当于配置了这个页面的一级菜单 和 这个页面调用那个服务的接口。
页面有两种状态，未激活 和 已激活状态，针对测试环境 和 线上环境。
应用管理员可以把 已激活的应用，分配到指定的 应用组内。 这样该应用组内的人员就可以使用该后台页面了。
这个权限根据实际情况来，我们这边目前这样的权限目前够用。
动态下拉框，早期没有做自动加载数据，因此放个按钮，后面实现了，只是按钮还是还没有去掉。😓
# 2.3.3、页面配置
页面配置是本系统的核心。 通过页面配置会产出一份 JSON 配置，把这份 JSON 配置存在数据库。展示内容的时候，在把 JSON 配置都会来，然后根据配置，动态渲染出页面。
目前采用直接用 JSON 配置 渲染出页面内容。因为这个是一个内部的系统，生成代码后，在来修改代码的可能性非常小。
当然根据业务需求，来确定要不要生成代码。
页面配置需要一下信息
1. 开发组，服务组信息（服务组：服务地址，公钥信息）
2. 页面使用到的 API
3. 页面拥有的模块信息
模块是什么？
举个例子，用户管理页面，用户列表，新增用户表单，修改用户表单，删除用户的功能，这里面每一个都是 一个模块。
# 2.3.4、模块配置
如果说页面配置，是把主体框架，那么模块配置就是填充细节了。
比如用户列表模块，需要配置 表格都有哪些列；添加用户模块中，有哪些表单项，每个表单项的信息是什么等等。
在设计的时候，把模块分为两个部分，输入定义，输出定义。 输入定义就是需要让使用者输入信息，输出定义就是用来展示。
输入定义这里就需要先封装好，支持的表单项（文本框，密码框，下拉框，时间框，文本域，上传图片，上传文件，富文本等等），
输出定义呢，最常用的表格需要封装起来，卡片列表展示也可以封装。
需要封装什么组件，需要根据业务需求来。对业务进行抽象，封装出最常用的。
# 3、运营活动平台
运营活动平台和可视化后台系统原理是差不多，细节方面会有比较大的变化。
运营活动平台需要拖拽布局，需要生成代码。
# 3.1、如何生成代码
有了 页面的 JSON 配置 和 页面的数据，生成代码还是很容易的，但是生成一个性能高的代码，就需要调研下来。
其实，目前主流的组件渲染方式有三种：
- 加载所有的组件定义，然后通过活动id和页面id获取页面的配置数据，进而动态渲染出页面
- 先通过活动id和页面id获取页面的配置数据，然后按需加载组件，渲染出页面
- 服务器通过页面配置和组件定义，直接在发布时生成静态页面
这三种组件渲染方式原理是一样的，遍历配置生成组件。
放一个 VUE 遍历配置渲染页面的核心代码。
利用 Vue 的动态组件 & 异步组件特性 ,附上VUE 官网地址：cn.vuejs.org/v2/api/#is
React 的实现 , 源码看这里 , 线上 DEMO ，实现思路和 Vue 一样，只是在不同的框架下，代码形式不太一样。
lazy react 中提供的懒加载组件。
打开线上 DEMO，并且打开调试器，看按需加载的效果。
