.lowcode_img{width:100%}前言今天是2021年12月27日，前几天，我们保险团队研发的低代码交付平台终于上线了。从产品策划到上市，经历了断断续续的过程。4个月左右，本文没有详细介绍低代码的概念，而是直接介绍产品在研发阶段从0到1的构思过程。诞生原因说起产品诞生的原因，还得从公司的商业模式说起。公司的一个重要业务环节是在第三方平台投放广告，吸引用户打开发货页面，储备资金。在这个业务环节中，广告团队的业务人员找到对应的渠道后，可能会频繁修改启动页面的要求。对于我们有梦想的CV工程师来说，不可能在日复一日的换图、改文案、换板子的工作中度过美好的时光。其实前辈们之前也开发过一个配置功能来解决这个问题，但是我觉得不够灵活，于是脑补了一个想法，能不能用low-code的思路来解决这个问题，让用户使用简单的拖放操作。可以直接生成一个页面，于是这个产品的种子在我的脑海里萌芽了。我的架构思路是把页面一个一个的分成组件。组件是最小的单元。页面由组件组成。业务功能的载体，用户通过拖拽可视化组件组装页面，生成页面和一段对应的json数据保存到数据库中，展示页面时从数据库中找到对应的json进行解析，并通过解析json来确定组件渲染数据的渲染位置等。整个产品需要由四个项目组成：组件库后台管理系统C端用户展示项目节点后台下面是我们分析的这四个项目的作用。1、组件库我们也提到了页面是由组件组成的。那么一个组件就是一个页??面的最小单位。这些组件既是基础组件，又是具有业务功能的组件。同时，组件的数据也在数据库中进行管理。目的是查询拖放组件页面上的组件列表，以供拖放使用。我拿出一个banner组件来举例说明：.lowcode_img{width:100%}可以看出img的src是一个动态值，这个值是从props外面传入的，决定了组件的灵活性，显示的值此组件由宿主项目传入。2、后台管理系统管理系统负责组装页面、生成页面、编辑页面等。通过导入元件库，将元件库中的元件拖放到指定的框内进行可视化展示。如下截图所示：左侧为元件列表，中间为装配区，右侧为元件属性值编辑区。管理系统除了组装页面外，还开发了组件管理（组件命名和组件配置数据）、用户管理等功能。查询下发的页面Id对应的页面json数据，然后通过解析json数据确定需要加载的组件、组件展示的位置、配置数据。为了减轻数据库压力，使用redise缓存页面json数据，只有第一个用户访问技术选择组件库：webpack、vue3后台管理系统：vite、vue3Node：koa数据存储：mysql、redisimagestorage：开发中的云存储遇到的一些问题及解决方案如何对拼装的单页进行选择链接，形成投放链接（例如第1页：储备金，第2页：加群）？我在后台管理设计了一个投递组的概念，大致意思就是把各个拼装页面的id串联起来，还可以调整顺序，然后用一个groupId作为投递组的主键。当C端页面通过groupId获取到对应投放组的各个页面的id，然后取出第一个页面id，根据id从库中取出对应页面的json数据，然后渲染页面根据json。当组件库中编写的组件涉及跳转页面时，如何获取router实例？我们可能会使用vue-router来获取组件地址栏中的数据，但是在组件库中单独使用vue-router需要在父类工程中传入router实例才可以，所以除了在组件库的入口文件中暴露了install函数方法，我还暴露了一个函数routerInstall来获取路由实例，这样宿主项目就可以从入口文件中传入router实例了。组件库入口文件import*ascomponentsfrom'./components';import{handleSet}from'../utils/global';//注册组件constinstall=(app)=>{Object.keys(components).forEach((c)=>{app.use(components[c]);});};//注册路由constrouterInstall=(router)=>{handleSet('router',router);}constexportInstacde={install,routerInstall}exportdefaultexportInstacde;宿主项目导入方法import{createApp}from'vue';importrouterfrom'./router/index';//从'@erwan/visual-element-ui'导入routerimportEwComponent；constapp=createApp(App);app.use(EwComponent.install);EwComponent.routerInstall(router);app.mount('#app');这样我们就可以直接在组件库中使用routerconst{groupId}=router.currentRoute._value.query后记本文描述了整体的低代码项目架构和实现思路。在后面的文章中，我们也将重点围绕图形界面展开讨论。比如拖拽的实现，调整属性值后如何链接canvas中的组件，页面描述json如何生成，如何渲染为组件，组件库如何展示转换同时在PC和移动终端上查看本机。结构如何设计等等。感兴趣的朋友点击一波关注！下篇文章见。
