三创建网站_crow html-CSDN博客

本文链接：https://blog.csdn.net/weixin_43103339/article/details/130905877

三. 创建网站

1. 创建HTML网页

在一中，用一个字符串构建了HTML代码段，即<div><h1>Hello, Crow</h1></div>。这是个坏方式。
在crow中创建HTML的两种主要方式：

纯HTML
HTML和Mustache模板混合（Mustache是著名的web模板系统）
每个网页需要：

public目录下的一个HTML文件
一个路由处理器：1个路由可以处理多个页面

在hello_crow目录下创建public文件夹，在public文件夹下创建index.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Crow C++</title>
</head>
<body>
    <div><h1>Hi Crow!</h1></div>
</body>
</html>

2. Serving HTML页面

修改main.cpp文件，使用html文件，不用字符串。注意index.html的路径写容器路径，主机的相对路径和绝对路径都显示"Not found"。

#include "crow_all.h"
using namespace std;
using namespace crow;

int main(int argc, char* argv[]) 
{
    crow::SimpleApp app;
       
    CROW_ROUTE(app, "/")
    ([](const crow::request& req, crow::response& res)
    {
        ifstream in("usr/src/cppweb/hello_crow/public/index.html", ifstream::in);
        if (in)
        {
            ostringstream contents;
            contents << in.rdbuf();
            in.close();
            res.write(contents.str());
        } 
        else 
        {
            res.write("Not found");
        }
        res.end();
    });

    char* port = getenv("PORT");
    uint16_t iPort = static_cast<uint16_t>(port != NULL? stoi(port): 18080);
    cout << "PORT = " << iPort << endl;
    app.port(iPort).multithreaded().run();
}

在容器的build目录下，重新make。然后再次在主机bash打开8080端口(必须在WSL系统下，在windows下"Not found"，不明原因):

docker run -v /mnt/c/Users/Auly/Desktop/cppweb:/usr/src/cppweb -p 8080:8080 -e PORT=8080 cppbox:latest /usr/src/cppweb/hello_crow/build/hello_crow

在浏览器输入localhost:8080/，显示：
在这里插入图片描述

3. Serving 静态内容

静态内容是不会改动的内容，例如index.html。
静态内容的文件目录：
HTML CSS Javaacript image
public(root) - html文件
images - image文件
scripts - javascript文件
styles - CSS文件
修改main.cpp，使它能够读各种文件。修改后的main.cpp:

#include "crow_all.h"
using namespace std;
using namespace crow;

void sendFiles(response& res, string filename, string contentType)
{
    ifstream in("usr/src/cppweb/hello_crow/public/" + filename, ifstream::in);
    if (in)
    {
        ostringstream contents;
        contents << in.rdbuf();
        in.close();
        res.set_header("Content-Type", contentType);
        res.write(contents.str());
    }
    else
    {
        res.code=404;
        res.write("Not found");
    }
    res.end();
}
void sendHtml(response& res, string filename)
{
    sendFiles(res, filename + ".html", "text/html");

}
void sendImage(response& res, string filename)
{
    sendFiles(res, "images/" + filename, "image/jpeg");
    
}
void sendScript(response& res, string filename)
{
    sendFiles(res, "scripts/" + filename, "text/javascript");
    
}
void sendStyle(response& res, string filename)
{
    sendFiles(res, "styles/" + filename, "text/css");
    
}

int main(int argc, char* argv[]) 
{
    crow::SimpleApp app;
       
    CROW_ROUTE(app, "/styles/<string>")
    ([](const crow::request& req, crow::response& res, string filename)
    {
        sendStyle(res, filename);
    });

    CROW_ROUTE(app, "/scripts/<string>")
    ([](const crow::request& req, crow::response& res, string filename)
    {
        sendScript(res, filename);
    });

    CROW_ROUTE(app, "/images/<string>")
    ([](const crow::request& req, crow::response& res, string filename)
    {
        sendImage(res, filename);
    });

    CROW_ROUTE(app, "/")
    ([](const crow::request& req, crow::response& res)
    {
        sendHtml(res, "index");
    });

    char* port = getenv("PORT");
    uint16_t iPort = static_cast<uint16_t>(port != NULL? stoi(port): 18080);
    cout << "PORT = " << iPort << endl;
    app.port(iPort).multithreaded().run();
}

styles/style.css:

body 
{
    background-color: lightgreen;
}

javascript/test.js:

console.log("Hello, Javascript.");
alert("Hello from JavaScript land.");

images/jerry.png
修改index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Crow C++</title>
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/test.js"></script>
</head>
<body>
    <div><h1>Hi Crow!</h1></div>
    <img src="images/jerry.png" />
</body>
</html>

在容器的build目录下，重新make。然后再次在主机bash打开8080端口(必须在WSL系统下，在windows下"Not found"，不明原因):

docker run -v /mnt/c/Users/Auly/Desktop/cppweb:/usr/src/cppweb -p 8080:8080 -e PORT=8080 cppbox:latest /usr/src/cppweb/hello_crow/build/hello_crow

在浏览器输入localhost:8080，显示：
在这里插入图片描述

4. 练习：创建一个新的网页

创建一个新的网页about.html
这个页面包含一个h1的标题"About"
为这个页面增加一个路由器
增加一个"about.css"，改变背景颜色

5. 解决方案

把index.html复制，重命名为about.html。修改title, 和body的内容;修改style.css为about.css，把script删除；图片可选删掉或换另一张。
复制style.css，重命名为about.css，改背景颜色。
images下的图片加一张（about.html换图片的情况）。
修改main.cpp，增加一个路由，把CROW_ROUTE(app, "/")换为CROW_ROUTE(app, "/about")。
重新make，和打开端口8080，在浏览器输入localhost:8080/about。