可视化活动页配置平台

背景

因为活动页的特点，就是要求快速上线，经常修改。我们回想下发布活动页时的情况：

运营会想:

• 我要发布个运营页面，为什么还要看前端的排期？为啥不能自己配置，我要自己改代码。
• 我要改个文案，前端怎么两个多小时了还没改好，是不是能力有问题？而且改多了还发急，态度不好。

前端也会吐槽：

• 一个活动页，来回改，改了一遍又一遍，提了十几个PR全是文案修改，项目都部署了好几次。

造成这一现象的原因就是，现有活动页，页面信息都是前端直接写在项目里，靠发版来修改。或者后端调用数据库，页面变量定义不灵活。而运营活动页会经常修改，有很多重复劳动。

所以就有当前活动页发布时的痛点：

1.修改需要改代码

改动由前端编写代码完成，运营想改不方便。比如嘉年华的宣传页上的嘉宾及演讲内容，每次都要改很多次，浪费很多时间。

2.结构类似，重复劳动

专题页，页面相似，前端往往机械劳动。比如之前的保险专题页，页面结构相似，如果每次都重新开发，没有技术含量。

3.不能实时预览

客户想预览 必须发版，周期很长。
比如有的活动页需要客户审核，就要每次都发线上，客户让修改后要再发版，时效性不好。（比如给丹书铁券大V定制的铁券一号基金宣传页，基金经理看了后，感觉有个文案写错了，或者头像不好看 要换头像）现在都要靠发一次线上来解决。

所以准备搭建一个 运营活动页配置后台，前期可以通过该后台修改活动页面文案、图片等。后期可直接通过该平台生成并发布活动页。

目前已在 2019雪球中概活动页 和 中概投票页中使用，帮助采坑，发现了一些bug，后来都修复了。

做了两个动图，先展示下能实现的功能

• 修改专题页

• 修改嘉年华活动页

应用场景

1.页面结构类似的情况

比如 活动页、专题页、基金宣传页
可以抽离出通用模板，以后再配置活动页，只需在后台新增json就可以实现发布页面

2.页面数据比较多的情况

比如 嘉年华宣传页 嘉宾列表、会议时间表等 都很多，可以把数据由前端写死改为json实时数据库，json灵活定义。

使用介绍请直接跳至后面的 编辑后台

框架

包括3个部分，有一个编辑的后台, 数据存储的数据库和页面渲染的前端项目

图中间的箭头 传递的是活动页面信息，采用的是json格式的数据。一条json数据就包含了 模板中的全部变量，通过这个数据就可以渲染出一个活动页。

而要实现这个，就要提取页面模板。所以先说下框架图中的抽取模板部分

抽取模板

图上是之前设计师设计的雪球保险活动页，这是4个活动页拼到一起了，每一竖排是一个活动页。因为当时就跟设计师约定好了准备采取了模板的方式，所以活动页结构类似，新配置一个活动页就很方便，一条json数据可以生成一个页面。这是如何实现的呢？

抽取骨架

我们可以看到，这4个页面结构类似，我们抽取4个页面相同的骨架图，这个骨架图就是模板，包含了所有不变的内容，而那些会变得内容，我们存在json里。右边这个代码就是json, json是采取 名称：内容 的键值对的数据格式，内容和名称一一对应，每一行都是一个对应关系。

骨架分配变量名

随后，我们要给骨架图中对应的变量分配变量名，就是找到和json数据中的对应关系。

上面是个头图我们取名为 banner_img 随后是几组保险列表，每一组叫一个section
最后是一个底部图 footer_img

我们能看到在最右侧的json中 能看到这3部分，banner_img 和 footer_img后面的值都是一个网址 以png结尾， 这是个cdn图片资源地址，至于如何生成这个url, 开发了专门的小工具，后面会讲到。

sections 部分 是个数组，里面有3个，就相当于个子模块

子模块

右边这个图是抽出其中一个来讲

这个部分包括一个 小标题 和3个保险卡片

标题取名为title 对应的是个url资源地址

卡片部分叫 items

每个卡片 包括一个图片 标题 价格 按钮等，对应的值在右侧json 绿框中可以看到。

页面样式&信息

其他的还有些页面样式和信息
比如页面背景颜色，卡片背景颜色，文字颜色，微信分享信息，微信分享图等。

至此一个活动页的json 就定义完了，遇到相似的活动页，我们只要修改下json里面的数据就可以了。

峰会活动页

下面 是另一个应用场景，线下活动页，比如每年的嘉年华，和各种峰会。这些活动页页面信息特别多，而且变动频繁，经常一个活动下来 要改动十几版。使用配置工具，应该会方便很多。

图中两个活动页 分别是去年的嘉年华和即将举办的中概峰会页面，页面结构大概相似，也可以分为几大块

然后页面信息有修改的话，只需修改这个json即可。应该是比之前方便了些，因为之前上线一个活动能收到好多修改文案的代码合并请求，现在很少看到了。

总结来说，这个json的提取，即模板的提取，需要我们的设计师们的支持，在设计活动页时，可以按照某个约定好的模板出设计资源，运营同事拿到页面资源后就可以自行配置活动页了。

模板渲染

接下来简单说下
是怎么从json数据生成出一个活动页的
采用nodejs 和 nuxt.js
nuxt.js 采用vue语法，实现服务端渲染，node服务器直接输出渲染好的活动页，有对搜索引擎友好，加载速度快等优点，然后vue这个框架用起来比较简单，适合做简单交互的活动页，很省事。

