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\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信息的更多相关文章
- WiFi-ESP8266入门http(2-1)文件系统-复杂结构的网页
https://blog.csdn.net/solar_Lan/article/details/74231360 用到的网页文件:链接:https://pan.baidu.com/s/1vk6xmsY ...
- blinker语音控制Arduino/esp8266开关灯-滑动条使用-文本框交互
总链接: https://www.arduino.cn/thread-78393-1-1.html 语音控制:https://doc.blinker.app/?file=005-App%E4%BD% ...
- 4-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(为域名申请SSl证书)
3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(购买域名,域名绑定IP) 然后就是等着..... 假设可以了 咱呢是配置MQTT实现SSL安全加密通信,所以 ...
- 3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(购买域名,域名绑定IP)
2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(监听Wi-Fi和APP的数据) 因为安全连接是和域名绑在一块的,所以需要申请域名 有没有不知道域名是什么的, ...
- 2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(监听Wi-Fi和APP的数据)
1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(来看一下怎么样监听网络数据,监听电脑上位机软件的数据) 因为那个软件只能监听咱自己电脑上的数据,所以咱就用电 ...
- 1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(来看一下怎么样监听网络数据,监听电脑上位机软件的数据)
首先安装网络监听软件 运行这个软件 这个软件安装到电脑上,默认是监听咱电脑上的网络通信 咱们先监听电脑的软件的网络通信数据,然后再说怎么监听Wi-Fi和APP的软件的网络通信数据 咱就监听咱基础篇的 ...
- 4-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(云端电脑(Windows)安装配置数据库,使用本地Navicat for MySQL和手机APP 远程连接测试)
3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(安装配置数据库,使用Navicat for MySQL和手机APP 连接测试) 根据前面的教程把软件复制到云 ...
- 3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(安装配置数据库,使用Navicat for MySQL和手机APP 连接测试)
2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(数据库简单说明) https://www.mysql.com/ 咱用安装版的 我把自己下载的放在了这里 现在 ...
- 2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(数据库简单说明)
1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(视频总揽) 这里有个教程 http://www.cnblogs.com/best/p/6517755.h ...
随机推荐
- K8S dashboard
kubernetes-dashboard有两种认证方式,一个token认证,另一个是Kubeconfig文件的认证.这个时候的认证不是UserAccount而是获取kubernetes集群资源信息的s ...
- css中的颜色
我常用的是win10里面的自带的3D画图工具里面的颜色表 CSS 设置颜色的几种方式: 1.颜色名 2.rgb值 3十六进制表示 4. HSL color values CSS3 adds numer ...
- 关系数据库标准语言SQL——概述
SQL是一种介于关系代数与关系演算之间的结构化查询语言,其功能并不仅仅是查询.SQL是一个通用的.功能极强的关系数据库语言.SQL(Structured Query Language)结构化查询语 ...
- 章节四、1-if条件语句
package introduction5; public class ConditionalStatement { public static void main(String[] args) { ...
- Ubuntu-18.04安装Docker
Docker 介绍 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制 ...
- hadoop java上传文件
import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io.InputStream; impo ...
- js实现复选框的全选、全不选和反选
js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...
- Android内嵌PDF预览
一.在对应模块的build.gradle文件中加入依赖 dependencies { implementation 'com.github.barteksc:android-pdf-viewer:3. ...
- Windows Server 2016-Active Directory复制概念(二)
本章继续补充有关Active Directory复制概念,具体内容如下: 连接对象: 连接对象是一个Active Directory对象,表示从源域控制器到目标域控制器的复制连接.域控制器是单个站点的 ...
- Windows Server 2016-Wbadmin命令行备份域控制器
在上一章我们讲到Windows Server 2016-图形化备份域控制器的方法,本章我们聊聊如何通过命令行Wbadmin对域控制器进行备份.在Windows Server Active Direct ...