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 ...
随机推荐
- memcached 源码阅览 一
想要快速了解memcached内部原理么?那么赶紧离开本页,这会耽误您的时间. 不知时隔多少时间,今天受了些刺激,在码农路上开始犹豫起来,但是想想自己也没其他本身,就只好放下王者荣耀,重新看看技术内容 ...
- 使用JavaScript获取URL中的参数(两种方法)
本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = ...
- 微信小程序-查询快递
1.新建快速启动项目 2.在设置里面勾选不校验合法域名,以防编译报错 3.在app.json中改一下窗口表现:app.json—"navigationBarTitleText": ...
- java读写properties工具代码
package test612; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExc ...
- 解决ie6中png图片格式不兼容问题
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...
- Django 系统日志logging
Django使用Python内建的logging模块去建造自己的系统日志的,如果你想详细了解这个模块的话,请自己去看python的说明文档,这里仅仅介绍Django中的日志系统. 日志配置包括四个部分 ...
- Python基于dtw实现股票预测【多线程】
# -*- coding: utf-8 -*- """ Created on Tue Dec 4 08:53:08 2018 @author: zhen "&q ...
- MSSQL-sql server-视图简介
转自:http://www.maomao365.com/?p=4511 一.视图简介 视图在MSSQL中是一张虚拟表. 视图的数据由sql语句定义生成,视图中指定新生成数据的列名称和数据格式,视图中的 ...
- C#核心基础--类的继承
继承 一个类可以继承自另一个类.在 C#中,类与类之间只存在单一继承.也就是说,一个类的直接基类只能有一个.当类与类之间实现继承的时候,子类可以将它的直接基类的所有成员当做自己的成员,除了类的静态构造 ...
- wifi破解基础及工具的使用
cdlinux学习,WiFi破解 cdlinux下载.vm安装 cdlinux下载 密码:vxao - 注意:cdlinux必须是在连接网卡的情况下,才能使用 水滴的使用 抓包.跑包 选择信号强度高, ...