WiFi-ESP8266入门http（2-2）文件系统-复杂结构的网页 + 文本框交互WIFI信息

 

网友教程：https://blog.csdn.net/solar_Lan/article/details/74231360

通过网友教程，我们搭建了文件系统。在此基础上，我们增加WIFI交互。

现有功能：

1 输入默认WIFI信息，ESP8266上电后直接连接，得到分配的IP

2 网页同一个局域网下访问IP，出现配置界面，告诉ESP8266要连接的WIFI信息

未来需要加入;

1 ESP8266上电进入AP_STA模式，固定IP194.168.4.1  等待手机连接AP热点，通过网页输入目标WIFI账号和密码。

2 ESP8266接收到WIFI信息后，自己去链接。完成配网功能

 

 

 

esp8266代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274

#include <ESP8266WiFi.h>     #include <ESP8266WebServer.h>     #include <FS.h>     ESP8266WebServer server ( 80 );     String ssid = "HUAWEI-H3VBKZ"; // 需要连接的wifi热点名称     String password ="13991320168"; // 需要连接的wifi热点密码     /**     * 根据文件后缀获取html协议的返回内容类型     */     String getContentType(String filename){       if(server.hasArg("download")) return "application/octet-stream";       else if(filename.endsWith(".htm")) return "text/html";       else if(filename.endsWith(".html")) return "text/html";       else if(filename.endsWith(".css")) return "text/css";       else if(filename.endsWith(".js")) return "application/javascript";       else if(filename.endsWith(".png")) return "image/png";       else if(filename.endsWith(".gif")) return "image/gif";       else if(filename.endsWith(".jpg")) return "image/jpeg";       else if(filename.endsWith(".ico")) return "image/x-icon";       else if(filename.endsWith(".xml")) return "text/xml";       else if(filename.endsWith(".pdf")) return "application/x-pdf";       else if(filename.endsWith(".zip")) return "application/x-zip";       else if(filename.endsWith(".gz")) return "application/x-gzip";       return "text/plain";     }     /* NotFound处理     * 用于处理没有注册的请求地址     * 一般是处理一些页面请求     */     void handleNotFound() {       String path = server.uri();       Serial.print("load url:");       Serial.println(path);       String contentType = getContentType(path);       String pathWithGz = path + ".gz";       if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)){         if(SPIFFS.exists(pathWithGz))           path += ".gz";         File file = SPIFFS.open(path, "r");         size_t sent = server.streamFile(file, contentType);         file.close();         return;       }       String message = "File Not Found\n\n";       message += "URI: ";       message += server.uri();       message += "\nMethod: ";       message += ( server.method() == HTTP_GET ) ? "GET" : "POST";       message += "\nArguments: ";       message += server.args();       message += "\n";       for ( uint8_t i = 0; i < server.args(); i++ ) {         message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n";       }       server.send ( 404, "text/plain", message );     }     void handleMain() {       /* 返回信息给浏览器（状态码，Content-type， 内容）       * 这里是访问当前设备ip直接返回一个String       */       Serial.print("handleMain");       File file = SPIFFS.open("/index.html", "r");       size_t sent = server.streamFile(file, "text/html");       file.close();       return;     }     /* 引脚更改处理     * 访问地址为htp://192.162.xxx.xxx/pin?a=XXX的时候根据a的值来进行对应的处理     */     void handlePin() {       if(server.hasArg("a")) { // 请求中是否包含有a的参数         String action = server.arg("a"); // 获得a参数的值         if(action == "on") { // a=on           digitalWrite(2, LOW); // 点亮8266上的蓝色led，led是低电平驱动，需要拉低才能亮           server.send ( 200, "text/html", "Pin 2 has turn on"); return; // 返回数据         } else if(action == "off") { // a=off           digitalWrite(2, HIGH); // 熄灭板载led           server.send ( 200, "text/html", "Pin 2 has turn off"); return;         }         server.send ( 200, "text/html", "unknown action"); return;       }       server.send ( 200, "text/html", "action no found");     }     void handleWifi(){            if(server.hasArg("config")) { // 请求中是否包含有a的参数         String config = server.arg("config"); // 获得a参数的值           String wifiname;         String wifipwd;     if(config == "on") { // a=on             if(server.hasArg("name")) { // 请求中是否包含有a的参数           wifiname = server.arg("name"); // 获得a参数的值           }                 if(server.hasArg("pwd")) { // 请求中是否包含有a的参数            wifipwd = server.arg("pwd"); // 获得a参数的值               }                                String backtxt= "已经连接WIFI！ 名称:"+ wifiname  +"     密码:"+ wifipwd ;           server.send ( 200, "text/html", backtxt);           return;                             } else if(config == "off") { // a=off                   server.send ( 200, "text/html", "config  is off!");         return;       }         server.send ( 200, "text/html", "unknown action"); return;       }       server.send ( 200, "text/html", "action no found");         }   void setup() {        // 日常初始化网络       pinMode(2, OUTPUT);       Serial.begin ( 115200 );       SPIFFS.begin();       int connectCount = 0;       WiFi.begin ( ssid.c_str(), password.c_str() );       while ( WiFi.status() != WL_CONNECTED ) {         delay ( 1000 );         Serial.print ( "." );         if(connectCount > 30) {           Serial.println( "Connect fail!" );           break;         }         connectCount += 1;       }       if(WiFi.status() == WL_CONNECTED) {         Serial.println ( "" );         Serial.print ( "Connected to " );         Serial.println ( ssid );         Serial.print ( "IP address: " );         Serial.println ( WiFi.localIP() );         connectCount = 0;       }       server.on ("/", handleMain); // 绑定‘/’地址到handleMain方法处理     server.on ("/pin", HTTP_GET, handlePin); // 绑定‘/pin’地址到handlePin方法处理      server.on ("/wifi", HTTP_GET, handleWifi); // 绑定‘/pin’地址到handlePin方法处理     server.onNotFound ( handleNotFound ); // NotFound处理       server.begin();       Serial.println ( "HTTP server started" );     }            void loop() {       /* 循环处理，因为ESP8266的自带的中断已经被系统占用，       * 只能用过循环的方式来处理网络请求       */       server.handleClient();     }

　　

