臨漳企業(yè)做網(wǎng)站推廣河北seo人員
Crow是一個輕量級、快速的C++微框架，用于構(gòu)建Web應用程序和RESTful API。
將處理前端頁面的POST請求以添加數(shù)據(jù)的邏輯添加到?`/submit` 路由中，并添加了一個新的路由 `/` 用于返回包含輸入框、按鈕和表格的完整頁面。當用戶向表格添加數(shù)據(jù)時，JavaScript會發(fā)送POST請求到 `/submit` 路由，后端會處理數(shù)據(jù)并將其添加到數(shù)據(jù)向量中。另外，當頁面加載時，JavaScript會發(fā)送GET請求到 `/table` 路由，以獲取更新后的表格數(shù)據(jù) 。
#include <crow.h>
#include <sstream>
#include <string>
#include <vector>std::vector<std::string> data;int main() {crow::SimpleApp app;// 添加數(shù)據(jù)的頁面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());});// 處理提交數(shù)據(jù)的路由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);});// 返回更新后的表格數(shù)據(jù)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;});// 處理提交數(shù)據(jù)的路由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);});// 返回更新后的表格數(shù)據(jù)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源代碼而不是頁面內(nèi)容，而且狀態(tài)碼是200，這可能是因為瀏覽器沒有正確解析HTML內(nèi)容，一種可能的原因是瀏覽器接收到的數(shù)據(jù)的Content-Type頭部不正確，導致瀏覽器將其視為純文本而不是HTML?？梢試L試在Crow應用程序中為返回的HTML內(nèi)容設置正確的Content-Type頭部。
可以達到相同的效果。?
