企业官网建设流程全解析

万网网站建设选哪个好,网站上传视频怎么做,html网页设计源代码文件免费,点击图片跳转到网站怎么做链接1. 引言 在之前的文章中#xff0c;笔者实现了一个渲染 Markdown 格式文章的网页前端 Vite 项目#xff08;参看《给 Markdown 渲染网页增加一个目录组件(ViteVditorHandlebars)》#xff09;,以及一个支持 Markdown格式数据的静态文件服务的后端项目#xff08;参看《使用…1. 引言在之前的文章中笔者实现了一个渲染 Markdown 格式文章的网页前端 Vite 项目参看《给 Markdown 渲染网页增加一个目录组件(ViteVditorHandlebars)》,以及一个支持 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 u8D:/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_iteratorchar(file)), std::istreambuf_iteratorchar()); 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 项目。任何复杂功能都可以在此基础上进行扩展只需搭配相应的架构设计以更好地支持具体业务需求。实现代码