update

simple-demo/location_point.html

@@ -59,6 +59,16 @@
                 <button class="deleteBtn" v-on:click="confirmDelete(item.id)">删除</button>&nbsp;
                 <button class="eventBtn" v-on:click="addEvent(index)">事件</button>
             </li>
+            <div class="pagination">
+                <a href="#" @click.prevent="changePage(page-1)" :disabled="page === 1">上一页</a>
+                <a href="#" v-for="p in totalPages" @click.prevent="changePage(p)">{{ p }}</a>
+                <a href="#" @click.prevent="changePage(page+1)" :disabled="page === totalPages">下一页</a>
+                <select v-model="size" v-on:change="changeSize">
+                    <option value="10">10条/页</option>
+                    <option value="20">20条/页</option>
+                    <option value="50">50条/页</option>
+                </select>
+            </div>
             <a href="https://web.tianyunperfect.cn/simple/location_event.html">转到事件</a>
         </ul>
     </div>
@@ -91,6 +101,9 @@
     const app = new Vue({
         el: '#app',
         data: {
+            page: 1,
+            size: 10,
+            totalPages: 1,
             longitude: "0",
             latitude: "0",
             locationStr: "未知",
@@ -101,6 +114,24 @@
             this.getLatestData(); // 获取最新的数据
         },
         methods: {
+            changePage(newPage) {
+                this.page = newPage;
+                this.getLatestData();
+            },
+            changeSize() {
+                this.page = 1; // 重置页码
+                this.getLatestData();
+            },
+            async getLatestData() {
+                const response = await axios.get('https://api.tianyunperfect.cn/location/page', {
+                    params: {
+                        page: this.page,
+                        size: this.size
+                    }
+                });
+                this.createdList = response.data.data.list;
+                this.totalPages = Math.ceil(response.data.data.total / app.size);
+            },
             addEvent(index) {
                 const currentItem = this.createdList[index];
                 const nextItem = this.createdList[index + 1];
@@ -167,14 +198,6 @@
                     }
                 });
             },
-            getLatestData: async function () {
-                try {
-                    const response = await axios.get('https://api.tianyunperfect.cn/location/page?page=1&size=50');
-                    this.createdList = response.data.data.list;
-                } catch (error) {
-                    console.log(error);
-                }
-            },
             sendLocationToBackend: async function () {
                 const data = {
                     location: app.locationStr,