使用Vue给网站添加追番和游戏进度

提醒

作为一个完全不懂 Vue、Nuxt 和 TypeScript 的新手,我花了两天时间成功接入了 Bangumi API,实现了动漫和游戏进度的展示功能,本文基于 Nuxt 3 + Vue 3 + TypeScript 编写。

1. 准备工作

首先需要了解Bangumi API的基本用法:

Bangumi API

2. 定义返回数据类型

在types/bangumi.d.ts中根据 API 文档定义返回数据的类型,比如:

3. 实现数据获取逻辑

要使用 API,还需要准备5个参数,分别是用户名、条目类型、收藏类型、每页条数和偏移量。

根据文档得知,参数SubjectType为2表示动画,4表示游戏。参数Type为1表示想看,2表示看过,3表示再看。

重点说说 limit 和 offset,这两个参数就可以用来分页。limit 可以理解为获取多少条数据,而 offset 可以理解为忽略多少条数据。

比如,我们每页显示10条数据,那么 limit 就是10,当第一页的时候 offset 就为0,当第二页的时候 offset 就为10,以此类推。

将这些参数拼接后,就可以使用 useFetch获取到自己想要的数据了

创建 composables/useBangumi.ts文件:

4. 页面展示逻辑

当我们需要获取不同类型的数据时,只需要修改 contentType 和 collectionType 即可。

data 包含了 API 返回的数据,pending 表示请求是否正在进行,error 表示请求是否出错,totalPages 表示总页数。要实现骨架屏和错误提示,只需要在页面上添加相应的组件即可。下面只展示逻辑

vue
<template>
  <div>
    <div v-if="pending">加载中...</div>
    <div v-else-if="error">加载失败:{{ error.message }}</div>
    <div v-else>
      <!-- 数据展示 -->
    </div>
  </div>
</template>

分页控制也比较简单,只需要在页面上添加上一页和下一页的按钮,然后在点击按钮时修改 page 的值即可。

vue
<template>
  <div class="pagination">
    <button @click="page--" :disabled="page <= 1">上一页</button>
    <span>{{ page }} / {{ totalPages }}</span>
    <button @click="page++" :disabled="page >= totalPages">下一页</button>
  </div>
</template>

这是我第一次使用 Vue 和 Nuxt 接入第三方 API,过程虽然有些曲折,但也收获颇多。 学到了一点 TypeScript 的知识,也了解了一些 Vue 的基本用法。

关于人情世故的一点想法
为网站添加统计和分析并展示出来

评论区

评论加载中...