手把手带你开发一个低代码可视化平台(三)硬核架构教程,全程开源同步开发

6,080 阅读2分钟

前文回顾

我开源的商城零代码可视化搭建平台Mall-Cook受到大家喜爱,使我深受鼓励。本着授人以鱼不如授人以渔思想,在项目新建shelf分支,带大家从零开发一个自己的可视化搭建平台。

前面我们已经:

  • 介绍了可视化搭建的架构,开发了可嵌套搭建面板 可视化搭建平台架构

  • 介绍了物料JSON构建属性面板流水线,开发了基础类型属性的构建 构建流水线

本章目的

本章主要讲解物料JSON构建复合类型,主要包括:

  • 对象
  • 数组
  • 对象数组

组件复合类型

解析导航栏物料

演示导航栏属性组装

老规矩,接下来我们举个例子,来看看导航栏

导航栏组件和它的控制面板

导航栏接收styles(对象)、attrs(对象)、tabList(对象数组)

  props: {
    styles: {
      type: Object,
      default: () => {}
    },
    attrs: {
      type: Object,
      default: () => {}
    },
    tabList: {
      type: Array,
      default: () => []
    }
  },

下面我们来一一细看:

tabList(对象数组)

attrs(对象)

styles(对象)

复合类型组装

复合类型由各个基础类型组装而成,因为前一章我们已经开发了属性面板解析器,所以我们只需在物料描述JSON增加child属性设置子属性,即可完成复合类型的组装

我们费了很多功夫去搭建物料JSON构建属性面板流水线的好处,在这一刻才得到体现。

标准的逻辑搭建流程,使我们可以根据需求组装任何复合类型,且只需修改JSON配置

开发

上一章我们已经开发完了物料JSON构建属性面板流水线,与基础类型的操作组件 属性基础类型

本章我们还需要开发嵌套基础类型来而组成复合类型的对象类型

  • Object 类型操作组件

  • Array 类型操作组件

Object类型比较简单,只需要显示label增加插槽放子属性即可

<!-- Objct物料操作组件 -->
<template>
 <div class="wrap">
   <div class="wrap-label">
     <span>{{label}}</span>
   </div>

   <div class="wrap-body">
     <slot></slot>
   </div>
 </div>
</template>

<script>
export default {
 name: "SchemaObject",
 props: {
   label: {
     type: String,
     default: "",
   }
 },
};
</script>

Array 类型比较复杂,我们首先遍历数组,然后在每个单项里遍历属性描述渲染对应类型的操作组件

<!-- Array 物料操作组件 -->
<template>
  <config-wrap :title="label">
    <div class="mb10 f-grey f12">{{ mOptions.note }}</div>
    <div class="nav">
    
      <!-- 内部数据可拖拽修改顺序 -->
      <draggable v-model="mValue">
        <template>
          <!-- 遍历数组数据 -->
          <div v-for="item in mValue" :key="item.id" class="nav-item">
            <!-- 遍历数组类型子属性描述 -->
            <component
              v-for="(val, key, index) in schema.child"
              :key="index"
              :is="getComponents(val.type)"
              v-model="item[key]"
              v-bind="val"
            >
            </component>
            <div class="nav-delete" @click="delItem">x</div>
          </div>
        </template>
      </draggable>
      
      <!-- 新增数组数据 -->
      <div class="nav-add" @click="addItem">新增数据</div>
    </div>
  </config-wrap>
</template>

<script>
import schemaMixin from "@/mixin/schemaMixin";

export default {
  name: "SchemaArray",

  mixins: [schemaMixin],

  props: {
    label: {
      type: String,
      default: "",
    },
    schema: {
      type: Object,
      default: () => {},
    },
  },

  methods: {
    getComponents(type) {
      return `schema-${type}`;
    },
    
    // 新增数组数据,在数组新增一个空对象
    addItem() {
      if (this.mValue.length >= this.mOptions?.limit) {
        this.$notify({
          title: "无法新增",
          message: `最多只能添加${this.mOptions?.limit}条数据`,
          type: "warning",
        });
        return;
      }

      this.mValue.push({
        id: this.$getRandomCode(6),
      });
    },

    delItem(i) {
      this.mValue.splice(i, 1);
    },
  },
};
</script>

结尾

项目源码

项目代码:Mall-Cook (shelf分支)

体验地址:传送门

下一节预告

  • 开发JsonSchema生成器,可视化生成物料属性描述JSON,避免手动编写JSON,完成流水线的最后一环

JsonSchema生成器

系列文章

交流群

交流群二维码可在项目github首页查看Mall-Cook主页