慕课乐高架构方案设计文档
需求
https://www/yuque.com/imooc-lego/zlz87z
范围
根据需求分化出了三个方面的内容:用户端(前台)、企业端(中台)、后台管理(后台)
用户端(前台)
主要用来展示通过编辑器编辑出来的 H5 海报。 由于 移动端 性能上的局限,所以可以考虑使用 SSR
- H5-server
企业端(中台)
主要提供可产出H5海报模板的功能,以及一系列相关的功能
- biz-editor-fe
- biz-editor-server
后台管理(后台)
主要用来管理 企业端的用户 以及 海报模板 ,掌控全局
- admin-fe
- admin-server
模块设计
如下图所示
其中因为 用户端 和 企业端都会用到 组件库 所以可以独立出一个组件平台。
统计服务由于第三方要么是功能不齐全,要么是性价比很低,因此考虑自研一个统计服务。
核心数据结构
{
scene: {
name: '场景名称',
setting: {}, // 扩展性保证
options: {}, // 扩展性保证
},
components: [
{
id: '1',
name: '组件名1',
type: 'text',
attr: {
w: 50,
h: 50,
z: 1,
},
options: {
value: 'xxx'
color: 'red',
fontSize: 16
},
formatter: { // 扩展性保证
isShow: '',
isControl: '',
isLook: ''
}
},
{
id: '2',
name: '组件名2',
type: 'image',
attr: {
w: 50,
h: 50,
z: 1,
},
options: {
src: 'xxx.png',
alt: 'xxx'
},
formatter: { // 扩展性保证
isShow: '',
isControl: '',
isLook: ''
}
}
]
}
扩展性保证
保证编辑器未来的扩展性
场景的扩展性
scene: {
name: '场景名称',
setting: {}, // 扩展性保证
options: {}, // 扩展性保证
}
组件的扩展性
{
id: '1',
name: '组件名1',
type: 'text',
attr: {
w: 50,
h: 50,
z: 1,
},
options: {
value: 'xxx'
color: 'red',
fontSize: 16
},
formatter: { // 扩展性保证
isShow: '',
isControl: '',
isLook: ''
}
},
开发提效
脚手架
组件平台
脚手架
可以开发快速创建 项目 原型的脚手架,来省去配置项目初始化的时间。 可以开发快速发布 项目 上线的脚手架,来省去发布项目的时间
组件平台
搭建业务组件平台,来减少代码的重复率,对业务组件进行抽象,积累业务组件,提升开发效率,减少编写重复代码的时间
运维保障
...