This thematic directory – more every Monday

  1. The outline
  2. Front and rear end construction
  3. Add, delete, change, check, package and embed basic modules
  • Interface add, delete, modify, and check
  • Image upload with static resources
  1. Permission login interception
  2. Editing system development
  • The layers panel
  • Layer editing system
  • Overall zooming in and out with canvas and coordinate axes
  • Edit record and move collision auxiliary line algorithm

Technology stack

  1. React – ANTD – Pro – Front page directly built
  2. React-dnd – Drag-and-drop library, simple and powerful API
  3. Koa.js – Background building
  4. Mysql – Data store
  5. Sequelize – a Promise-based Node.js ORM
  6. Typescript – Type definitions

Environment to prepare

  1. Redis download
  2. Mysql download

What you need to know about writing the back end

  1. The transaction
  2. Restful specification

Back-end service table design

Navicat download

The front end design

  1. Processon provides free online mapping and real-time collaboration
  2. Ink knife prototype drawing

The difficulties in

  1. Customize the alignment of drag and drop layouts
  • Collision detection
  • Dynamic programming – Optimal binary search tree
  • Complexity analysis
  1. After the whole material is packaged, the output bundle file is embedded into a third party

Front-end editor implementation

The implementation idea of the editor is as follows: the editor generates JSON data of the page, the server is responsible for accessing JSON data and generating the corresponding template file.jsx, and the data JSON is taken from the server to the front-end template.jsx for processing during rendering.

The page data structure that is finally stored in the database

interface INode {
  type: string props: { style: CSS.Properties; // Space spacing applied to the "top layer of the component" style list className: string; [key: string]: any; } children: INode[] | null }Copy the code

Front-end project processing: Store Map unidirectional linked list and flatten it Map
,node>

interface INode {
  id:string
  type: string canDrag: Boolean // Whether absolute supports drag and drop display: Boolean // Whether to render on canvas props: {style: css.properties; // Space spacing applied to the "top layer of the component" style list className: string; [key: string]: any; } children: string[] | null }Copy the code

The core code

Editor core code, by obtaining JSON on the corresponding componentName load corresponding components

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    const SpecificStory = components[props.storyType];
    return <SpecificStory story={props.story} />;
}
Copy the code

Ask for a thumbs-up ❤️

Welcome to like + pay attention to ！！！！ Ink ❤ ️