益阳市网站建设_网站建设公司_营销型网站_seo优化

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 方法。具体代码如下：

/* by 01130.hk - online tools website : 01130.hk/zh/jpgcompression.html */ #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); } // 构造响应 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 << "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 的响应头中设置允许跨域的键和值：

/* by 01130.hk - online tools website : 01130.hk/zh/jpgcompression.html */ 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(); //...

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

3. 其他

以上就是一个最简单的前后端分离 Web 项目。任何复杂功能都可以在此基础上进行扩展，只需搭配相应的架构设计，以更好地支持具体业务需求。

实现代码