网友教程: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. memcached 源码阅览 一

    想要快速了解memcached内部原理么?那么赶紧离开本页,这会耽误您的时间. 不知时隔多少时间,今天受了些刺激,在码农路上开始犹豫起来,但是想想自己也没其他本身,就只好放下王者荣耀,重新看看技术内容 ...

  2. 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = ...

  3. 微信小程序-查询快递

    1.新建快速启动项目 2.在设置里面勾选不校验合法域名,以防编译报错 3.在app.json中改一下窗口表现:app.json—"navigationBarTitleText": ...

  4. java读写properties工具代码

    package test612; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExc ...

  5. 解决ie6中png图片格式不兼容问题

    在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...

  6. Django 系统日志logging

    Django使用Python内建的logging模块去建造自己的系统日志的,如果你想详细了解这个模块的话,请自己去看python的说明文档,这里仅仅介绍Django中的日志系统. 日志配置包括四个部分 ...

  7. Python基于dtw实现股票预测【多线程】

    # -*- coding: utf-8 -*- """ Created on Tue Dec 4 08:53:08 2018 @author: zhen "&q ...

  8. MSSQL-sql server-视图简介

    转自:http://www.maomao365.com/?p=4511 一.视图简介 视图在MSSQL中是一张虚拟表. 视图的数据由sql语句定义生成,视图中指定新生成数据的列名称和数据格式,视图中的 ...

  9. C#核心基础--类的继承

    继承 一个类可以继承自另一个类.在 C#中,类与类之间只存在单一继承.也就是说,一个类的直接基类只能有一个.当类与类之间实现继承的时候,子类可以将它的直接基类的所有成员当做自己的成员,除了类的静态构造 ...

  10. wifi破解基础及工具的使用

    cdlinux学习,WiFi破解 cdlinux下载.vm安装 cdlinux下载 密码:vxao - 注意:cdlinux必须是在连接网卡的情况下,才能使用 水滴的使用 抓包.跑包 选择信号强度高, ...