目标需求
利用esp32的WebServer功能，展示一个网页，对里面的参数进行配置，并以json文本格式保存到flash里面。
1、定义HTML
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>采集器配置</title>
<link rel="stylesheet" href="http://www.kanzz.net/res/eve.css">
</head>
<body>
<form id="config-form" autocomplete="off">
<div class="form-item">
<label for="versioin">软件版本:</label>
<input type="text" id="versioin" name="versioin" value="%VERSION%" value="1.0">
</div>
<div class="form-item">
<label for="sn">编号:</label>
<input type="text" id="sn" name="sn" value="%SN%" required>
</div>
<div class="form-item">
<label for="ip">IP 地址：</label>
<input type="text" id="ip" name="ip" value="%MYIP%" required>
</div>
<div class="form-item">
<label for="mask">子网掩码：</label>
<input type="text" id="mask" name="mask" value="%MYMASK%" required>
</div>
<div class="form-item">
<label for="gateway">网关：</label>
<input type="text" id="gateway" name="gateway" value="%GATEWAY%" required>
</div>
<div class="form-item">
<label for="ssid">WiFi SSID:</label>
<input type="text" id="ssid" name="ssid" value="%SSID%" required>
</div>
<div class="form-item">
<label for="wifipwd">WiFi Password:</label>
<input type="text" id="wifipwd" name="wifipwd" value="%WIFIPWD%">
</div>
<div class="form-item">
<label for="waittime">拉取时间(秒):</label>
<input type="text" id="waittime" name="waittime" value="%WAITTIME%">
</div>
<div class="form-item">
<label for="apiurl">推送接⼝:</label>
<input type="text" id="apiurl" name="apiurl" value="%APIURL%">
</div>
<div class="form-item">
<label for="appid">AppID:</label>
<input type="text" id="appid" name="appid" value="%APPID%">
</div>
<div class="form-item">
<label for="secret">Secret:</label>
<input type="text" id="secret" name="secret" value="%SECRET%">
</div>
<div class="form-item">
<button type="submit">保存配置</button>
</div>
</form>
</body>
</html>
)rawliteral";const char info_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>采集器配置</title>
<link rel="stylesheet" href="http://www.kanzz.net/res/eve.css">
</head>
<body>
<div style="margin:100px auto;width:400px;">
<div style="color: #060;font-size: 16px;line-height: 30px;margin: 20px 0;">修改完成!</div>
<div class="button"><button id="back" style="width: 160px;height: 40px;line-height: 30px;border: 1px solid #999;color: #fff;background-color: #5cd6b2;border: none;border-radius: 4px;box-shadow: 4px 4px 4px #999;cursor: pointer;">返回</button></div>
</div>
<script>
document.getElementById('back').addEventListener('click', function(event) {
location.href = '/';
})
</script>
</body>
</html>
)rawliteral";其中定义了一些变量，展示页面的时候会用变量来替代，如：
<div class="form-item">
<label for="ssid">WiFi SSID:</label>
<input type="text" id="ssid" name="ssid" value="%SSID%" required>
</div>代码中的 value="%SSID%"
2、安装ESPAsyncWebServer
3、定义JSON字符串
String jsonStr = "{\"version\": \"1.1\", \"sn\":\"2021\", \"mask\":\"255.255.255.0\", \"gateway\":\"192.168.0.1\", \"waittime\":\"0.5\", \"apiurl\":\"https://\", \"appid\":\"appid12345\", \"secret\":\"secret\"}";4、读取Flash中的JSON文件
String readJsonFile()
{
File configFile = SPIFFS.open("/config.json", FILE_READ);
if (!configFile) {
Serial.println("Failed to open config file");
return "";
}
if(configFile.available())
{
String line = configFile.readString();
configFile.close();
return line;
}
}5、保存JSON文件到Flash中
void saveJsonFile()
{
File configFile = SPIFFS.open("/config.json", "w");
if (!configFile) {
Serial.println("Failed to open config file for writing");
return;
}
configFile.println(jsonStr);
configFile.close();
Serial.println("Config file saved");
}6、处理HTML模板中的变量
String processor(const String& var)
{
jsonConfig config = transTojson();
if (var == "VERSION")
{
return config.version;
}
if (var == "SN")
{
return config.sn;
}
if (var == "MYIP")
{
return ip;
}
if (var == "MYMASK")
{
return config.mask;
}
if (var == "GATEWAY")
{
return config.gateway;
}
if (var == "SSID")
{
return ssid;
}
if (var == "WIFIPWD")
{
return password;
}
if (var == "WAITTIME")
{
return config.waittime;
}
if (var == "APIURL")
{
return config.apiurl;
}
if (var == "APPID")
{
return config.appid;
}
if (var == "SECRET")
{
return config.secret;
}
return String();
}7、WebServer的监听
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});server.on("/save", HTTP_POST, [](AsyncWebServerRequest *request){
String version, sn, mask, gateway, waittime, apiurl, appid, secret;
if (request->hasParam("version", true)) {
version = request->getParam("version", true)->value();
} else {
version = "-";
}
if (request->hasParam("sn", true)) {
sn = request->getParam("sn", true)->value();
} else {
sn = "-";
}
if (request->hasParam("mask", true)) {
mask = request->getParam("mask", true)->value();
} else {
mask = "-";
}
if (request->hasParam("gateway", true)) {
gateway = request->getParam("gateway", true)->value();
} else {
gateway = "-";
}
if (request->hasParam("waittime", true)) {
waittime = request->getParam("waittime", true)->value();
} else {
waittime = "-";
}
if (request->hasParam("apiurl", true)) {
apiurl = request->getParam("apiurl", true)->value();
} else {
apiurl = "-";
}
if (request->hasParam("appid", true)) {
appid = request->getParam("appid", true)->value();
} else {
appid = "-";
}
if (request->hasParam("secret", true)) {
secret = request->getParam("secret", true)->value();
} else {
secret = "-";
}
jsonStr = "{\"version\": \"" + version + "\", \"sn\":\"" + sn + "\", \"mask\":\"" + mask + "\", \"gateway\":\"" + gateway + "\", \"waittime\":\"" + waittime + "\", \"apiurl\":\"" + apiurl + "\", \"appid\":\"" + appid + "\", \"secret\":\"" + secret + "\"}";
saveJsonFile();
delay(100);
request->send_P(200, "text/html", info_html);
});根据逻辑整合起来后，测试成功！
