整体架构设计方案 v1.0

需求

需求地址

范围

整体设计,架构设计,没有细节

编辑b端(前后分离)、项目服务端(中台)、管理端(前后分离)、作品展示c端(服务端渲染)

模块设计

模块的拆分和关系图,结果
模块的关键功能,职责等
特殊的模块重点说明

  • 组件库,独立第三方,同时用于编辑器和 H5
  • 自研统计服务,为何自研

作品的数据结构

vuex store 的结构,解释
数据流转关系图

{
    // 作品
    work: {
        title: '作品标题',
        setting: { /* 一些可能的配置项,用不到就先预留 */ },
        props: { /* 页面 body 的一些设置,如背景色 */ },
        components: [
            // components 要用数组,有序结构
            // 单个 node 要符合常见的 vnode 格式
            {
                id: 'xxx', // 每个组件都有 id ,不重复
                name: '文本1',
                tag: 'text',
                attrs: { fontSize: '20px' },
                children: [
                    '文本1' // 文本内容,有时候放在 children ,有时候放在 attrs 或者 props ,没有标准,看实际情况来确定
                ]
            },
            {
                id: 'yyy',
                name: '图片1',
                tag: 'image',
                attrs: { src: 'xxx.png', width: '100px' },
                children: null
            },
        ]
    },

    // 画布当前选中的组件
    activeComponentId: 'xxx'
}

vuex getter 选择当前选中的图层

{
    layers() => {
        store.work.components.map(c => {
            return {
                id: c.id,
                name: c.name
            }
        })
    }
}

扩展性保证

扩展组件,数据结构层面
扩展编辑器的功能,例如:组件隐藏、锁定
扩展页面的配置
(讨论,集思广益)

开发提效

脚手架 创建:可以开发快速创建项目原型的脚手架,来省去配置项目初始化的时间。 脚手架 发布:。。。 组件平台

运维保障

线上服务和运维服务
安全
监控和报警
服务扩展性:流量大

Copyright © imooc-lego (2020 - present) all right reserved,powered by GitbookFile Modify: 2021-06-27 08:04:57

results matching ""

    No results matching ""