新建vue项目-手把手带你开发一个低代码可视化平台（一）

起因

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

可视化搭建核心架构

先看一下我理解的无代码可视化搭建平台架构，可视化搭建平台主要有两块：

核心

可视化搭建的核心是什么？

开发搭建平台使我们搭起了可视化构建的架子，接下来只需要根据实际使用场景更新物料库”运营”平台。 而在更新物料库时（老物料的迭代与新物料的开发）,我们也需要同步修改平台来兼容物料库。那怎么解决这个问题呢？

我的解决办法是，利用Json Schema协议规范Json的作用，用规范的Json来描述物料，然后用物料属性解析器来解析、构造物料的属性面板新建vue项目，我们更新物料库时只需要修改对应Json即可。最后提供Schema生成器可视化生成Json，避免用户手动修改Json，完成一整条物料接入平台流水线的构建。

这时我们再回到问题，我认为可视化搭建的核心是一套规范！

在平台中我们利用Schema协议定义了物料属性规范，然后遵循规范构建一条标准接入的流水线。我们在开发同理可以定义其他规范新建vue项目，完成组件交互、页面生命周期、远程接口调用等标准流水线（此平台为无代码平台，开发低代码平台需要上述功能）。

画虎画皮难画骨，我认为这才是可视化搭建的难点！

开发拖拽搭建面板

我们使用的拖拽插件是vuedraggable，主要逻辑为拖拽模板物料到页面面板，深拷贝物料配置数据到页面配置中。

核心代码

  
  
    

      
      {{ item.label }}
    
  

  // 拷贝物料模板
  handleClone(cmp) {
    return {
      ...this.$cloneDeep(model),   // 深拷贝物料模板
      id: this.$getRandomCode(8),  // 生成物料id
  },

开发可嵌套物料

想要实现可嵌套物料主要有三点：

核心代码

  
  
    
      // 包含slot的组件才能进行嵌套渲染
      
    
  

开发物料容器

接下来我们为页面的物料加一个保姆工具栏，使用容器组件可以解耦代码功能，功能如下所示

  
  

   
    
    

    
    

    
      
      
        
      
      
      
      {{ widget.label }}
    
    
    
    
    
  

因为有嵌套组件，所以删除物料时应递归遍历删除

    // 删除物料
    delComponent(list, id) {
      // 遍历查找目标下标
      let index = list.reduce((pre, cur, i) => {
        return cur.id == id ? i : pre;
      }, -1);
      // 找到目标，删除物料
      if (index >= 0) {
        list.splice(index, 1);
      } else {
        // 递归子物料
        list
          .filter((c) => c.children)
          .forEach((c) => {
            this.delComponent(c.children, id);
          });
      }
    }

下一节预告

我们已经开发了可视化搭建的架子，下一节会讲述：

限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688

htebazile永久VIP

收藏 海报 链接