script 部分
文章随机图
首先script部分,这部分是修复文章列表的,基本大部分注释都写上了,注意域名后面的问号不要去掉哦
async function fetchPosts(page: number = 1) { if (loadmoreStatus.value === 'loading' || loadmoreStatus.value === 'nomore') { return; } try { loadmoreStatus.value = 'loading'; const data: PostList = await post.getPostList(page); const items: Item[] = data.items; items.forEach((item) => { // 检查封面图片是否存在,并且路径是否是完整的URL if (!item.spec.cover) { // 如果没有封面图片,为每篇文章生成一个随机数,附加到图片URL中 const randomNum = Math.floor(Math.random() * 10000); item.spec.cover = `域名api?random=${randomNum}`; } else if (!item.spec.cover.startsWith('http')) { // 如果封面图片的路径是相对路径,添加基础URL item.spec.cover = config.BASE_URL + item.spec.cover; } // 将处理过的item添加到列表中 list.value.push(item); }); currentPage.value++; loadmoreStatus.value = 'loadmore'; if (!data.hasNext) { loadmoreStatus.value = 'nomore'; } } catch (error) { console.error('请求帖子列表失败:', error); // 处理错误... } finally { // 恢复加载状态,以便用户可以继续操作 loadmoreStatus.value = 'loadmore'; } }
JavaScript
精品随机图
一样域名后面也不要把问号去掉
// 假设Category是您定义的分类对象的接口 interface Category { metadata: { name: string; }; spec: { cover?: string; // 封面图URL,可能是未定义的(undefined) displayName: string; }; } // 更新getRandomImageUrl函数,为category参数添加类型注解 const getRandomImageUrl = (category: Category) => { if (!category.spec.cover || !category.spec.cover.startsWith('http')) { const randomNum = Math.floor(Math.random() * 10000); return `https://thinkzyx.cn/api?random=${randomNum}`; } else { return category.spec.cover; } };
Vue
template部分
精品分类随机图
<view class="mt-3.5 flex overflow-scroll"> <view v-for="category in configStore.hotCategories" :key="category.metadata.name" class="mr-1.5 h-24 bg-white" @click="swichTab(category.metadata.name, category.spec.displayName)" > <view class="relative h-full w-40 overflow-hidden rounded-lg"> <!-- 使用getRandomImageUrl方法为每个分类生成或获取封面图URL --> <image class="absolute h-24 w-full rounded-lg" :src="getRandomImageUrl(category)" mode="aspectFill" /> <view class="absolute bottom-0 flex h-full w-full items-center justify-center bg-black bg-opacity-50 text-center text-white"> {{ category.spec.displayName }} </view> </view> </view> </view>
Vue
文章随机图
<!-- 文章列表--> <view class="mt-5"> <view v-for="post in list" class="animate__animated animate__fadeIn m-auto mt-3.5 h-28 items-center overflow-hidden rounded-lg bg-white p-3.5" :key="post.metadata.name"> <view class="flex h-full justify-between overflow-hidden" @click="getArticleDetail(post.metadata.name, post.spec.title)"> <view class="relative mr-1.5 flex-1"> <view class="line-clamp-1 flex flex-nowrap text-lg"> <view class="line-clamp-1"> {{ post.spec.title }} </view> </view> <view class="line-clamp-1 text-gray-500"> {{ post.status.excerpt }}} </view> <view class="absolute bottom-0 flex w-full justify-between"> <view v-if="post.categories[0]" class="overflow-y-scroll whitespace-nowrap rounded-sm bg-gray-100 p-1 text-[10px] before:ml-0.5 before:items-center before:text-[12px] before:content-['#']"> {{ post.categories[0]?.spec.displayName }} </view> <view class="flex items-center text-sm"> <view class="i-mdi-hot mr-1"></view> <view class="mr-3">{{ post.stats.visit }}</view> <view class="i-mdi-heart-outline mr-1"></view> <view class="mr-3">{{ post.stats.upvote }}</view> </view> </view> </view> <view class="aspect-square basis-1/3 overflow-hidden rounded-lg" v-if="post.spec.cover"> <TnLazyLoad :src="post.spec.cover" width="100%" mode="aspectFill" /> </view> </view> </view> </view>
本文转自:Taupis的随笔