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

从后端获取数据传输到前端进行显示(cpp-httplib+Vditor+Handlebars)

news 2026/6/14 1:27:37

1. 引言

在之前的文章中，笔者实现了一个渲染 Markdown 格式文章的网页前端 Vite 项目（参看《给 Markdown 渲染网页增加一个目录组件(Vite+Vditor+Handlebars)》）,以及一个支持 Markdown格式数据的静态文件服务的后端项目（参看《使用cpp-httplib发布静态文件服务》）。在这里，就将前端与后端打通，通过 cpp-httplib 提供的 API 接口动态返回 Markdown 文章数据，由前端 Vite 项目利用 Handlebars 模板与 Vditor 渲染引擎完成展示与交互。

2. 实现

2.1 后端

JSON 是 HTTP 传输中事实上的标准数据格式，尤其是在现代 Web API（特别是 RESTful API）中，因此我们将后端的接口改成返回 JSON 格式数据的接口。按照 RESTful API 风格，命名为 /api/v1/post，使用 HTTP 的 Get 方法。具体代码如下：

#include <httplib.h>#include <filesystem>
#include <fstream>
#include <iostream>
#include <nlohmann/json.hpp>
#include <string>#include "BlogData.h"using namespace std;
using namespace nlohmann;
namespace fs = std::filesystem;int main() {httplib::Server svr;std::u8string docRoot =u8"D:/Work/HttpServer/public/最小二乘问题详解1：线性最小二乘";svr.Get("/api/v1/post",[&](const httplib::Request& req, httplib::Response& res) {DataTransfer::BlogData blogData;{fs::path blogMetaJsonPath = fs::path(docRoot) / "meta.json";nlohmann::json blogMetaJson;ifstream infile(blogMetaJsonPath);infile >> blogMetaJson;blogData.blogMeta = blogMetaJson;}{fs::path blogContentPath =fs::path(docRoot) / u8"最小二乘问题详解1：线性最小二乘.md";std::ifstream file(blogContentPath, std::ios::binary);std::string content((std::istreambuf_iterator<char>(file)),std::istreambuf_iterator<char>());blogData.content = std::move(content);}// 构造响应 JSONjson response_data = blogData;// 设置响应res.set_header("Access-Control-Allow-Origin","http://127.0.0.1:8000");  // 允许跨域res.set_content(response_data.dump(), "application/json");});std::cout << "Server listening on http://127.0.0.1:8080\n";svr.listen("0.0.0.0", 8080);return 0;
}

这段代码的实现非常简单，分别读取元数据 meta.json 和文章内容 最小二乘问题详解1：线性最小二乘.md 文件，组织成 JSON 格式，设置到 HTTP 响应的内容中并且返回。其中，用到 nlohmann/json 对结构体对象序列化和反序列化（参考《C++中JSON序列化和反序列化的实现》）。

另外需要注意的就是跨域问题。由于前端项目与后端项目是分离的，因此它们处在不同的域中，前端要请求后端的资源，就会发生跨域问题。解决办法就是在 HTTP 的响应头中设置允许跨域的键和值：

res.set_header("Access-Control-Allow-Origin", "http://127.0.0.1:8000");  // 允许跨域

2.2 前端

前端的修改就简单多了，只需要修改获取远端数据的接口就可以了：

const response = await fetch("http://127.0.0.1:8080/api/v1/post");
if (!response.ok) {throw new Error("网络无响应");
}
const blogData = await response.json();
//...

其实这也是前后端分离的优势，后端提供数据资源的获取，前端则负责数据的可视化。最终的效果如下所示：