昨天分享了有关k8s管理平台的知识，基础的功能大同小异，关键在于适用于不同的业务，开发对应的功能。
今天再说说cops平台的开发进度，昨天做了导航菜单，今天就该把集群节点信息的展示功能做出来，先看看效果：
前端页面展示：
后端接口返回数据：
其实就是之前我们说的用表格展示获取的后端数据，这个数据来源于k8s集群api的调用返回的。
这里从全流程梳理下：
前端引入表格组件，再调用后端的接口，后端程序调用K8s集群的api，获得集群相关信息，然后返回给前端，前端渲染即可。
前端表格组件的引入，我们使用的antd组件，可以全量引入或者按需引入，框架用的vben，官网这么说：
全局使用
代码语言：javascript复制import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
const app = createApp(App);
app.use(Antd);
app.mount('#app');局部使用
代码语言：javascript复制<template>
<Button>text</Button>
</template>
<script>
import { defineComponent } from 'vue';
import { Button } from 'ant-design-vue';
export default defineComponent({
components: {
Button,
},
});
</script>组件全量注册
代码语言：javascript复制在main.ts内
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
const app = createApp(App);
app.use(Antd);删除以下代码
代码语言：javascript复制if (import.meta.env.DEV) {
import('ant-design-vue/dist/antd.less');
}然后直接引入官网的表格示例代码即可：
代码语言：javascript复制<template>
<a-table
:columns="columns"
:row-key="record => record.login.uuid"
:data-source="dataSource"
:pagination="pagination"
:loading="loading"
@change="handleTableChange"
>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">{{
text.first }} {{ text.last }}</template>
</template>
</a-table>
</template>
<script lang="ts">
import type { TableProps } from
'ant-design-vue';
import { usePagination } from
'vue-request';
import { computed, defineComponent } from
'vue';
import axios from 'axios';
const columns = [
{
title: 'Name',
dataIndex: 'name',
sorter: true,
width: '20%',
},
{
title: 'Gender',
dataIndex: 'gender',
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
width: '20%',
},
{
title: 'Email',
dataIndex: 'email',
},
];
type APIParams = {
results: number;
page?: number;
sortField?: string;
sortOrder?: number;
[key: string]: any;
};
type APIResult = {
results: {
gender: 'female' | 'male';
name: string;
email: string;
}[];
};
const queryData = (params: APIParams) =>
{
return axios.get<APIResult>('https://randomuser.me/api?noinfo', {
params });
};
export default defineComponent({
setup() {
const {
data: dataSource,
run,
loading,
current,
pageSize,
}
= usePagination(queryData, {
formatResult: res => res.data.results,
pagination: {
currentKey: 'page',
pageSizeKey: 'results',
},
});
const pagination = computed(() => ({
total: 200,
current: current.value,
pageSize: pageSize.value,
}));
const handleTableChange: TableProps['onChange'] = (
pag: { pageSize: number; current: number },
filters: any,
sorter: any,
)
=> {
run({
results: pag.pageSize!,
page: pag?.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
};
return {
dataSource,
pagination,
loading,
columns,
handleTableChange,
};
},
});
</script>改一下前端显示的表格列字段名字符合自己需求即可。
再来看看后端api的开发：
1、和k8s集群建立连接
2、获取集群信息
3、返回数据
以下是示例代码：
代码语言：javascript复制package main
import (
"context"
"fmt"
"log"
"k8s.io/client-go/kubernetes"
"k8s.io/client-go/rest"
"k8s.io/client-go/tools/clientcmd"
)
func main() {
config,
err := rest.InClusterConfig()
if
err != nil {
kubeconfig
:= "/path/to/kubeconfig"
config,
err = clientcmd.BuildConfigFromFlags("", kubeconfig)
if
err != nil {
log.Fatal(err)
}
}
clientset,
err := kubernetes.NewForConfig(config)
if
err != nil {
log.Fatal(err)
}
nodes,
err := clientset.CoreV1().Nodes().List(context.Background(),
metav1.ListOptions{})
if
err != nil {
log.Fatal(err)
}
for
_, node := range nodes.Items {
fmt.Printf("Node
name: %sn", node.Name)
fmt.Printf("Node
labels: %vn", node.Labels)
fmt.Printf("Node
addresses: %vn", node.Status.Addresses)
fmt.Printf("Node
conditions: %vn", node.Status.Conditions)
fmt.Printf("Node
capacity: %vn", node.Status.Capacity)
fmt.Printf("Node
allocatable: %vn", node.Status.Allocatable)
fmt.Printf("Node
info: %vn", node.Status.NodeInfo)
fmt.Println("------------------------------------------------------")
}
}其余的开发也就是如此流程，就是不断调用k8s开放的api，进行一系列的增删改查的操作。今天的分享就到这了，感兴趣的朋友点赞关注呀！
