前言
明天是2021年12月27日, 前几天咱们保险团队开发的低代码投放平台终于上线了，从产品的布局到上线大略断断续续历经了4个月左右，本篇对低代码的概念不做具体介绍，间接介绍产品在研发阶段从0到1的构思过程。
诞生的原因
说起产品的诞生原因，还要从公司的业务模型说起， 公司在一个重要的业务环节是通过第三方平台投放广告吸引用户关上投放页进行留资，在这个业务环节投放组的业务人员找到对应的渠道后可能频繁批改投放页的需要，对于咱们有幻想的CV工程师来说不可能把大好的时光用在日复一日的改图、改文案、改板式的工作中。其实之前我的前辈也为了解决这个问题开发了一个配置性能，只是我感觉不够灵便，于是我的大脑产生一个想法能不能用低代码的思路去解决这个问题， 让用户用简略的拖拽操作就能间接生成一个页面，于是这个产品的种子在我的大脑中发了芽
架构的思考
我的思路是把页面都宰割成一个个的组件，组件即为最小单元，页面就是由组件组成，组件作为业务性能的载体，用户通过拖拽可视化的组件进行拼装页面，生成页面及一段对应的json数据保留到数据库中，在展现页面的时候从数据库中找到对应的json进行解析，通过解析json来确定组件的渲染地位渲染的数据等。
整个产品须要四个我的项目来组成:
- 组件库
- 后盾管理系统
- C端用户展现我的项目
- Node后盾
以下是咱们别离对这个四个我的项目施展的作用开展剖析
1.组件库
下面咱们也说到页面是由组件组成，那么组件是页面的最小单位，这些组件不只是根底组件还有带有业务性能的组件。同时组件的数据也进行入库治理，目标是在拖拽组件页面能够查问出组件列表进行拖拽应用。
我拿出一个banner组件作为一个例子解说:
<template>
<div>
<img class="lowcode_img" :src="contentUrl" ondragstart="return false;" alt="图片" />
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'EwBanner',
props: {
data: {
url: {
formType: String,
content: String,
},
},
},
setup(props, context) {
const { data } = props;
const { url } = data;
const { content } = url;
let contentUrl = ref('');
contentUrl.value = content;
return {
contentUrl,
};
},
});
</script>
<style lang="less" scoped>
.lowcode_img {
width: 100%
}
</style>
能够看出img的src是个动静值，值是由props内部传入，这就决定的组件的灵活性，这个组件展现的值由宿主我的项目负责传入
2.后盾管理系统
管理系统是负责组装页面、生成页面、编辑页面等。通过引入组件库把组件库中的组件拖拽到指定的框中进行可视化展现。
如下截图所示:
左侧为组件列表，两头是拼装区，右侧是组件属性值编辑区。
管理系统除了组装页面 还开发对组件的治理（组件的命名及组件的配置数据）以及用户的治理等性能
3.C端H5展现我的项目
咱们组装好的页面最终要在C端H5我的项目上查看，通过投放进来的页面Id 查问对应的页面json数据 而后通过解析json数据确定要加载的组件以及组件展现的地位和配置数据
4.Node后盾
Node后盾是治理数据提供利用端的接口，对于C端获取页面json数据为了加重数据库的压力，采纳redise缓存页面json数据，只有第一个用户拜访
技术选型
组件库: webpack、vue3
后盾管理系统: vite 、 vue3
Node: koa
数据存储: mysql、redis
图片存储: 云存储
开发中遇到的局部问题及解决方案
-
组装好的单页面怎么抉择链接起来 造成一个投放链路（例如页面1：留资， 页面2：加群）?
我在后盾治理中设计了一个投放组的概念，大略意思就是把每个组装好的页面id都串联起来，程序也能够调整， 而后用一个groupId作为投放组的主键, 当C端页面通过groupId 拿到对应的的投放组每个页面的id，而后取出第一个页面id，依据id到库里取出对应页面json数据，而后依据json渲染页面。
-
组件库中编写的组件波及到跳转页面时候 怎么拿到router实例?
在组件获取地址栏中的数据咱们可能会用到vue-router 然而在组件库中独自去应用vue-router须要在父类我的项目中把router实例传入才能够, 于是我在组件库的入口文件除了 对外裸露install函数办法外,还裸露了一个获取路由实例的函数routerInstall,这样宿主我的项目就能够从入口文件把router实例传进来。
组件库入口文件
import * as components from './components'; import { handleSet } from '../utils/global'; // 注册组件 const install = (app) => { Object.keys(components).forEach((c) => { app.use(components[c]); }); }; // 注册路由 const routerInstall = (router) => { handleSet('router', router); } const exportInstacde = { install, routerInstall } export default exportInstacde;宿主我的项目引入形式
import { createApp } from 'vue'; import router from './router/index'; // 导入router import EwComponent from '@erwan/visual-element-ui'; const app = createApp(App); app.use(EwComponent.install); EwComponent.routerInstall(router); app.mount('#app');这样咱们就能够在组件库中间接应用router
const { groupId } = router.currentRoute._value.query
后记
这篇文章形容了低代码的整体我的项目架构以及实现思路， 在前面的文章中，咱们也将重点围绕图形化界面进行探讨。例如拖拽的实现，属性值调整后画布中的组件如何联动，页面的形容json是如何生成，又是如何渲染为组件的以及组件库同时在pc端和挪动端展现单位是怎么转化的、表构造如何设计等等。感兴趣的小伙伴点一波关注吧！咱们下篇文章见。
发表回复