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

前言

上一篇文章低代码平台(一)-远程组件打包(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'

    }

};
相关推荐
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz2 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇2 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪3 小时前
AJAX的基本使用
前端·javascript·ajax