1. 前言
接上篇,本次添加Docker信息查看功能
改进以下:
- 路由切换时自动刷新界面,利用
onBeforeMount
钩子
import {
onBeforeMount, ref } from 'vue';
onBeforeMount(() => handleRefresh());
2. 效果图
3. 代码
直接调用官方库
app.go
// 直接反馈docker官方数据结构,前端JS处理
func (a *App) Info() (types.Info, error) {
return Cli.Info(context.Background())
}
InfoView.vue
<template>
<a-badge :count="info.Containers" color="green" show-zero>
<a-tag color="success">
总容器数
</a-tag>
</a-badge>
<a-divider type="vertical" style="background-color: #7cb305; margin-left: 2rem; margin-right: 2rem; height: 2rem;" />
<a-badge :count="info.ContainersRunning" color="green" show-zero>
文章评论