【零代码平台】基于Vue实现商城可视化搭建 Mall-Cook
前言
本项目旨在开发一个供运营、产品快速搭建商城的可视化平台,利用可视化的拖拽与属性配置完成商城构建和日常运营,而开发只进行平台的维护、业务组件的新增和迭代。避免高频的业务需求,提升我们的开发效率。
本项目提供的是可视化搭建平台模板,大家可根据公司实际需求进行修改,最终形成满足自己实际需求的可视化搭建平台。
接下来我将带大家深入的了解Mall-Cook可视化平台的原理与技术实现。Mall-Cook可视化平台预览如下:
github地址:传送门
预览地址:传送门
开发前规划
明确目标人群
在进行具体开发前,首先我们需要明确我们开发的平台是给谁用的?是面向运营还是面向研发?研发人员适合low-code(低代码平台),而非研发人员适合no-code(无代码平台)。
我觉得两者最大的区别是组件通讯,也就是大家经常会问的组件怎么交互?
「我举个栗子」
「low-code」我推荐大家了解下「云凤蝶」我认为现在最期待的中后台搭建平台,平台理论可接入任意组件库或NPM组件,强大的解析器解析组件为平台所用。通过状态外置进行组件通讯,简单理解每个页面有个自己vuex,可以自定义状态(变量)、方法,根据需要把状态、方法绑定组件,实现组件的交互,云凤蝶在知乎有几篇介绍的文章。云凤蝶yyds!
「no-code」首推「政采云的鲁班」,有赞与微盟虽然是独角兽级别的模板,但是它们太太太大了,我也找不到核心架构文章,无法深度了解。而鲁班手把手详细给我讲解了可视化搭建的内核,schema的作用与重要性,虽然体量与复杂度无法与有赞与微盟相比,但它是教会我的那个人。
选择画布布局方案
对于布局方案,我们只取决于两个点中的一个,自由或便捷,「其他的大多是噱头」。
自由布局适合与大屏与中后台系统,因为其页面自由度高,物料间可相互覆盖。
那为什么流式布局适合H5与小程序呢?
「我举个栗子」,比如H5页面中,你的商品列表是根据网络接口实时查询,当商品数量发生变化导致商品列表组件高度变化时,我们通过流式布局保证布局不受影响。
其他布局:「举个反栗」凡科技提供的是类自由布局,这是除我上述两种布局外,其他布局想实现的功能基本齐了,支持父子组件间的嵌套、自由拖拽、颗粒化基础物料(text、button)。看着功能都齐了,但我实际使用发现操作复杂不实用,且只能进行部分静态样式的自定义。同样是一个商品列表,我想通过拖拽自定义单项样式,或者我想给没他banner图片自定义添加文字,发现这种动态组件同样只能靠配置项设置。结论发现实用性并不高,反而搭建页面比单纯流式布局复杂数倍。
布局我只推荐流式布局和自由布局,其他的附加功能大多是噱头大于实际,具体附加功能根据实际场景决定是否添加。
比如组件嵌套功能,我在页面配置中未提供此功能,这不是不能实现,而是组件嵌套一般用类似在TAB栏的容器中,可在每个TAB中嵌套不同的组件,我觉得为了这个实现,而提供页面组件的无限嵌套的复杂逻辑不值得。而在Schema协议生成器中提供了Object、Array对象类型的组件嵌套,是因为数据结构是可以任意嵌套的,比如props接收一个对象数组类型的数据。是否需要某个功能根据实际实用场景而定,而不是我全都要,越多就觉得越厉害。对用户而言,操作越简单越友好,可以看有赞、微盟方案。对于流式布局钳制自由度的劣势,用大量业务组件、页面模板填充,目的就是让用户操作简单。
单纯流式布局看起或许很low,但是操作越是简单,用户才越是方便。我想做的是「能实用的工具」,而不是「看起来有点炫的玩具」。
确定可视化平台开发的核心
可视化平台开发的核心是什么?
是一个可拖拽的组件列表,一个展示组件画布,一个组件属性控制面板组成的控制中心?是一套看起功能眼花缭乱的布局方式?
不,是规范,一套规范。
每个成熟的可视化平台,都会经历长期的迭代升级,无数实用的业务组件会在其后大量的新增与迭代,一套标准的规范才能使平台健康成长直至成熟稳定。
那怎么要定义规范?定义规范有什么用?
我们说个最简单的,定义组件的规范。
一个标题组件接入平台,我不会关心你的内部实现,我只关心你的props入参,我怎么通过属性配置面板去控制你。
标题组件 props 接收 title
「原始方式」 写一个包含title字段输入框的表单的配置面板
「进阶方式」 为每个组件写一个JSON去描述组件的关键信息,给它配张「身份卡」供我们平台识别。
// 组件描述JSON
{"label": "标题组件", // 组件名"icon": "icon-title", // 组件图标"fields": { // 组件属性"title": { // 属性名"label": "标题", // 属性label"type": "string", // 属性类型"value": "LEADING SERIES" // 属性初始值}}
}
一旦进入平台我们就通过解析「JSON身份卡」,获取组件信息。然后我们开发一个「属性配置器」,传入组件信息中的属性数据,通过属性配置器生成属性控制面板
属性控制面板生成过程
进阶方式解耦、工业化,这样才能在后面使大量组件接入平台。然而有一个风险点「JSON是无规则的」,组件描述JSON应该「按平台定的规则」来写「平台才能识别」,所以我们需要用规则来标准化JSON。 解决办法就是通过JSON Schema协议来约束JSON,让它根据我们定的标准来编写。(后文有平台Schema协议具体讲解)
So,我们定义的「Schema协议」,是我们「平台规范」的工具,也就是我们可视化开发平台的核心。
平台介绍
Mall-Cook平台的目的是可视化构建移动商城,商城构建流程模仿有赞、微盟,平台提供:
可视化推拽面板,流式布局
多页面搭建
实时预览
H5页面适配
自定义底部tab菜单
商品管理 (现为模拟商品,可修改接口管理真实商品)
商品分类管理,自定义商品分类页
模板商城
Schema生成器,可视化生成属性控制面板
平台速览
魔方组件
轮播组件
商品组件
保存商城
实时预览
商品分类
模板商城
项目结构
├─ h5 // h5项目
│ ├─ api
│ ├─ assets
│ ├─ components
│ ├─ pages
│ ├─ router
│ ├─ store
│ ├─ utils
│ ├─ App.vue
│ └─ main.js
├─ src // admin项目
│ ├─ 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上传文件
└─ webpack.config.js
项目分为admin与h5两个项目包,package.json支持分别/共同打包、一键部署
{"name": "mall-cook","version": "0.1.0","scripts": {"dev": "cross-env GZIP=false TYPE=admin vue-cli-service serve", //admin 启动"dev:h5": "cross-env GZIP=false TYPE=h5 vue-cli-service serve", // h5 启动"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部署 - 请在ftpUp.js配置服务器信息},
}
JSON Schema
基础类型
「又到了举栗子的环节」
这是一个基础的属性Form表单,包括输入框、单选器、计数器,它们由各种元素组成。接下来我们用JSON来代表元素来组装它们:
输入框
计数器
选择器
复合类型
我们除了基础类型外,组件经常也需要传入对象、数组、对象数组等复合类型。我们应该支持任何的复合类型。我们来看「导航栏数据列表」:
数据列表(对象数组类型)
业务场景实例
从上面我们知道了怎么用JSON表示「基础类型」和「复合类型」数据,而一个组件props能接收任意数量任意类型的数据。接下来我们用「导航栏组件」来实际分析:
导航栏组件和它的控制面板
导航栏组件接收styles(对象)、attrs(对象)、tabList(对象数组)
props: {styles: {type: Object,default: () => {}},attrs: {type: Object,default: () => {}},tabList: {type: Array,default: () => []}},
下面我们来一一细看:
tabList(对象数组)
attrs(对象)
styles(对象)
然后我们把各个接收数据合并在一起,再加上组件的基础信息,就构成了一个描述组件的JSON。
组装在一起,构成组件描述JSON
我们按照平台JSON Schema协议写的标准JSON可以让平台识别组件信息,再调用属性解析器生成属性控制面板来控制组件。
Schema 生成器
Json Schema 应该要满足两点:
定义JSON规则,约束JSON
检验机制,可检测当前JSON是否满足Json Schema规则
我们虽然定义了Json Schema,不过我们还没有相对应的检验机制。我怎么知道我写的JSON是否正确?这时我们应该继续开发个校验器,校验JSON。不过我选择了一种更高效的方法,开发Schema 生成器,用工具来规则代码,同时避免繁杂json的编写
Schema 生成器功能:
所见即所得,可视化拖拽实际的属性面板
支持对象组件(object、array)嵌套,构成复合类型
自动生成全部JSON,无需用户修改,直接引用
支持JSON引入功能,可把生成JSON引入,以供重复修改
基础演示
对象类型
对象数组类型
结尾
Mall-Cook只是一个以构建H5商城场景的项目模板,大家可以根据实际场景(比如酒5、外卖等)克隆项目修改逻辑。此项目的核心是实现从Schema生成到构建一套完整可视化项目的标准,抛砖引玉的让大家了解Schema对可视化平台的重要性。
未来平台计划
平台迭代
后续会陆续加入更多的通用物料组件和商城的逻辑的完善
支持小程序
后面计划把H5项目由uni-app替换,物料也移入uni-app中。利用uni-app一码开发多端部署特点,实现支持H5、小程序等多端。
npm组件注册
未来会试试实现npm组件在平台的注册与加载,最麻烦的应该是npm组件的版本管理,这个很有挑战性。(导入的自定义组件需提供components.json的组件描述json来识别组件)
未来可视化计划
未来的话,我的计划:
MALL-COOK 迭代
- 开发提供小程序版(uni-app)
开发小程序配置商城,Mall-Cook配置json传入项目生成小程序
开发物料库(uni-app版),可在现有小程序中引入物料库,传入Mall-Cook配置Json,自定义构建单页面
迭代提供大量业务组件
开发中后台可视化代码生成器
我原本计划开发一个低配版云凤蝶(可视化低代码平台)。可是仔细考虑,这种项目除非业务固定或者像云凤蝶开发完整度足够高,满足大量自定义需求,否则实用性较低。
所以计划开发代码生成器,生成器80%-90%基础、重复功能,剩下自定义功能代码开发,提高中后台开发效率。功能计划如下:
平台与element组件库绑定
提供生成器配置功能包(只是基础封装,达到减少生成代码作用,切记避免深度封装,导致使用学习成本高,反而本末倒置)
单页面mixin,提供公共数据方法定义,减少生成代码
提供Pagination(分页)、dialog、table、select、DatePicker等组件封装,配套使用(是在element基础上封装,更方便使用,并减少生成代码)
插拔式校验库,配套使用(同样提供方便,减少生成代码)
开发类似yapi(低配版),api管理功能,并根据分页接口数据模型,解析生成标准Json Schema
根据Json Schema生成CURD可视化表单(省去一般form generator,单个拖拽然后配置key的人工流程)
根据实际情况修改CURD表单每个单项
调整完成,生成vue代码
结语
开发「MALL-COOK」包括后面的「中后台可视化代码生成器」,是想通过构建「小成本平台」提高基础开发的效率。(项目自己一人开发,精力有限,想通过较小开发成本进行基建,可看早早聊堂主基建分享)
MALL-COOK开源的同时我也会在自己公司推出去,然后根据实际需求修改一下,即可上架给公司使用。同理大家也可根据自己的实际需求fork项目修改,然后使用。「MALL-COOK的核心」是「从schema生成到项目生成的一套流程」。至于具体业务大家可以自己DIY。
至于开发的原因?
基建不比天天写CURD、写H5有意思?
【零代码平台】基于Vue实现商城可视化搭建 Mall-Cook相关推荐
- 零代码平台基于模型驱动开发流程和概念
当前零代码平台/低代码平台比较流行,这些平台主要的实现原理就是基于模型驱动开发,需要平台提供数据建模.表单建模.流程建模.页面建模.报表建模等一系列可视化在线设计工具,基于这些工具,无需掌握编程技能也 ...
- 毕业设计之基于Vue的数据可视化平台
真正的大师,永远都怀着一颗学徒的心! 一.项目简介 今天说的这个软件是一款基于Vue的数据可视化平台,后端采用的是go语言. 二.实现功能 布局与缩放 拖拽 旋转 刻度尺 吸附 图表(柱状图.折线图. ...
- 43家国内外低代码零代码平台介绍-LowCode低码时代
随着全球数字化进程的加速,敏捷.灵活.易用的低代码.零代码开发方式成为企业构建应用.系统的重要手段之一,同时宏观数字化经济趋势叠加传统企业数字化转型诉求,为低代码.零代码提供了肥沃的发育"土 ...
- 零代码平台在大型企业的进化之路
文/明道云深圳 POD Leader 兰倚 "零代码系统能够解决我们复杂的软件实现需求吗?" --来自多个明道云用户的提问 自明道云零代码产品发布以来,累计服务了数十家大型企业,并 ...
- 基于Vue的数据可视化设计框架,数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器 简介 ...
- 零代码平台中的服务编排思路
先打个广告,我们的第三场零代码实践的直播在本周五( 11 月 5 日 )晚8点准时开始,扫描下面二维码,直接预约直播,到时间微信会自动提醒. 随着企业数字化转型的进程加快,零代码平台的的应用越来越广泛 ...
- 基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间 工作日志 正文 基于VUE的ElementUi可视化表单设计器布局器 顶 原 码农苦码农懂 发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
- 使用零代码平台构建应用,应该怎样转变思路?
最近两年,越来越多的各类零代码产品在市场上出现,与此同时,企业的数字化转型的速度也越来越快,零代码产品已然成为了帮助企业数字化转型的利器. 技术也在不断地演进,其核心目的就是让开发人员能够更专注于业务 ...
- 一文看懂:零代码平台是什么?怎么选?
在互联网高速发展的今天,工具产品呈现"傻瓜化"趋势,不是设计师也能用美图秀秀把自己相片处理得美美的:不是摄影师也能用抖音.手机剪辑软件制作出很燃的视频.当然,不会编程也能在零代码平 ...
最新文章
- SQL Server日志清除的两种方法 .
- Oracle生成指定表的列名,并前后添加select from
- Spring Integration 4.0:完整的无XML示例
- android里R.layout.的问题
- orm2 中文文档 3.1 模型属性
- Ubuntu下OpenResty搭建高性能服务端
- oracle密码安全策略,提升Oracle用户密码安全性的策略
- matlab画简谐振动图,简谐振动合成matlab
- linux winqq 不能输入中文的解决办法
- 杜比服务器网站,杜比服务器远程账号和密码
- [ORACLE] ORA-00054 错误的解决方案
- 三款EPUB阅读软件对比
- 使用python编写多普勒频移函数,绘制多普勒频移随速度变化的曲线,给出代码并举例,代码以markdown格式给出...
- 计算机取证(Computer Forensic)
- 【Codeforces 924C】Riverside Curio
- apollo自动驾驶入门课-高精地图
- java求美国数学家的年龄,第二届世界顶尖科学家论坛最年轻的参会者只有15岁
- 博客园自定义鼠标样式
- Linux——详细模拟实现shell(进程控制综合运用)
- 【天光学术】会计论文:S 快递企业借壳上市动因及效益分析(节选)
热门文章
- 这么多代理IP该选哪个呢?
- 大厂历年的网络安全面试真题总结(附答案)
- abaqus里如何修改odb里图例字体大小
- 使用最新mysql-connector-java连接mysql
- CentOS 7下Java的SecureRandom种子初始化失败解决办法
- 微软ohloh、Lava-Lava、破解Skype
- 狼山会项目库:第一期——个体创业者学习网络赚钱项目的基础必修课
- 人体行为识别:SlowFast Networks for Video Recognition
- 六、手把手教你搭建SpringCloudAlibaba之Sentinel实现流量实时监控
- 联想gen系列服务器,联想服务器现已采用QLogic Gen 5 FC适配器