Commit bb3458f wangqi
committed
1 parent dc110e7 commit bb3458f Copy full SHA for bb3458f
File tree 1 file changed +89
-4
lines changed
1 file changed +89
-4
lines changed Original file line number Diff line number Diff line change 1
- ## 技术架构设计
2
- ### 项目之间的关系
3
- ![ #] ( https://upload-images.jianshu.io/upload_images/23257036-a819a5ae5c2b5c5a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
1
+ # 技术架构设计
2
+ ## 开发流程
3
+ ![ ] ( https://upload-images.jianshu.io/upload_images/23257036-e6cfad61b888e8d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
4
+ ## 需求
5
+ [ 需求文档] ( https://imooc-lego.yuque.com/imooc-lego/zlz87z )
6
+ ## 范围
7
+ 整体设计, 架构设计, 不在乎细节
8
+ ## 模块设计
9
+ - 模块的拆分和关系图, 结果
10
+ ![ #] ( https://upload-images.jianshu.io/upload_images/23257036-a819a5ae5c2b5c5a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
11
+ - 模块的关键功能, 职责等
12
+ - 编辑器端制作发布作品、保存模板,并能查看作品的浏览、分享等数据,管理账户作品及模板等
13
+ - H5 端用于显示成品作品,使用服务端渲染提高性能与用户体验,收集浏览及分享数据,发送到统计服务端
14
+ - 管理端管理作品,紧急下架,编辑器端用户管理,查看网站所有数据(用户数、浏览量、作品数量等)
15
+ - 组件库, 独立第三方, 同时用于编辑器和H5
16
+ ## 作品数据结构
17
+ ### B端和编辑器,做前后端分离
4
18
5
- ### 数据流转
19
+ biz-editer-fe
20
+ biz-editer-server
21
+
22
+ ### H5适合做SSR,因为要考虑性能
23
+ h5-server
24
+ ### 管理后台,做前端分析
25
+
26
+ admin-fe
27
+ admin-server
28
+
29
+ ### 业务组件库
30
+
31
+ H5 端和 b 端画布的渲染逻辑是一样的,所以使用独立的组件库,达到复用的效果。
32
+
33
+ ### 统计服务OpenAPI
34
+
35
+ PV,UV 使用百度统计等第三方服务,自定义事件需要自研。
36
+
37
+ ### 数据流转关系图
38
+ ![ ] ( https://upload-images.jianshu.io/upload_images/23257036-df12d4b20c4e1869.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
6
39
![ ] ( https://upload-images.jianshu.io/upload_images/23257036-fe5089471e5cd439.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
40
+ ## 扩展性保证
41
+ 扩展组件, 数据结构层面
42
+ 扩展编辑器的功能, 例如: 组件隐藏、锁定
43
+ 扩展页面的配置
44
+
45
+ ####基本思路:
46
+
47
+ 每个组件尽量符合 vnode 规范
48
+ 用数组来组织数据(有序)
49
+ 尽量使用引用关系,不用冗余
50
+ ``` js
51
+ {
52
+ work: { // 每一个作品
53
+ title: ' 作品标题' ,
54
+ setting: {}, // 一些可能的配置项 扩展性保证
55
+ props: {}, // 页面的一些设置 扩展性保证
56
+ // 组件(数组,可以排序)
57
+ // 单个 node 要符合常见的 vnode 格式
58
+ components: [
59
+ {
60
+ id: ' 1' ,
61
+ name: ' 文本1' ,
62
+ tag: ' text' ,
63
+ attrs: {
64
+ fontSize: ' 20px' ,
65
+ },
66
+ children: [' 文本1' ],
67
+ },
68
+ {
69
+ id: ' 2' ,
70
+ name: ' 图片1' ,
71
+ tag: ' image' ,
72
+ attrs: {
73
+ src: ' xxx.png' ,
74
+ width: ' 120px' ,
75
+ },
76
+ children: null ,
77
+ },
78
+ ],
79
+ // 当前选中的组件id
80
+ activeComponentId: ' xxx'
81
+ },
82
+ },
83
+
84
+ ```
85
+ ## 其他
86
+ - 所有数据共用一个数据库
87
+ - 开发一个属于该项目的脚手架,提高开发效率
88
+ - 自研自定义事件统计服务,让项目闭环使日后有方向地让业务增长
89
+ - 开发一个属于本项目的组件库,提高开发效率,为了创作作品后的效果和 H5 端显示的效果一致,编辑器端及 H5 作品展示端都使用该组件库
90
+
91
+
You can’t perform that action at this time.
0 commit comments