左图展示了
页面服务端渲染流程，提供了asyncData() 这个函数，用于服务端获取数据，所以，如右侧所示，在这个函数里获取页面数据接口，这个接口也是node写的，通过读取数据库把相应的json数据传过来，有30s的缓存。

下方是模板渲染代码，可以看到 里面有我们之前定义的变量，页面渲染时，会把json变量里的内容放在页面的相应位置上。实现通过json 渲染一个页面

数据存储

页面文案和配置信息采用json格式，前端开发人员可灵活定义。文案、css样式、图片链接都可以自由定义。数据存储采用 json格式转string格式存数据库，有两份。 一份线上 采用统用数据库，一份配置后台预览用，采用firebase实时数据库。

• 线上数据

  key 由链接拼接 比如 baoxian/child => baoxian-child
  value 为json 转string存储
  提供接口可查询 由key查value

• 预览数据

  firebase 一款方便的实时数据库，已被谷歌收购 https://firebase.google.com/

  wilddog firebase国内模仿版 https://www.wilddog.com/

线上服务的采用mysql ，因为我们的页面结构用的是json 所以转成string存到数据库里，约定页面链接为两级，key由页面链接拼接而成。由node提供接口，能简单通过key 查 value

另一部分是实时数据库部分

因为想实现实时的页面预览，所以采用google的firebase实时数据库，能实现实时存储和同步实时json数据。能够实现 我们在后台编辑，页面能实时看到变动的效果。

我们约定，进入实时调试模式，只需在链接后添加 ?snowfire=true

这也是通过代码来实现的，
mounted 函数是在客户端渲染时触发，如果发现url中有snowfire参数为true,
就读取firebase数据，覆盖之前的数据，并开启监听，json数据一旦有变化，就能实现页面无刷新更新。无刷新更新这个是由vue引擎的双向绑定实现的。

编辑后台及使用说明

后台是基于我们的雪球CRM通用框架开发的，目前已在多个项目中使用，蛋卷新的CRM，mpaas,和大数据的配置后台，以及正在开发的行情CRM。ui 和组件库 是阿里的antd，开发起来比较方便。

如果要对文案进项修改，先在左上方的输入框中选择要修改的数据，是个二级菜单，选择完后，右边会出现 这个页面的线上页面地址和 预览地址， 区别就是我们约定的参数不同，预览地址后面加了 ？snowfire=true 。 直接点击这两个链接会新窗口打开页面。一般我们点击预览页面的链接来进行修改。

下方是对应的json 数据 我们可以进行修改，里面的css变量 还可以看到颜色选择器

点击小三角可以 展开 子模块，绿色的部分是文案 直接点击修改就行。

右上方有 发布预览 和 发布线上 两个按钮。

发布预览 就是相当于保存，是发布到实时数据库。一般有修改后，直接点击发布预览即可。预览页面就可以看到变动了。

发布线上 是发布到线上数据，当预览页面修改没问题时，就可以发布线上了。

当修改数据出现问题时，只要不点发布预览, 直接刷新就可以恢复之前的数据。

如果不慎点了发布预览，想要还原的话，把鼠标移到恢复按钮处，会出现两个选项

• 恢复上次预览数据 会将数据恢复到 上一次发布时。

• 从线上数据恢复 会从线上获取数据，更新到预览数据中。

如果想要新增 复制 和删除的话， 点击前边的小方块，里面有选项。

如果遇到想修改排序的话，
拖动最前面的 6个小点，可以直接拖动排序，如图所示。

之前提到，json里的图片资源都是链接的形式，如果想换个图片怎么获得新图片的链接呢？
之前的方法是在雪球里面发个帖子，然后把帖子里面的图片地址复制出来，很不方便。

所以开发了个图片上传的小工具，在运营助手下面， 有个图片上传的选项，点击后会新开一个窗口，可以把图片批量拖动到方框里 或者点击方框 选择图片上传。然后下方会出现图片的预览图和对应的cdn地址，我们可以直接复制这个地址，粘贴到编辑器的相应位置。

新建流程

1.已有模板时

新增页面示例

比如新建一个中年人保险活动页，前端已经搭建了模板，设计按照约定的页面结构提供素材，开发人员或者运营人员打开后台，点击右上角，切换成开发者模式，在baoxian栏下 复制一个json信息，比如复制child的json

将名字改为 adult, 点击预览，随后切换回普通模式，选择新建的数据进行修改。

这时页面已经建立，可以数据选择框右面看到相应网址。用浏览器打开新建的链接，当然内容还是child的内容。

这时就可以替换内容了，建议关闭实时预览节省流量。

替换完，预览没问题就可以发给审核人员或者客户看下，有问题也可以直接后台修改。

确认没问题后，点击发布，即可更新线上数据库内容。
至此一个活动页就搭建完成了。

2.没有模板时

大部分情况下，已有模板不能满足设计要求。前端人员需要先开发出页面，抽离出变量，变量的精细程度看具体页面要求。可以全部配置成变量，也可以选择那些容易变动的或者不确定的内容替换。

开发时可以先不调接口和firebase,直接在data中写JsonData这个变量，内部名字尽量取通俗易懂的。当整体开发完成后，切换为开发者模式，将JsonData复制到后台实时数据库中，切换为 code 模式，将json粘贴上去，格式化。由于插件问题，我们需要再次切换为 tree模式，在tree模式下随便改动一下 才会生效。然后点击预览，数据就同步到实时数据库了。

这时将页面数据切换为实时数据库数据

部署前端项目，就可以交由运营配置页面信息了。流程如1。