main.cpp:
#include <iostream>
#include <fstream>
#include <sstream>
#include "mongoose.h"
using namespace std;
static void fn(struct mg_connection *c, int ev, void *ev_data, void *fn_data)
{
if (ev == MG_EV_HTTP_MSG)
{
char buf[1024] = {0};
struct mg_http_message *hm = (struct mg_http_message *)ev_data;
if (mg_http_match_uri(hm, "/login"))
{
// 解析get请求
printf("hm->query: %.*s\n", (int)hm->query.len, hm->query.ptr);
mg_http_get_var(&hm->query, "password", buf, sizeof(buf));
cout << "password: " << buf << endl;
if (strcmp(buf, "88888888") == 0)
{
mg_http_reply(c, 200, "Content-Type: application/json\r\n", "{\"result\": %d}", 0);
}
else
{
mg_http_reply(c, 200, "Content-Type: application/json\r\n", "{\"result\": %d}", -1);
}
}
else if (mg_http_match_uri(hm, "/content"))
{
// 解析post请求
printf("hm->body: %.*s\n", (int)hm->body.len, hm->body.ptr);
char *str = mg_json_get_str(hm->body, "$.content"); // 解析json数据
cout << "content: " << str << endl;
free(str);
mg_http_reply(c, 200, "Content-Type: application/json\r\n", "{\"result\": %d}", 0);
}
else
{
// 设置服务器根目录
struct mg_http_serve_opts opts = {.root_dir = "/home/dinstech/temp-work/http-server/web"};
mg_http_serve_dir(c, hm, &opts);
}
}
}
int main()
{
struct mg_mgr mgr;
mg_mgr_init(&mgr);
mg_http_listen(&mgr, "http://0.0.0.0:8000", fn, NULL);
for (;;)
mg_mgr_poll(&mgr, 1000);
return 0;
}
web测试页面代码,通过 mg_http_serve_dir() 函数设置根目录后,第一个页面直接命名为index.html ,当在浏览器中直接输入 IP:端口(192.168.3.220:8000) 时,可以直接显示第一个页面。
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<style>
.layui-form {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.layui-input {
border-radius: 5px;
}
.layui-btn {
border-radius: 5px;
margin-left: 0px;
}
</style>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
class="layui-input" lay-reqText="密码不能为空">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<button class="layui-btn" lay-submit lay-filter="login-button">登录</button>
</div>
</div>
</form>
</body>
<script src="./layui/layui.js"></script>
<script>
function httpGet(url) {
return fetch(url)
.then(function (response) {
if (response.ok) {
console.log('#################');
return response.json();
} else {
console.log('Request failed');
throw new Error('Request failed');
}
})
.catch(function (error) {
console.error(error);
});
}
//Demo
layui.use('form', function () {
var form = layui.form;
//监听提交
form.on('submit(login-button)', function (data) {
var params = new URLSearchParams(); // 创建URLSearchParams对象
// 遍历data.field,将每个键值对添加到URLSearchParams对象中
for (var key in data.field) {
var value = data.field[key];
params.append(key, value);
}
var queryString = params.toString(); // 将URLSearchParams对象转换为查询字符串
var reqData = '/login?' + queryString; // 拼接查询字符串到请求URL
console.log(reqData);
httpGet(reqData)
.then(function (response) {
console.log(response);
if(response.result == 0)
{
window.location.href = 'main.html';
}
else
{
layer.msg('密码错误');
}
});
return false;
});
});
</script>
</html>
main.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>主页面</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<style>
.layui-form {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.layui-input {
border-radius: 5px;
}
.layui-btn {
border-radius: 5px;
margin-left: 0px;
}
</style>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="content" name="content" required lay-verify="required" placeholder="请输入内容"
autocomplete="off" class="layui-input" lay-reqText="内容不能为空">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<button class="layui-btn" lay-submit lay-filter="login-button">确认</button>
</div>
</div>
</form>
</body>
<script src="./layui/layui.js"></script>
<script>
function httpPost(url, data) {
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(function (response) {
if (response.ok) {
console.log('#################');
return response.json();
} else {
console.log('Request failed');
throw new Error('Request failed');
}
})
.catch(function (error) {
console.error(error);
});
}
//Demo
layui.use('form', function () {
var form = layui.form;
//监听提交
form.on('submit(login-button)', function (data) {
console.log(data.field);
httpPost("/content", data.field)
.then(function (response) {
if (response.result == 0) {
layer.msg('提交成功');
}
else {
layer.msg('提交失败');
}
});
return false;
});
});
</script>
</html>