利用mongoose实现一个简易的web服务器

静止了所有的花开

已于 2023-09-21 18:25:04 修改

阅读量438

点赞数

文章标签： http 服务器网络协议

于 2023-09-21 14:33:11 首次发布

本文链接：https://blog.csdn.net/qq_42161913/article/details/133133677

版权

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>