ESP8266:通过网页控制开发板内置LED的状态

划句顾

data资源包：
data.zip (1020 Bytes, 下载次数: 0)

2021-9-4 09:44 上传

点击文件名下载附件

                               
登录/注册后可看大图

代码如下：

1. /***
   
2. *author:LaoGu
   
3. *time  :2021/9/3
   
4. *purpose:利用网页控制ESP8266开发板的内置LED引脚
   
5. **/
   
6. #include<ESP8266WiFi.h>
   
7. #include<ESP8266WiFiMulti.h>
   
8. #include<ESP8266WebServer.h>
   
9. #include<FS.h>
   
10. 
    
11. ESP8266WiFiMulti wifiMulti;
    
12. 
    
13. ESP8266WebServer esp8266_server(80);
    
14. 
    
15. void setup() {
    
16.   Serial.begin(9600);
    
17.   Serial.println("");
    
18. 
    
19.   pinMode(LED_BUILTIN,OUTPUT); //初始化NodeMCU控制板载LED引脚为OUTPUT
    
20. 
    
21.   wifiMulti.addAP("小G的wife","g5201314");
    
22.   wifiMulti.addAP("nanjishit","g5201314");
    
23. 
    
24.   Serial.println("Connecting ...");
    
25. 
    
26.   int i = 0 ;
    
27.   while(wifiMulti.run()!=WL_CONNECTED){
    
28.     delay(1000);
    
29.     Serial.print(i++); Serial.print(" ");
    
30.     }
    
31. 
    
32.   Serial.println("/n");
    
33.   Serial.print("Connected to ");
    
34.   Serial.println(WiFi.SSID());
    
35.   Serial.print("IP address:");
    
36.   Serial.println(WiFi.localIP());
    
37. 
    
38.   if(SPIFFS.begin()){
    
39.     Serial.println("SPIFFS Started.");
    
40.     }else {
    
41.       Serial.println("SPIFFS Failed to start.");
    
42.       }
    
43. 
    
44.    esp8266_server.on("/LED-Control",handleLEDControl);
    
45.    esp8266_server.onNotFound(handleUserRequest);
    
46. 
    
47.    esp8266_server.begin();  //启动网站服务
    
48.    Serial.println("HTTP server started");
    
49. }
    
50. 
    
51. void loop() {
    
52.   esp8266_server.handleClient(); //处理用户请求
    
53. }

复制代码

                               
登录/注册后可看大图

1. // 处理/LED-Control请求
   
2. void handleLEDControl(){
   
3.   bool ledStatus = digitalRead(LED_BUILTIN);   //此变量用于存放LED的状态
   
4.   ledStatus == HIGH ? digitalWrite(LED_BUILTIN,LOW) : digitalWrite(LED_BUILTIN,HIGH);  //点亮或熄灭LED
   
5. 
   
6.   esp8266_server.sendHeader("location","/LED.html");
   
7.   esp8266_server.send(303);
   
8. 
   
9.   }

复制代码

                               
登录/注册后可看大图

1. void handleUserRequest(){
   
2. 
   
3.   //获取用户请求资源  uri():使用该函数可获取客户端发送的HTTP请求行中的请求资源路径信息。
   
4.   String reqResource = esp8266_server.uri();
   
5.   Serial.print("reqResource: ");
   
6.   Serial.println(reqResource);
   
7. 
   
8.   //通过handleFileRead函数处理用户请求资源
   
9.   bool fileReadOK = handleFileRead(reqResource);
   
10. 
    
11.   //如果在SPIFFS无法找到用户访问的资源，则回复404
    
12.   if(!fileReadOK){
    
13.     esp8266_server.send(404,"text/plain","404: Not Found");
    
14.     }
    
15.   }

复制代码

                               
登录/注册后可看大图

1. //处理浏览器HTTP访问
   
2. bool handleFileRead(String resource){
   
3.   if(resource.endsWith("/")){
   
4.     resource = "/index.html";
   
5.     }
   
6. 
   
7.    String contentType = getContentType(resource);  //获取文件类型
   
8. 
   
9.    if(SPIFFS.exists(resource)){
   
10.     File file = SPIFFS.open(resource,"r");
    
11.     esp8266_server.streamFile(file,contentType);
    
12.     file.close();
    
13.     return true;
    
14.     }
    
15.    return false;
    
16. }

复制代码

                               
登录/注册后可看大图

1. // 获取文件类型
   
2. String getContentType(String filename){
   
3.   if(filename.endsWith(".htm")) return "text/html";
   
4.   else if(filename.endsWith(".html")) return "text/html";
   
5.   else if(filename.endsWith(".css")) return "text/css";
   
6.   else if(filename.endsWith(".js")) return "application/javascript";
   
7.   else if(filename.endsWith(".png")) return "image/png";
   
8.   else if(filename.endsWith(".gif")) return "image/gif";
   
9.   else if(filename.endsWith(".jpg")) return "image/jpeg";
   
10.   else if(filename.endsWith(".ico")) return "image/x-icon";
    
11.   else if(filename.endsWith(".xml")) return "text/xml";
    
12.   else if(filename.endsWith(".pdf")) return "application/x-pdf";
    
13.   else if(filename.endsWith(".zip")) return "application/x-zip";
    
14.   else if(filename.endsWith(".gz")) return "application/x-gzip";
    
15.   return "text/plain";
    
16. }

复制代码

                               
登录/注册后可看大图

串口：

                               
登录/注册后可看大图

网页：

                               
登录/注册后可看大图

效果：
视频

小伤口

厉害呀，我也想学

划句顾

小伤口 发表于 2021-9-4 12:18
厉害呀，我也想学

你那些更厉害

771861171@qq.co

那就可以取联网状态来显示灯亮灯灭