ESP32 - Serveur Web de chaîne de requête - Paramètres d'URL dynamiques
Exemple de chaînes de requête du serveur Web - serveur dynamique à pages multiples
Vue d'ensemble
Cet exemple montre comment créer un serveur web dynamique à pages multiples qui utilise les paramètres de requête URL pour fournir un contenu interactif et contrôler les fonctionnalités avec une navigation fluide entre les pages.
Fonctionnalités
- Navigation sur plusieurs pages avec un contenu dynamique basé sur les paramètres d'URL
- Conversion des unités de température (Celsius/Fahrenheit) via des paramètres de requête
- Contrôle des LED avec des paramètres de chaîne de requête
- Génération dynamique de contenu basée sur l'entrée utilisateur
- Mise en page professionnelle multi-pages avec une navigation cohérente
- Analyse et validation des paramètres d'URL
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Installation de la bibliothèque
Suivez ces instructions étape par étape:
- Si c'est la première fois que vous utilisez l'ESP32, reportez-vous au tutoriel sur la configuration de l'environnement ESP32 dans l'IDE Arduino.
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte ESP32 appropriée (par exemple, ESP32) et le port COM.
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône située sur le côté gauche de l'IDE Arduino.
- Recherchez Web Server for ESP32 et localisez la bibliothèque mWebSockets de DIYables.
- Cliquez sur le bouton Install pour ajouter la bibliothèque mWebSockets.
Exemple de chaînes de requête du serveur Web
- Dans l'IDE Arduino, allez dans Fichier Exemples Serveur Web pour ESP32 WebServerQueryStrings pour ouvrir le code d'exemple
Structure du code
- home.h: Modèle HTML de la page d'accueil
- temperature.h: Modèle de page de surveillance de la température
- led.h: Modèle de page de contrôle des LED
- WebServerQueryStrings.ino: Logique principale du serveur
Connexion du circuit
Aucun composant externe nécessaire — cet exemple utilise la LED intégrée sur la broche 13.
Caractéristiques des paramètres de requête
Paramètres de la page de température
- unit=c ou unit=celsius - Afficher la température en degrés Celsius
- unit=f ou unit=fahrenheit - Afficher la température en degrés Fahrenheit
- Aucun paramètre - Par défaut : Celsius
Paramètres de contrôle des LED
- state=on - Allumer la LED
- state=off - Éteindre la LED
Instructions d'installation
1. Configuration du réseau
Modifiez directement les identifiants Wi-Fi dans le fichier WebServerQueryStrings.ino :
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Téléverser le code et surveiller la sortie
- Connectez votre ESP32 à votre ordinateur
- Sélectionnez la bonne carte et le port dans l'IDE Arduino
- Téléversez le sketch WebServerQueryStrings.ino
- Ouvrez le moniteur série (à 9600 bauds)
- Attendez la connexion Wi‑Fi
- Notez l'adresse IP affichée
- Si vous ne voyez pas l'adresse IP dans le moniteur série, appuyez sur le bouton de réinitialisation sur la carte ESP32
Exemples d'utilisation
Ouvrez votre navigateur Web et entrez l'adresse IP affichée dans le Moniteur Série pour accéder au serveur Web.
Tester la fonction de surveillance de la température :
- Cliquez sur le menu « Température ».
- Affichez l’affichage de la température. Cliquez sur chaque bouton pour changer l’unité de température.
Tester la fonction de contrôle de la DEL:
- Cliquez sur le menu « Contrôle des LED ». Vous verrez l’interface Web ci-dessous :
- Allumez et éteignez la LED à l’aide des boutons fournis.
- Observez l’état de la LED intégrée sur la carte ESP32 qui se met à jour instantanément.
Accéder à différentes pages
Page d'accueil
- URL: http://your-esp32-ip/
- Fonctionnalités: Page d'accueil avec un menu de navigation
Page de température (par défaut - Celsius)
- URL: http://your-esp32-ip/temperature
- Affichage: Température en degrés Celsius avec sélecteur d'unité
Température en Fahrenheit
- URL: http://your-esp32-ip/temperature?unit=f
- URL: http://your-esp32-ip/temperature?unit=fahrenheit
- Affichage: Température convertie en degrés Fahrenheit
Contrôle des LED
- Allumer: http://your-esp32-ip/led?state=on
- Éteindre: http://your-esp32-ip/led?state=off
Explication du code
Traitement des paramètres de requête
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());
}
Contrôle de LED avec des paramètres de requête
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());
}
Validation des paramètres
// 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 == "");
}
Modèles HTML avec contenu dynamique
Modèle de page de température
<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>
Modèle de contrôle des DEL
<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>
Fonctionnalités avancées
Configuration des itinéraires
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);
}
Fonctions utilitaires pour les paramètres de requête
// 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;
}
Aides à la construction d'URL
// Helper to build URLs with parameters
String buildLedUrl(String state) {
return "/led?state=" + state;
}
String buildTempUrl(String unit) {
return "/temperature?unit=" + unit;
}
Notes d'implémentation réelles
Limitations actuelles
L'implémentation réelle est simplifiée par rapport à un serveur web complet :
- Ne prend en charge qu'une extraction d'un seul paramètre par gestionnaire
- Simulation de température simple basée sur des chaînes (aucune conversion d'unités)
- Contrôle LED basique avec uniquement les états allumés et éteints
- Utilise la broche 9 au lieu de la broche standard 13
Dépannage
Problèmes courants
Les paramètres ne fonctionnent pas.
- Vérifier le format de l'URL : page?param=value
- Vérifier que les noms des paramètres correspondent exactement (sensibilité à la casse)
- L'implémentation actuelle utilise state pour la LED, et non action
Problèmes des broches LED
- Cet exemple utilise la broche 9, et non la broche 13
- Vérifiez que la constante LED_PIN correspond à votre matériel
Accès au paramètre de requête
- Utilisez la structure QueryParams, pas server.arg()
- Parcourez params.params[i] pour trouver des paramètres spécifiques
Sortie de débogage
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("========================");
}
Personnalisation
Ajout d’un nouveau gestionnaire avec des paramètres
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);
Amélioration du système de modèles
L'implémentation réelle utilise un simple remplacement des espaces réservés :
String response = TEMPERATURE_PAGE;
response.replace("%TEMPERATURE_VALUE%", temperatureDisplay);
// Add more replacements as needed
response.replace("%UNIT%", unit);
response.replace("%TIMESTAMP%", String(millis()));
Étapes suivantes
- Explorez WebServerJson.ino pour le développement d'une API REST
- Essayez WebServerWithWebSocket.ino pour la communication en temps réel
- Implémentez la gestion des formulaires avec des paramètres POST