使用React批量检查QQ域名是否被封禁

概述：

本文展示了如何使用React编写一个批量请求QQ域名API的示例，检查多个QQ域名是否被封禁。我们将请求接口 https://api.52an.fun/qq/api.php?url= 并根据返回的status值，判断域名是否正常。status为1时表示域名正常，status为0时表示域名被封禁。

目标：

通过React创建一个界面，可以批量输入多个QQ域名，发送请求并显示它们的状态。

环境要求：

• React开发环境。
• axios库用于发送HTTP请求。

React代码示例：

1. 安装依赖：

首先，确保你已经安装了axios库，使用以下命令安装：

npm install axios

2. 创建React组件代码：

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [urls, setUrls] = useState([]);
  const [results, setResults] = useState([]);

  // 处理输入框的变更
  const handleUrlChange = (event) => {
    setUrls(event.target.value.split('\n').map((line) => line.trim()));
  };

  // 批量请求QQ域名状态
  const checkStatus = async () => {
    const result = [];

    for (const url of urls) {
      try {
        const response = await axios.get(`https://api.52an.fun/qq/api.php?url=${url}`);
        const { status, message } = response.data;

        result.push({
          url: url,
          status: status === '1' ? '正常' : `被封禁，原因: ${message}`,
        });
      } catch (error) {
        result.push({
          url: url,
          status: '请求失败，请检查URL',
        });
      }
    }

    setResults(result);
  };

  return (
    <div className="App">
      <h1>QQ域名封禁检查</h1>

      <textarea
        rows="10"
        cols="30"
        placeholder="请输入多个QQ域名，每个域名一行"
        onChange={handleUrlChange}
      ></textarea>

      <br />
      <button onClick={checkStatus}>检查状态</button>

      <div>
        <h3>检查结果:</h3>
        {results.length > 0 && (
          <ul>
            {results.map((result, index) => (
              <li key={index}>
                <strong>{result.url}</strong>: {result.status}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default App;

代码解析：

1. 状态管理：

   • urls：存储用户输入的QQ域名列表。
   • results：存储检查结果，显示每个域名的状态。
2. handleUrlChange：该函数处理输入框中的内容，将用户输入的多个域名按行分隔并存储在urls中。

3. checkStatus：该函数负责发送批量请求。我们使用axios.get逐个请求每个域名的状态，并根据返回的status值判断域名的状态：

   • status为1时表示域名正常。
   • status为0时表示域名被封禁，返回封禁的原因。

4. 结果展示：

   • 通过results数组，将每个域名及其封禁状态显示在页面上。

示例操作：

1. 用户在文本框中输入多个QQ域名，每个域名单独一行。
2. 点击“检查状态”按钮后，系统会依次请求每个域名的状态，并显示结果。
3. 显示的结果包括每个域名的状态。

依赖安装：

如果没有安装React开发环境，可以使用create-react-app工具来创建一个新的React应用：

npx create-react-app check-qq-status
cd check-qq-status
npm install axios

编译与运行：

1. 运行React开发环境：

   npm start

2. 打开浏览器，进入http://localhost:3000，就可以看到界面，输入域名并查看状态。

结果示例：

如果输入了多个QQ域名，例：

www.qq.com
m.qq.com
www.qq.org

结果可能会显示：

检查结果:
- www.qq.com: 正常
- m.qq.com: 被封禁，原因: 域名被封禁
- www.qq.org: 被封禁，原因: 域名被屏蔽

总结：

通过React和axios，我们可以批量检查多个QQ域名是否被封禁。用户只需要在输入框中输入多个域名，点击按钮即可批量查询，并看到每个域名的状态。这种方法不仅方便，还可以快速查看多个域名的状态，有助于管理和监控QQ域名的封禁情况。