持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

写在前面

在前面的系列文章中已经分析了“拖拽添加组件”、“组件参数编辑”、“组件数据接入”等相关的技术，将之前所提及的相关技术加以整理，简易版的数字孪生低代码配置平台基本上已经可以完成，那么当我们完成了低代码配置平台后，最终的一步，也是最重要的一步是什么呢？

其实前面所有的铺垫，都是为了自动化生成项目，那么如何将我们在低代码平台上编辑的项目转换成一个真实的项目呢，这里介绍一种比较常用的方式，那就是通过配置文件来生成，将配置文件作为低代码编辑平台与项目的桥梁，通过低代码平台的配置动作，生成一份规范化的配置文件，然后最终根据配置文件生成项目的页面，完成项目的自动化创建，那么接下来就让我们一起来探索探索如何实现这个连接的桥梁吧！！

配置文件设计

配置文件需要包含的内容一共有3项，第一项是使用的组件的名称、第二项是组件的相关参数、第三项是组件对应的数据点位。接下来我们就一一分析每一项该如何设计。

组件名称

如下图所示，当我们通过拖拽完成组件放置时，意味着项目在这个位置所使用的组件应该就是当前放置的这个组件，那么，我们就需要用配置文件中的一个配置项来记录这个组件的名称，我们初步的配置文件如下

GIF 2022-6-26 16-50-58.gif

[
  {
    "cpnName": "CPN1",
  },
  {
    "cpnName": "CPN2"
  }
]

该配置文件为一个数组，每个数组成员代表了上图中每个位置的相关配置，其中的name为所使用的组件的名称，用于项目中识别并引用相应的组件。

组件配置

如下图，每个组件所对应的参数都不尽相同，在低代码平台中，我们需要做到的是，能够通过可视化的方式配置每个组件的参数，所以当定义好组件名称后，接下来就需要为每个组件定义参数相关的配置项了，我们可以在上面的配置中扩展一项，来完成这个需求，我们在配置中加入 props配置项，来对组件相关参数的配置进行保存，配置如下

GIF 2022-6-26 17-15-57.gif

[
  {
    "cpnName": "CPN1",
    "props": {
      "name": "1-1",
      "color": "white",
      "border": false
    }
  },
  {
    "cpnName": "CPN2",
    "props": {
      "name": "2-2",
      "color": "white",
      "border": false
    }
  }
]

组件数据点位

通过上面“组件名称”以及“组件配置”，我们已经能够保存组件的类型以及对应的参数了，那么接下来也就到了最后一步了，将组件所对应的数据点位也保存起来，最终在项目中实现自动化的数据接入。我们在配置中再次扩展，加入 datas 配置项，用于存放相对应的数据点位，在 data 中，通过配置 id 来指定需要订阅的数据id，value 指定默认值，配置如下

[
  {
    "cpnName": "CPN1",
    "props": {
      "name": "1-1",
      "color": "white",
      "border": true
    },
    "datas": {
      "currentData": {
        "id": "1-1",
        "value": 0
      }
    }
  },
  {
    "cpnName": "CPN2",
    "props": {
      "name": "2-2",
      "color": "white",
      "border": false
    },
    "datas": {
      "currentData": {
        "id": "1-1",
        "value": 0
      }
    }
  }
]

读取配置

当完成了上面所有的配置文件的定义后，最后一步就是如何读取配置了。读取配置其实很简单，第一步，我们先将对应的组件通过 v-for 和 <component :is=>展示到页面上，第二步，将配置中对应的 props 绑定到组件上，第三步，将对应的数据订阅列表发送到服务器进行订阅，并配置好消息更新函数，整个过程就完成了，代码如下

<template>
  <div class="websocket-container">
    <div class="ws-box" v-for="(cpn,i) in cpnList" :key="`${cpn.cpnName}-${i}`">
      <component :is="cpn.cpnName" v-bind="cpn.props" />
    </div>
  </div>
</template>

<script>
import CPN1 from '../components/CPN1.vue';
import CPN2 from '../components/CPN2.vue';
import configJson from '../config/config.json'
export default {
  components: {
    CPN1,
    CPN2
  },
  data() {
    return {
      // 组件列表
      cpnList: [],
      // 订阅列表
      dataList: []
    }
  },
  methods: {
    initWebsocket(){
      this.ws = new WebSocket("ws://localhost:3000");
      //服务端向客户端连接执行
      this.ws.onopen = ()=>{
        console.log('连接建立')
        this.sendDataList()
      }
      this.ws.onmessage = (msg) => {
        console.log('收到消息:', msg.data)
        this.update(JSON.parse(msg.data))
      }
    },
    update(realData){
      // 更新对应组件的数据
      configJson.forEach((cpn,i) => {
        Object.keys(cpn.datas).forEach(data => {
          if(cpn.datas[data].id == realData.id){
            this.cpnList[i].props[data] = realData.data
          }
        })
      })
    },
    // 订阅
    sendDataList(){
      this.ws.send(JSON.stringify(this.dataList))
    }
  },
  mounted() {
    this.initWebsocket()
    // 展示组件列表
    this.cpnList = []
    configJson.forEach(ele => {
      // 将需要接数据的属性与不需要接数据的属性绑定到同一个 props 对象中
      let tmpCpn = {
        cpnName: ele.cpnName,
        props: ele.props
      }
      Object.keys(ele.datas).forEach(data => {
        // 添加订阅列表
        this.dataList.push(ele.datas[data].id)
        tmpCpn.props[data] = ele.datas[data].value
      })
      this.cpnList.push(tmpCpn)
    });
  },
}
</script>