返回

基于Qt+QtWebApp开发笔记（三）：http服务器动态html连接跳转基础交互

后端

前言

网页应用常常是动态的，为了满足这一需求，本篇文章将介绍如何实现一个简单的动态页面---从静态页面互相跳转，点击可以跳转到子页面。

构建HTTP服务器

首先，我们创建服务器对象并设置监听端口。在Qt中，我们可以使用QTcpServer来实现。

// ...
QTcpServer *server = new QTcpServer(this);
server->listen(QHostAddress::Any, 8080);
connect(server, SIGNAL(newConnection()), this, SLOT(onNewConnection()));
// ...

处理客户端请求

当接收到客户端请求时，我们将解析请求，并根据请求类型做出相应的处理。

// ...
void onNewConnection()
{
    QTcpSocket *socket = server->nextPendingConnection();
    if (socket) {
        // 读取并解析请求
        QByteArray request = socket->readAll();
        QHttpRequestHeader header(request);

        // 根据请求类型做出处理
        if (header.method() == QHttpRequestHeader::Get) {
            handleGet(socket, header);
        } else if (header.method() == QHttpRequestHeader::Post) {
            handlePost(socket, header);
        } else {
            // ...
        }
    }
    socket->close();
}
// ...

生成动态HTML页面

为了实现页面跳转，我们需要生成动态HTML页面，并将其发送给客户端。

// ...
void handleGet(QTcpSocket *socket, QHttpRequestHeader header)
{
    // 获取请求的资源路径
    QString path = header.path();

    // 根据资源路径生成HTML页面
    QByteArray html;
    if (path == "/") {
        // 首页
        html = "<h1>首页</h1>";
    } else if (path == "/page1") {
        // 子页面1
        html = "<h1>子页面1</h1>";
    } else if (path == "/page2") {
        // 子页面2
        html = "<h1>子页面2</h1>";
    } else {
        // 404页面
        html = "<h1>404页面</h1>";
    }

    // 发送HTML页面给客户端
    QHttpResponseHeader response;
    response.setStatusLine(1, 1, "OK");
    response.addHeader("Content-Type", "text/html; charset=utf-8");
    response.addHeader("Content-Length", QString::number(html.size()));
    socket->write(response.toString().toUtf8());
    socket->write(html);
}
// ...

实现页面跳转

通过使用HTML中的<a>标签，我们可以实现页面跳转。

<a href="/page1">跳转到子页面1</a>
<a href="/page2">跳转到子页面2</a>

结语

通过以上步骤，我们就可以在Qt和QtWebApp中实现动态网页连接跳转基础交互。