如何将API数据提取并展示到Tailwind CSS卡片中

一、语法错误原因及修复 #

你用console.log(response.data.0.pdf)报错，是因为JavaScript中不能通过点语法访问数字索引或数字开头的属性，必须改用方括号语法。如果返回数据里的publications是数组，正确的写法应该是：

// 假设publications是response.data下的数组
console.log(response.data.publications[0].pdf)

二、实现Tailwind卡片渲染完整方案 #

以下是完整的代码实现，包含API请求、数据遍历和卡片渲染：

1. 页面准备容器 #

先在HTML中添加一个用于承载卡片的容器：

<div id="publications-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4"></div>

2. 完整JS逻辑 #

axios.get('https://api.url**.com/api/v1/content/publications', {
  headers: {
    'X-AUTH-TOKEN': '22***8a8369317***********'
  }
})
.then(response => {
  // 确认publications数组存在
  const publications = response.data.publications;
  if (!Array.isArray(publications)) return;

  const container = document.getElementById('publications-container');
  let cardsHtml = '';

  // 遍历每个publication生成卡片HTML
  publications.forEach(item => {
    cardsHtml += `
      <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
        <a href="${item.pdf || '#'}">
          <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">${item.author || '未知作者'}</h5>
        </a>
        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
          PDF链接: <a href="${item.pdf || '#'}" class="text-blue-600 dark:text-blue-400 hover:underline">点击查看</a><br>
          ID: ${item.id}<br>
          其他信息: ${item.etc || '无'}
        </p>
        <a href="${item.pdf || '#'}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
          Read more
          <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    `;
  });

  // 将生成的卡片插入容器
  container.innerHTML = cardsHtml;
})
.catch(error => {
  console.error('API请求失败:', error);
});

关键说明 #

• 遍历publications数组时，用模板字符串替换卡片中的占位符，同时做了空值处理（比如item.author || '未知作者'避免渲染空白）
• 将PDF链接绑定到卡片的标题和"Read more"按钮，提升可用性
• 使用Tailwind的网格类实现响应式布局，不同屏幕尺寸自动调整卡片列数

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