手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)


手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)

起因

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

手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)

可视化搭建核心

架构

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

  • 项目拖拽搭建平台的构建
  • 物料接入平台流水线的构建

手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)

核心

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

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

手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)

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

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

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

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

开发拖拽搭建面板

手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)

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

核心代码

<!-- 物料模板列表 --> <draggable v-model="widgets" // 拖拽列表数据源 :options="{ group:{ name: 'itxst', // 可拖拽列组,相同表名可相互推拽 pull: 'clone' // 拖拽模板物料,复制到目标列表 }, sort: false // 是否可推拽排序 }" :clone="handleClone" // 复制模板物料执行方法 animation="300" // 动画延迟 > <div v-for="(item, index) in widgets" :key="index" class="control-widgets-item" > <i class="iconfont" :class="item.icon"></i> <span class="f13">{{ item.label }}</span> </div> </draggable>

<!-- 页面面板 --> <draggable v-model="mList" // 拖拽列表数据源 group="itxst" // 可拖拽列组,相同表名可相互推拽 ghostClass="ghost" // 拖动元素的占位样式class chosenClass="chosen" // 选中目标的样式class selector="selector" :animation="500" // 动画延迟 :sort="true" // 是否可推拽排序 class="panel" > <component v-for="item in mList" :key="item.id" :is="item.component" v-bind="item" ></component> </draggable>

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

开发可嵌套物料

手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)

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

  • 物料中包含slot,已供子物料存放
  • 物料配置中增加children属性,用于存放子物料配置
  • 递归渲染物料实现无限层级嵌套

核心代码

<!-- 递归可嵌套组件 --> <draggable v-model="list" group="itxst" ghostClass="ghost" chosenClass="chosen" selector="selector" :animation="500" :sort="true" :class="[isWidget ? 'nest-child' : 'nest-area']" > <component v-for="item in list" :key="item.id" :is="item.component" v-bind="item" > // 包含slot的组件才能进行嵌套渲染 <ControlNestWidget :widgets.sync="item.children" // 子物料列表 :isWidget="true" // 是否为子物料 ></ControlNestWidget> </component> </draggable>

开发物料容器

手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)

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

手把手带你开发一个低代码可视化平台(一)(低代码开发平台设计)

<!-- 物料操作容器 --> <div class="shape" @click.stop="setcurComponent(widget)" ref="shape"> <!-- 选中组件高亮 --> <div v-if="isCurComponent(widget.id)" class="shape-solid event-none"></div> <!-- 组件工具栏 --> <div v-if="show" class="shape-tab" :style="{ right: getRightStyle() }"> <!-- 选中显示删除按钮 --> <template v-if="isCurComponent(widget.id)"> <i class="iconfont icon-shanchu tab-icon f16" @click.stop="delComponent(chontrol.widgets, widget.id)" ></i> </template> <!-- 未选择显示物料名 --> <span v-else>{{ widget.label }}</span> </div> <!-- 插槽 --> <slot></slot> </div>

<!-- 使用物料容器 --> <widget-shape v-for="item in list" :key="item.id" :widget="item"> <component :is="item.component" v-bind="item" ></component> </widget-shape>

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

// 删除物料 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); }); } }

下一节预告

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

  • 使用json描述物料
  • 开发物料属性解析器,解析生成属性面板
  • 开发属性面板基础类型组件(string、number等

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年7月6日 上午11:00
下一篇 2024年7月6日 上午11:12

相关推荐

  • 农业种业数字化转型有哪些科研课题项目

    农业种业数字化转型有哪些科研课题项目 随着数字化技术的不断发展,农业种业也在不断地进行数字化转型。数字化转型可以提高农业种业的效率和竞争力,并为农民提供更好的服务。下面是一些可能的…

    科研百科 2024年11月30日
    10
  • 企业科研项目分级管理

    企业科研项目分级管理 随着科技的不断发展,企业科研项目也在不断地增多。为了更好地管理和组织这些科研项目,企业需要建立一套科学的分级管理制度。本文将介绍企业科研项目分级管理的方法和重…

    科研百科 2025年5月31日
    1
  • 流量管理软件哪个好(软件流量管理器)

    软件流量管理器 软件流量管理器是一种用于监控和管理计算机系统流量的工具,通常用于监控网络流量,帮助用户了解网络性能,并采取适当的措施来优化网络性能。本文将介绍软件流量管理器的基本概…

    科研百科 2024年8月30日
    3
  • 广东省项目管理合同范本(广东省项目管理)

    广东省项目管理广东省项目管理和资源管理本届运动会,包括深圳市体育、文化体育、区域经济、旅游、旅游、社会等多项多项体育运动项目。为什么要参加体育、文化、旅游?现在的主要职业分类中有竞…

    科研百科 2024年5月17日
    46
  • 系统集成项目管理 高级

    系统集成项目管理高级 系统集成项目管理高级是指在大型复杂项目中,通过整合各种技术,资源和人员,来实现项目的目标。该项目的管理需要高度的计划,组织,协调和控制,以确保项目按时完成,高…

    科研百科 2024年7月24日
    5
  • 房地产项目进度管理软件

    房地产项目进度管理软件 随着房地产市场的迅速发展,项目进度管理的重要性也越来越凸显。房地产项目进度管理软件可以帮助项目管理人员更好地掌握项目的进展情况,提高项目的管理效率和质量。 …

    科研百科 2024年9月23日
    1
  • 一建考试!要点:项目管理-质量管理部分(一)(一建项目管理答案)

    质量是建设工程项目管理的主要控制目标之一,常常通过质量策划、质量保证、质量控制和质量改进等手段来实现项目的质量管理。别的不多说,直接上干货: 一、质量控制1、质量控制是质量管理的一…

    科研百科 2022年10月17日
    417
  • 科研项目申请书冲刺

    科研项目申请书冲刺 科研项目申请书是申请科研项目的重要文件,也是申请项目经费和成果的重要基础。一份好的科研项目申请书需要清晰、准确地阐述研究内容和目标,同时还需要突出项目的创新性和…

    科研百科 2025年4月18日
    6
  • 科研项目被换人

    科研项目被换人:一个挑战性的实例 近年来,随着科技的快速发展,许多科研项目都取得了巨大的进步。然而,在这些项目中,有时可能会出现一些问题,其中之一就是科研项目被换人。 换人是指在科…

    科研百科 2025年3月5日
    2
  • 党务公开方面存在问题

    党务公开方面存在问题 党务公开是中国共产党的一项重要工作,旨在促进党员和干部的民主监督和自我约束,提高党的执政水平和公信力。然而,在党务公开方面,仍然存在一些问题,这些问题不仅关系…

    科研百科 2024年10月16日
    27