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

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头部。

可以达到相同的效果。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/361528.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

021.合并两个有序链表,递归和遍历

题意 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 难度 简单 标签 链表、排序 示例 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[]…

PCM、WAV,立体声,单声道,正弦波等音频素材

1&#xff09;PCM、WAV音频素材&#xff0c;分享给将要学习或者正在学习audio开发的同学。 2&#xff09;内容属于原创&#xff0c;若转载&#xff0c;请说明出处。 3&#xff09;提供相关问题有偿答疑和支持。 常用的Audio PCM WAV不同采样率&#xff0c;不同采样深度&#…

CubeFS - 新一代云原生存储系统

CubeFS 是一种新一代云原生存储系统,支持 S3、HDFS 和 POSIX 等访问协议,支持多副本与纠删码两种存储引擎,为用户提供多租户、 多 AZ 部署以及跨区域复制等多种特性。 官方文档 CubeFS 作为一个云原生的分布式存储平台,提供了多种访问协议,因此其应用场景也非常广泛,下面…

DataGrip 2024 po for Mac 数据库管理工具解

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…

MySQL进阶-索引-使用规则-最左前缀法则和范围查询

文章目录 1、最左前缀法则2、启动mysql3、查询tb_user4、查看tb_user的索引5、执行计划 profession 软件工程 and age31 and status 06、执行计划 profession 软件工程 and age317、执行计划 profession 软件工程8、执行计划 age31 and status 09、执行计划 status 010、执行…

前端实战:实现块级元素的拖拽与缩放功能

在现代网页开发中&#xff0c;用户交互是一个非常重要的部分。在这篇文章中&#xff0c;我们将详细介绍如何使用原生 JavaScript 实现块级元素的拖拽与缩放功能。具体来说&#xff0c;我们将实现以下功能&#xff1a; 点击并拖动 outer 元素&#xff0c;可以移动整个块。点击并…

利用LinkedHashMap实现一个LRU缓存

一、什么是 LRU LRU是 Least Recently Used 的缩写&#xff0c;即最近最少使用&#xff0c;是一种常用的页面置换算法&#xff0c;选择最近最久未使用的页面予以淘汰。 简单的说就是&#xff0c;对于一组数据&#xff0c;例如&#xff1a;int[] a {1,2,3,4,5,6}&#xff0c;…

Android Studio上传新项目到Gitee

一、在Gitee上创建仓库 首先需要再Gitee上创建仓库 1、在Gitee中新建仓库 2、输入仓库信息 3、生成仓库地址 创建成功会生成一个仓库地址&#xff0c;格式如下&#xff1a; https://gitee.com/test/compose_mvi_demo.git二、Android Studio 上传项目到Gitee 1、在Android …

MySQL数据库笔记(二)

第一章 单行函数 1.1 什么是函数 函数的作用是把我们经常使用的代码封装起来,需要的时候直接调用即可。这样既提高了代码效率,又提高了可维护性。在SQL中使用函数,极大地提高了用户对数据库的管理效率。 1.2 定义 操作数据对象。 接受参数返回一个结果。 只对一行进行…

使用PEFT库进行ChatGLM3-6B模型的LORA高效微调

PEFT库进行ChatGLM3-6B模型LORA高效微调 LORA微调ChatGLM3-6B模型安装相关库使用ChatGLM3-6B模型GPU显存占用准备数据集加载模型加载数据集数据处理数据集处理配置LoRA配置训练超参数开始训练保存LoRA模型模型推理从新加载合并模型使用微调后的模型 LORA微调ChatGLM3-6B模型 本…

【SpringSecurity】认证与鉴权框架SpringSecurity——授权

目录 权限系统的必要性常见的权限管理框架SpringSecurity授权基本流程准备脚本限制访问资源所需权限菜单实体类和Mapper封装权限信息封装认证/鉴权失败处理认证失败封装鉴权失败封装配置SpringSecurity 过滤器跨域处理接口添加鉴权hasAuthority/hasAnyAuthorityhasRole/​ hasA…

node mySql 实现数据的导入导出,以及导入批量插入的sql语句

node 实现导出, 在导出excel中包含图片&#xff08;附件&#xff09; node 实现导出, 在导出excel中包含图片&#xff08;附件&#xff09;-CSDN博客https://blog.csdn.net/snows_l/article/details/139999392?spm1001.2014.3001.5502 一、效果 如图&#xff1a; 二、导入 …

声场合成新方法:基于声波传播的框架

声场合成是指在房间内的麦克风阵列上&#xff0c;根据来自房间内其他位置的声源信号&#xff0c;合成每个麦克风的音频信号。它是评估语音/音频通信设备性能指标的关键任务&#xff0c;因为它是一种成本效益高的方法&#xff0c;用于数据生成以替代真实的数据收集&#xff0c;后…

elasticsearch的安装和配置

单节点安装与部署 我们通过docker进行安装 1.docker的安装 如果以及安装了docker就可以跳过这个步骤。 首先更新yum: yum update安装docker: yum install docker查看docker的版本&#xff1a; docker -v此时我们的docker就安装成功了。 2.创建网络 我们还需要部署kiban…

盲源信道分离—FastICA算法性能仿真

本案例中使用Matlab软件对FastICA算法的声音分离性能进行了仿真&#xff0c;分别对简单波形的混合信号、不同类型声音的混合信号、同一类型的混合信号这三种情况进行仿真&#xff0c;主要从分离信号的波形形状、串音误差两方面对分离性能进行衡量&#xff0c;仿真结果显示快速I…

可以一键生成热点营销视频的工具,建议收藏

在当今的商业环境中&#xff0c;热点营销已经成为了一种非常重要的营销策略。那么&#xff0c;什么是热点营销呢&#xff1f;又怎么做热点营销视频呢&#xff1f; 最近高考成绩慢慢公布了&#xff0c;领导让结合“高考成绩公布”这个热点&#xff0c;做一个关于企业或产品的营销…

3.任务的创建与删除

1.什么是任务&#xff1f; 任务可以理解为进程/线程&#xff0c;创建一个任务&#xff0c;就会在内存开辟一个空间。 任务通常都含有while(1)死循环 2.任务创建与删除相关的函数 3.CUBEMAX相关配置 编辑一个led1闪烁的任务

RPC架构基本结构和核心技术

当你在构建一个分布式系统时&#xff0c;势必需要考虑的一个问题是&#xff1a;如何实现服务与服务之间高效调用&#xff1f;当然&#xff0c;你可以使用Dubbo或Spring Cloud等分布式服务框架来完成这个目标&#xff0c;这些框架帮助我们封装了技术实现的复杂性。那么&#xff…

Gitlab合并代码并解决冲突演示

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

Jenkins定时构建自动化(二):Jenkins的定时构建

目录 ​编辑 一、 jenkins定时构建语法&#xff1a; 1. 语法规则&#xff1a; 2. 常见用法举例 3. 再次举例 接上一篇&#xff1a;Jenkins定时构建自动化(一)&#xff1a;Jenkins下载安装配置&#xff1a;Jenkins定时构建自动化(一)&#xff1a;Jenkins下载安装配置-CSDN博客 …