87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<template>
|
||
<v-app>
|
||
<v-main>
|
||
<v-simple-table>
|
||
<template v-slot:default>
|
||
<thead>
|
||
<tr>
|
||
<th class="text-left">ID</th>
|
||
<th class="text-left">CreatedAt</th>
|
||
<th class="text-left">UpdatedAt</th>
|
||
<th class="text-left">DeletedAt</th>
|
||
<th class="text-left">Ip</th>
|
||
<th class="text-left">Url</th>
|
||
<th class="text-left">Stream</th>
|
||
<th class="text-left">APIModel</th>
|
||
<th class="text-left">ResponseCode</th>
|
||
<th class="text-left">duration</th>
|
||
<th class="text-left">ResponseData</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in desserts" :key="index">
|
||
<td>{{ item.ID }}</td>
|
||
<td>{{ item.CreatedAt }}</td>
|
||
<td>{{ item.UpdatedAt }}</td>
|
||
<td>{{ item.DeletedAt }}</td>
|
||
<td>{{ item.Ip }}</td>
|
||
<td>{{ item.Url }}</td>
|
||
<td>{{ item.Stream }}</td>
|
||
<td>{{ item.APIModel }}</td>
|
||
<td>{{ item.ResponseCode }}</td>
|
||
<td>{{ item.duration }}</td>
|
||
<td>{{ item.ResponseData }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</template>
|
||
</v-simple-table>
|
||
<div class="text-center">
|
||
<v-pagination v-model="page" :length="length"></v-pagination>
|
||
</div>
|
||
</v-main>
|
||
</v-app>
|
||
</template>
|
||
|
||
<script>
|
||
// TODO 调整
|
||
import axios from "axios";
|
||
export default {
|
||
name: "App",
|
||
|
||
components: {},
|
||
|
||
data: () => ({
|
||
page: 0,
|
||
//每页大小，vuetify的pagination组件没找到修改这个的功能
|
||
pageSize: 10,
|
||
length: 0,
|
||
desserts: [],
|
||
}),
|
||
watch: {
|
||
page: function () {
|
||
this.fetchData(); // 切换页数时，重新发送请求获取数据
|
||
},
|
||
},
|
||
methods: {
|
||
fetchData: function () {
|
||
axios
|
||
.get(
|
||
`http://ai.frombyte.com:3002/requests/api?page=${this.page}&size=${this.pageSize}`
|
||
)
|
||
.then((response) => {
|
||
this.desserts = response.data.data;
|
||
this.length = response.data.pagination.totalPages;
|
||
console.log(this.desserts, this.length);
|
||
})
|
||
.catch((error) => {
|
||
console.error("Error fetching data:", error);
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
// Use Axios to make a GET request to fetch data
|
||
this.fetchData();
|
||
},
|
||
};
|
||
</script>
|