低代码平台（二）-组件版本管理（腾讯云）

前言

上一篇文章低代码平台（一）-远程组件打包（ESModule）已经可以把组件打包成可远程加载的zip包，接下来就是对组件进行管理，考虑到组件有迭代的过程，所以需要有个版本管理，后台对接的是腾讯云的云开发，腾讯云有一整套的后台服务，使用便利。

可以参考文档自行接入腾讯云开发文档
 在线体验

思路

把打包好的组件zip包解压上传到云端存储空间，并在数据库记录相应的组件信息（组件名/标识/缩略图/分类）和关联的版本列表

技术栈

vue3 + ts 项目基础框架
elementplus ui框架
jszip 前端zip解压插件
腾讯云提供后台能力（数据库/云存储）

添加分类

添加组件的时候关联分类，便于后面组件的使用。

组件分类集合assembly_classify

name 分类名称

添加组件

组件集合assembly_sort

classify_id 分类集合id
icon 组件缩略图
name 组件名称
name_es 组件标识，有唯一性，添加时需校验
version 当前最新版本，上传/删除版本的时候更新为最新的版本号

校验组件标识

js 复制代码

// 查询集合assembly_sort是否村在name_es标识的记录
/**
**name_es 组件标识
**/
const isExistName_es = async (name_es) => {
  const res = await db.collection('assembly_sort')
                    .where({
                        name_es
                    }).get()
  return res.data.length > 0
}

添加版本

版本集合assembly

assembly_sort_id 组件集合id window.JSZip.loadAsync(evt.raw) {

}

createTime 创建时间，用于排序
version 版本号，新的版本号必须大于已有的版本，如此保证了版本的顺序从大到小

判断版本是否已存在

js 复制代码

/**
**assembly_sort_id 组件集合id
**version 版本号
**/
const isExistVersion = (assembly_sort_id, version) => {
    const res = await db.collection('assembly')
                        .where({
                            assembly_sort_id,
                            version
                        }).get()
      return res.data.length > 0
}

上传文件到云空间

js 复制代码

/**
**dir 文件路径
**file 文件
**/
const uploadFile = (dir, file) => {
     return app.uploadFile({
        // 云存储的路径
        cloudPath: dir,
        // 需要上传的文件，File 类型
        filePath: file,
    })
}

插入版本记录

js 复制代码

/**
**data 版本信息 {verison: 'xx'}
**/
const insertAssembly = (data) => {
    return db.collection('assembly').add({
        ...data,
        createTime: Date.now()
    })
}

更新组件最新版本

js 复制代码

/**
**assembly_sort_id 组件集合id
**/
const updateAssembly_sort_version = (assembly_sort_id) => {
    // 查询当前最新版本
     const res = await db.collection('assembly')
                        .where({
                            assembly_sort_id
                        }).get()
    // 设置最新版本
    const version = res.data.length > 0 ? res.data[0].version : ''
    db.collection('assembly_sort').doc(assembly_sort_id).update({
        version
    })
}

上传zip包

通过elementplus的el-upload组件选择zip包，在on-change回调函数读取，通过jszip插件解压，逐个文件上传到腾讯云存储。

js 复制代码

// 读取版本号
const readVersion = async (content) => {
    const f = new FileReader()
    f.readAsText(content)
    const cardJson = await new Promise((r) => {
        f.onload = (e) => {
            r(JSON.parse(e.target?.result))
        }
    })
    return cardJson.version
}
const onChange = (evt) => {
    window.JSZip.loadAsync(evt.raw)
    .then(
        async (zip) => {
            const bolbArr = []
            // 组件标识，点击上传版本按钮时获取
            const name_es = 'xx'
            // 组件id，点击上传版本按钮时获取
            const assembly_sort_id = 'xx'
            // 版本是否已存在
            let isUpdate = false
            // 遍历解压的文件
            for (let key in zip.files) {
                // 排除文件夹
                if (zip.files[key].dir) continue
                // 读取内容
                const content = await zip.file(key).async('blob')
                // 获取版本号
                if(key === 'card.json') {
                    const version = await readVersion(content)
                    isUpdate = await isExistVersion(assembly_sort_id, version)
                }
                // 记录要上传的文件和路径
                // 云端路径格式 环境id/cards/组件标识/版本号/组件文件
                bolbArr.push({
                    dir: `cards/${name_es}/${version}/${key}`,
                    version,
                    file: new File([content], name_es, { type: content.type }),
                })
            }
            // 上传文件
            let count = 0
            const l = bolbArr.length
            bolbArr.forEach(item => {
                uploadFile(item.dir, item.file).then(async () => {
                        count++
                        if (count === l) {
                            // 上传结束
                            if (!isUpdate) {
                                // 新增版本
                                await insertAssembly({
                                    assembly_sort_id,
                                    version: item.version,
                                })
                                // 更新最新版本
                                await updateAssembly_sort_version(assembly_sort_id)
                            }
                        }
                    })
            })
        }
    )
}

删除版本

删除版本的时候，删除数据库的同时要把云空间相关的文件删除，删除文件的操作通过云函数实现。

批量删除数据库记录

js 复制代码

/**
assembly_sort_id 组件集合id
versionArr 版本数组 ['1.0.0', '1.0.1']
*/
const delAssembly = (assembly_sort_id, versionArr) => {
     await db.collection('assembly').where({
         assembly_sort_id,
         version: db.command.in(versionArr)
     }).remove()
}

批量删除文件夹（云函数）

js 复制代码

'use strict';

const CloudBase = require("@cloudbase/manager-node");

  
  


const { storage } = new CloudBase({

    secretId: "xxx",

    secretKey: "xxx",

    envId: "xxx" // 云开发环境ID，可在腾讯云云开发控制台获取

});

  
  


async function deleteDirectory(dir) {

    await storage.deleteDirectory(dir);

}

  
  
  


exports.main = async (event, context) => {

    const {dir = []} = event

    for(let i=0; i<dir.length; i++) {

        await deleteDirectory(dir[i])

    }

    return {

        code: 200,

        msg: 'success'

    }

};