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

前言

明天是 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);
    });
  };
  // 注册路由
  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 端和挪动端展现单位是怎么转化的、表构造如何设计等等。感兴趣的小伙伴点一波关注吧！咱们下篇文章见。