low-code

In recent years, the concept of low-code platform has been very popular. I also completed a low-code large-screen building platform in two months. This article is going to be a series of four modules. This article mainly introduces the project modules, structure and implementation ideas as a whole. Since 996 is coming, I will serialize each module in the form of articles if you are interested.

The first effect

The project structure

├─ ├─ ├─ ├─ build ├─ ├─ ├─ build ├─ ├─ other ├ ─ ├ ─ table ├ ─ table view ├ ─ datavCanvas layer ├ ─ datavConfig config ├ ─ datavHeader ├ ─ DatavPreview screen preview component └ ─ common Shared component library └ ─ code - editor editor component └ ─ layer - operation of the mouse right click menu component └ ─ vue draggable - the resizable drag components └ ─ ├ ─ mixins ├ ─ mixinsCopy the code

The main container

The main container is relatively simple, it simply holds the components of each module. The only special thing is that I put the entire canvas object in the main container, exposing the entire canvas object for use by the deeper componentsCopy the code

provide() {
  return {
    $this: this.contain: this.contain,// Canvas object
  };
},
Copy the code

The canvas module

Here is a brief introduction of ideas, and the ruler plug-in - vue-Sketch-ruler drag component - vue-Draggable -resizable (secondary encapsulation of drag component is carried out here) will be introduced in detail in subsequent articles of related modules. The canvas module mainly uses ruler and dragCopy the code

Graph LR Add component --> Component Dynamic render component --> Focus ruler line --> Pass custom form object

The component module

Component modules are the ability to add components to the canvas and some of the undo, restore, preview functions and undo restore is implemented using the concept of a stack in the form of a record of operationsCopy the code

Graph LR selects components --> Add to Canvas Object --> Render to Canvas

The layer components

The vueDraggable plugin is used to create layer drag combinations and right-click menu componentsCopy the code

Graph LR displays component layers -> Rewrite the right mouse button menu -> Adjust Hierarchy -> Affect the hierarchy of the Canvas component

Configuration module

The core of low-code is the configuration module and the canvas module. The configuration module is also relative to the most complex module configuration module main functions: - Canvas Background configuration (custom form component) - Component form configuration (custom form component) - Action configuration (configure static data and interface dynamic data) - Event module (configure click event, prompt event, and custom value handling for chart component) - Interaction module (Here the linkage between TAB and chart components is preliminarily realized to associate the request parameters of the interface.)Copy the code

Custom form objects

Since the form configuration object is the focus of this module, the form configuration object structure is posted below (since the entire object is exposed through the main container's canvas object, form changes and canvas view updates are implemented by sharing Pointers).Copy the code

// Customize the form object reference
export const border1 = { // Component container instance object
  name: { // Layer name
    label: 'Layer Name'.type: 'input'.value: Bezel '1'
  },
  hide: { // Show hide
    label: 'hide'.type: 'switch'.value: false
  },
  width: {
    label: 'width'.type: 'slider'.value: 400.max: 1920
  },
  height: {
    label: 'high'.type: 'slider'.value: 300.max: 1080
  },
Copy the code

Custom editor

The implementation idea of the editor: the right side provides different data templates and the left side provides custom logic writing, After being saved as a string, it is mounted as a Function on the component configuration object through a series of processing. The new Function replaces eval(inspired by the vue source code) to implement the string to js editor plug-in using the monaco-editor, the predecessor of vscodeCopy the code

this.monacoEditor
  .getValue()
  .replaceAll(/ (? :^|\n|\r)\s*//. * (? :\r|\n|$)/g.' ')
  .replaceAll(/[\r\n]/g.' ')
  .replace(/(data)[\s]=>[\s]{(.*)}/g.function(val, ... arr) {
    that.contain.coverage[that.contain.coverageIndex].apiModule.dispose = null;
    that.contain.coverage[that.contain.coverageIndex].apiModule.disposeEditorValue = that.monacoEditor.getValue();
    that.contain.coverage[that.contain.coverageIndex].apiModule.dispose = data= > {
      //eslint-disable-line
      const obj = new Function('data', arr[0].replaceAll('return'.'; return'))(data);
      return obj;
    };
    that.$emit('close');
  });
Copy the code

Canvas Background configuration

Implementation idea: in the form of configuration object through the form of background size color and pictures to modifyCopy the code

Component form configuration

Much like the canvas background, it relies on Pointers and form custom componentsCopy the code

Operating configuration

Operation configuration I divided into two small modules: - static data (mainly provides data templates, custom static data values) - dynamic data (provides request configuration and parameter templates and custom callback data processing functions) this module mainly relies on the editor componentCopy the code

Static data

Dynamic data

Event modules

The event module relies on the editor component and mainly realizes the functions of the chart component, such as click customization callback event processing, prompt customization, value customization, etc. (detailed analysis in the corresponding module article)Copy the code

Interaction module

Interaction module: due to the time reason interaction module at present only (TAB, and a drop-down box) implementation approach: through the form of the binding layer (layer first need to configure the dynamic data) and the binding request parameters to monitor TAB or drop-down box value changes to request the binding layer of the interface and modify the value of a parameterCopy the code

summary

This article is mainly to the low code to do a simple introduction and way of thinking, if you are interested please thumb up with comments, I will update in the form of module updates, which module can under the comments that people are interested in, tell me, I will update priority according to all the corresponding module, writing code is not easy, give a great ~ ~ ~