Vue.js 与 Bootstrap 联手：实现带分页导航功能的图像列表数据展示

要实现上述功能，我们可以使用Vue.js来构建前端应用，并利用Bootstrap来美化界面。以下是一个简单的实现步骤和代码示例： 1. 创建 Vue 项目 首先，确保你已经安装了Node.js和npm。然后，使用Vue CLI创建一个新的Vue项目： ```bash npm install -g @vue/cli vue create my-project cd my-project ``` 2. 安装 Axios 和 Bootstrap 在项目目录中，安装Axios用于发送HTTP请求，以及Bootstrap用于样式： ```bash npm install axios bootstrap ``` 3. 配置 Vue 项目 在 `src/main.js` 中引入Bootstrap的CSS文件： ```javascript import Vue from 'vue'; import App from './App.vue'; import 'bootstrap/dist/css/bootstrap.min.css'; new Vue({ render: h => h(App), }).$mount('#app'); ``` 4. 编写组件 在 `src/components` 目录下创建一个名为 `ImageList.vue` 的组件： ```vue <template> <div class="container"> <h1>Image List</h1> <div v-if="loading">Loading...</div> <div v-else> <div class="row"> <div class="col-md-3" v-for="image in images" :key="image.id"> <img :src="image.url" class="img-fluid" alt="Image"> </div> </div> <nav aria-label="Page navigation"> <ul class="pagination justify-content-center mt-4"> <li class="page-item" :class="{ disabled: currentPage === 0 }"> <a class="page-link" href="#" @click.prevent="prevPage">Previous</a> </li> <li class="page-item"> <a class="page-link" href="#">Page {{ currentPage + 1 }}</a> </li> <li class="page-item"> <a class="page-link" href="#" @click.prevent="nextPage">Next</a> </li> </ul> </nav> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { images: [], currentPage: 0, loading: false, }; }, methods: { fetchImages(page) { this.loading = true; axios.get(`https://api.apiopenftop/api/getimages?page=${page}&size=10`) .then(response => { this.images = response.data; this.currentPage = page; this.loading = false; }) .catch(error => { console.error('There was an error fetching the images!', error); this.loading = false; }); }, nextPage() { this.fetchImages(this.currentPage + 1); }, prevPage() { if (this.currentPage > 0) { this.fetchImages(this.currentPage - 1); } } }, created() { this.fetchImages(0); } }; </script> <style scoped> /* Add any custom styles here */ </style> ``` 5. 使用组件 在 `src/App.vue` 中使用 `ImageList` 组件： ```vue <template> <div id="app"> <ImageList /> </div> </template> <script> import ImageList from './components/ImageList.vue'; export default { name: 'App', components: { ImageList } }; </script> <style> /* Add global styles here */ </style> ``` 6. 运行项目 运行项目以查看效果： ```bash npm run serve ``` 解释 1. 数据获取：使用Axios发送GET请求到指定的API地址，获取图像数据。 2. 列表渲染：使用Vue的`v-for`指令遍历`images`数组，并生成图像列表。 3. 分页导航：通过`nextPage`和`prevPage`方法更新当前页码，并重新请求数据。 4. 加载状态：通过`loading`变量控制加载状态的显示。 这样，你就有了一个基本的图像列表页面，支持分页导航功能。 ######[AI写代码神器 | 916点数解答 | 2024-11-19 09:11:34]