前言

本項(xiàng)目旨在開(kāi)發(fā)一個(gè)供運(yùn)營(yíng)揭芍、產(chǎn)品快速搭建商城的可視化平臺(tái)眨唬，利用可視化的拖拽與屬性配置完成商城構(gòu)建和日常運(yùn)營(yíng)幻件，而開(kāi)發(fā)只進(jìn)行平臺(tái)的維護(hù)拨黔、業(yè)務(wù)組件的新增和迭代。避免高頻的業(yè)務(wù)需求绰沥，提升我們的開(kāi)發(fā)效率篱蝇。

本項(xiàng)目提供的是可視化搭建平臺(tái)模板贺待，大家可根據(jù)公司實(shí)際需求進(jìn)行修改，最終形成滿(mǎn)足自己實(shí)際需求的可視化搭建平臺(tái)麸塞。

接下來(lái)我將帶大家深入的了解Mall-Cook可視化平臺(tái)的原理與技術(shù)實(shí)現(xiàn)。Mall-Cook可視化平臺(tái)預(yù)覽如下：

1639191188(1).jpg

)

github地址：傳送門(mén)

預(yù)覽地址：傳送門(mén)

開(kāi)發(fā)前規(guī)劃

明確目標(biāo)人群

在進(jìn)行具體開(kāi)發(fā)前涧衙，首先我們需要明確我們開(kāi)發(fā)的平臺(tái)是給誰(shuí)用的哪工？是面向運(yùn)營(yíng)還是面向研發(fā)？研發(fā)人員適合low-code（低代碼平臺(tái)）绍撞，而非研發(fā)人員適合no-code（無(wú)代碼平臺(tái)）正勒。

可視化平臺(tái)分類(lèi)

我覺(jué)得兩者最大的區(qū)別是組件通訊，也就是大家經(jīng)常會(huì)問(wèn)的組件怎么交互傻铣？

我舉個(gè)栗子

image

• low-code我推薦大家了解下云鳳蝶我認(rèn)為現(xiàn)在最期待的中后臺(tái)搭建平臺(tái)章贞，平臺(tái)理論可接入任意組件庫(kù)或NPM組件，強(qiáng)大的解析器解析組件為平臺(tái)所用非洲。通過(guò)狀態(tài)外置進(jìn)行組件通訊鸭限，簡(jiǎn)單理解每個(gè)頁(yè)面有個(gè)自己vuex,可以自定義狀態(tài)(變量)、方法两踏，根據(jù)需要把狀態(tài)败京、方法綁定組件，實(shí)現(xiàn)組件的交互梦染，云鳳蝶在知乎有幾篇介紹的文章赡麦。云鳳蝶yyds！

• no-code首推政采云的魯班帕识，有贊與微盟雖然是獨(dú)角獸級(jí)別的模板泛粹，但是它們太太太大了，我也找不到核心架構(gòu)文章肮疗，無(wú)法深度了解晶姊。而魯班手把手詳細(xì)給我講解了可視化搭建的內(nèi)核，schema的作用與重要性伪货，雖然體量與復(fù)雜度無(wú)法與有贊與微盟相比们衙，但它是教會(huì)我的那個(gè)人。

選擇畫(huà)布布局方案

image

自由布局適合與大屏與中后臺(tái)系統(tǒng)溃睹，因?yàn)槠漤?yè)面自由度高，物料間可相互覆蓋笔横。

那為什么流式布局適合H5與小程序呢商佑？

我舉個(gè)栗子茶没，比如H5頁(yè)面中抓半，你的商品列表是根據(jù)網(wǎng)絡(luò)接口實(shí)時(shí)查詢(xún)琅关，當(dāng)商品數(shù)量發(fā)生變化導(dǎo)致商品列表組件高度變化時(shí)，我們通過(guò)流式布局保證布局不受影響冶伞。

其他布局：舉個(gè)反栗凡科技提供的是類(lèi)自由布局响禽，這是除我上述兩種布局外隆嗅，其他布局想實(shí)現(xiàn)的功能基本齊了胖喳，支持父子組件間的嵌套、自由拖拽咕别、顆链萍化基礎(chǔ)物料（text帽芽、button）导街“峁澹看著功能都齊了，但我實(shí)際使用發(fā)現(xiàn)操作復(fù)雜不實(shí)用翼悴，且只能進(jìn)行部分靜態(tài)樣式的自定義鹦赎。同樣是一個(gè)商品列表古话，我想通過(guò)拖拽自定義單項(xiàng)樣式陪踩，或者我想給沒(méi)他banner圖片自定義添加文字摘完，發(fā)現(xiàn)這種動(dòng)態(tài)組件同樣只能靠配置項(xiàng)設(shè)置描焰。結(jié)論發(fā)現(xiàn)實(shí)用性并不高荆秦，反而搭建頁(yè)面比單純流式布局復(fù)雜數(shù)倍。

