Go Wails Docker图形界面管理工具 (1)

1.背景

市面上已有很多顶级Docker 图形界面管理工具，出于学习容器开发目的，计划动手写个简单的界面管理工具

2. 技术选型

2.1 Wails

使用 Go 和 Web 技术编写桌面应用的项目，类似于ElectronJS 。

官方网站 https://wails.io/zh-Hans/docs/introduction/

2.2 Go

Docker本身采用Go编写，官网SDK如下

官方网站 https://docs.docker.com/engine/api/sdk/

2.3 Ant Design Vue

开箱即用的高质量 Vue 组件，使用方便

官方网站 https://www.antdv.com/docs/vue/introduce-cn

3. 当前功能

项目地址 https://github.com/LeoBest2/my-docker-gui

• 容器查看、创建、启动、删除功能
• 其他待研究

4. 效果图

5. 踩的坑备忘

JS异步处理问题:
版本1中调用的ContainerStop是异步执行的，调用最后的handleRefresh刷新界面时实际执行的容器可能操作没完成，导致界面操作完成后不变

参考: https://blog.csdn.net/weixin_39629679/article/details/111261923 修改为版本2得以解决

版本1

   <script setup>
   const handleStop = () => {
     
     
    spinning.value = true;
    selectedRows.value.forEach((row) => {
     
     
        ContainerStop(row.ID).then(() => {
     
      message.success(`容器${ 
       row.Names[0].substring(1)}停止成功!`); }).catch((e) => message.error(`容器${ 
       row.Names[0].substring(1)}停止失败: ${ 
       e}!`));
    });
    handleRefresh();
};

</script>

版本2

   <script setup>
   const handleStop = () => {
     
     
    spinning.value = true;
    let promises = [];
    selectedRows.value.forEach((row) => {
     
     
        let p = ContainerStop(row.ID)
        p.then(() => {
     
      message.success(`容器${ 
       row.Names[0].substring(1)}停止成功!`); }).catch((e) => message.error(`容器${ 
       row.Names[0].substring(1)}