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

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 方法。具体代码如下：
[code]#include #include #include #include #include #include #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(file)),                                  std::istreambuf_iterator());              blogData.content = std::move(content);            }            // 构造响应 JSON            json 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