不说废话，直入主题。
首先去查看Bangumi API的方法给的调用表，很详细和实用了。
这里具体介绍怎么使用。
本人制作了一个基于调用它的API实现的数据检索网站，虽然还在严峻开发中-->vite_DigBgm

了解条目

表中每个条目只给了后缀，前缀都是https://api.bgm.tv

表中已经明确表示了是get方法还是post方法，执行调用需要的参数(Parameters)和调用后返回的结果(Responses)也都有详细的表示

如何调用

在vue中可以通过axios进行get或post请求，通过Bangumi的接口，得到他服务器上的数据。

具体为，新建一个axios.js文件：

import axios from 'axios'

const bangumiService = axios.create({
  baseURL: '/api'
})

export default bangumiService

然后在另一个文件中引用axios，并定义一个调用的方法，例如

function login (username) {
  return axios.get('/v0/users/' + username, {
    username
  })
}

其中的/v0/users/' + username，来源于上述的api表

最后定义一个按钮使用该函数，通过对表中返回报文的值的观察，进行逻辑表达

//进入按钮
const formRef= ref()
const onSubMit=()=>{
  formRef.value.validate(async (valid)=>{
    if(!valid){
      return
    }
    else{     
        // 根据响应中的信息判断是否是 Bangumi 用户
        login(formLabelAlign.username)
        .then(res=>{  //注，此处请求正确的返回值res未用
          ElNotification({
            message: '欢迎，'+formLabelAlign.username,
            type: 'success',
            duration:2000     //持续两秒
          })
        })
        .catch(err=>{
              ElNotification({
                title:'ERROR',
                message: err.response.data.description,
                type: 'error',
                duration:2000  //持续两秒
          })
        })
    } 
  })
}

注意，上面使用了element-plus的组件

如何调试

在浏览器的开发页面中进入网络->Fetch/XHR->响应，可以看到每次请求的结果。

f12.png

同时你也可以通过console.log()在控制台中打印需要的信息进行判断。

常见问题

  • 访问跨域问题

如果你的前端应用在浏览器中运行，Bangumi 的 API 不允许跨域请求，你可能会遇到跨域问题。在这种情况下，考虑使用代理服务器。（如vue中，通过设置vite.config.js文件）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: { // 使用 proxy 实例
      '/api': {
        target: 'https://api.bgm.tv',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    port: 8080
  }
})