整体介绍
esp32s2搭建一个web服务器,由网页来控制该系统的一些配置功能。首先是有一个登录界面,登录成功后跳转到二级配置界面,对系统一些参数进行配置。
网页是直接编译为一个大的数组烧录到内存中,当浏览器访问了192.168.4.1的时候,这个网页文件的内容返回给浏览器进行显示。
一、前端代码改动部分
1.登录界面(login.html)
<div class="container">
<h2>请输入配置界面密码:</h2>
<input type="login_password" id="login_password" placeholder="请输入密码">
<br>
<button onclick="checkPassword()">登录</button>
</div>
登录按钮的点击事件checkPassword():
当后端对密码验证成功后,利用window.location.href = ‘/server_config’;跳转到二级界面。
window.location.href = '/server_config';
该语句相当于向服务器端发送了一个GET请求,URL是/server_config。
浏览器会尝试加载这个 URL 对应的页面或资源,并在成功加载后将其显示给用户。这种方式适用于跳转到当前域名下的其他页面或资源,浏览器会自动添加当前域名。
async function checkPassword() {
var password = document.getElementById("login_password").value;
if (password.length < 6) {
alert("密码长度必须至少为6位!");
return false;
}
// 向后端发送密码进行验证
try {
const response = await fetch('/verify_password', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `login_password=${encodeURIComponent(password)}`,
});
if (response.ok) {
const data = await response.json();
if (data.message === "Password is correct") {
// 在当前页面跳转到/config,并改变URL
window.location.href = '/server_config';
} else {
// 密码验证失败,显示错误消息
alert("密码验证失败,请重试!");
}
} else {
console.error('请求失败:', response.status);
}
} catch (error) {
console.error('出现错误:', error);
}
}
2.配置界面(server_config.html)
该部分涉及到改动的地方在OTA更新后重新加载网页的地方。
由于当前界面url为:
192.168.4.1/server_config
如果采用
window.location.reload(); //重新加载网站
函数重新加载当前网站,导致逻辑出现问题,OTA更新后,应该加载首页面。
此处应改为:
window.location.href = '/';
用于重定向到首页的 URL
二、后端代码改动部分
CMakeList.txt 将前端文件添加进去
idf_component_register(SRCS "main.c"
"access_point.c"
"http_server.c"
INCLUDE_DIRS "."
EMBED_FILES "login.html"
"server_config.html"
REQUIRES ${requires})
主界面首先将登陆界面编译的数组发送到前端。
//主界面
static const httpd_uri_t index_uri = {
.uri = "/",
.method = HTTP_GET,
.handler = index_get_handler,
.user_ctx = NULL
};
login.html编译出来一般名称是默认的_binary_名称_类型_start。这个指针代编译出来文件的起始地址。_binary_名称_类型_end,代表结束地址。login.html的引用方式如下。
//在网络服务器上创建用户界面
static esp_err_t index_get_handler(httpd_req_t *req)
{
extern const unsigned char upload_script_start[] asm("_binary_login_html_start");
extern const unsigned char upload_script_end[] asm("_binary_login_html_end");
const size_t upload_script_size = (upload_script_end - upload_script_start);
/* Add file upload form and script which on execution sends a POST request to /upload */
httpd_resp_set_type(req,HTTPD_TYPE_TEXT);
httpd_resp_send(req, (const char *)upload_script_start, upload_script_size);
return ESP_OK;
}
在对登录密码进行匹配后,如果匹配成功,会发送"Password is correct"消息到前端,前端则会调用 window.location.href = ‘/server_config’;
后端添加对应的GET请求函数,将配置页面的数组发送到前端。发送方法与登录界面一致。
//获取配置服务器页面
httpd_uri_t get_server_config_uri = {
.uri = "/server_config",
.method = HTTP_GET,
.handler = get_server_config_Handler,
.user_ctx = NULL
};
此时完成该服务器网页端的二级跳转。记录一下方便后续再遇到时回看。
里边可能有的描述有问题,或者有更好的解决方法,也欢迎各位大佬批评指正!