根据抖音id或者抖音号查询用户基本信息（公开信息）

根据抖音id或者抖音号查询用户基本信息（公开信息）

前端实战：打造交互式抖音信息查询页面

在数字化时代，数据获取与展示的需求无处不在。本文将以一个实用的抖音信息查询页面为例，深入剖析前端技术如何将数据请求与页面展示完美结合，实现一个兼具实用性与交互性的功能页面。

实现效果

一、技术选型与整体思路

本页面采用HTML5搭建基础结构，CSS3结合Tailwind CSS实现样式设计，JavaScript进行功能逻辑开发。页面的核心功能是接收用户输入的抖音号，向指定接口发起请求，获取相关用户信息后在页面展示，同时记录历史查询数据。

二、HTML结构搭建

HTML部分构建了页面的整体框架。页面顶部是醒目的标题“抖音信息查询”，接下来是用户输入抖音号的区域，包含一个输入框和查询按钮。中间区域预留了用于展示最新查询结果的resultContainer，以及用于展示历史查询数据的historyContainer。此外，还添加了一个初始隐藏的loadingMessage元素，用于在查询过程中提示用户“查询中，请稍候…”。

<div class="container mx-auto p-8">
    <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">抖音信息查询</h1>
    <div class="flex justify-center mb-8">
        <input type="text" id="douyinIdInput" placeholder="请输入抖音号"
            class="border border-gray-300 rounded-md p-2 mr-2 w-64">
        <button id="searchButton"
            class="bg-blue-500 text-white rounded-md p-2 hover:bg-blue-600">查询</button>
    </div>
    <div id="resultContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 结果将在这里显示 -->
    </div>
    <h2 class="text-2xl font-bold text-center text-gray-800 mb-4">历史解析信息</h2>
    <div id="historyContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 历史结果将在这里显示 -->
    </div>
    <div id="loadingMessage" class="loading" style="display: none;">查询中，请稍候...</div>
</div>

三、CSS样式设计

通过Tailwind CSS和自定义的CSS样式，为页面增添了丰富的视觉效果。定义了淡入动画fadeIn，让查询结果和历史数据在加载时自然呈现；设置卡片悬停效果，增强用户交互感；为复制按钮添加动画，使其在鼠标悬停时放大，提升操作的趣味性。

/* 定义淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 卡片悬停效果 */
.card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 复制按钮动画 */
.copy-btn:hover {
    transform: scale(1.1);
}

/* 查询中样式 */
.loading {
    text-align: center;
    margin-top: 10px;
}

四、JavaScript功能实现

4.1 数据请求与处理

在JavaScript部分，首先定义了用于存储历史查询数据的数组historyData。当用户点击查询按钮时，触发点击事件处理函数。函数首先获取用户输入的抖音号，若输入为空则提示用户输入有效抖音号。接着，禁用查询按钮，显示“查询中”提示，向指定接口发起fetch请求。

const historyData = [];
const searchButton = document.getElementById('searchButton');
document.getElementById('searchButton').addEventListener('click', async () => {
    const douyinId = document.getElementById('douyinIdInput').value;
    if (!douyinId) {
        alert('请输入有效的抖音号');
        return;
    }
    searchButton.disabled = true;
    document.getElementById('loadingMessage').style.display = 'block';
    const apiUrl = `http://xxxxx/xxxx/xxxx/?user_token=xxxxxxx&xx=${douyinId}`;
    try {
        const response = await fetch(apiUrl);
        console.log('响应对象:', response);
        if (!response.ok) {
            throw new Error('网络请求失败');
        }
        const data = await response.json();
        console.log('解析后的响应数据:', data);
        if (data.status === 200) {
            renderData(data.data);
            addToHistory(data.data);
            renderHistory();
        } else {
            alert('获取数据失败，请检查返回状态');
        }
    } catch (error) {
        console.error('错误信息:', error);
        alert(`查询失败: ${error.message}`);
    } finally {
        searchButton.disabled = false;
        document.getElementById('loadingMessage').style.display = 'none';
    }
});

4.2 数据渲染

renderData函数负责将获取到的数据渲染到页面上。在渲染过程中，对数据进行了细致的处理，如处理用户头像链接时，判断data.avatar_larger.url_list是否存在有效数据，若不存在则使用默认头像；对于用户ID（sec_uid），截取前10位进行展示，同时确保复制按钮能复制完整的ID。

function renderData(data) {
    const resultContainer = document.getElementById('resultContainer');
    resultContainer.innerHTML = '';

    const card = document.createElement('div');
    card.classList.add('card', 'bg-white', 'rounded-lg', 'shadow-md', 'p-6', 'animate-fadeIn', 'transition-transform', 'duration-300');

    let imgSrc = 'https://picsum.photos/200/300';
    if (data.avatar_larger && data.avatar_larger.url_list && data.avatar_larger.url_list.length > 0) {
        imgSrc = data.avatar_larger.url_list[0];
    }

    const img = document.createElement('img');
    img.src = imgSrc;
    img.alt = '用户头像';
    img.classList.add('w-32', 'h-32', 'rounded-full', 'mx-auto', 'mb-4');
    card.appendChild(img);

    const secUidPara = document.createElement('p');
    secUidPara.classList.add('text-lg', 'font-bold', 'text-center', 'text-gray-800', 'mb-2');
    let displaySecUid = "";
    if (data.sec_uid) {
        displaySecUid = data.sec_uid.slice(0, 10);
    }
    secUidPara.innerHTML = `用户 ID: <span id="sec_uid">${displaySecUid}</span>
        <button class="copy-btn ml-2 text-gray-500 hover:text-gray-700" onclick="copyText('sec_uid', '${data.sec_uid || ""}')">
            <i class="fas fa-copy"></i>
        </button>`;
    card.appendChild(secUidPara);

    // 其他字段渲染代码...
}

4.3 历史数据管理

addToHistory函数将每次成功查询的数据添加到historyData数组中，并控制数组长度不超过10条，确保历史记录不会过多。renderHistory函数则遍历历史数据数组，将每条数据以相同的卡片形式渲染到historyContainer区域，方便用户查看过往查询结果。

function addToHistory(data) {
    historyData.unshift(data);
    if (historyData.length > 10) {
        historyData.pop();
    }
}

function renderHistory() {
    const historyContainer = document.getElementById('historyContainer');
    historyContainer.innerHTML = '';
    historyData.forEach(data => {
        // 与renderData类似的卡片渲染代码...
    });
}

4.4 复制功能实现

copyText函数实现了用户ID、抖音号等信息的复制功能。通过创建一个隐藏的文本域，将需要复制的文本赋值给文本域，选中并执行复制命令，最后移除文本域，同时弹出提示告知用户已完成复制。

function copyText(id, textToCopy) {
    const textarea = document.createElement('textarea');
    textarea.value = textToCopy;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('已复制:'+ textToCopy);
}

五、总结与展望

通过上述代码的实现，我们成功打造了一个功能完备、交互友好的抖音信息查询页面。用户可以方便地输入抖音号获取详细信息，并随时查看历史查询记录。当然，该页面仍有优化空间，例如可以进一步优化接口请求的错误处理，增加更友好的提示；在数据展示方面，可以考虑添加更多维度的信息；还可以对页面进行性能优化，提升加载速度等。随着前端技术的不断发展，未来我们能够为用户带来更加流畅、智能的使用体验。