这个项目的使用需求是这样的，有一个管理员老师给我提了一个需求，学校里的所有教室每天都会安排专门的学生去打扫卫生，而值日需要打扫卫生的学生来管理员办公室签到，签到的时候需要有人在办公室值守，这就浪费了一个人的宝贵时间。他就问我可不可以做一个签到机，不用让人一直守在那里，我说当然可以，而且还很简单，下面我们说干就干。
此HTML页面要适配手机，使用一些简单的JavaScript代码，和一些简单的css代码，因为要采集学生的数据，此处我们主要学习表单《form》《input》的具体使用，让我们现学现用。
此处编写html代码我们可以在vscode中进行，配合liveServer插件即时查看网页编写效果，非常方便。
如果不懂html编程，以下代码是固定的，可以适配所有型号的手机
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>值日签到表</title>
</head>
<body>
</body>
</html>
<form action="/ok" >
<label for="" id="time1">签到时间：</label><br>
<input type="text" name="time" id="time" value="" readonly>
<br><br>
<label for="">请选择 班级：</label><br>
<select name="nianji">
<option value="2016级">2016级</option>
<option value="2017级">2017级</option>
<option value="2018级">2018级</option>
<option value="2019级">2019级</option>
<option value="2020级">2020级</option>
</select>
<select name="zhuanye">
<option value="财务管理">财务管理</option>
<option value="酒店管理">酒店管理</option>
<option value="计算机科学技术">计算机科学技术</option>
</select>
<select name="benzhuan">
<option value="本科">本科</option>
<option value="专科">专科</option>
<option value="专升本">专升本</option>
</select>
<select name="banji">
<option value="1班">1班</option>
<option value="2班">2班</option>
<option value="3班">3班</option>
<option value="4班">4班</option>
</select><br>
<br>
<label for="">请选择 打扫教室：</label><br>
<select name="lou" id="lou" >
<option value="自勉堂">自勉堂</option>
</select>
<select name="jiaoshihao" id="jiaoshihao" >
<option value="501">501</option>
<option value="502">502</option>
<option value="503">503</option>
<option value="504">504</option>
<option value="505">505</option>
<option value="506">506</option>
</select>
<br><br>
<label for="">请输入 姓名：</label><br>
<input id="xingming" type="text" name="xingming" minlength="2" maxlength="3" required >
<br><br>
<label for="">请输入 电话：</label><br>
<input id="dianhua" type="text" name="dianhua" minlength="11" maxlength="11" required >
<br><br>
<input id="tijiao" type="submit" value="签到">
</form>
<script>
var myDate = new Date();
document.getElementById("time").value =myDate.toLocaleString();
</script>
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <FS.h>
这是最笨的方法, 也比较麻烦, 后期可以有更简单的方法处理这些html文件
const char responseHTML[] PROGMEM= ""
"<!DOCTYPE html>"
"<html lang=\"zh\">"
"<head>"
" <meta charset=\"UTF-8\">"
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\">"
" <title>自勉堂值日签到处</title>";
String responseHTMLOk = ""
"<!DOCTYPE html>"
"<html lang=\"zh\">"
"<head>"
" <meta charset=\"UTF-8\">"
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\">"
" <title>JavaScript</title>"
"</head>"
"<body>"
" <h1>签到成功！</h1>"
"</body>"
"</html>";
void setup() {
Serial.begin(115200);
SPIFFS.begin();
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP("自勉堂值日签到表");
// if DNSServer is started with "*" for domain name, it will reply with
// provided IP to all DNS request
dnsServer.start(DNS_PORT, "*", apIP); //强制门户认证
// replay to all requests with same HTML
webServer.on("/ok", handleOk);
webServer.on("/list",handleList);
webServer.onNotFound([](){
webServer.send(200, "text/html", responseHTML);
});
webServer.begin();
}
void handleOk(){
String time,nianji,zhuanye,benzhuan,banji,lou,jiaoshihao,xingming,dianhua;//获取浏览器发来的formdata
time = webServer.arg("time");
nianji = webServer.arg("nianji");
zhuanye = webServer.arg("zhuanye");
benzhuan = webServer.arg("benzhuan");
banji = webServer.arg("banji");
lou = webServer.arg("lou");
jiaoshihao = webServer.arg("jiaoshihao");
xingming = webServer.arg("xingming");
dianhua = webServer.arg("dianhua");
if (xingming == "郭闪" && dianhua == "13513710972") {
handleList();
} else {
File list = SPIFFS.open("/list.txt","a+"); //将签到信息写入到list.txt文件中
list.print(time);list.print("--");
list.print(nianji);list.print("--");
list.print(zhuanye);list.print("--");
list.print(benzhuan);list.print("--");
list.print(banji);list.print("--");
list.print(lou);list.print("--");
list.print(jiaoshihao);list.print("--");
list.print(xingming);list.print("--");
list.println(dianhua);
list.close();
webServer.send(200,"text/html",responseHTMLOk + time + "<br>" + nianji + zhuanye + benzhuan + banji + "<br>" + lou + jiaoshihao + "<br>" + xingming + "<br>" + dianhua);
webServer.client().stop();
}
}
将list.txt文件发送到浏览器
void handleList(){
File list = SPIFFS.open("/list.txt","r");
webServer.streamFile(list,"text/plain");
list.close();
}
void loop() {
dnsServer.processNextRequest();
webServer.handleClient();
}