当前位置： 首页 > news >正文

C++用Crow实现一个简单的Web程序，实现动态页面，向页面中输入数据并展示

news 2026/2/9 13:48:23

Crow是一个轻量级、快速的C++微框架，用于构建Web应用程序和RESTful API。

将处理前端页面的POST请求以添加数据的逻辑添加到 `/submit` 路由中，并添加了一个新的路由 `/` 用于返回包含输入框、按钮和表格的完整页面。当用户向表格添加数据时，JavaScript会发送POST请求到 `/submit` 路由，后端会处理数据并将其添加到数据向量中。另外，当页面加载时，JavaScript会发送GET请求到 `/table` 路由，以获取更新后的表格数据 。

#include <crow.h>
#include <sstream>
#include <string>
#include <vector>std::vector<std::string> data;int main() {crow::SimpleApp app;// 添加数据的页面CROW_ROUTE(app, "/")([] {std::ostringstream os;os << "<html><body>";os << "<h1>Add Data to Table</h1>";os << "<input type='text' id='dataInput' placeholder='Enter data'>";os << "<button onclick='addData()'>Add Data</button>";os << "<table id='dataTable'>";os << "<tr><th>Data</th></tr>";for (const auto& item : data) {os << "<tr><td>" << item << "</td></tr>";}os << "</table>";os << "<script>";os << "function addData() {";os << "var input = document.getElementById('dataInput');";os << "var data = input.value;";os << "var xhr = new XMLHttpRequest();";os << "xhr.open('POST', '/submit', true);";os << "xhr.setRequestHeader('Content-Type', 'application/json');";os << "xhr.send(JSON.stringify({ data: data }));";os << "xhr.onload = function() {";os << "if (xhr.status === 200) {";os << "input.value = '';";os << "fetchData();";os << "}";os << "};";os << "}";os << "function fetchData() {";os << "var table = document.getElementById('dataTable');";os << "var xhr = new XMLHttpRequest();";os << "xhr.open('GET', '/table', true);";os << "xhr.send();";os << "xhr.onload = function() {";os << "if (xhr.status === 200) {";os << "table.innerHTML = '<tr><th>Data</th></tr>' + xhr.responseText;";os << "}";os << "};";os << "}";os << "fetchData();";os << "</script>";os << "</body></html>";return crow::response(os.str());});// 处理提交数据的路由CROW_ROUTE(app, "/submit").methods("POST"_method)([](const crow::request& req) {crow::json::rvalue json = crow::json::load(req.body);if (!json) {return crow::response(400);}std::string dataValue = json["data"].s();data.push_back(dataValue);return crow::response(200);});// 返回更新后的表格数据CROW_ROUTE(app, "/table")([] {std::ostringstream os;for (const auto& item : data) {os << "<tr><td>" << item << "</td></tr>";}return crow::response(os.str());});app.port(8080).multithreaded().run();
}

运行效果： 

嗯....好吧，一般人是不会在后端代码里面嵌套这么一大坨html代码的对吧，所有我们将它们分离开来。

将html和js代码提取到index.html文件中。

<!DOCTYPE html>
<html>
<head><title>Data Table</title>
</head>
<body><h1>Add Data to Table</h1><input type='text' id='dataInput' placeholder='Enter data'><button onclick='addData()'>Add Data</button><table id='dataTable'><tr><th>Data</th></tr></table><script>function addData() {var input = document.getElementById('dataInput');var data = input.value;var xhr = new XMLHttpRequest();xhr.open('POST', '/submit', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(JSON.stringify({ data: data }));xhr.onload = function () {if (xhr.status === 200) {input.value = '';fetchData();}};}function fetchData() {var table = document.getElementById('dataTable');var xhr = new XMLHttpRequest();xhr.open('GET', '/table', true);xhr.send();xhr.onload = function () {if (xhr.status === 200) {table.innerHTML = '<tr><th>Data</th></tr>' + xhr.responseText;}};}fetchData();</script>
</body>
</html>

cpp文件中的代码修改如下。 

#include <crow.h>
#include <fstream>
#include <streambuf>
#include <string>
#include <vector>std::vector<std::string> data;int main() {crow::SimpleApp app;// 提供HTML文件CROW_ROUTE(app, "/")([] {std::ifstream t("index.html");std::string html((std::istreambuf_iterator<char>(t)), std::istreambuf_iterator<char>());crow::response response(html);response.add_header("Content-Type", "text/html");return response;});// 处理提交数据的路由CROW_ROUTE(app, "/submit").methods("POST"_method)([](const crow::request& req) {crow::json::rvalue json = crow::json::load(req.body);if (!json) {return crow::response(400);}std::string dataValue = json["data"].s();data.push_back(dataValue);return crow::response(200);});// 返回更新后的表格数据CROW_ROUTE(app, "/table")([] {std::ostringstream os;for (const auto& item : data) {os << "<tr><td>" << item << "</td></tr>";}return crow::response(os.str());});app.port(8080).multithreaded().run();
}

