<template>
<div class="content content_top">
<div class="index_ajax">
<!-- 文章列表 -->
<article class="index_list" v-for="article in paginatedArticles" :key="article.id">
<h2 class="index_list_name">
<a :href="article.link">{{ article.title }}</a>
</h2>
<div class="index_list_excerpt">{{ article.excerpt }}</div>
<div class="index_list_foot">
<div class="author-meta">
<svg xmlns="http://www.w3.org/2000/svg" width="16.5px" height="16.5px" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-user">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span>{{ article.author }}</span><i class="text-primary">•</i>
</div>
<span><a :href="article.categoryLink">{{ article.category }}</a></span><i class="text-primary">•</i>
<time :datetime="article.date">{{ article.formattedDate }}</time>
</div>
</article>
<!-- 分页组件 -->
<div v-if="totalPages > 1" class="page-navigator">
<ul>
<li class="prev" v-if="currentPage > 1">
<router-link :to="getLink(currentPage - 1)">
<i class="iconfont icon-icon-test"></i>
</router-link>
</li>
<li v-for="page in visiblePages" :key="page.number" :class="{ 'current': page.current }">
<router-link :to="getLink(page.number)">{{ page.number }}</router-link>
</li>
<!-- 显示省略号和最后一页 -->
<li v-if="shouldShowEllipsisAfter">
<span>...</span>
</li>
<li v-if="shouldShowLastPage">
<router-link :to="getLink(totalPages)">{{ totalPages }}</router-link>
</li>
<!-- 输入框 -->
<li v-if="totalPages > 3">
<input type="text" class="jump-input" @keyup.enter="jumpToPage" />
</li>
<!-- 跳转按钮 -->
<li v-if="totalPages > 3">
<button @click="jumpToPage" class="jump-button">跳转</button>
</li>
<li class="next" v-if="currentPage < totalPages">
<router-link :to="getLink(currentPage + 1)">
<i class="iconfont icon-icon-test1"></i>
</router-link>
</li>
</ul>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { format } from 'date-fns'
const route = useRoute()
const router = useRouter()
// 接收路由传递的 page 参数
const currentPage = ref(Number(route.params.page) || Number(route.query.page) || 1)
const articles = ref([])
// 文章每页显示数量
const articlesPerPage = 5
// 获取文章数据
const fetchArticles = async () => {
try {
const response = await fetch('http://localhost:3000/api/articles')
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const data = await response.json()
articles.value = data
} catch (error) {
console.error('Failed to fetch articles:', error)
}
}
onMounted(() => {
fetchArticles()
})
// 计算总页数
const totalPages = computed(() => Math.ceil(articles.value.length / articlesPerPage))
// 计算当前页的文章
const paginatedArticles = computed(() => {
const start = (currentPage.value - 1) * articlesPerPage
return articles.value.slice(start, start + articlesPerPage).map(article => ({
...article,
formattedDate: format(new Date(article.date), 'yyyy-MM-dd')
}))
})
// 生成分页链接
const getLink = (pageNumber) => {
if (route.name === 'search' || route.name === 'searchPage') {
return { name: 'searchPage', params: { query: route.params.query || route.query.q, page: pageNumber } }
} else {
return pageNumber === 1 ? { name: 'index' } : { name: 'page', params: { page: pageNumber } }
}
}
// 计算可见的分页按钮
const visiblePages = computed(() => {
const pages = Array.from({ length: totalPages.value }, (_, i) => ({
number: i + 1,
current: i + 1 === currentPage.value
}))
// 如果页数少于或等于 3，则直接返回所有页码
if (totalPages.value <= 3) return pages;
// 前两页时显示前3页
if (currentPage.value <= 2) return pages.slice(0, 3);
// 最后两页时显示最后3页
if (currentPage.value >= totalPages.value - 1) return pages.slice(totalPages.value - 3);
// 显示当前页和相邻页的范围
return pages.slice(currentPage.value - 2, currentPage.value + 1);
})
// 计算是否应该显示省略号和最后一页
const shouldShowEllipsisAfter = computed(() => {
return totalPages.value > 3 && visiblePages.value[visiblePages.value.length - 1].number < totalPages.value - 1;
})
const shouldShowLastPage = computed(() => {
return totalPages.value > 3 && visiblePages.value[visiblePages.value.length - 1].number < totalPages.value;
})
// 监听路由变化以更新当前页
watch(
() => route.params.page || route.query.page,
(newPage) => {
currentPage.value = Number(newPage) || 1
}
)
// 跳转到指定页码
const jumpToPage = () => {
const input = document.querySelector('.jump-input')
const page = parseInt(input.value, 10)
if (page > 0 && page <= totalPages.value) {
router.push(getLink(page))
input.value = '' // 清空输入框
}
}
</script>
<style scoped>
/* 保持原有的样式 */
</style>
先看代码，这个代码中有个问题如果我有15页的文章，然后保证前面是上一页的情况下，我在第12页显示11 12 13 ... 15符合逻辑，但是我想让这个页面更完整我想显示成11 12 13 14 15。就最后几页这样显示其中11是上一页，以此类推然后按照这个逻辑我有100页，我要在97页的时候显示为 96 97 98 99 100，再以此类推我有10000页的时候我在第9997页的时候应该显示9996 9997 9998 9999 10000。我该怎么修改我的代码，求大佬解答
注：本人水平有限代码基本是都是ai写的只会拿来用，和写一些htmlcss和一些些js。所以求解答后给出完整代码和解题思路
