《可视化搭建系统》“星空” 搭建后台（五）

从上图右侧搭建后台部分可以发现，主要做了下面几件事

• 拉取物料资源
  • 运营在搭建页面的时候，可以根据具体场景对物料进行选择
• 被运营选择的物料，会转换成 webcomponents 在编辑区域进行渲染展示
• 表单配置物料数据
  • 比如选择了一个轮播图物料，可以对轮播图图片进行自定义等相关数据配置
• 提供预览页面供运营在手机端查看
• 发布页面

然后再看搭建后台的主页面，就会十分清晰。

拉取物料资源

左侧区域主要是运营对物料的索引，选择。默认分页拉取，支持关键字搜索。

那么有可能会出现一个场景就是，某个搭建页面，同一个物料，是不同的版本。是否更新，取决于运营。所以，可以看到上图中物料管理区域，有更新的功能，并且支持回滚到更新之前的版本。

转换物料资源并渲染

表单配置物料数据

注意这里的 schema 字段，就是给搭建后台表单渲染使用的。一种方式是自己写一套动态 schema 动态表单渲染。

但基于 JSON Schema 规范开源的动态表单其实很多，也很成熟，就没必要自己写了，除非你有很多定制化的需求。这里选择了 form-render, 最近业务上有做一个促销活动页，也用到了。

接入简单, 快捷。只用把模板中的 schema 数据传入 FormRender 即可。

使用的时候，遇到过两个问题。提 issue 反馈还是蛮快的, 这个必须好评。

预览页面

前端实现部分很常规, iframe 嵌入预览地址即可。

发布页面

小结

搭建后台部分，逻辑其实比较清晰，主要就是把整个星空的链路串起来，有很多地方都是参考之前的系列。这部分, 应该更加注重系统交互, 让运营觉得好用, 使用起来心智负担小。

最后, 到这里差不多整个系列就写完了, 写的过程中发现, 要把一个东西很简单的写明白还挺难得。下一篇就是此系列的结尾篇了。结尾篇会把源代码仓库给出来, 感兴趣的小伙伴, 到时候可以一起交流。