网友教程: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\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的样子(加载了布局文件)

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

  

WiFi-ESP8266入门http(2-2)文件系统-复杂结构的网页 + 文本框交互WIFI信息的更多相关文章

  1. WiFi-ESP8266入门http(2-1)文件系统-复杂结构的网页

    https://blog.csdn.net/solar_Lan/article/details/74231360 用到的网页文件:链接:https://pan.baidu.com/s/1vk6xmsY ...

  2. blinker语音控制Arduino/esp8266开关灯-滑动条使用-文本框交互

    总链接:  https://www.arduino.cn/thread-78393-1-1.html 语音控制:https://doc.blinker.app/?file=005-App%E4%BD% ...

  3. 4-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(为域名申请SSl证书)

    3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(购买域名,域名绑定IP) 然后就是等着..... 假设可以了 咱呢是配置MQTT实现SSL安全加密通信,所以 ...

  4. 3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(购买域名,域名绑定IP)

    2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(监听Wi-Fi和APP的数据) 因为安全连接是和域名绑在一块的,所以需要申请域名 有没有不知道域名是什么的, ...

  5. 2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(监听Wi-Fi和APP的数据)

    1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(来看一下怎么样监听网络数据,监听电脑上位机软件的数据) 因为那个软件只能监听咱自己电脑上的数据,所以咱就用电 ...

  6. 1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(来看一下怎么样监听网络数据,监听电脑上位机软件的数据)

    首先安装网络监听软件 运行这个软件 这个软件安装到电脑上,默认是监听咱电脑上的网络通信 咱们先监听电脑的软件的网络通信数据,然后再说怎么监听Wi-Fi和APP的软件的网络通信数据 咱就监听咱基础篇的 ...

  7. 4-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(云端电脑(Windows)安装配置数据库,使用本地Navicat for MySQL和手机APP 远程连接测试)

    3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(安装配置数据库,使用Navicat for MySQL和手机APP 连接测试) 根据前面的教程把软件复制到云 ...

  8. 3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(安装配置数据库,使用Navicat for MySQL和手机APP 连接测试)

    2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(数据库简单说明) https://www.mysql.com/ 咱用安装版的 我把自己下载的放在了这里 现在 ...

  9. 2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(数据库简单说明)

    1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(视频总揽) 这里有个教程   http://www.cnblogs.com/best/p/6517755.h ...

随机推荐

  1. K8S dashboard

    kubernetes-dashboard有两种认证方式,一个token认证,另一个是Kubeconfig文件的认证.这个时候的认证不是UserAccount而是获取kubernetes集群资源信息的s ...

  2. css中的颜色

    我常用的是win10里面的自带的3D画图工具里面的颜色表 CSS 设置颜色的几种方式: 1.颜色名 2.rgb值 3十六进制表示 4. HSL color values CSS3 adds numer ...

  3. 关系数据库标准语言SQL——概述

      SQL是一种介于关系代数与关系演算之间的结构化查询语言,其功能并不仅仅是查询.SQL是一个通用的.功能极强的关系数据库语言.SQL(Structured Query Language)结构化查询语 ...

  4. 章节四、1-if条件语句

    package introduction5; public class ConditionalStatement { public static void main(String[] args) { ...

  5. Ubuntu-18.04安装Docker

    Docker 介绍 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制 ...

  6. hadoop java上传文件

    import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io.InputStream; impo ...

  7. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  8. Android内嵌PDF预览

    一.在对应模块的build.gradle文件中加入依赖 dependencies { implementation 'com.github.barteksc:android-pdf-viewer:3. ...

  9. Windows Server 2016-Active Directory复制概念(二)

    本章继续补充有关Active Directory复制概念,具体内容如下: 连接对象: 连接对象是一个Active Directory对象,表示从源域控制器到目标域控制器的复制连接.域控制器是单个站点的 ...

  10. Windows Server 2016-Wbadmin命令行备份域控制器

    在上一章我们讲到Windows Server 2016-图形化备份域控制器的方法,本章我们聊聊如何通过命令行Wbadmin对域控制器进行备份.在Windows Server Active Direct ...