如果在浏览器中访问 `http://localhost:8080` 时只看到HTML源代码而不是页面内容，而且状态码是200，这可能是因为浏览器没有正确解析HTML内容，一种可能的原因是浏览器接收到的数据的Content-Type头部不正确，导致浏览器将其视为纯文本而不是HTML。可以尝试在Crow应用程序中为返回的HTML内容设置正确的Content-Type头部。

可以达到相同的效果。 

相关文章：

C++用Crow实现一个简单的Web程序，实现动态页面，向页面中输入数据并展示

Crow是一个轻量级、快速的C微框架&#xff0c;用于构建Web应用程序和RESTful API。 将处理前端页面的POST请求以添加数据的逻辑添加到 /submit 路由中&#xff0c;并添加了一个新的路由 / 用于返回包含输入框、按钮和表格的完整页面。当用户向表格添加数据时&#xff0c;JavaS…...

编程日记 2024/6/27 5:51:58

南信大尹志聪教授为一作在顶级综合性期刊《Natl. Sci. Rev.》发文：传统梅雨停摆，江南缘何不再多烟雨？

文章简介 论文名称&#xff1a;Traditional Meiyu–Baiu has been suspended by global warming 第一作者及单位&#xff1a;尹志聪(教授|南京信息工程大学大气科学学院) 通讯作者及单位&#xff1a;王会军&#xff08;院士|南京信息工程大学大气科学学院&#xff09; 文章发…...

编程日记 2024/6/27 5:49:56

程序员如何用ChatGPT解决常见编程问题：实例解析

引言 在现代编程的世界中&#xff0c;技术进步日新月异&#xff0c;程序员们面临着各种各样的挑战和问题。解决这些问题的过程中&#xff0c;找到合适的工具至关重要。ChatGPT作为一种先进的人工智能语言模型&#xff0c;能够帮助程序员迅速、高效地解决常见的编程问题。本文将…...

编程日记 2024/6/27 5:48:55

初识 SpringMVC，运行配置第一个Spring MVC 程序

1. 初识 SpringMVC&#xff0c;运行配置第一个Spring MVC 程序 文章目录 1. 初识 SpringMVC&#xff0c;运行配置第一个Spring MVC 程序1.1 什么是 MVC 2. Spring MVC 概述2.1 Spring MVC 的作用&#xff1a; 3. 运行配置第一个 Spring MVC 程序3.1 第一步&#xff1a;创建Mave…...

编程日记 2024/6/27 5:47:54

STM32F1+HAL库+FreeTOTS学习1——FreeRTOS入门

STM32F1HAL库FreeTOTS学习1——FreeRTOS入门 裸机开发与操作系统嵌入式操作系统简介FreeRTOS简介FreeRTOS的几个重要概念任务调度器任务状态状态列表 裸机开发与操作系统 在以往的嵌入式学习中&#xff0c;我们最常用的就是裸机开发&#xff0c;所谓裸机开发就是指在没有操作系…...

编程日记 2024/6/27 5:45:51

杭州代理记账报税全程托管专业实力全面指南

杭州代理记税报税服务可以为企业提供全程托管财务管理解决方案&#xff0c;确保企业的财务工作专业、高效、合规。以下是杭州代理记税报税服务全面指南&#xff1a; https://www.9733.cn/news/detail/185.html 一、代理记账报税服务的内容 基础服务&#xff1a; 每日记&#xf…...

编程日记 2024/6/27 5:44:50

PHP 界的扛把子 Swoole 异步通信利器

大家好&#xff0c;我是码农先森。 引言 我今天主要介绍的内容是包括但不仅限于 Swoole &#xff0c;也有一部分 Go 语言的内容。 为什么要介绍 Swoole ? 先说一说背景吧&#xff0c;我们项目组之前要为《香港 01》开发一个积分系统的项目&#xff0c;这个系统的主要功能包…...

编程日记 2024/6/27 5:41:46

40.连接假死-空闲检测-发送心跳

连接假死情况 1.网络设备出现故障，例如网卡，机房等。底层的TCP连接已经断开，但应用程序没有感知到，仍然占着资源。 2.公网网络不稳定，出现丢包。若果连续出现丢包，这时现象就是客户端数据发不出去，服务端也一直收不到数据，就这么一直耗着。 3.应用程序线程阻塞，无法…...

编程日记 2024/6/27 5:40:44

hdfs高可用文件系统架构

1、整体架构 2、角色简介 2.1、namenode NameNode 是 HDFS 集群中的核心组件&#xff0c;负责管理文件系统的元数据、处理客户端请求、管理数据块、确保数据完整性和高可用性。由于其重要性&#xff0c;NameNode 的性能和可靠性直接影响整个 HDFS 集群的性能和可靠性。在生产…...

编程日记 2024/6/27 5:39:43

从官方源码精简出第1个FreeRTOS程序

