В процессе разработки приложения на Qt, может понадобиться добавить в данное приложение веб-интерфейс, что особенно может быть актуально при разработке встраиваемых систем с использованием Qt. Для решения данной задачи можно либо написать собственное решение, либо воспользоваться готовыми решениями. Например, библиотекой QtWebApp, которая предоставляет необходимый функционал для создания web-интерфейса.
К достоинствам данной библиотеки можно отнести:
- формирование страниц с динамическим содержанием по шаблонам;
- формирование полностью динамических страниц;
- работу с Cookie, что позволит добавить авторизацию на приложении;
- работу со статическими файлами, например, style.css или изображения;
- реализацию загрузки файлов.
Предлагаю подробно рассмотреть один из вариантов запуска небольшого приложения на Qt, которое будет иметь несколько web-страниц, работающих с применением библиотеки QtWebApp.
На момент написания статьи изначально использовалась библиотека QtWebApp 1.6.3 и Qt 5.6. Проект успешно был запущен с комплектами сборки MSVC2013 и MinGW. В процессе отладки был замечен баг в классе Template библиотеки QtWebApp. После исправления бага и связи с разработчиком версия библиотеки была повышена до 1.6.4. Исходя из этого, можно отметить также плюс библиотеки, что разработчик ответил в течение суток на информацию о баге, и в тот же день версия библиотеки была повышена. Окончательный вариант примера приложения был подготовлен на версии 1.6.4.
В данном проекте предлагается создать приложение, имеющее три страницы, меню для выбора этих страниц, и три статических файл. Один из файлов – это style.css, а два других – это изображения.
Структура проекта
Проект будет сформирован в виде Subdirs проекта, который будет состоять из основного проекта и проекта библиотеки QtWebApp.
Структура проекта:
QtWebAppExample.pro – основной профайл проекта
common – пользовательский проект web-сервера
- o common.pro – профайл проекта приложения с веб-сервером
- o httpsettings.hpp – файл настроек приложения, в котором наследованный от QSettings класс
- o webconfigurator.h – заголовочный файл класса конфигуратора web-интерфейса, отвечает за формирование базы всех web-страниц приложения
- o webconfigurator.cpp – файл исходных кодов конфигуратора web-интерфейса
- o webconfiguratorpage.h – заголовочный файл всех классов web-страниц Qt приложения
- o webconfiguratorpage.cpp – файл исходных кодов web-страниц
- o resources.qrc – ресурсный файл, содержащий шаблоны web-страниц и их составляющие части
- o html-static – папка, содержащая статичные файлы, которые не будут изменяться динамически в процессе работы приложения
QtWebApp – проект библиотеки
- o QtWebApp.pro – профайл проекта библиотеки
- o httpserver – подпроект, реализующий работу самого web-сервера
- o logging – подпроект, реализующий логгирование событий web-сервера
- o qtservice – подпроект, позволяющий реализвать запуск приложения в качестве службы
- o templateengine –под проект, реализующий шаблоны страниц, а также подстановку данных в страницы при запросах к серверу.
QtWebAppExample.pro
Общий профайл проекта — шаблон subdirs с подключённым основным проектом и библиотекой QtWebApp. Важна последовательность подключения проектов в файле. Библиотека QtWebApp должна быть прописана первой, иначе при сборке проекта возникнут ошибки:
если на момент сборки основного проекта, который зависит от QtWebApp, собранных файлов библиотеки (.dll или .so) не будет в наличии, проект не соберется.
TEMPLATE = subdirs SUBDIRS += \ QtWebApp \ common CONFIG += ordered common.files = common/html-static/* CONFIG(debug, debug|release) { common.path = $$OUT_PWD/../HttpServiceDebug/html-static } else { common.path = $$OUT_PWD/../HttpService/html-static } INSTALLS += common common.pro
Если профайл библиотеки кардинально в данном примере корректироваться не будет, то настройка профайла основного проекта web-сервера может доставить некоторое неудобство начинающему пользователю. Как видно из ниже следующего скрипта у приложения за ненадобностью отключен модуль, отвечающий за графические библиотеки, но включена сетевая библиотека для обработки запросов к http-серверу.
Помимо этого, необходимо правильно прописать линковку к заголовочным файлам и файлам исходных кодов, а также выходные папки для сборки библиотеки, чтобы собираемый проект смог обратиться по правильному пути к файлам библиотеки.
QT += core network QT -= gui TARGET = common CONFIG += console CONFIG -= app_bundle CONFIG += c++11 TEMPLATE = app SOURCES += main.cpp \ webconfigurator.cpp \ webconfiguratorpage.cpp HEADERS += \ webconfigurator.h \ webconfiguratorpage.h \ httpsettings.hpp RESOURCES += \ resources.qrc CONFIG(debug, debug|release) { DESTDIR = $$OUT_PWD/../../HttpServiceDebug } else { DESTDIR = $$OUT_PWD/../../HttpService } win32:CONFIG(release, debug|release): LIBS += -L$$OUT_PWD/../QtWebApp/release/ -lQtWebApp else:win32:CONFIG(debug, debug|release): LIBS += -L$$OUT_PWD/../QtWebApp/debug/ -lQtWebApp else:unix: LIBS += -L$$OUT_PWD/../QtWebApp/ -lQtWebApp INCLUDEPATH += $$PWD/../QtWebApp/httpserver DEPENDPATH += $$PWD/../QtWebApp/httpserver INCLUDEPATH += $$PWD/../QtWebApp/templateengine DEPENDPATH += $$PWD/../QtWebApp/templateengine INCLUDEPATH += $$PWD/../QtWebApp/qtservice DEPENDPATH += $$PWD/../QtWebApp/qtservice win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $$OUT_PWD/../QtWebApp/release/libQtWebApp.a else:win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $$OUT_PWD/../QtWebApp/debug/libQtWebApp.a else:win32:!win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $$OUT_PWD/../QtWebApp/release/QtWebApp.lib else:win32:!win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $$OUT_PWD/../QtWebApp/debug/QtWebApp.lib else:unix: PRE_TARGETDEPS += $$OUT_PWD/../QtWebApp/libQtWebApp.a DISTFILES += \ html-static/style.css \ html-static/favicon-32x32.png \ html-static/favicon.png QtWebApp.pro
Профайл проекта библиотеки по умолчанию показан ниже. Единственным изменением в проекте стало наличие дополнительной настройки сборки в качестве статической библиотеки.
# Build this project to generate a shared library (*.dll or *.so). TARGET = QtWebApp TEMPLATE = lib QT -= gui CONFIG += staticlib VERSION = 1.6.4 mac { QMAKE_MAC_SDK = macosx10.10 QMAKE_CXXFLAGS += -std=c++11 CONFIG += c++11 QMAKE_LFLAGS_SONAME = -Wl,-install_name,/usr/local/lib/ } win32 { DEFINES += QTWEBAPPLIB_EXPORT } # Windows and Unix get the suffix "d" to indicate a debug version of the library. # Mac OS gets the suffix "_debug". CONFIG(debug, debug|release) { win32: TARGET = $$join(TARGET,,,d) mac: TARGET = $$join(TARGET,,,_debug) unix:!mac: TARGET = $$join(TARGET,,,d) } DISTFILES += doc/* mainpage.dox Doxyfile OTHER_FILES += ../readme.txt include(qtservice/qtservice.pri) include(logging/logging.pri) include(httpserver/httpserver.pri) include(templateengine/templateengine.pri) main.cpp
А теперь по порядку пройдёмся по всем файлам проекта common, чтобы разобраться, как можно запустить Qt-приложение с web-интерфейсом. Начнём со стартового файла приложения и с функции main, с которой осуществляется запуск приложения.
Здесь имеется получение пути к файлу настроек, в котором хранятся параметры настройки web-сервера, порт TCP/IP и т.д.
Также создаётся объект класса WebConfigurator, который отвечает за обработку запросов и выдачу по запросам соответствующих страниц web-сервера.
#include <QCoreApplication> #include <QDir> #include <webconfigurator.h> int main(int argc, char *argv[]) { QCoreApplication a(argc, argv); a.setApplicationName("QtWebAppExample"); QString configPath = QDir::currentPath() + "/" + QCoreApplication::applicationName() + ".ini"; new WebConfigurator(configPath); return a.exec(); }
HttpSettings.hpp
Содержит фактически вспомогательный класс, не несущий в себе сверх необходимой информации, но в него для удобства вынесена инициализация файла настроек и в случае более глобального проекта данный класс будет удобно расширить. В данном варианте, естественно, больше похоже на дело вкуса.
Все параметры относятся к настройке порта подключения, количеству одновременных сессий, длительности ожидания запроса.
Также в настройках приложения будут содержаться и параметры контроллера статических файлов, в частности путь к папке, в которой будет производиться поиск статических файлов веб-сервера. В данном приложении это папка html-static, которая будет располагаться в той же папке, что и исполняемый файл приложения.
#ifndef HTTPSETTINGS_H #define HTTPSETTINGS_H #include <QSettings> class HttpSettings : public QSettings { public: explicit HttpSettings(const QString& fileName, QObject* parent = nullptr) : QSettings(fileName,QSettings::IniFormat,parent) { // Настройки веб-сервера setValue("port", value("port", 8080)); setValue("minThreads", value("minThreads", 1)); setValue("maxThreads", value("maxThreads", 100)); setValue("cleanupInterval", value("cleanupInterval", 1000)); setValue("readTimeout", value("readTimeout", 60000)); setValue("maxRequestSize", value("maxRequestSize", 16000)); setValue("maxMultiPartSize", value("maxMultiPartSize", 10000000)); // Настройки для статических файлов setValue("html-static/path", value("html-static/path", "html-static")); setValue("html-static/encoding", value("html-static/encoding", "UTF-8")); setValue("html-static/maxAge", value("html-static/maxAge", 60000)); setValue("html-static/cacheTime", value("html-static/cacheTime", 60000)); setValue("html-static/cacheSize", value("html-static/cacheSize", 1000000)); setValue("html-static/maxCachedFileSize", value("html-static/maxCachedFileSize", 65536)); } }; #endif // HTTPSETTINGS_H
WebConfigurator.h
А теперь внимательно посмотрим на содержимое класса WebConfigurator, который отвечает непосредственно за определение страниц, которые подлежат к отправке на запрос извне.
Определение страниц осуществляется с помощью объекта класса QHash, который содержит указатели на все объекты web-страниц и соответствующие им ключевые значения, которые соответствуют URL адресам запросов. Но QHash используется лишь для динамических страниц, а для статических страниц используется объект класса StaticFileController.
#ifndef WEBCONFIGURATOR_H #define WEBCONFIGURATOR_H #include <httprequesthandler.h> #include <httplistener.h> #include <webconfiguratorpage.h> #include <httpsettings.hpp> #include <staticfilecontroller.h> class WebConfigurator : public HttpRequestHandler { Q_OBJECT Q_DISABLE_COPY(WebConfigurator) public: WebConfigurator(QString &configPath); virtual ~WebConfigurator(); virtual void service(HttpRequest& request, HttpResponse& response) override; private: QString m_configPath; HttpSettings m_config; HttpListener m_httpListener; QHash<QString,WebConfiguratorPage*> m_pages; StaticFileController *m_staticFileController; }; #endif // WEBCONFIGURATOR_H
Webconfigurator.cpp
Конфигуратор отвечает за перенаправление запроса на соответствующие страницы и изображения и является хранилищем данных страниц и изображений. Если страница или изображение не существуют, то возвращается ошибка 404.
#include «webconfigurator.h»
WebConfigurator::WebConfigurator(QString &configPath) : m_configPath(configPath), m_config(m_configPath), m_httpListener(&m_config, this) { /* Помещаем в QHash объекты всех динамических страниц, * которые будут использоваться на нашем веб-сервере * */ m_pages.insert("/index.html", new IndexPage()); m_pages.insert("/second.html", new SecondPage()); m_pages.insert("/first.html", new FirstPage()); /* Для работы контроллера статических файлов * необходимо обратиться к объекту настроек, перейти к группе * параметров настройки контроллера и создать новый контроллер * используя состояния объекта настроек, выставленное на группу * параметров статического контроллера файлов * */ m_config.beginGroup("html-static"); m_staticFileController = new StaticFileController(&m_config); m_config.endGroup(); } WebConfigurator::~WebConfigurator() { foreach(WebConfiguratorPage* page, m_pages) { delete page; } delete m_staticFileController; } void WebConfigurator::service(HttpRequest &request, HttpResponse &response) { /* В данном методе осуществляется проверка адреса запроса * на соответствие существующим страницам. * В данном случае, если страница существует, то мы * обращаемся к объекту страницы и передаём запрос на дальнейшую обработку. * В противном случаем возвращаем ошибку 404 * */ QByteArray path = request.getPath(); for(auto i = m_pages.begin(); i != m_pages.end(); ++i) { if(path.startsWith(i.key().toLatin1())) { return i.value()->handleRequest(request,response); } } if(path=="/") { response.redirect("/index.html"); return; } if(path.startsWith("/style.css") || path.startsWith("/favicon-32x32.png") || path.startsWith("/favicon.png")){ return m_staticFileController->service(request, response); } response.setStatus(404,"Not found"); }
WebConfiguratorPage.h
Данный заголовочный файл содержит объявление основного класса, отвечающего за формирование страниц и наследованные от него три класса страниц для проекта: index.html, first.html, second.html.
#ifndef WEBCONFIGURATORPAGE_H #define WEBCONFIGURATORPAGE_H #include <QObject> #include <httprequesthandler.h> #include <httplistener.h> #include <template.h> class WebConfiguratorPage : public QObject { Q_OBJECT public: WebConfiguratorPage(const QString& title); virtual void handleRequest(HttpRequest&, HttpResponse&) {} virtual ~WebConfiguratorPage() {} protected: Template commonTemplate() const; private: QString m_title; }; class IndexPage : public WebConfiguratorPage { Q_OBJECT public: IndexPage() : WebConfiguratorPage("EDISON") {} virtual ~IndexPage() {} public: virtual void handleRequest(HttpRequest &request, HttpResponse &response) override; }; class FirstPage : public WebConfiguratorPage { Q_OBJECT public: FirstPage() : WebConfiguratorPage("First Page") {} virtual ~FirstPage() {} public: virtual void handleRequest(HttpRequest &request, HttpResponse &response) override; }; class SecondPage : public WebConfiguratorPage { Q_OBJECT public: SecondPage() : WebConfiguratorPage("Second Page") {} virtual ~SecondPage() {} public: virtual void handleRequest(HttpRequest &request, HttpResponse &response) override; }; #endif // WEBCONFIGURATORPAGE_H WebConfiguratorPage.cpp
#include "webconfiguratorpage.h" #include <QFile> #include <QDebug> WebConfiguratorPage::WebConfiguratorPage(const QString &title) : m_title(title) { } Template WebConfiguratorPage::commonTemplate() const { /* Для формирования основного шаблона используется файл common.htm. * В него устанавилвается название страницы ... * */ QFile file(":/html/common.htm"); Template common(file, QTextCodec::codecForName("UTF-8")); common.setVariable("Title", m_title); /* А также формируется меню. * Формирование меню сделано с учетом проверки на то, * требуется ли данное меню на странице или нет. * В данном примере меню будет на всех страницах, поэтому * просто обозначим необходимость данного меню. * Если вы посмотрите ниже содержимое файла common.htm, то * обнаружите там проверку на параметр "Navigation" * */ bool navigation = true; common.setCondition("Navigation", navigation); if(navigation) { /* А само меню будет формироваться с помощью цилического добавления * пунктов, что также отражено специальной конструкцией в файле common.htm * */ common.loop("Items", 3); common.setVariable("Items0.href", "/index.html"); common.setVariable("Items0.name", "Main page"); common.setVariable("Items1.href", "/first.html"); common.setVariable("Items1.name", "First page"); common.setVariable("Items2.href", "/second.html"); common.setVariable("Items2.name", "Second page"); } return common; } /* Далее идёт реализация обработчика запроса к каждой из страниц. * Фактически они идентичны в данном примере, но в реальном приложении * будут скорее всего отличаться по своей логике * */ void IndexPage::handleRequest(HttpRequest &request, HttpResponse &response) { if (request.getMethod() == "GET") { // Получаем родительски щаблон страницы Template common = commonTemplate(); QFile file(":/html/index.htm"); Template contents(file, QTextCodec::codecForName("UTF-8")); /* После чего добавляем собственный контент из шаблона для данной страницы * в родительском шаблоне место для добавления информации, равно как и другого шаблона * в данном примере обозначено как {Content} * */ common.setVariable("Content", contents); response.setHeader("Content-Type", "text/html; charset=ISO-8859-1"); response.write(common.toUtf8()); return; } else { return; } return; } void FirstPage::handleRequest(HttpRequest &request, HttpResponse &response) { if (request.getMethod() == "GET") { Template common = commonTemplate(); QFile file(":/html/first.htm"); Template contents(file, QTextCodec::codecForName("UTF-8")); common.setVariable("Content", contents); response.setHeader("Content-Type", "text/html; charset=ISO-8859-1"); response.write(common.toUtf8()); return; } else { return; } return; } void SecondPage::handleRequest(HttpRequest &request, HttpResponse &response) { if (request.getMethod() == "GET") { Template common = commonTemplate(); QFile file(":/html/second.htm"); Template contents(file, QTextCodec::codecForName("UTF-8")); common.setVariable("Content", contents); response.setHeader("Content-Type", "text/html; charset=ISO-8859-1"); response.write(common.toUtf8()); return; } else { return; } return; }
Common.htm
Под занавес рассмотрим содержимое шаблонов.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>{Title}</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32"/> </head> <body> <div class="content"> <a href="http://edsd.ru"><div class="logo"></div><h1>{Title}</h1></a> {if Navigation} <ul class="menu"> {loop Items} <li class = "menuitem"> <a href={Items.href}>{Items.name}</a> </li> {end Items} </ul> {end Navigation} {Content} </div> </body> </html>
index.htm
<h2>EDISON</h2> <p>Центр разработки программного обеспечения</p>
Результат
В итоге получим рабочее приложение с веб-сервером, который отлично подойдет для встраиваемых систем.
А данное приложение сформирует следующую веб-страницу.
Примечание
Проект приложения можно скачать по ссылке: скачать.
При сборке проекта обязательно поставьте этап install, чтобы необходимые статические файлы были установлены в соответствующую папку к исполняемому файлу.
Немного о баге
Добавим пару слов о баге, который сам по себе был больше похож на результат неудачного рефакторинга кода или, скорее, разработчик просто был в определенный момент уставший. Дело в том, что в более ранних версиях QtWebApp, а именно в версии 1.5.10, код был корректным и выглядел следующим образом.
if (data.size()==0 || file.error()) { qCritical("Template: cannot read from %s, %s",qPrintable(sourceName),qPrintable(file.errorString())); } else { append(textCodec->toUnicode(data)); }Тогда как в версии 1.6.3 была пропущена одна единственная строчка.
if (data.size()==0 || file.error()) { qCritical("Template: cannot read from %s, %s",qPrintable(sourceName),qPrintable(file.errorString())); append(textCodec->toUnicode(data)); }В результате данные не добавлялись в шаблон страницы, и пользователь получал пустую страничку. Как сообщил Стефан Фрингс, разработчик QtWebApp, он обычно использует иной, нежели мы, подход к формированию веб-интерфейса, поэтому просто не замечал подобной проблемы.
ссылка на оригинал статьи https://habrahabr.ru/post/280932/
Добавить комментарий