These reviews

My open source Mall zero-code visualization platform, Mall-Cook, is loved by everyone, which makes me deeply encouraged. In line with the idea that it is better to teach people how to fish than to teach them how to fish, we set up a shelf branch of the project to develop a visual platform of our own from scratch.

Previously we have:

  • This paper introduces the framework of visual construction and develops the panel of nested construction

  • This paper introduces the pipeline of material JSON construction property panel and develops the construction of basic type and compound type property

This ZhangMu

Previously, we have developed the pipeline of material JSON to construct the property panel. Through the material JSON body card, we can analyze and construct the material property panel.

Because JSON is random, we define the JSON Schema specification to constrain JSON.

It takes time and effort to write JSON according to the specification, and is prone to error. In order to avoid the tedious manual writing of JSON, we chose to develop JSON Schema generator, and generated JSON conforming to the platform’S JSON Schema specification through visual assembly of the property panel, thus completing the last link of the whole pipeline.

Json Schema generator

Similar to visual scaffolding, we manipulate components by dragging and dropping various types of materials, visually assemble property panels, and then parse them into JSON.

Based on demonstration

In the previous section, we introduced compound types, so we need to provide component nesting to achieve object and array container nesting

Object type

Object array type

Build the title Material properties panel

Let’s take a look at the properties panel that visually assembles the title material

Properties panel for the title material

Schema Builder construction

Export JSON

The development of

Next, we will develop Json Schema generator, whose functions are mainly divided into:

  • Register property type action component JSON
  • Development generators can nest scaffolding panels
  • Generate a JSON

Generators can nest scaffolding panels

Development of logicalEach type of operation component package also has an initializing. Js as itsIdentity card. Then I use require.context to go through the files in the custom-schema-template package and find all initializing

Register type action component, create $cmpConfig(Action Component description array)

// Get initializing of all property configuration components
function registerSchemaInitializing() {
    const files = require.context("@/custom-schema-template".true./initializing.js$/);
    const list = [];

    files.keys().forEach((key) = > {
        let name = key.replace(/(\.\/|\/initializing.js)/g."");
        let [, , componentName] = key.split('/')  // Get the component name

        list.push({ component: componentName, ... files(key).default }) }); Vue.prototype.$cmpConfig = list }Copy the code

Development generators can nest scaffolding panels

The drag plug-in we use is VueDraggable. The main logic is to drag template materials to the page panel and deeply copy material configuration data to the page configuration.

<! -- Builder Panel -->
<template>
  <div class="canvas">
    <! -- Page Panel -->
    <div class="canvas-center">
      <div class="canvas-center-drag">
        <schema-content-item
          :componentList.sync="content.model.componentList"
        ></schema-content-item>
      </div>
    </div>

    <! -- Material Template List -->
    <div class="canvas-left">
      <draggable
        v-model="$cmpConfig"
        :options="{ group: { name: 'itxst', pull: 'clone' }, sort: false }"
        :clone="handleClone"
        animation="300"
      >
        <div
          v-for="(item, index) in $cmpConfig"
          :key="index"
          class="canvas-left-item"
        >
          <span class="f13">{{ item.label }}</span>
          <span class="canvas-left-item-type">{{ item.type }}</span>
        </div>
      </draggable>
    </div>

    <! -- Properties Panel -->
    <div class="canvas-right">
      <component
        v-if="content.curComponent"
        :is="curComponentConfig"
        v-bind="content.curComponent"
      ></component>
      <schema-component v-else></schema-component>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["content"].computed: {
    curComponentConfig() {
      return `The ${this.content? .curComponent? .component}Config`; }},methods: {
    // Copy templates to generate components
    handleClone(model) {
      return {
        ...this._.cloneDeep(model),
        id: this.$getRandomCode(8),
        property: `${model.type}_The ${this.$getRandomCode(2.false)}`}; ,}}};</script>
Copy the code

There are three main points to achieve nested materials:

  • The material contains slots for storing sub-materials
  • Added children property to material configuration to store child material configuration
  • Recursive rendering materials achieve infinite levels of nesting
<! Recursive nested components -->
<template>
  <draggable
    v-model="list"
    group="itxst"
    ghostClass="ghost"
    chosenClass="chosen"
    selector="selector"
    :animation="500"
    :sort="true"
    :class="[isChild ? 'drag-child' : 'drag-area']"
  >
    <schema-content-shape v-for="item in list" :key="item.id" :data="item">
      <component
        :is="item.component"
        :component-key="item.id"
        :edit="true"
        v-bind="item"
        :class="[['object', 'array'].includes(item.type) ? '' : 'event-none']"
      >
        <! Only components that contain slots can be nested rendering -->
        <schema-content-item
          :componentList.sync="item.child"// Submaterial list:isChild="true"// Whether submaterial ></schema-content-item>
      </component>
    </schema-content-shape>
  </draggable>
</template>
Copy the code

Compile to generate JSON

Composition parses the list of components into JSON, and the properties (fields) can be tree-like because of compound types

// Compile material JSON
parsing () {
  this.config = {
    label: this.content.model.label,
    icon: this.content.model.icon,
    fields: {}}this.content.model.componentList.map(cmp= > {
    this.parsingFields(cmp, this.config.fields)
  })
  this.isComplete = true
},
    
// Parse material properties recursively
parsingFields (config, fields) {
  let { property, label, type, child, value, data, options } = config
  let target = (fields[property] = ['object'.'array'].includes(type)
    ? { label, type }
    : { label, type, value })

  data && (target.data = data)
  options && (target.options = options)

  if (child) {
    target.child = {}
    child.map(c= > this.parsingFields(c, target.child))
  }
}
Copy the code

Next video

  • Develop multi-page builds
  • Develop template project to realize real-time preview and automatic cover generation

series

  • [Open source platform] Based on Vue to achieve Mall visualization without code to build a platform mall-cook
  • Hand – in – hand guide you to develop a low code visual platform (a) drag – and – drop build panel development
  • Hand – in – hand takes you to develop a low – code visual platform (ii) drag-and-drop build panel development
  • Hand – in – hand guide you to develop a low code visual platform (three) drag – and – drop build panel development

Communication group

The qr code of the exchange group can be viewed on the main page of the project github