Web Server 自建控制面板
📅 2026-05-08 · 📂 硬件编程 · ⏱ 阅读约 7 分钟
概述
ESP32 不仅能上网拿数据，还能自己当服务器！本篇教你搭建一个 Web 控制面板，用手机/电脑浏览器直接控制 LED、读取传感器、查看设备状态。
学习目标：掌握 ESP32 WebServer 库，学会处理 HTTP 路由、返回 HTML 页面、接收表单参数。
物料清单
- ESP32 开发板 ×1
- LED ×2 + 220Ω电阻
- DHT22 温湿度传感器（可选）
- 手机或电脑（浏览器访问）
实战：LED 控制面板
// WebServer_LED.ino — 网页控制LED
#include <WiFi.h>
#include <WebServer.h>
WebServer
server(
80);
#define LED1
23
#define LED2
22
const char htmlPage[] PROGMEM =
R"rawliteral(
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;text-align:center;padding:20px;background:#1a1a2e;color:#eee}
.btn{padding:16px 40px;font-size:18px;margin:10px;border:0;border-radius:10px;cursor:pointer}
.on{background:#06d6a0;color:#000}.off{background:#ef476f;color:#fff}
.status{font-size:24px;margin:20px}
</style></head><body>
<h1>🔧 ESP32 控制面板</h1>
<div class="status">LED1: <span id="l1">--</span> | LED2: <span id="l2">--</span></div>
<button class="btn on" onclick="fetch('/led1/on')">LED1 开</button>
<button class="btn off" onclick="fetch('/led1/off')">LED1 关</button>
<br>
<button class="btn on" onclick="fetch('/led2/on')">LED2 开</button>
<button class="btn off" onclick="fetch('/led2/off')">LED2 关</button>
</body></html>
)
rawliteral();
void setup() {
Serial.
begin(
115200);
pinMode(LED1,
OUTPUT);
pinMode(LED2,
OUTPUT);
WiFi.
begin(ssid, password);
while (WiFi.
status() !=
WL_CONNECTED)
delay(
500);
Serial.
print(
"请在浏览器打开: http://");
Serial.
println(WiFi.
localIP());
server.
on(
"/", [](){ server.
send(
200,
"text/html", htmlPage); });
server.
on(
"/led1/on", [](){
digitalWrite(LED1,
HIGH); server.
send(
200); });
server.
on(
"/led1/off", [](){
digitalWrite(LED1,
LOW); server.
send(
200); });
server.
on(
"/led2/on", [](){
digitalWrite(LED2,
HIGH); server.
send(
200); });
server.
on(
"/led2/off", [](){
digitalWrite(LED2,
LOW); server.
send(
200); });
server.
begin();
}
void loop() { server.
handleClient(); }
进阶：RESTful API 设计
| 路由 | 方法 | 功能 |
|---|
| /api/status | GET | 返回 JSON 设备状态 |
| /api/led | POST | {"pin":23,"state":1} 控制LED |
| /api/sensor | GET | 返回传感器数值 JSON |
常见问题
⚠️ 并发限制：ESP32 WebServer 是单线程事件循环，每次只处理一个请求。高并发场景用 ESPAsyncWebServer 库。
💡 mDNS：添加 MDNS.begin("esp32") 后可在浏览器访问 http://esp32.local 而非记 IP 地址。