esp8266 flash中要存的网页信息

网友未修改的网页文件   链接：https://pan.baidu.com/s/1vk6xmsYZuJe8CMFzJNKdJw 密码：oiz2

工程文件夹同目录 data

data文件夹下

自己修改 index网页文件

直接打开的样子（没有布局文件）

 ---比较丑陋---

通过ESP8266返回打开i的样子（加载了布局文件）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

<!DOCTYPE html> <html lang="zh-CN">   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>ESP8266 配置信息</title>     <link href="css/bootstrap.min.css" rel="stylesheet">   </head>       <body>     <nav class="navbar navbar-inverse">       <div class="container">         <div class="navbar-header">           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">             <span class="sr-only">Toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>           </button>           <a class="navbar-brand" href="#">ESP8266</a>         </div>       </div>     </nav>           <div class="container">         <ul class="nav nav-tabs">           <li role="presentation" class="active"><a href="#">主页</a></li>           <li role="presentation" class="active"><a href="#">其它</a></li>         </ul>                   <div class="starter-template">             <h1>欢迎</h1>             <button onclick='setPinValue("on")' >点亮板载LED</button></br>             <button onclick='setPinValue("off")' >熄灭板载LED</button>                      <p>状态消息: <span id="txtState"></span></p>         </div>                   <div class="starter-template">         <h3>连接WIFI:</h3>             <form action="">             名称: <input type="text" id="wifiname"  />             </form>             <form action="">             密码: <input type="text" id="wifipwd"  />             </form></br>                           <button onclick='setWifi(wifiname.value,wifipwd.value)' >连接</button>                              <p>连接状态: <span id="wifiState"></span></p>         </div>                  </div>     <script src="js/jquery.min.js"></script>     <script src="js/bootstrap.min.js"></script>                 <script type="text/javascript">         function setPinValue(value) {             alert("按键点击！");             var xmlhttp;             if (value.length==0)             {             document.getElementById("txtState").innerHTML="请点击正确按键！";             return;             }                           if (window.XMLHttpRequest)             {             // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码             xmlhttp=new XMLHttpRequest();             }             else             {             // IE6, IE5 浏览器执行代码             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");             }                           xmlhttp.onreadystatechange = function() {             if (xmlhttp.readyState==4 && xmlhttp.status==200){             //alert(xmlhttp.responseText);             //alert("操作成功");             document.getElementById("txtState").innerHTML = xmlhttp.responseText;              }             }                           var requestString = "/pin?a=" + value + "&pin=2";             xmlhttp.open("GET", requestString, true);             xmlhttp.send(null);         }                   function setWifi(name,pwd) {             alert("按键点击！");             var xmlhttp;             if (name.length==0)             {             document.getElementById("wifiState").innerHTML="请输入WIFI信息！";             return;             }                           if (window.XMLHttpRequest)             {             // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码             xmlhttp=new XMLHttpRequest();             }             else             {             // IE6, IE5 浏览器执行代码             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");             }                           xmlhttp.onreadystatechange = function() {             if (xmlhttp.readyState==4 && xmlhttp.status==200){             //alert(xmlhttp.responseText);             //alert("操作成功");             document.getElementById("wifiState").innerHTML = xmlhttp.responseText;              }             }                           var requestString = "/wifi?config=on" + "&name="+name+"&pwd="+pwd;             xmlhttp.open("GET", requestString, true);             xmlhttp.send(null);         }               </script>   </body> </html>