0.3

src/apis/node.ts

@@ -1,30 +1,12 @@
 
 import httprequest from "/@/request/index";
+import {INodeList, NodeinfoParam} from "/@/model/node"
 
-namespace Node {
-    //定义接口参数
-    export interface NodeinfoParam {
-
-    }
-
-
-    export interface NodeList {
-        id: number;
-        name: string;
-        host: string;
-        port: number;
-        url: string;
-        updateAt: string;
-        createAt: string;
-        pingType: number;
-        urlStatus: number;
-    }
-}
 
 // 用户登录
-export const nodeReqUse = (params: Node.NodeinfoParam) => {
+export const nodeReqUse = (params: NodeinfoParam) => {
     // 返回的数据格式可以和服务端约定
-    return httprequest.get<Node.NodeList[]>('api/api/v1/node/all', params);
+    return httprequest.get<INodeList>('api/api/v1/node/all', params);
 }
 
 

src/model/node.ts

@@ -1,5 +1,13 @@
-/*NodeList*/
-export class NodeList {
+//定义接口参数
+export interface NodeinfoParam {
+
+}
+
+export interface INodeList{
+  nodeList : Array<INode>
+}
+
+export interface INode {
   id: number;
   name: string;
   host: string;
@@ -9,4 +17,4 @@ export class NodeList {
   createAt: string;
   pingType: number;
   urlStatus: number;
-}
+}

src/view/index/index.vue

@@ -1,5 +1,26 @@
 <template>
   <div>ceshi</div>
+  <a-table  :columns="columns" :data-source="nodeList">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'name'">
+        <a>
+          {{ record.name }}
+        </a>
+      </template>
+      <template v-else-if="column.key === 'tags'">
+        <span>
+          <a-tag
+              v-for="tag in record.tags"
+              :key="tag"
+              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
+          >
+            {{ tag.toUpperCase() }}
+          </a-tag>
+        </span>
+      </template>
+
+
+  </a-table>
 <!--  <a-list-->
 <!--      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"-->
 <!--      :data-source="data"-->
@@ -21,17 +42,56 @@ import {
   ref,
   onUpdated,
   onBeforeUnmount,
-  onUnmounted, onErrorCaptured
+  onUnmounted, onErrorCaptured, reactive, toRefs
 } from 'vue';
 import { nodeReqUse } from '/@/apis/node'
-import { NodeList } from '/@/model/node'
+import {INode, INodeList} from '/@/model/node'
+
+const columns = [
+  {
+    name: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: 'Tags',
+    key: 'tags',
+    dataIndex: 'tags',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+  },
+];
 
 export default defineComponent({
+
     setup() {
+
+      let datalist : INodeList = reactive({
+        nodeList : []
+      })
+
       onMounted(async () => {
-        const nodeList = await nodeReqUse(null)
-        console.log(nodeList.data);
+        const node_list  = await nodeReqUse(null)
+        datalist = node_list.data
+        console.log(datalist)
       })
+      return{
+        ...toRefs(datalist),
+        columns
+
+      }
     }
 })
 
@@ -60,4 +120,4 @@ export default defineComponent({
 [data-theme='dark'] .site-layout-content {
   background: #141414;
 }
-</style>
+</style>