Today we are going to look at the architecture design of MOOCs lego.

First let’s see how many items we need.

How many items are needed?

!

B end and editor, front and back end separation:

  • biz-editor-fe
  • biz-editor-server

H5 is suitable for SSR, performance consideration:

  • H5-server

Management background, front-end analysis:

  • admin-fe
  • admin-server

Standalone business component libraries:

  • NPM package

Statistical Services:

  • openAPI

The editor and H5 page components should be consistent and reusable, so it should form a component library.

In order to iteratively optimize the product, we also need statistical services to complete a complete loop.

Ok, so that’s the project now, so let’s look at what we need to write to edit the page.

What is the data structure of the edit page?

This edit page needs to solve three problems:

What does the data structure look like when I hit Save?

A: Use VNode as a data structure because consensus is good and tested.

How do I keep my canvas and properties in sync?

A: Use VUEX to synchronize data.

{
    / / work
    work: {
        title: 'Title of Work'.setting: { /* Some possible configuration items are reserved */ },
        props: { /* Some Settings for the body of the page, such as background color */ },
        components: [
            // Components use array, ordered structure

            // A single node must conform to the common VNode format
            {
                id: 'xxx'.// Each component has an ID
                name: 'text 1'.tag: 'text'.attrs: { fontSize: '20px' },
                children: [
                    'text 1' // Text content, sometimes in children, sometimes in attrs or props, no standard, depending on the actual situation] {},id: 'yyy'.name: 'picture 1'.tag: 'image'.attrs: { src: 'xxx.png'.width: '100px' },
                children: null}},],// Canvas the currently selected component
    activeComponentId: 'xxx'
}
Copy the code

If I extend the layers palette, how do I design it?

A: Layers should be computed indexes, not individual data

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

The data flow

Core: B end, C end, management background, a common database.

  1. Create work: Initialize a JSON data
  2. Save works: Modify JSON data
  3. Publish work: Modify a tag
  4. C side browsing works: obtain JSON data, SSR rendering
  5. Shield works: modify mark, C – end judgment