WiFi-ESP8266入門http（2-2）文件系統-複雜結構的網頁 + 文本框交互WIFI信息
網友教程：http://www.javashuo.com/article/p-usdvdyse-hh.htmljavascript
經過網友教程，咱們搭建了文件系統。在此基礎上，咱們增長WIFI交互。css
現有功能：html
1 輸入默認WIFI信息，ESP8266上電後直接鏈接，獲得分配的IPjava
2 網頁同一個局域網下訪問IP，出現配置界面，告訴ESP8266要鏈接的WIFI信息jquery
將來須要加入;git
1 ESP8266上電進入AP_STA模式，固定IP194.168.4.1 等待手機鏈接AP熱點，經過網頁輸入目標WIFI帳號和密碼。bootstrap
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中要存的網頁信息app
網友未修改的網頁文件 連接：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>
相關文章
- 1. 網頁的基本信息及組成HTML文件的基本結構
- 2. Linux 文件系統的基本結構
- 3. HTTP入門（三）：HTTP報文內的HTTP信息
- 4. Linux文件系統基本結構
- 5. 369_Arduino SD卡文件系統庫基本信息小結
- 6. python+socket實現網絡信息交互及文件傳輸
- 7. linux文件系統結構
- 8. 文件系統結構
- 9. Linux文件系統結構
- 10. unbuntu文件系統結構
- 更多相關文章...
- • HTTP 消息結構 - HTTP 教程
- • C# Windows 文件系統的操作 - C#教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章