前言

无论大公司还是小公司，靠纯人工撸代码已经无法跟上需求增长速度，那对于开发如何把这些重复的工作去解决？加班？招人？显得不够明智😤，在前端资源紧缺的情况下，是否可直接有工具直接就可以搭建出我想要的前端页面？🧠于是业界的页面可视化搭建工具就出现了

Github地址：github.com/Tooy8/TooyL...

可视化搭建平台是什么🧐

这些平台大多数拥有用户友好的界面和各种各样的模板，让用户可以快速选择适合自己的网站风格并进行个性化定制。这些平台也具备了一系列必要的工具，如文本、图片、视频等，让用户可以轻松添加和编辑网站内容。通过该平台建设的网站还可以实现响应式设计，自适应移动设备和各种屏幕尺寸。这对于现今的移动化生活来说非常重要。

可视化平台开发的核心💞

可视化平台开发的核心是什么？

是一个可拖拽的组件列表，一个展示组件画布，一个组件属性控制面板组成的控制中心？是一套看起功能眼花缭乱的布局方式？

不，是规范，一套规范。

每个成熟的可视化平台，都会经历长期的迭代升级，无数实用的业务组件会在其后大量的新增与迭代，一套标准的规范才能使平台健康成长直至成熟稳定。

那怎么要定义规范？定义规范有什么用？

我们说个最简单的，定义组件的规范。

一个标题组件接入平台，我不会关心你的内部实现，我只关心你的props入参，我怎么通过属性配置面板去控制你。

「原始方式」 写一个包含title字段输入框的表单的配置面板

「进阶方式」 为每个组件写一个JSON去描述组件的关键信息

js 复制代码

{
 "name": "标题",
 "icon":"icon-biaotizujian",
 "fields": {
   "value": {
     "label": "标题内容",
     "type": "object",
     "child": {
       "title": {
         "label": "标题",
         "type": "string",
         "value": "LEADING SERIES"
       },
       "info": {
         "label": "副标题",
         "type": "string",
         "value": "品牌系列推荐"
       }
     }
   }
 }

一旦进入平台我们就通过解析关键信息，获取组件信息。然后我们开发一个属性配置器，传入组件信息中的属性数据，通过属性配置器生成属性控制面板

进阶方式解耦、工业化，这样才能在后面使大量组件接入平台。然而有一个风险点 「JSON是无规则的」 ，组件描述JSON应该 「按平台定的规则」 来写 「平台才能识别」，所以我们需要用规则来标准化JSON。解决办法就是通过JSON Schema协议来约束JSON，让它根据我们定的标准来编写。

所以 ,我们定义的 「Schema协议」 , 是我们 「平台规范」 的工具,也就是我们可视化开发平台的核心。

项目结构💯

js 复制代码

├─ src                                     
│  ├─ api     
│  ├─ assets                           
│  ├─ components                
│  ├─ config                            // 初始配置文件       
│  ├─ custom-components                 // 物料库  
│  ├─ custom-schema-template            // 属性组件库  
│  ├─ custom-schema-template-set        // 属性面板生成器  
│  ├─ mixin                                
│  ├─ pages          
│  ├─ router    
│  ├─ scss    
│  ├─ store    
│  ├─ utils    
│  ├─ App.vue    
│  └─ main.js                
├─ package.json     
└─ ftpUp.js                              // ftp上传文件

JSON Schema 👾

基础类型

这是一个基础的属性Form表单，包括输入框、单选器，它们由各种元素组成。接下来我们用JSON来代表元素来组装它们：

js 复制代码

 "value": {
     "label": "标题内容",
     "type": "object",
     "child": {
       "title": {
         "label": "标题",
         "type": "string",
         "value": "LEADING SERIES"
       },
       "info": {
         "label": "副标题",
         "type": "string",
         "value": "品牌系列推荐"
       }
     }
   },
   "attrs": {
     "label": "标题布局",
     "type": "object",
     "child": {
       "model": {
         "label": "布局选择",
         "type": "select",
         "value": "left",
         "data": [
           {
             "id": "1635161793h3mJ",
             "label": "居左",
             "value": "left"
           },
           {
             "id": "1635161794uYJI",
             "label": "居中",
             "value": "center"
           }
         ]
       }
     }
   },

复合类型

我们除了基础类型外，组件经常也需要传入对象、数组、对象数组等复合类型。我们应该支持任何的复合类型。我们来看 「导航栏数据列表」：

js 复制代码

 "tabList": {
      "label": "导航栏列表",
      "type": "array",
      "child": {
        "label": {
          "label": "导航名称",
          "type": "string",
          "value": "默认导航"
        },
        "image": {
          "label": "图片上传",
          "type": "upload",
          "value": "http://110.41.150.71:8090/img/1667354717861.png"
        },
        "jump": {
          "label": "页面跳转",
          "type": "jump",
          "value": {}
        }
      },
      "value":[
        {
          "id": "0001",
          "label": "推荐酒店",
          "image":"http://110.41.150.71:8090/img/1667354666114.png"
        },
        {
          "id": "0002",
          "label": "热销抢购",
          "image":"http://110.41.150.71:8090/img/1667354683202.png"
        }，
      ]
    },

实例 🥘

从上面我们知道了怎么用JSON表示 「基础类型」 和 「复合类型」 数据，而一个组件props能接收任意数量任意类型的数据。接下来我们用 「轮播组件」 来实际分析：

轮播组件件接收styles（对象）、attrs（对象）、list（数组）

js 复制代码

{
 "name": "广告轮播",
 "icon": "icon-swiper",
 "fields": {
   "list": {
     "label": "轮播列表",
     "type": "array",
     "child": {
       "image": {
         "label": "轮播图片",
         "type": "upload",
         "value": ""
       },
       "jump": {
         "label": "页面跳转",
         "type": "jump",
         "value": {}
       }
     },
     "value":[
      {
        "id": "0001",
        "image": "http://110.41.150.71:8090/img/1667354598861.png"
      },
      {
        "id": "0002",
        "image": "http://110.41.150.71:8090/img/1667354575078.png"
      }
     ]
   },
   "attrs": {
     "label": "轮播设置",
     "type": "object",
     "child": {
       "model": {
         "label": "模式选择",
         "type": "select",
         "value": "basis",
         "data": [
           {
             "id": "1635210812XSKK",
             "label": "基础",
             "value": "basis"
           },
           {
             "id": "1635210812Eis4",
             "label": "卡片",
             "value": "card"
           },
           {
             "id": "1635210821yrmE",
             "label": "横向",
             "value": "line"
           }
         ]
       },
       "autoplay": {
         "label": "自动播放",
         "type": "switch",
         "value": true
       },
       "loop": {
         "label": "是否循环",
         "type": "switch",
         "value": true
       }
     }
   },
   "styles": {
     "label": "轮播样式",
     "type": "object",
     "child": {
       "pagePadding": {
         "label": "页面边距",
         "type": "number",
         "value": 0
       },
       "negativeMarginBottom": {
         "label": "下边间距",
         "type": "number",
         "value": 0
       }
     }
   }
 }
}

这就是一个描述组件的JSON

结尾

此项目的核心是实现从Schema生成到构建一套完整可视化项目的标准，抛砖引玉的让大家了解Schema对可视化平台的重要性。

🤔如何实现一个可视化搭建平台🧐 | 移动端商城

前言

可视化搭建平台是什么🧐

可视化平台开发的核心💞

项目结构💯

JSON Schema 👾

基础类型

复合类型

实例 🥘

结尾