背景现在很多公司的主营业务都是c端，拥有庞大的用户和流量，同时b端业务不可或缺，CRM，CMS、运营配置管理平台、数据可视化平台、各类审批平台。这些系统有几个共同的特点：需求多、变化快、查询页、列表页、提交页。这些页面大同小异，UI要求低，功能简单。那么我们是否可以开发一个可配置的平台来解放生产力呢？答案是肯定的。我们只需要配置Json就可以生成一个页面，如何实现呢？慢慢来吧...技术选型Nodejs+Vue/React+Jsonschema框架构建解析：页面只需要一个容器，可以理解为一个Div，页面加载完成后异步去分布式配置中心（Redis或其他）获取页面配置，页面配置只是一个Json字符串。配置数据取出后，我们开始解析Json，包括Json的正确性和合法性。最后通过Vue组件的Render方法渲染页面。看到这里，很多人会有以下疑惑：Json格式如何定义？Json如何与组件对应？组件是如何渲染的？组件如何通信？它是否支持复杂的逻辑交互？框架创新与优化1.支持组件无限嵌套渲染2.简化组件间通信3.页面配置实时预览Q&A1.Json格式如何定义？这个没有统一的标准。这完全是根据个人喜好。让我告诉你我的定义：{"uniqueId":"mt-form","attrs":{"style":{"paddingBottom":"15px","paddingLeft":"5px"}}}2.如何Json对应组件？我们先看一个自定义组件Form.vue的代码：新建一个组件库模块ComponentsLib.js，我们通过自定义组件通过这个模块暴露：/***引入所有公共组件库*/importFormfrom'./Form.vue'module.exports={/***对外暴露的组件，名称id必须唯一*/'mt-form':Form`Pleaseenterthecode`}3.组件如何渲染？编写和暴露组件后，我们如何渲染它们？通过Vue.component定义一个全局组件：importVuefrom'vue'importComponentsLibfrom'./ComponentsLib'//暴露组件库/***注入全局页面容器组件*所有组件都必须包裹在一个容器组件中*/Vue.component('page-container',{render:function(createElement){returnthis.deepComponents(this.pageConfig,createElement)},方法：{deepComponents(pageConfig,createElement){if(pageConfig){returncreateElement(ComponentsLib[pageConfig.uniqueId],{...pageConfig.attrs},this.deepChildren(pageConfig.children,createElement))}},/***递归遍历所有子组件*@param{}pageConfig*@param{*}createElement*/deepChildren(pageConfig,createElement){if(!pageConfig){returncreateElement('span')}if(pageConfig){letchildren=[]for(leti=0;i