布局我只推薦流式布局和自由布局瓤介，其他的附加功能大多是噱頭大于實(shí)際刑桑，具體附加功能根據(jù)實(shí)際場(chǎng)景決定是否添加祠斧。

比如組件嵌套功能琢锋，我在頁(yè)面配置中未提供此功能，這不是不能實(shí)現(xiàn)鲸阻，而是組件嵌套一般用類(lèi)似在TAB欄的容器中鸟悴，可在每個(gè)TAB中嵌套不同的組件遣臼，我覺(jué)得為了這個(gè)實(shí)現(xiàn)，而提供頁(yè)面組件的無(wú)限嵌套的復(fù)雜邏輯不值得屏歹。而在Schema協(xié)議生成器中提供了Object蝙眶、Array對(duì)象類(lèi)型的組件嵌套幽纷，是因?yàn)閿?shù)據(jù)結(jié)構(gòu)是可以任意嵌套的友浸，比如props接收一個(gè)對(duì)象數(shù)組類(lèi)型的數(shù)據(jù)。是否需要某個(gè)功能根據(jù)實(shí)際實(shí)用場(chǎng)景而定伦意，而不是我全都要驮肉，越多就覺(jué)得越厲害缆八。對(duì)用戶(hù)而言，操作越簡(jiǎn)單越友好乱豆，可以看有贊瑟啃、微盟方案蛹屿。對(duì)于流式布局鉗制自由度的劣勢(shì)错负，用大量業(yè)務(wù)組件折联、頁(yè)面模板填充诚镰，目的就是讓用戶(hù)操作簡(jiǎn)單清笨。

單純流式布局看起或許很low，但是操作越是簡(jiǎn)單跌帐，用戶(hù)才越是方便谨敛。我想做的是能實(shí)用的工具脸狸，而不是看起來(lái)有點(diǎn)炫的玩具炊甲。

確定可視化平臺(tái)開(kāi)發(fā)的核心

可視化平臺(tái)開(kāi)發(fā)的核心是什么卿啡？

是一個(gè)可拖拽的組件列表颈娜，一個(gè)展示組件畫(huà)布官辽，一個(gè)組件屬性控制面板組成的控制中心？是一套看起功能眼花繚亂的布局方式俗批？

不，是規(guī)范蕴侣，一套規(guī)范。

每個(gè)成熟的可視化平臺(tái)蝠筑，都會(huì)經(jīng)歷長(zhǎng)期的迭代升級(jí)什乙，無(wú)數(shù)實(shí)用的業(yè)務(wù)組件會(huì)在其后大量的新增與迭代臣镣，一套標(biāo)準(zhǔn)的規(guī)范才能使平臺(tái)健康成長(zhǎng)直至成熟穩(wěn)定。

那怎么要定義規(guī)范阔蛉？定義規(guī)范有什么用聋呢？

我們說(shuō)個(gè)最簡(jiǎn)單的削锰，定義組件的規(guī)范喂窟。

一個(gè)標(biāo)題組件接入平臺(tái)，我不會(huì)關(guān)心你的內(nèi)部實(shí)現(xiàn)稳摄，我只關(guān)心你的props入?yún)⑾贸辏以趺赐ㄟ^(guò)屬性配置面板去控制你仗阅。

標(biāo)題組件 props 接收 title

• 原始方式 寫(xiě)一個(gè)包含title字段輸入框的表單的配置面板
• 進(jìn)階方式 為每個(gè)組件寫(xiě)一個(gè)JSON去描述組件的關(guān)鍵信息短绸，給它配張身份卡供我們平臺(tái)識(shí)別醋闭。

// 組件描述JSON
{
  "label": "標(biāo)題組件",     // 組件名
  "icon": "icon-title",  // 組件圖標(biāo)
  "fields": {            // 組件屬性
    "title": {                  // 屬性名
      "label": "標(biāo)題",           // 屬性label
      "type": "string",         // 屬性類(lèi)型
      "value": "LEADING SERIES" // 屬性初始值
    }
  }
}

