esp8266+RC522，在网页显示读取卡的数据

要实现esp8266和RC522读卡器在网页上显示读取到的卡片数据，可以按照以下步骤进行操作：

1. 首先需要连接esp8266和RC522读卡器，可以使用SPI协议进行通信。

2. 在esp8266上编写程序，使用RC522库读取卡片数据，并将数据存储到一个变量中。

3. 使用ESPAsyncWebServer库创建一个Web服务器，并设置一个路由，用于处理客户端的请求。

4. 在路由处理程序中，将读取到的卡片数据作为响应发送给客户端。

下面是一个简单的示例程序，可以帮助你完成这个任务：

#include <SPI.h>
#include <MFRC522.h>
#include <ESPAsyncWebServer.h>

#define SS_PIN D1
#define RST_PIN D2

MFRC522 mfrc522(SS_PIN, RST_PIN); // 创建MFRC522实例
String cardData = ""; // 存储读取到的卡片数据

AsyncWebServer server(80); // 创建Web服务器实例

void setup() {
  Serial.begin(9600);

  SPI.begin(); // 初始化SPI总线
  mfrc522.PCD_Init(); // 初始化RC522读卡器

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", cardData); // 将读取到的卡片数据作为响应发送给客户端
  });

  server.begin(); // 启动Web服务器
}

void loop() {
  if (mfrc522.PICC_IsNewCardPresent() && mfrc522.PICC_ReadCardSerial()) {
    for (byte i = 0; i < mfrc522.uid.size; i++) {
      cardData += String(mfrc522.uid.uidByte[i], HEX); // 读取卡片数据并存储到cardData变量中
    }
    mfrc522.PICC_HaltA();
  }
  delay(50);
}

在这个示例程序中，我们首先定义了MFRC522实例和一个名为cardData的字符串变量，用于存储读取到的卡片数据。

然后使用ESPAsyncWebServer库创建了一个Web服务器实例，并设置了一个路由，用于处理客户端的请求。

在主循环中，我们使用MFRC522库的函数检测是否有新的卡片出现，并读取卡片数据并存储到cardData变量中。

最后，在路由处理程序中，我们将cardData变量作为响应发送给客户端，这样就可以在网页上显示读取到的卡片数据了。