Vue+Bootstrap实现图片数据分页展示：基于AJAX请求与分页按钮交互

看起来您正在尝试创建一个简单的Vue应用，该应用通过AJAX请求从指定API获取图像数据，并使用Bootstrap样式进行页面布局。还希望实现分页功能，能够向前和向后导航页面。下面是一个基于您的要求的完整示例代码： ```html <!doctype html> <html> <head> <meta charset="utf-8"> <title>Image Gallery with Vue and Bootstrap</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div id="app" class="container mt-5"> <h2>Image Gallery</h2> <div v-if="loading">Loading...</div> <div v-else> <div class="row"> <div v-for="(image, index) in images" :key="index" class="col-md-4 mb-4"> <img :src="image.url" class="img-fluid" alt="Image"> </div> </div> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item" :class="{ disabled: currentPage === 0 }"> <a class="page-link" href="#" @click.prevent="prevPage()">Previous</a> </li> <li class="page-item" :class="{ disabled: currentPage === totalPages - 1 }"> <a class="page-link" href="#" @click.prevent="nextPage()">Next</a> </li> </ul> </nav> </div> </div> <script> new Vue({ el: '#app', data() { return { images: [], loading: true, currentPage: 0, pageSize: 10, totalPages: 1 }; }, methods: { fetchImages(page = this.currentPage) { this.loading = true; $.ajax({ url: `https://api.apiopenftop/api/getimages?page=${page}&size=${this.pageSize}`, method: 'GET', success: (response) => { this.images = response.data; this.totalPages = Math.ceil(response.total / this.pageSize); this.loading = false; }, error: () => { alert('Error fetching data'); this.loading = false; } }); }, nextPage() { if (this.currentPage < this.totalPages - 1) { this.currentPage++; this.fetchImages(); } }, prevPage() { if (this.currentPage > 0) { this.currentPage--; this.fetchImages(); } } }, mounted() { this.fetchImages(); } }); </script> </body> </html> ``` 解释： 1. HTML结构: - 使用了`<div>`容器来包含整个应用程序。 - 使用Bootstrap的网格系统来显示图片。 - 分页按钮使用Bootstrap的`pagination`组件。 2. Vue实例: - `data`对象中定义了`images`数组用于存储图片数据，`loading`布尔值用于显示加载状态，`currentPage`表示当前页码，`pageSize`表示每页的数据量，`totalPages`表示总页数。 - `methods`中定义了`fetchImages`方法来发送AJAX请求获取数据，`nextPage`和`prevPage`方法用于处理分页逻辑。 - `mounted`生命周期钩子在组件挂载后调用`fetchImages`方法，初始化数据。 3. AJAX请求: - 使用jQuery的`$.ajax`方法发送GET请求到指定的API地址。 - 成功响应时，更新`images`数组和`totalPages`。 - 失败时，显示错误提示。这个示例应该能满足您的需求，如果您有任何问题或需要进一步的帮助，请告诉我！ ######[AI写代码神器 | 950点数解答 | 2024-11-19 16:52:55]

服务商

更多选项

快捷项

自定义