调用Setlist.fm API时年份筛选失效的技术求助

我正在使用Vue和Bootstrap开发一个关于Grateful Dead的小型项目网站，希望实现用户按年份搜索演出曲目单，每页显示5条并支持翻页的功能。目前遇到的问题是：调用Setlist.fm API时，虽然每页返回20条曲目单，但无法根据用户输入的年份进行筛选，总是默认显示2015年到1995年的The Dead演出。这是我首次使用Node.js开发，以下是我的后端和前端代码：

后端代码 #

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const app = express();
const PORT = process.env.PORT || 3000;

app.use(
  cors({
    origin: "*",
  })
);
app.get("/api/setlist", async (req, res) => {
  try {
    const { data } = await axios.get(
      "https://api.setlist.fm/rest/1.0/artist/6faa7ca7-0d99-4a5e-bfa6-1fd5037520c6/setlists",
      {
        headers: {
          Accept: "application/json",
          "x-api-key": "MY TOKEN IS HERE",
        },
        params: req.query,
      }
    );
    res.json(data);
  } catch (error) {
    console.error("Error fetching Setlist API:", error);
    res.status(500).send("Error fetching data");
  }
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

前端组件代码 #

<script>
import axios from "axios";

export default {
  name: "About",
  data() {
    return {
      search: {
        year: null,
        state: "",
        city: "",
        song: "",
      },
      searchResults: [],
      error: null,
    };
  },
  methods: {
    async searchByYear() {
      console.log(
        "API URL:",
        `http://localhost:3000/api/setlist?year=${this.search.year}`
      );

      try {
        const response = await axios.get("http://localhost:3000/api/setlist", {
          params: {
            year: this.search.year,
            // state: this.search.state,
            // city: this.search.city,
            // song: this.search.song,
          },
        });
        console.log("Received Data from Server:", response.data); // Add this line to log the data received from the server

        this.searchResults = response.data.setlist;
        console.log("Updated searchResults:", this.searchResults);
      } catch (error) {
        console.error("Error fetching search results:", error);
      }
    },
  },
};
</script>

解决方向 #

• 修正API参数名：Setlist.fm的艺术家演出列表接口中，年份筛选的正确参数是pYear，而非你当前使用的year。API无法识别year参数，所以会返回默认结果。需要把前端请求里的year替换成pYear。
• 校验年份格式：确保用户输入的是4位数字格式的年份（如1977），可以在前端添加简单校验，避免传入无效参数导致API无响应。
• 实现分页功能：
  • API默认每页返回20条数据，若要每页显示5条，可在前端对返回的searchResults进行分页处理，比如通过计算属性根据当前页码截取对应数据段。
  • 同时可以利用Setlist.fm API自带的page参数，实现翻页时请求不同页的原始数据，结合前端二次分页满足需求。
• 确认API配置：检查你的API密钥是否有效，请求头中的Accept和x-api-key是否设置正确，确保没有权限或格式问题导致请求异常。

内容的提问来源于stack exchange，提问作者ashton8504