--- theme: condensed-night-purple highlight: zenburn --- ## 前文回顾我开源的商城零代码可视化搭建平台[Mall-Cook]( https://github.com/wangyuan389/mall-cook.git )受到大家喜爱，使我深受鼓励。本着授人以鱼不如授人以渔思想，在项目新建shelf分支,带大家从零开发一个自己的可视化搭建平台。上一节我们： - 介绍了可视化搭建的架构 ![可视化搭建平台架构](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d83d4d2cdb204cc1ad58dacdc42d4fd1~tplv-k3u1fbpfcp-zoom-1.image) - 详细讲解了可视化搭建的核心 - 一套规范 ![物料JSON构建属性面板流水线](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1e65d8a877242948bf1065c393a0bf9~tplv-k3u1fbpfcp-zoom-1.image) - 开发了一个搭建面板，包括物料的嵌套，物料的工具容器等。 ![可嵌套搭建面板](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d800b66dc384047970c2241c51d8336~tplv-k3u1fbpfcp-zoom-1.image) ## 物料JSON构建属性面板流水线 ### 构建逻辑今天我们来开发通过物料JSON构建数据面板的逻辑 ![构建流水线](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f284b2d63bc24a31b128a4a09cb1ca64~tplv-k3u1fbpfcp-zoom-1.image) 我们以图片物料的生成的过程为例（内容过多，请放大图片观看），物料JSON解析为两块： - 物料属性描述，用于生成属性表单面板 - 物料初始数据，生成物料深拷贝初始数据，并传入对应属性表单，可通过表单修改数据 ![图片物料JSON - 构建面板](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce0e477390a147c09c18a49c404a1aba~tplv-k3u1fbpfcp-zoom-1.image) ### 物料JSON 每个物料JSON都是物料的**身份证**，记载了物料的详细信息。我们解析其中数据使用在： - 物料模板列表（使用物料初始数据） - 生成物料属性表单面板（使用物料属性描述） ```json { "name": "图片", // 物料名称 "icon": "icon-image", // 物料图标 "fields": { // 物料属性 "imagePath": { // imagePath 属性 "label": "图片上传", // label "type": "upload", // upload 类型 "value": "" // 值 }, "radius": { // radius 属性 "label": "图片圆角", // label "type": "number", // number 类型 "value": 0 // 值 } } } ``` 其中属性type定义了属性的类型，同时也选择了操作此属性所用的操作组件，我现在定义的基础类型如下： ![属性基础类型](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69fd682d3962407a94f0cb915f3d5a40~tplv-k3u1fbpfcp-zoom-1.image) ## 开发实现大家清楚逻辑后我们开始开发，实际开发主要分为： - 实现物料JSON注册方法开发（初始化所有物料的属性描述、初始数据） - 开发物料属性面板解析器开发 - 实现上述基础类型操作组件开发 ### 物料JSON注册 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a6b76786d894d39b6a02a2992b5f955~tplv-k3u1fbpfcp-zoom-1.image) **开发逻辑**我们把每个物料的JSON放在自己的包下。然后我就可以根据这个规则，利用require.context遍历custom-components包下文件，找到所有component.json进行物料注册 ![物料文件结构](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56909b37622842d688fb02ebcedd3bb6~tplv-k3u1fbpfcp-zoom-1.image) 物料JSON注册方法实现： ```javascript /* * 解析物料Schmea，注册各物料属性参数与初始值 */ import Vue from 'vue' // 调用注册物料 registerComponentsSchema() // 注册物料方法 function registerComponentsSchema () { // 获取custom-components包下所有component.json const files = require.context('@/custom-components', true, /component.json$/) // 物料属性描述对象（使用object类型方便调用） let fields = {} // 物料初始化数据集合 let initializing = [] // 遍历component.json注册物料 files.keys().forEach(key => { // 获取物料名 const [, name] = key.split('/') let config = { component: name, ...files(key) } // 添加物料属性描述 fields[name] = config.fields // 添加物料初始数据 initializing.push(initDefaulValue(config)) }) // Vue原型上绑定物料属性描述对象，方便调用 Vue.prototype.$fields = fields // Vue原型上绑定物料初始化数据集合，方便调用 Vue.prototype.$initializing = initializing } // 获取物料初始数据，默认过滤fields属性 function initDefaulValue (config) { let { component, name, icon, fields } = config let temp = { component, name, icon } setDefaultValue(fields, temp) return temp } // 递归设置各层级初始数据（会存在多层级复杂对象类型） function setDefaultValue (fields, initializing) { for (let key in fields) { let { type, value, child } = fields[key] if (type == 'object') { initializing[key] = {} child && setDefaultValue(fields[key].child, initializing[key]) } else { initializing[key] = value } } return initializing } ``` 通过注册我们会获得： - Vue.prototype.$fields （物料属性描述对象） - Vue.prototype.$initializing（物料初始化数据集合） ### 属性面板解析器 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d9d216f7dcb4996a5a44ac45a0f5e4e~tplv-k3u1fbpfcp-zoom-1.image) **开发逻辑** - 遍历属性描述对象，获取每个属性的label、type等信息，然后渲染对应操作组件，生成属性表单。 - 传入物料数据，把value设到对应属性操作组件，即可通过操作属性表单进行修改 ```xml ``` 细心的同学会发现，属性面板解析器也是**递归嵌套组件**。这是因为属性类型除了基础类型外还存在**复合类型**，比如对象、对象数组等。复合类型会在下一节具体讲解。 ### 基础类型操作组件最后就是开发下图的基础类型操作组件，这块开发比较简单，我们任意**举个栗子** ![属性基础类型](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7678fd08fb94b50812a860cd39d9a43~tplv-k3u1fbpfcp-zoom-1.image) sting类型 -> SchemaString组件 ```xml ``` ## 结尾 ### 项目源码项目代码：[Mall-Cook]( https://github.com/wangyuan389/mall-cook.git ) (shelf分支) 体验地址：[传送门]( http://110.42.184.128:7000/#/ ) ### 下一节预告 - 开发兼容物料属性复杂类型 - 开发JsonSchema生成器，可视化生成物料属性描述JSON ### 系列文章 - [【平台开源】基于Vue实现商城可视化无代码搭建平台 Mall-Cook]( https://juejin.cn/post/7040993073437868063 ) - [手把手带你开发一个低代码可视化平台（一）拖拽搭建面板开发]( https://juejin.cn/post/7044432832965378061 ) ### 交流群交流群二维码可在项目github首页查看 [Mall-Cook]( https://github.com/wangyuan389/mall-cook.git )