一、下载官方源码 1、打开百度搜索freerots&#xff0c;找到官网:FreeRTOS官网 2、将源码解压到没有中文目录的路径下 二、删减目录 1、删除FreeRTOS-Plus和tools 2、删除FreeRTOS/Demo下除CORTEX_STM32F103_Keil外的所有文件 3、删除FreeRTOS\Source\portable下除RVDS和MemM…...

编程日记 2024/6/27 5:37:40

谷歌上搞下来的，无需付费，可以收藏！

在数字化时代&#xff0c;我们越来越依赖于智能设备来获取信息和知识。中国智谋App正是这样一款应用&#xff0c;它将中国古代的智慧与谋略书籍带入了我们的移动设备&#xff0c;让我们能够随时随地学习和领悟。而且提供文言文的原文和译文。 软件下载方式&#xff1a;谷歌上搞…...

编程日记 2024/6/27 5:36:36

宿主机无法通过ip连接wsl2解决方案

文章目录 原因排查网络模式win11防火墙关闭wsl ubuntu防火墙 如果之前能连接现在连接不上可以参考该方案 原因排查 网络模式win11防火墙(win11新增了Hyper-V防火墙)wsl2 ubuntu防火墙 网络模式 wsl2的默认网络模式是NAT&#xff0c;建议修改为镜像模式。在C:\Users\<User…...

编程日记 2024/6/27 5:34:34

Ruby编程语言学习

学习Ruby编程语言&#xff0c;你可以按照以下步骤进行&#xff1a; ### 1. 基础知识入门 #### 安装Ruby - 访问Ruby官网&#xff08;https://www.ruby-lang.org/&#xff09;下载适合你操作系统的版本。 - 对于Linux用户&#xff0c;可以使用包管理器安装。 #### 学习资源 -…...

编程日记 2024/6/27 5:32:31

Redis实战—基于setnx的分布式锁与Redisson

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P56 - P63 目录 分布式锁介绍 基于SETNX的分布式锁 SETNX锁代码实现 修改业务代码 SETNX锁误删问题 SETNX锁原子性问题 Lua脚本 编写脚本 代码优化 总结 Redisson 前言…...

编程日记 2024/6/27 5:31:30

ARM功耗管理框架之LPI

安全之安全(security)博客目录导读 思考&#xff1a;功耗管理框架&#xff1f;SCP&#xff1f;PPU&#xff1f;LPI&#xff1f;之间的关系&#xff1f;如何配合&#xff1f; 目录 一、功耗管理框架中的LPI 二、LPI分类 三、Q-Channel和P-Channel对比 四、Q-Channel和P-Ch…...

编程日记 2024/6/27 5:28:26

Unity太空避障Demo总结

太空避障&#xff1a;主要是实现飞机躲避子弹 面板基类、音乐类、排行榜类、json等等都和上一篇Unity坦克迷宫Demo总结一样&#xff0c;太空避障主要是对四元数的练习和使用 1.选择飞机面板 &#xff08;1&#xff09;通过左右按钮对显示的模型进行切换 &#xff08;2&#xff…...

编程日记 2024/6/27 5:27:25

SpringSecurity-重写默认配置

重写UserDetailService组件 1.注入Bean的方式 /*** author: coffee* date: 2024/6/22 21:22* description: 重写springsecurity默认组件&#xff1a;注入Bean的方式*/Configuration public class ProjectConfig {/*** 重写userDetailsService组件*/Beanpublic UserDetailsSer…...

编程日记 2024/6/27 5:25:23

C# 判断值是否在枚举里

你还在代码里面通篇通过数字的定义类型。比如type为1 表示xx,type为2 表示yy吗&#xff1f;然后程序里面通过数字1和2来判断吗&#xff1f;比如下面类似的代码&#xff1a; if(type1){ //.... } else if(type2){ //... } else if(type3){ //... } 老鸟们一般都会用枚举来定义…...

编程日记 2024/6/27 5:24:21

Interview preparation--elasticSearch倒排索引原理

搜索引擎应该具备哪些要求 查询速度快 优秀的索引结构设计高效率的压缩算法快速的编码和解码速度 结果准确 ElasiticSearch 中7.0 版本之后默认使用BM25 评分算法ElasticSearch 中 7.0 版本之前使用 TP-IDF算法 倒排索引原理 当我们有如下列表数据信息&#xff0c;并且系统…...

编程日记 2024/6/27 5:23:20

银河麒麟高级服务器操作系统V10SP2（X86）配置bond0的mac地址为指定子网卡的mac地址

银河麒麟高级服务器操作系统V10SP2&#xff08;X86&#xff09;配置bond0的mac地址为指定子网卡的mac地址 一 系统环境二 删除和备份原有配置2.1 down掉bond02.2 备份之前的bond配置到/root/bak2.3 删除bond配置&#xff08;网卡文件根据实际情况变化&#xff09; 三 新建bond0…...

编程日记 2024/6/27 5:22:19

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2026/2/6 19:29:20

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2026/2/1 7:05:07

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2026/1/31 14:20:10