低代码投放平台从架构图到上线的阐述

前言

今天是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端和移动端展示单位是怎么转化的、表结构如何设计等等。感兴趣的小伙伴点一波关注吧！我们下篇文章见。