Skip to content

Commit bb3458f

Browse files
author
wangqi
committed
feat: 1-整体需求分析和架构设计.md
1 parent dc110e7 commit bb3458f

File tree

1 file changed

+89
-4
lines changed

1 file changed

+89
-4
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,91 @@
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端和编辑器,做前后端分离
418

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)
639
![](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+

0 commit comments

Comments
 (0)