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

雨尽阑珊

2022年01月04日 09:03

前文回顾

我开源的商城零代码可视化搭建平台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主页