ESP32s2-搭建web服务器-实现二级页面跳转

整体介绍

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
	};

此时完成该服务器网页端的二级跳转。记录一下方便后续再遇到时回看。
里边可能有的描述有问题，或者有更好的解决方法，也欢迎各位大佬批评指正！