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代码

#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

";  

  message += "URI: ";  

  message += server.uri();  

  message += "
Method: ";  

  message += ( server.method() == HTTP_GET ) ? "GET" : "POST";  

  message += "
Arguments: ";  

  message += server.args();  

  message += "
";  

  for ( uint8_t i = 0; i < server.args(); i++ ) {  

    message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "
";  

  }  

  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的样子（加载了布局文件）

<!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>