练习

安装并导入 axios 库
首先，您需要使用 npm 或 yarn 安装 axios 库，并在 Vue.js 的组件中导入它。例如，在 main.js 中导入 axios：
```
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

```
```
<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Created On</th>
        <th>Modified On</th>
        <th>Status</th>
        <th>Name Server</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="domain in domains" :key="domain.id">
        <td>{{ domain.id }}</td>
        <td>{{ domain.name }}</td>
        <td>{{ domain.created_on }}</td>
        <td>{{ domain.modified_on }}</td>
        <td>{{ domain.status }}</td>
        <td>{{ domain.name_servers[0]}} {{ domain.name_servers[1] }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="update">update</button>
</template>

setup () {
    const domains = ref<Domain[]>([]); 
	//在上述代码中，我们使用 <Domain[]> 指定了 domains 的类型为 Domain 类型的数组，并将空数组作为初始值传递给 ref 函数。
	//这样可以让 TypeScript 推断出变量的类型，从而在后续的操作中提供更好的类型检查和错误提示。

function update(){
      axios.get("http://192.168.96.128:8080/cloudflare")
        .then(function (response) {
            console.log(response.data)
            domains.value=response.data.data as Domain[]
//response.data 是一个 HTTP 响应数据对象，其中包含多个属性，其中一个属性名为 data 的值是一个 JSON 数组，其元素类型为 Domain 对象。
//由于 TypeScript 无法自动推断其类型，我们需要使用类型断言 as Domain[] 将其转换成 Domain 类型的数组。
        })
        .catch(function (err) {
            console.log(err)
        })
    }
    return {update,
      domains}
  }
})
</script>

</style>
```