前言
??網(wǎng)頁很多時候是動態(tài)的，于是本篇文章目標實現(xiàn)一個簡答的動態(tài)頁面—頁靜態(tài)頁面互相跳轉(zhuǎn)，點擊可以跳轉(zhuǎn)到子頁面。
?
Demo
??
下載地址
??鏈接：https://pan.baidu.com/s/1bbhcu1XTiaJRYGRQRG5a0g?pwd=1234
?
HTML基本頁面交換
??上一篇的“Hello World”應(yīng)用程序確實輸出了簡單的純文本。但網(wǎng)絡(luò)的語言是HTML。因此，讓看看如何生成HTML。將輸出當(dāng)前時間，并顯示列表對象中的一些數(shù)據(jù)。
創(chuàng)建新的請求處理
??與第一個HelloWorldController類似，創(chuàng)建另一個名為ListDataController的新類。
listdatacontroller.h:
#ifndef LISTDATACONTROLLER_H
#define LISTDATACONTROLLER_H
#include <QList>
#include <QString>
#include "httprequesthandler.h"
using namespace stefanfrings;
class ListDataController: public HttpRequestHandler {
Q_OBJECT
public:
ListDataController(QObject* parent=0);
void service(HttpRequest& request, HttpResponse& response);
private:
QList<QString> list;
};
#endif // LISTDATACONTROLLER_H
listdatacontroller.cpp:
#include <QTime>
#include "listdatacontroller.h"
ListDataController::ListDataController(QObject* parent)
: HttpRequestHandler(parent) {
list.append("Robert");
list.append("Lisa");
list.append("Hannah");
list.append("Ludwig");
list.append("Miranda");
list.append("Francesco");
list.append("Kim");
list.append("Jacko");
}
void ListDataController::service(HttpRequest &request, HttpResponse &response) {
response.setHeader("Content-Type", "text/html; charset=UTF-8");
response.write("<html><body>");
response.write("The time is ");
QString now=QTime::currentTime().toString("HH:mm:ss");
response.write(now.toUtf8());
response.write("<p>List of names:");
response.write("<table border='1' cellspacing='0'>");
for(int i=0; i<list.size(); i++) {
QString number=QString::number(i);
QString name=list.at(i);
response.write("<tr><td>");
response.write(number.toUtf8());
response.write("</td><td>");
response.write(name.toUtf8());
response.write("</td></tr>");
}
response.write("</table>");
response.write("</body></header>",true);
}
??構(gòu)造函數(shù)用一些名稱填充列表。該服務(wù)方法輸出一個具有當(dāng)前時間的HTML文檔和一個顯示列表對象內(nèi)容的表。
??請注意，在編寫文檔之前設(shè)置了一個HTTP響應(yīng)頭，它告訴瀏覽器使用的文件格式（請參閱Internet Media Types）和字符編碼。
??用新的控制器替換main.cpp中的控制器：
#include "listdatacontroller.h"
new HttpListener(listenerSettings,new ListDataController(&app),&app);
??運行并測試應(yīng)用程序。輸出應(yīng)該是這樣的：
??
請求映射器
??現(xiàn)在在應(yīng)用程序中有兩個不同的控制器類，但一次只能使用一個。現(xiàn)在創(chuàng)建一個“RequestMapper”類，它將在兩個控制器之間切換。和以前一樣，新類再次從HttpRequestHandler繼承。
requestmapper.h:
#ifndef REQUESTMAPPER_H
#define REQUESTMAPPER_H
#include "httprequesthandler.h"
using namespace stefanfrings;
class RequestMapper : public HttpRequestHandler {
Q_OBJECT
public:
RequestMapper(QObject* parent=0);
void service(HttpRequest& request, HttpResponse& response);
};
#endif // REQUESTMAPPER_H
requestmapper.cpp:
#include "requestmapper.h"
#include "helloworldcontroller.h"
#include "listdatacontroller.h"
RequestMapper::RequestMapper(QObject* parent)
: HttpRequestHandler(parent) {
// empty
}
void RequestMapper::service(HttpRequest& request, HttpResponse& response) {
QByteArray path=request.getPath();
qDebug("RequestMapper: path=%s",path.data());
if (path=="/" || path=="/hello") {
HelloWorldController().service(request, response);
}
else if (path=="/list") {
ListDataController().service(request, response);
}
else {
response.setStatus(404,"Not found");
response.write("The URL is wrong, no such document.",true);
}
qDebug("RequestMapper: finished request");
}
??用新的請求映射程序替換main.cpp中的舊控制器：
#include "requestmapper.h"
new HttpListener(listenerSettings,new RequestMapper(&app),&app);
??請求映射器根據(jù)請求的路徑調(diào)用兩個控制器中的一個。所以
- 當(dāng)打開http://localhost:8080/或http://localhost:8080/hello，會看到“Hello World”頁面。
- 當(dāng)打開http://localhost:8080/list，獲得姓名列表。
??例如，如果試圖打開任何錯誤的URLhttp://localhost:8080/lalala，然后會收到錯誤消息“URL錯誤…”以及狀態(tài)代碼404，這是“未找到”的技術(shù)值。一些程序使用它來處理錯誤。如果沒有設(shè)置狀態(tài)代碼，那么將使用默認的200，這意味著“成功”。請參閱維基百科中的HTTP狀態(tài)代碼列表。
如果多個并發(fā)HTTP請求同時傳入，那么service()方法將并行執(zhí)行多次。所以這個方法是多線程的。當(dāng)訪問在service()方法外部聲明的變量時，必須考慮這一點。
??請求映射器是“singleton”或處于“application scope”，因為它只有一個實例。
兩個控制器類（HelloWorldController和ListDataController）位于“請求范圍”中，這意味著每個請求都由該類的新實例處理。這會降低一些性能，但會稍微簡化編程。
一個接口對一個控制器優(yōu)化效率
??一個小的修改將兩個控制器類的范圍更改為“應(yīng)用程序范圍”。（PS:這個就是每次運行的時候，不是去新new）
??
new requestmapper.h
#ifndef REQUESTMAPPER_H
#define REQUESTMAPPER_H
#include "httprequesthandler.h"
#include "helloworldcontroller.h"
#include "listdatacontroller.h"
using namespace stefanfrings;
class RequestMapper : public HttpRequestHandler {
Q_OBJECT
public:
RequestMapper(QObject* parent=0);
void service(HttpRequest& request, HttpResponse& response);
private:
HelloWorldController helloWorldController;
ListDataController listDataController;
};
#endif // REQUESTMAPPER_H
new requestmapper.cpp
#include "requestmapper.h"
RequestMapper::RequestMapper(QObject* parent)
: HttpRequestHandler(parent) {
// empty
}
void RequestMapper::service(HttpRequest& request, HttpResponse& response) {
QByteArray path=request.getPath();
qDebug("RequestMapper: path=%s",path.data());
if (path=="/" || path=="/hello") {
helloWorldController.service(request, response);
}
else if (path=="/list") {
listDataController.service(request, response);
}
else {
response.setStatus(404,"Not found");
response.write("The URL is wrong, no such document.");
}
qDebug("RequestMapper: finished request");
}
??現(xiàn)在，每個請求都只重新使用一個HelloWorldController或ListDataController實例。在啟動期間只創(chuàng)建一次，因為HttpRequestMapper也只存在一次。
??使用會話后，還可以為每個會話創(chuàng)建控制器實例，并將它們存儲在會話存儲中。然后就有了一個“會話范圍”。會話將在后面進行解釋。
請求映射程序項目
??按照上面得，實際上就是剛開始出一個列表，/和/hello會出現(xiàn)helloworld，而/list則會返回list列表，這是直接通過url后得子網(wǎng)頁來切換（PS：并不是通過點擊主頁面來切換，這個后面會解說到）。
Web頁面跳轉(zhuǎn)觸發(fā)
??其實這個對于做網(wǎng)頁得很簡單，就是一個點擊超連接，只是跳轉(zhuǎn)到內(nèi)部，使用<a>來實現(xiàn)的。
?
Demo增量：實戰(zhàn)頁面跳轉(zhuǎn)
步驟一：準備代碼模板
??準備之前的demo模板：
???
步驟二：新建一個主入口的消息處理
??copy原來的helloworld改成index（PS：不管又不有index，直接網(wǎng)站也是跳入index.html頁面）。
??
??修改完類相關(guān)信息。
步驟三：網(wǎng)頁代碼中入口切換
??
// 啟動http的監(jiān)聽
{
if(!_pHttpListenerSettings)
{
_pHttpListenerSettings = new QSettings(httpServerPath, QSettings::IniFormat);
}
_pHttpListenerSettings->beginGroup("listener");
// _pHttpListener = new HttpListener(_pHttpListenerSettings, new HelloWorldRequestHandler);
_pHttpListener = new HttpListener(_pHttpListenerSettings, new IndexRequestHandler);
}
步驟四：寫一個簡單html跳轉(zhuǎn)頁面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>長沙紅胖子Qt</title>
</head>
<body>
<p>好, 長沙紅胖子 QQ:21497936 www.hpzwl.com"</p>
<p><a href="helloworld">Hello world!</a></p>
<p><a href="list">list</a></p>
</body>
list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>長沙紅胖子Qt</title>
</head>
<body>
<a href="javascript:history.back(-1);">返回上一頁</a>
<table border="2">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
步驟五：修改index.html的消息處理類
??
??這里有個亂碼問題，請查看“入坑一”：
??
void IndexRequestHandler::service(HttpRequest &request, HttpResponse &response)
{
QString str;
QString path = request.getPath();
LOG << path;
if(path == "/" || path == "/index")
{
str += "<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"<meta charset=\"UTF-8\">"
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"<title>長沙紅胖子Qt</title>"
"</head>"
"<body>"
" <p>好, 長沙紅胖子 QQ:21497936 www.hpzwl.com</p>"
" <p><a href=\"helloworld\">Hello world!</a></p>"
" <p><a href=\"list\">list</a></p>"
"</body>";
}else if(path == "/helloworld")
{
helloWorldRequestHandler.service(request, response);
return;
}else if(path == "/list")
{
listRequestHandler.service(request, response);
return;
}else {
response.setStatus(404,"Not found");
str = "The URL is wrong, no such document.";
}
// 返回文本(需要在瀏覽器上看，所以將Qt內(nèi)部編碼都轉(zhuǎn)成GBK輸出即可，不管他本身是哪個編碼）
// QByteArray byteArray = _pTextCodec->fromUnicode(str);
QByteArray byteArray = str.toUtf8();
response.write(byteArray);
}
步驟六：新建一個list.html修改消息處理類
??
??修改好宏類名，然后嵌入list.html頁面：
??
void ListRequestHandler::service(HttpRequest &request, HttpResponse &response)
{
QString str;
LOG << request.getPath();
str = "<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"<meta charset=\"UTF-8\">"
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"<title>長沙紅胖子Qt</title>"
"</head>"
"<body>"
"<a href=\"javascript:history.back(-1);\">返回上一頁</a>"
"<table border=\"2\">"
" <tr>"
" <td>row 1, cell 1</td>"
" <td>row 1, cell 2</td>"
" </tr>"
" <tr>"
" <td>row 2, cell 1</td>"
" <td>row 2, cell 2</td>"
" </tr>"
" </table>"
"</body>";
// 返回文本(需要在瀏覽器上看，所以將Qt內(nèi)部編碼都轉(zhuǎn)成GBK輸出即可，不管他本身是哪個編碼）
// QByteArray byteArray = _pTextCodec->fromUnicode(str);
QByteArray byteArray = str.toUtf8();
response.write(byteArray);
}
?
Demo源碼
IndexRequestHandler.h
#ifndef INDEXREQUESTHANDLER_H
#define INDEXREQUESTHANDLER_H
#include "httprequesthandler.h"
#include "HelloWorldRequestHandler.h"
#include "ListRequestHandler.h"
using namespace stefanfrings;
class IndexRequestHandler : public HttpRequestHandler
{
public:
IndexRequestHandler(QObject *parent = 0);
public:
void service(HttpRequest& request, HttpResponse& response);
private:
QTextCodec *_pTextCodec;
private:
HelloWorldRequestHandler helloWorldRequestHandler; // hellowold消息處理
ListRequestHandler listRequestHandler; // list消息處理
};
#endif // INDEXREQUESTHANDLER_H
IndexRequestHandler.cpp
#include "IndexRequestHandler.h"
#include "ListRequestHandler.h"
#include <QTextCodec>
#include <QDebug>
#include <QDateTime>
//#define LOG qDebug()<<__FILE__<<__LINE__
//#define LOG qDebug()<<__FILE__<<__LINE__<<__FUNCTION__
//#define LOG qDebug()<<__FILE__<<__LINE__<<QThread()::currentThread()
//#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd")
#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss:zzz")
using namespace stefanfrings;
IndexRequestHandler::IndexRequestHandler(QObject *parent)
: HttpRequestHandler(parent)
{
// 返回文本(需要在瀏覽器上看，所以將Qt內(nèi)部編碼都轉(zhuǎn)成GBK輸出即可，不管他本身是哪個編碼）
// WINDOWS: GBK GB2312
// LINUX : urf-8
// _pTextCodec = QTextCodec::codecForName("utf-8");
_pTextCodec = QTextCodec::codecForName("GBK");
}
void IndexRequestHandler::service(HttpRequest &request, HttpResponse &response)
{
QString str;
QString path = request.getPath();
LOG << path;
if(path == "/" || path == "/index")
{
str += "<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"<meta charset=\"UTF-8\">"
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"<title>長沙紅胖子Qt</title>"
"</head>"
"<body>"
" <p>好, 長沙紅胖子 QQ:21497936 www.hpzwl.com</p>"
" <p><a href=\"helloworld\">Hello world!</a></p>"
" <p><a href=\"list\">list</a></p>"
"</body>";
}else if(path == "/helloworld")
{
helloWorldRequestHandler.service(request, response);
return;
}else if(path == "/list")
{
listRequestHandler.service(request, response);
return;
}else {
response.setStatus(404,"Not found");
str = "The URL is wrong, no such document.";
}
// 返回文本(需要在瀏覽器上看，所以將Qt內(nèi)部編碼都轉(zhuǎn)成GBK輸出即可，不管他本身是哪個編碼）
// QByteArray byteArray = _pTextCodec->fromUnicode(str);
QByteArray byteArray = str.toUtf8();
response.write(byteArray);
}
ListRequestHandler.h
#ifndef LISTREQUESTHANDLER_H
#define LISTREQUESTHANDLER_H
#include "httprequesthandler.h"
using namespace stefanfrings;
class ListRequestHandler : public HttpRequestHandler
{
public:
ListRequestHandler(QObject *parent = 0);
public:
void service(HttpRequest& request, HttpResponse& response);
private:
QTextCodec *_pTextCodec;
};
#endif // LISTREQUESTHANDLER_H
ListRequestHandler.cpp
#include "ListRequestHandler.h"
#include <QTextCodec>
#include <QDebug>
#include <QDateTime>
//#define LOG qDebug()<<__FILE__<<__LINE__
//#define LOG qDebug()<<__FILE__<<__LINE__<<__FUNCTION__
//#define LOG qDebug()<<__FILE__<<__LINE__<<QThread()::currentThread()
//#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd")
#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss:zzz")
using namespace stefanfrings;
ListRequestHandler::ListRequestHandler(QObject *parent)
: HttpRequestHandler(parent)
{
// 返回文本(需要在瀏覽器上看，所以將Qt內(nèi)部編碼都轉(zhuǎn)成GBK輸出即可，不管他本身是哪個編碼）
// WINDOWS: GBK GB2312
// LINUX : urf-8
// _pTextCodec = QTextCodec::codecForName("utf-8");
_pTextCodec = QTextCodec::codecForName("GBK");
}
void ListRequestHandler::service(HttpRequest &request, HttpResponse &response)
{
QString str;
LOG << request.getPath();
str = "<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"<meta charset=\"UTF-8\">"
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"<title>長沙紅胖子Qt</title>"
"</head>"
"<body>"
"<a href=\"javascript:history.back(-1);\">返回上一頁</a>"
"<table border=\"2\">"
" <tr>"
" <td>row 1, cell 1</td>"
" <td>row 1, cell 2</td>"
" </tr>"
" <tr>"
" <td>row 2, cell 1</td>"
" <td>row 2, cell 2</td>"
" </tr>"
" </table>"
"</body>";
// 返回文本(需要在瀏覽器上看，所以將Qt內(nèi)部編碼都轉(zhuǎn)成GBK輸出即可，不管他本身是哪個編碼）
// QByteArray byteArray = _pTextCodec->fromUnicode(str);
QByteArray byteArray = str.toUtf8();
response.write(byteArray);
}
?
工程模板v1.2.0
??
?
入坑
入坑一：編碼問題亂碼
問題
?? 亂碼
??
原因
??之前的網(wǎng)頁沒有編碼，直接轉(zhuǎn)換的，新建的頁面有編碼，標識了utf-8，所以無需轉(zhuǎn)碼gbk了。文章來源：http://www.zghlxwxcb.cn/news/detail-457171.html
解決
??當(dāng)表示好頁面的編碼未utf-8之后，則無需字符轉(zhuǎn)換編碼。
??
??
文章來源地址http://www.zghlxwxcb.cn/news/detail-457171.html
到了這里，關(guān)于Qt+QtWebApp開發(fā)筆記（三）：http服務(wù)器動態(tài)html連接跳轉(zhuǎn)基礎(chǔ)交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
