Technical solution design document

demand analysis

Familiar with product requirements

Analyze the requirements with the thinking of an architect, not just stay on the surface to realize the requirements, but also consider how to realize it can bring growth to the business
Global thinking, overall thinking, closed-loop thinking, not just thinking about yourself, but thinking about the whole team as a whole, to achieve output, input, and results

Shallow needs

Analyze the functions that need to be implemented on the surface, such as logging in, creating works, editing, publishing, accessing works, etc.

Deep demand

Further analyze requirements through shallow requirements analysis

Management of works
Work Statistics
Work release
h5
Backstage management

There are many details in the above requirements, so I won’t elaborate on them one by one.

Demand analysis overview map

insert image description here

architecture design

Items needed

insert image description here

Independent business component library

The components and rendering logic used by the editor canvas are exactly the same as h5. In order to be consistent on both sides, they should be separated and provided for their use, so as to ensure that the production is consistent with the rendered h5

Self-developed statistical service

Before considering self-developed services, first list the functions we need for statistics

We need to realize the requirement of sub-channel statistics. To realize this requirement, we need to customize event statistics

Support custom event statistics
Support Open API
After research, we found that third-party services on the market either do not support it, or the charges are very expensive. Comprehensive comparison, we can only choose to develop one by ourselves

include:

log collection
log analysis
Open API

relationship between projects

insert image description here

Work data structure design

insert image description here

Ideas:

Each component conforms to the vnode specification as much as possible
Use arrays to organize data, ordered
Try to use the reference relationship, don't be redundant

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
      }
    ]
  }
}

vuex getter


// 图层
{
    
    
  layers: (state) => {
    
    
    state.work.components.map(c => {
    
    
      return {
    
    
        id: c.id,
        name: c.name
      }
    })
  }
}

Scalability Guarantee

Extensions
Extended editor features like lock, hide
Expand page information, such as adding multiple languages
Expand other functions, such as big data analysis and calculation, etc.

R & D efficiency

Scaffolding: create a release
Component Platform

Operation and Maintenance Guarantee

Online service and operation and maintenance service
Safety
Monitoring and Alarming
Service scalability: Based on cloud services, machines and configurations can be expanded at any time