一旦進(jìn)入平臺(tái)我們就通過(guò)解析JSON身份卡证逻，獲取組件信息囚企。然后我們開(kāi)發(fā)一個(gè)屬性配置器，傳入組件信息中的屬性數(shù)據(jù)烦衣，通過(guò)屬性配置器生成屬性控制面板

屬性控制面板生成過(guò)程

進(jìn)階方式解耦花吟、工業(yè)化，這樣才能在后面使大量組件接入平臺(tái)今布。然而有一個(gè)風(fēng)險(xiǎn)點(diǎn)JSON是無(wú)規(guī)則的部默，組件描述JSON應(yīng)該按平臺(tái)定的規(guī)則來(lái)寫(xiě)平臺(tái)才能識(shí)別，所以我們需要用規(guī)則來(lái)標(biāo)準(zhǔn)化JSON份蝴。
解決辦法就是通過(guò)JSON Schema協(xié)議來(lái)約束JSON浸卦，讓它根據(jù)我們定的標(biāo)準(zhǔn)來(lái)編寫(xiě)限嫌。（后文有平臺(tái)Schema協(xié)議具體講解）

So,我們定義的Schema協(xié)議,是我們平臺(tái)規(guī)范的工具,也就是我們可視化開(kāi)發(fā)平臺(tái)的核心萤皂。

平臺(tái)介紹

Mall-Cook平臺(tái)的目的是可視化構(gòu)建移動(dòng)商城，商城構(gòu)建流程模仿有贊禽笑、微盟，平臺(tái)提供：

• 可視化推拽面板凡桥，流式布局
• 多頁(yè)面搭建
• 實(shí)時(shí)預(yù)覽
• H5頁(yè)面適配
• 自定義底部tab菜單
• 商品管理 （現(xiàn)為模擬商品，可修改接口管理真實(shí)商品）
• 商品分類(lèi)管理啊掏，自定義商品分類(lèi)頁(yè)
• 模板商城
• Schema生成器，可視化生成屬性控制面板

平臺(tái)速覽

魔方組件

輪播組件

商品組件

保存商城

實(shí)時(shí)預(yù)覽

商品分類(lèi)

模板商城

項(xiàng)目結(jié)構(gòu)

├─ h5                                   // h5項(xiàng)目
│  ├─ api                       
│  ├─ assets                     
│  ├─ components                 
│  ├─ pages                      
│  ├─ router                     
│  ├─ store                      
│  ├─ utils                      
│  ├─ App.vue                    
│  └─ main.js                    
├─ src                                  // admin項(xiàng)目  
│  ├─ api   
│  ├─ assets                         
│  ├─ components              
│  ├─ config                            // 初始配置文件     
│  ├─ custom-components                 // 物料庫(kù)
│  ├─ custom-schema-template            // 屬性組件庫(kù)
│  ├─ custom-schema-template-set        // 屬性面板生成器
│  ├─ mixin                              
│  ├─ pages        
│  ├─ router  
│  ├─ scss  
│  ├─ store  
│  ├─ utils  
│  ├─ App.vue  
│  └─ main.js              
├─ package.json   
├─ ftpUp.js                              // ftp上傳文件
└─ webpack.config.js    

項(xiàng)目分為admin與h5兩個(gè)項(xiàng)目包畦戒，package.json支持分別/共同打包、一鍵部署

{
 "name": "mall-cook",
 "version": "0.1.0",
 "scripts": {
    "dev": "cross-env GZIP=false TYPE=admin vue-cli-service serve",  //admin 啟動(dòng)
    "dev:h5": "cross-env GZIP=false TYPE=h5 vue-cli-service serve",  // h5 啟動(dòng)
    "build:admin": "cross-env GZIP=true TYPE=admin vue-cli-service build --no-clean --mode development --report", // admin打包
    "build:h5": "cross-env GZIP=true TYPE=h5 vue-cli-service build --no-clean --mode development --report",  //h5 打包
    "build:dev": "npm run build:h5 && npm run build:admin --mode development",  // admin&h5共同打包
    "deploy": "npm run build:dev && node ftpUp.js"  // ftp部署 - 請(qǐng)?jiān)趂tpUp.js配置服務(wù)器信息
  },
}

JSON Schema

基礎(chǔ)類(lèi)型

