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

本篇聊一下星空搭建后台部分。先回顾一下《可视化搭建系统》"星空"整体架构(一)的这张图。

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

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

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

拉取物料资源

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

这里有一个细节是,默认物料都是拉取最新版本的(比如 2.0)。之前在 《可视化搭建系统》"星空" nodejs server 端(三) 有说到,物料是有版本号的。只是物料搜索这里默认是拉取最新的,搭建页面中是可以存在历史版本号物料的(比如 1.0)。

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

转换物料资源并渲染

点击左侧区域中物料 '+' 号, 此时会去物料服务端,拉取物料的 es 模块包资源。并且对拉取到的资源进行 webcomponents 转换,渲染到搭建页实时预览区域。转换部分可以参考《可视化搭建系统》"星空" webcomponents 从0到1(二)

表单配置物料数据

回顾一下《可视化搭建系统》"星空" cli 脚手架端(四) 中的模板设计部分。

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

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

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

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

预览页面

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

后端预览渲染部分, 可以参考之前server 端细说预览部分。

发布页面

搭建页面搭建完成, 数据填充好以后, 可以对页面进行发布。可参考 server 端实现页面发布。最终其实就是一个 html 被推入了 nginx 静态服务下, 通过代理进行访问。

小结

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

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

相关推荐
当下新鲜事1 小时前
面向印刷包装设备的运动控制方案架构:E530标准型伺服系统与AC500 PLC的分层设计与选型实施
架构
海宇AI2 小时前
零信任架构实战:基于海宇个人风险报告构建自动化分期商城信用额度初审网关
运维·人工智能·架构·自动化
花开盛夏^.^2 小时前
电脑打开多个浏览器Web窗口占用较大的运行内存的原因
前端·浏览器
AUTOSAR组织3 小时前
AUTOSAR架构下信息安全的实现方案
架构·汽车·autosar·软件架构·培训
Dxy12393102163 小时前
JS DES 加密详解
开发语言·javascript·arcgis
充值内卷3 小时前
我给桌面加了个鱼缸:C++ 写后端,WebView2 里养一座 Three.js 小岛
开发语言·javascript·c++
馒头不想说话3 小时前
实体店老板的24小时AI运营员工,写、剪、发全自动,省下一整个团队工资
前端
涛声依旧-底层原理研究所4 小时前
拆解 Cordis 底座:Agent 是如何被「组合」出来的
人工智能·架构
椒哥6 小时前
一天被问几十次"允许",我统计了 517 次,然后写了个插件
前端·javascript·github
风骏时光牛马6 小时前
生成一个AI稳定性治理及疑难问题分析标题,只需要一个标题,不需要其他的任何文本。
前端