初次提交

frontend/src/App.vue

@@ -0,0 +1,86 @@
+<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>