又到了舉栗子的環(huán)節(jié)

image

輸入框

計(jì)數(shù)器

選擇器

復(fù)合類(lèi)型

我們除了基礎(chǔ)類(lèi)型外酪穿，組件經(jīng)常也需要傳入對(duì)象晴裹、數(shù)組泌绣、對(duì)象數(shù)組等復(fù)合類(lèi)型苗沧。我們應(yīng)該支持任何的復(fù)合類(lèi)型识樱。我們來(lái)看導(dǎo)航欄數(shù)據(jù)列表：

數(shù)據(jù)列表（對(duì)象數(shù)組類(lèi)型）

業(yè)務(wù)場(chǎng)景實(shí)例

從上面我們知道了怎么用JSON表示基礎(chǔ)類(lèi)型和復(fù)合類(lèi)型數(shù)據(jù)，而一個(gè)組件props能接收任意數(shù)量任意類(lèi)型的數(shù)據(jù)。接下來(lái)我們用導(dǎo)航欄組件來(lái)實(shí)際分析：

導(dǎo)航欄組件和它的控制面板

導(dǎo)航欄組件接收styles（對(duì)象）胚宦、attrs（對(duì)象）烙常、tabList（對(duì)象數(shù)組）

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

下面我們來(lái)一一細(xì)看：

[圖片上傳失敗...(image-a4b4c-1639209288830)]

[圖片上傳失敗...(image-d5e26b-1639209288830)]

[圖片上傳失敗...(image-6ac297-1639209288830)]

然后我們把各個(gè)接收數(shù)據(jù)合并在一起，再加上組件的基礎(chǔ)信息，就構(gòu)成了一個(gè)描述組件的JSON细燎。

組裝在一起璧瞬，構(gòu)成組件描述JSON

我們按照平臺(tái)JSON Schema協(xié)議寫(xiě)的標(biāo)準(zhǔn)JSON可以讓平臺(tái)識(shí)別組件信息奥额，再調(diào)用屬性解析器生成屬性控制面板來(lái)控制組件。

Schema 生成器

Json Schema 應(yīng)該要滿(mǎn)足兩點(diǎn)：

• 定義JSON規(guī)則，約束JSON
• 檢驗(yàn)機(jī)制，可檢測(cè)當(dāng)前JSON是否滿(mǎn)足Json Schema規(guī)則

我們雖然定義了Json Schema锋谐，不過(guò)我們還沒(méi)有相對(duì)應(yīng)的檢驗(yàn)機(jī)制三热。我怎么知道我寫(xiě)的JSON是否正確念搬？這時(shí)我們應(yīng)該繼續(xù)開(kāi)發(fā)個(gè)校驗(yàn)器爷恳，校驗(yàn)JSON灌曙。不過(guò)我選擇了一種更高效的方法颖杏，開(kāi)發(fā)Schema 生成器量愧，用工具來(lái)規(guī)則代碼喘落，同時(shí)避免繁雜json的編寫(xiě)

Schema 生成器功能：

• 所見(jiàn)即所得赡若，可視化拖拽實(shí)際的屬性面板
• 支持對(duì)象組件（object脐区、array）嵌套哩罪，構(gòu)成復(fù)合類(lèi)型
• 自動(dòng)生成全部JSON，無(wú)需用戶(hù)修改，直接引用
• 支持JSON引入功能叉寂，可把生成JSON引入，以供重復(fù)修改

基礎(chǔ)演示

對(duì)象類(lèi)型

對(duì)象數(shù)組類(lèi)型

結(jié)尾

Mall-Cook只是一個(gè)以構(gòu)建H5商城場(chǎng)景的項(xiàng)目模板贞绵，大家可以根據(jù)實(shí)際場(chǎng)景（比如酒5、外賣(mài)等）克隆項(xiàng)目修改邏輯哩盲。此項(xiàng)目的核心是實(shí)現(xiàn)從Schema生成到構(gòu)建一套完整可視化項(xiàng)目的標(biāo)準(zhǔn)逊桦，拋磚引玉的讓大家了解Schema對(duì)可視化平臺(tái)的重要性抑进。

未來(lái)平臺(tái)計(jì)劃

• 平臺(tái)迭代

后續(xù)會(huì)陸續(xù)加入更多的通用物料組件和商城的邏輯的完善

• 支持小程序

