ESP32 Abfragezeichenfolge-Webserver – Dynamische URL-Parameter
WebServerQueryStrings-Beispiel - Dynamischer Mehrseiten-Server
Überblick
Dieses Beispiel zeigt, wie man einen dynamischen mehrseitigen Webserver erstellt, der URL-Abfrageparameter verwendet, um interaktive Inhalte und Steuerungsfunktionen bereitzustellen und einen nahtlosen Seitenwechsel zu ermöglichen.
Funktionen
- Mehrseitige Navigation mit dynamischen Inhalten basierend auf URL-Parametern
- Temperaturumrechnung (Celsius/Fahrenheit) über Abfrageparameter
- LED-Steuerung mit Parametern in der Abfragezeichenfolge
- Dynamische Inhaltsgenerierung basierend auf Benutzereingaben
- Professionelles Mehrseiten-Layout mit konsistenter Navigation
- URL-Parameter-Auswertung und Validierung
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Bibliotheksinstallation
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn dies Ihre erste Verwendung des ESP32 ist, lesen Sie das Tutorial zur Einrichtung der ESP32-Umgebung in der Arduino-IDE setting up the environment for ESP32 in the Arduino IDE.
- Schließen Sie das ESP32-Board mit einem USB-Kabel an Ihren Computer an.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende ESP32-Board (z. B. ESP32) und COM-Port aus.
- Öffnen Sie den Library Manager, indem Sie auf das Library Manager-Symbol auf der linken Seite der Arduino IDE klicken.
- Suchen Sie nach Web Server for ESP32 und finden Sie die mWebSockets von DIYables.
- Klicken Sie auf die Installieren-Schaltfläche, um die mWebSockets-Bibliothek hinzuzufügen.
Webserver-Abfragezeichenfolgen-Beispiel
- In der Arduino-IDE gehen Sie zu Datei Beispiele Webserver für ESP32 WebServerQueryStrings Beispiel, um den Beispielcode zu öffnen
Code-Struktur
- home.h: HTML-Vorlage der Startseite
- temperature.h: HTML-Vorlage der Temperaturüberwachungsseite
- led.h: HTML-Vorlage der LED-Steuerungsseite
- WebServerQueryStrings.ino: Hauptserverlogik
Schaltungsverbindung
Keine externen Bauteile erforderlich – dieses Beispiel verwendet die integrierte LED am Pin 13.
Eigenschaften von Abfrageparametern
Temperaturseitenparameter
- unit=c oder unit=celsius - Temperatur in Celsius anzeigen
- unit=f oder unit=fahrenheit - Temperatur in Fahrenheit anzeigen
- Kein Parameter - Standardmäßig Celsius
LED-Steuerparameter
- state=on - LED einschalten
- state=off - LED ausschalten
Anweisungen zur Einrichtung
1. Netzwerkkonfiguration
Bearbeiten Sie die WLAN-Zugangsdaten direkt in der Datei WebServerQueryStrings.ino:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Code hochladen und Ausgabe überwachen
- Verbinden Sie Ihren ESP32 mit Ihrem Computer
- Wählen Sie das richtige Board und den richtigen Port in der Arduino IDE aus
- Laden Sie den WebServerQueryStrings.ino-Sketch hoch
- Öffnen Sie den Seriellen Monitor (9600 Baud)
- Warten Sie auf die WLAN-Verbindung
- Notieren Sie die angezeigte IP-Adresse
- Wenn Sie die IP-Adresse im Seriellen Monitor nicht sehen, drücken Sie die Reset-Taste am ESP32-Board
Anwendungsbeispiele
Öffnen Sie Ihren Webbrowser und geben Sie die im Serial Monitor angezeigte IP-Adresse ein, um auf den Webserver zuzugreifen.
Testen Sie die Temperaturüberwachungsfunktion:
- Klicken Sie auf das Menü „Temperatur“.
- Zeigen Sie die Temperaturanzeige an. Klicken Sie auf jede Schaltfläche, um die Temperatureinheit zu ändern.
Testen Sie die LED-Steuerungsfunktion:
- Klicken Sie im Menü 'LED-Steuerung'. Sie sehen dann die Weboberfläche wie unten dargestellt.
- Schalten Sie die LED mit den bereitgestellten Tasten ein und aus.
- Beobachten Sie, wie der Status der integrierten LED auf dem ESP32-Board sich sofort aktualisiert.
Zugriff auf verschiedene Seiten
Startseite
- URL: http://your-esp32-ip/
- Features: Willkommensseite mit Navigationsmenü
Temperaturseite (Standard - Celsius)
- URL: http://your-esp32-ip/temperature
- Anzeige: Temperatur in Celsius mit Einheitenauswahl
Temperatur in Fahrenheit
- URL: http://your-esp32-ip/temperature?unit=f
- URL: http://your-esp32-ip/temperature?unit=fahrenheit
- Anzeige: Temperatur in Fahrenheit umgerechnet
LED-Steuerung
- Einschalten: http://your-esp32-ip/led?state=on
- Ausschalten: http://your-esp32-ip/led?state=off
Code-Erklärung
Verarbeitung von Abfrageparametern
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Check for query parameter "unit"
String unit = "C";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "unit") {
unit = params.params[i].value;
}
}
// Generate temperature display based on unit
String temperatureDisplay = "Simulated temperature: 25°" + unit;
// Use the TEMPERATURE_PAGE template and replace placeholder
String response = TEMPERATURE_PAGE;
response.replace("%TEMPERATURE_VALUE%", temperatureDisplay);
server.sendResponse(client, response.c_str());
}
LED-Steuerung mit Abfrageparametern
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Check for query parameter "state"
String state = "";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "state") {
state = params.params[i].value;
break;
}
}
// Control LED based on state
if (state == "on") {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
} else if (state == "off") {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
} else if (state == "") {
// No state parameter provided, just show current status
} else {
// Invalid state parameter
client.println("HTTP/1.1 400 Bad Request");
client.println("Connection: close");
client.println();
client.print("Invalid state parameter. Use ?state=on or ?state=off");
return;
}
// Get current LED state
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
// Use the LED_PAGE template and replace placeholders
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
Parametervalidierung
// Helper function to find query parameter value
String getQueryParam(const QueryParams& params, const String& key) {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return params.params[i].value;
}
}
return "";
}
// Validation functions
bool isValidTemperatureUnit(String unit) {
unit.toLowerCase();
return (unit == "c" || unit == "celsius" ||
unit == "f" || unit == "fahrenheit" ||
unit == "");
}
bool isValidLedState(String state) {
return (state == "on" || state == "off" || state == "");
}
HTML-Vorlagen mit dynamischem Inhalt
Temperatur-Seitenvorlage
<div class="temperature-display">
<h2>Current Temperature</h2>
<div class="temp-value">%TEMPERATURE% %UNIT%</div>
<div class="unit-selector">
<p>Display in:</p>
<a href="/temperature?unit=c" class="unit-btn">Celsius</a>
<a href="/temperature?unit=f" class="unit-btn">Fahrenheit</a>
</div>
</div>
LED-Steuerungsvorlage
<div class="led-control">
<h2>LED Control</h2>
<div class="status">Status: <span>%LED_STATUS%</span></div>
<div class="controls">
<a href="/led?state=on" class="btn btn-on">Turn ON</a>
<a href="/led?state=off" class="btn btn-off">Turn OFF</a>
</div>
</div>
Erweiterte Funktionen
Routen-Konfiguration
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
ledState = LOW;
digitalWrite(LED_PIN, ledState);
// Initialize web server with credentials
server.begin(WIFI_SSID, WIFI_PASSWORD);
server.printWifiStatus();
// Add routes
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
// Set custom 404 handler
server.setNotFoundHandler(handleNotFound);
}
Hilfsfunktionen für Abfrageparameter
// Extract parameter from QueryParams structure
String getParam(const QueryParams& params, const String& key, const String& defaultValue = "") {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return params.params[i].value;
}
}
return defaultValue;
}
// Check if parameter exists
bool hasParam(const QueryParams& params, const String& key) {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return true;
}
}
return false;
}
URL-Erstellungshilfen
// Helper to build URLs with parameters
String buildLedUrl(String state) {
return "/led?state=" + state;
}
String buildTempUrl(String unit) {
return "/temperature?unit=" + unit;
}
Tatsächliche Implementierungsnotizen
Aktuelle Einschränkungen
Die tatsächliche Implementierung ist im Vergleich zu einem voll funktionsfähigen Webserver vereinfacht.
- Unterstützt nur die Extraktion eines einzelnen Parameters pro Handler
- Einfache auf Zeichenketten basierende Temperatursimulation (keine Einheitenumrechnung)
- Grundlegende LED-Steuerung mit nur Ein- und Auszuständen
- Verwendet Pin 9 statt des Standard-Pins 13
Fehlerbehebung
Häufige Probleme
Parameter funktionieren nicht
- URL-Format überprüfen: page?param=value
- Verifizieren Sie, dass die Parameternamen exakt übereinstimmen (Groß-/Kleinschreibung beachten)
- Die aktuelle Implementierung verwendet state für die LED, nicht action
LED-Pin-Probleme
- Dieses Beispiel verwendet Pin 9, nicht Pin 13.
- Vergewissern Sie sich, dass die LED_PIN-Konstante mit Ihrer Hardware übereinstimmt.
Zugriff auf Abfrageparameter
- Verwenden Sie die QueryParams-Struktur, nicht server.arg()
- Durchlaufen Sie params.params[i], um bestimmte Parameter zu finden
Debug-Ausgabe
void debugParameters(const QueryParams& params) {
Serial.println("=== Request Parameters ===");
Serial.println("Params count: " + String(params.count));
for (int i = 0; i < params.count; i++) {
Serial.print(" ");
Serial.print(params.params[i].key);
Serial.print(" = ");
Serial.println(params.params[i].value);
}
Serial.println("========================");
}
Anpassung
Hinzufügen eines neuen Handlers mit Parametern
void handleCustomPage(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
String theme = getParam(params, "theme", "light");
String lang = getParam(params, "lang", "en");
// Process parameters and generate response
String response = "<html><body>";
response += "<h1>Custom Page</h1>";
response += "<p>Theme: " + theme + "</p>";
response += "<p>Language: " + lang + "</p>";
response += "</body></html>";
server.sendResponse(client, response.c_str());
}
// Register the new route in setup()
server.addRoute("/custom", handleCustomPage);
Verbesserung des Templatesystems
Die eigentliche Implementierung verwendet eine einfache Platzhalterersetzung:
String response = TEMPERATURE_PAGE;
response.replace("%TEMPERATURE_VALUE%", temperatureDisplay);
// Add more replacements as needed
response.replace("%UNIT%", unit);
response.replace("%TIMESTAMP%", String(millis()));
Nächste Schritte
- Erkunde WebServerJson.ino für die REST-API-Entwicklung
- Probiere WebServerWithWebSocket.ino für Echtzeit-Kommunikation
- Implementiere die Formularverarbeitung mit POST-Parametern