后面計(jì)劃把H5項(xiàng)目由uni-app替換，物料也移入uni-app中转砖。利用uni-app一碼開(kāi)發(fā)多端部署特點(diǎn)不铆，實(shí)現(xiàn)支持H5离斩、小程序等多端银舱。

• npm組件注冊(cè)

未來(lái)會(huì)試試實(shí)現(xiàn)npm組件在平臺(tái)的注冊(cè)與加載，最麻煩的應(yīng)該是npm組件的版本管理捐腿，這個(gè)很有挑戰(zhàn)性纵朋。（導(dǎo)入的自定義組件需提供components.json的組件描述json來(lái)識(shí)別組件）

未來(lái)可視化計(jì)劃

未來(lái)的話，我的計(jì)劃：

MALL-COOK 迭代

• 開(kāi)發(fā)提供小程序版（uni-app）
  • 1. 開(kāi)發(fā)小程序配置商城茄袖，Mall-Cook配置json傳入項(xiàng)目生成小程序
  • 2. 開(kāi)發(fā)物料庫(kù)（uni-app版）操软，可在現(xiàn)有小程序中引入物料庫(kù)，傳入Mall-Cook配置Json宪祥，自定義構(gòu)建單頁(yè)面
• 迭代提供大量業(yè)務(wù)組件

開(kāi)發(fā)中后臺(tái)可視化代碼生成器

我原本計(jì)劃開(kāi)發(fā)一個(gè)低配版云鳳蝶（可視化低代碼平臺(tái)）聂薪。可是仔細(xì)考慮蝗羊，這種項(xiàng)目除非業(yè)務(wù)固定或者像云鳳蝶開(kāi)發(fā)完整度足夠高藏澳，滿(mǎn)足大量自定義需求，否則實(shí)用性較低耀找。

所以計(jì)劃開(kāi)發(fā)代碼生成器翔悠，生成器80%-90%基礎(chǔ)、重復(fù)功能野芒，剩下自定義功能代碼開(kāi)發(fā)蓄愁，提高中后臺(tái)開(kāi)發(fā)效率。功能計(jì)劃如下：

• 平臺(tái)與element組件庫(kù)綁定

• 提供生成器配置功能包（只是基礎(chǔ)封裝狞悲，達(dá)到減少生成代碼作用撮抓，切記避免深度封裝，導(dǎo)致使用學(xué)習(xí)成本高摇锋，反而本末倒置）

  • 單頁(yè)面mixin,提供公共數(shù)據(jù)方法定義丹拯，減少生成代碼
  • 提供Pagination（分頁(yè)）、dialog荸恕、table乖酬、select、DatePicker等組件封裝,配套使用（是在element基礎(chǔ)上封裝融求，更方便使用剑刑，并減少生成代碼）
  • 插拔式校驗(yàn)庫(kù)，配套使用（同樣提供方便双肤，減少生成代碼）

• 開(kāi)發(fā)類(lèi)似yapi（低配版）施掏，api管理功能，并根據(jù)分頁(yè)接口數(shù)據(jù)模型茅糜，解析生成標(biāo)準(zhǔn)Json Schema

• 根據(jù)Json Schema生成CURD可視化表單（省去一般form generator,單個(gè)拖拽然后配置key的人工流程）

• 根據(jù)實(shí)際情況修改CURD表單每個(gè)單項(xiàng)

• 調(diào)整完成七芭，生成vue代碼

開(kāi)發(fā)目的

開(kāi)發(fā)MALL-COOK包括后面的中后臺(tái)可視化代碼生成器，是想通過(guò)構(gòu)建小成本平臺(tái)提高基礎(chǔ)開(kāi)發(fā)的效率蔑赘。（項(xiàng)目自己一人開(kāi)發(fā)狸驳，精力有限，想通過(guò)較小開(kāi)發(fā)成本進(jìn)行基建缩赛，可看早早聊堂主基建分享）

MALL-COOK開(kāi)源的同時(shí)我也會(huì)在自己公司推出去耙箍，然后根據(jù)實(shí)際需求修改一下，即可上架給公司使用酥馍。同理大家也可根據(jù)自己的實(shí)際需求fork項(xiàng)目修改辩昆，然后使用。MALL-COOK的核心是從schema生成到項(xiàng)目生成的一套流程旨袒。至于具體業(yè)務(wù)大家可以自己DIY汁针。

至于開(kāi)發(fā)的原因？

基建不比天天寫(xiě)CURD砚尽、寫(xiě)H5有意思施无？