qt 實(shí)現(xiàn)MVC Api控制器開(kāi)發(fā) web api接口-連載【5】-企業(yè)級(jí)系統(tǒng)開(kāi)發(fā)實(shí)戰(zhàn)連載系列 -技術(shù)棧vue、element-ui、qt、c++、sqlite

• 標(biāo)題作者背景描述：
• • 為什么寫此系列文章？
  • 解決方案：
  • 預(yù)覽Demo
• MVC 模型
• 下載QtWebApp
• 解壓QtWebApp
• 添加到解決方案
• 設(shè)置靜態(tài)鏈接
• 設(shè)置QT版本
• 編譯源碼
• 引用QtwebApp
• 添加包含目錄
• 修改BitPos靜態(tài)鏈接
• 實(shí)現(xiàn)mvc
• 添加API 控制器
• 添加controller類
• 實(shí)現(xiàn)模型Login 動(dòng)作
• 添加控制器處理入口
• 使用webengine實(shí)現(xiàn) view
• 編譯并調(diào)試View
• 總結(jié)

標(biāo)題作者背景描述：

本人就職于外資IT企業(yè)，擔(dān)任電商訂單處理產(chǎn)品開(kāi)發(fā)經(jīng)理一職，領(lǐng)導(dǎo)過(guò)非常多次大小項(xiàng)目的開(kāi)發(fā)工作，對(duì)電商平臺(tái)訂單處理流程非常熟悉。

公司專注鞋服行業(yè)相關(guān)軟件開(kāi)發(fā)和服務(wù)，公司規(guī)模100多人以上，在臺(tái)北，廣州，成都，上海，北京，國(guó)外等均有分公司。

為什么寫此系列文章？

本人在學(xué)校至工作到現(xiàn)在十余年時(shí)間，使用.net C# 開(kāi)發(fā)語(yǔ)言，結(jié)合在公司實(shí)際開(kāi)發(fā)，和市場(chǎng)的需求中，NET.開(kāi)發(fā)的商業(yè)企業(yè)級(jí)系統(tǒng)遇到的缺點(diǎn)有如下：

程序首次加載慢，因?yàn)樘摂M機(jī)編譯的原因。

WINFORM界面開(kāi)發(fā)不夠炫麗，精美。

WINFORM界面設(shè)計(jì)人員難找。

程序可以被反編譯。

安裝包過(guò)大，部署麻煩，framework.

跨平臺(tái)不夠好。

解決方案：

結(jié)合近年來(lái)前端設(shè)計(jì)的走向，最終選擇了qt+vue+element UI+sqlite(數(shù)據(jù)庫(kù)根據(jù)需要情況選擇)

qt負(fù)責(zé)接口和硬件處理

sqlite做數(shù)據(jù)存儲(chǔ)

vue+element UI 實(shí)現(xiàn)前端。

預(yù)覽Demo

MVC 模型

MVC 模式代表 Model-View-Controller（模型-視圖-控制器） 模式。這種模式用于應(yīng)用程序的分層開(kāi)發(fā)。

Model（模型） - 模型代表一個(gè)存取數(shù)據(jù)的對(duì)象。它也可以帶有邏輯，在數(shù)據(jù)變化時(shí)更新控制器。 View（視圖） - 視圖代表模型包含的數(shù)據(jù)的可視化。 Controller（控制器） - 控制器作用于模型和視圖上。它控制數(shù)據(jù)流向模型對(duì)象，并在數(shù)據(jù)變化時(shí)更新視圖。它使視圖與模型分離開(kāi)。

下載QtWebApp

描述：要實(shí)現(xiàn)web Api需要使用一個(gè)qt web app 框架。
下載QtWebApp，集成到項(xiàng)目中，這個(gè)庫(kù)主要是實(shí)現(xiàn)http 協(xié)議，和 QT Web Api庫(kù)支持。
下載方式 : https://download.csdn.net/download/m0_49654513/12741112

作用：對(duì)于單機(jī)版本，不需要用戶安裝iis 或 tomcat，簡(jiǎn)化了部署的難度。
QtWebApp目錄結(jié)構(gòu)如下：

解壓QtWebApp

添加到解決方案

打開(kāi)上一章節(jié)創(chuàng)建的解決方案：BitPos 。
在解決方案資源管理器，右鍵》添加》現(xiàn)有項(xiàng)目 ，如下：

把qtwebapp.vcxproj 添加現(xiàn)在項(xiàng)目 。

設(shè)置靜態(tài)鏈接

選擇QtWebApp ，右鍵》屬性

在常規(guī)選項(xiàng)中修改sdk 版本，和平臺(tái)工具集，配置類型，輸出為靜態(tài)庫(kù)，如下：

設(shè)置QT版本

在qt project settings 選項(xiàng)中，修改 qt installation 為 我們上一節(jié)配置的qt版本，如下：

編譯源碼

編譯源碼，這里能夠一次編譯成功，如下圖：

引用QtwebApp

點(diǎn)擊BitPos項(xiàng)目，右鍵》添加》引用

添加包含目錄

為BitPos添加 包含目錄，因?yàn)楹竺鏁?huì)用QtWebApp的頭文件。
選擇BitPos 》屬性》vc++目錄》包含目錄》輸入QtWebApp 如下圖：

修改BitPos靜態(tài)鏈接

修改BitPos運(yùn)行庫(kù)為靜態(tài)鏈接。
按上面的步驟，修改這2個(gè)項(xiàng)目的配置為release 模式，重復(fù)一次操作。否則release編譯會(huì)報(bào)錯(cuò)。

實(shí)現(xiàn)mvc

接下來(lái)演示如何添加一個(gè)用戶登入時(shí)密碼驗(yàn)證的接口。
這個(gè)接口有2個(gè)參數(shù)，分別是user_code ,password
返回為json ,返回了用戶代碼和用戶名稱 ，分別是user_code,user_name 。
使用postman請(qǐng)求工具，測(cè)試和調(diào)試API，
請(qǐng)求描述如下圖：

添加API 控制器

接下來(lái)進(jìn)行實(shí)操：添加API 控制器 和登入接口Login的方法
新增 src 目錄，然后在目錄下創(chuàng)建 controller
如下圖：

添加controller類

選中controller 右鍵》添加》Add qt class
輸入類名：ApiController
如下圖：

點(diǎn)add 如下圖：

點(diǎn)擊next：如下圖
把Base class 修改為HttpRequestHandler

實(shí)現(xiàn)模型Login 動(dòng)作

ApiController.h添加Login 函數(shù)，
如下：

//action 登入接口。http://localhost:5050/vue-element-admin/api/loginQ_INVOKABLE void Login(HttpRequest & request, HttpResponse & response);

在ApiController.cpp添加Login 實(shí)現(xiàn)，實(shí)現(xiàn)了用戶和密碼的簡(jiǎn)單驗(yàn)證，并返回用戶結(jié)果，如下：

Q_INVOKABLE void ApiController::Login(HttpRequest & request, HttpResponse & response) {//request.//獲取post請(qǐng)求的表單 。QMultiMap<QByteArray, QByteArray> forms = request.getParameterMap();//獲取用戶提交表單中的user_code auto usercode = forms.value("user_code").trimmed();if (usercode.isEmpty()){Result("用戶代碼不能為空！", 1, response);return;}//獲取用戶提交表單中的password auto password = forms.value("password").trimmed();if (password.isEmpty()){Result("密碼不能為空！", 1, response);return;}//二次判斷QByteArray hash = QCryptographicHash::hash(password, QCryptographicHash::Algorithm::Sha256).toBase64();//驗(yàn)證用戶代碼和密碼。QJsonObject object{{"code", 0},{"msg", QJsonValue::Null}};QJsonObject user{{"user_code", "admin"},{"user_name", "admin"}};object.insert("user", user);QJsonDocument usermodel(object);//返回用戶信息。QByteArray body = usermodel.toJson(QJsonDocument::JsonFormat::Indented);response.write(body, true); }

最后貼出這2個(gè)類的源碼分別是：
ApiController.h的代碼如下：

#pragma once //解決中文亂碼問(wèn)題。 #pragma execution_character_set("utf-8") #include <httpserver/httprequesthandler.h>using namespace stefanfrings;//控制器 http://localhost:5050/vue-element-admin/api class ApiController :public HttpRequestHandler {Q_OBJECT public:Q_INVOKABLE ApiController(const ApiController & v){*this = v;}Q_INVOKABLE ApiController &operator=(const ApiController &v){return *this; }Q_INVOKABLE ApiController(){}//action 登入接口。http://localhost:5050/vue-element-admin/api/loginQ_INVOKABLE void Login(HttpRequest & request, HttpResponse & response);Q_INVOKABLE void ApiResult(const QString& msg, int code,HttpRequest & request, HttpResponse & response);/** Generates the response */Q_INVOKABLE void service(HttpRequest& request, HttpResponse& response);void Result(QString msg, int code, HttpResponse & response);~ApiController(); };

ApiController.cpp的代碼如下：

#include "ApiController.h" #include <qjsondocument.h> #include <qjsonobject.h> #include <qcryptographichash.h> #include <qlist.h>Q_INVOKABLE void ApiController::Login(HttpRequest & request, HttpResponse & response) {//request.//獲取post請(qǐng)求的表單 。QMultiMap<QByteArray, QByteArray> forms = request.getParameterMap();//獲取用戶提交表單中的user_code auto usercode = forms.value("user_code").trimmed();if (usercode.isEmpty()){Result("用戶代碼不能為空！", 1, response);return;}//獲取用戶提交表單中的password auto password = forms.value("password").trimmed();if (password.isEmpty()){Result("密碼不能為空！", 1, response);return;}//二次判斷QByteArray hash = QCryptographicHash::hash(password, QCryptographicHash::Algorithm::Sha256).toBase64();//驗(yàn)證用戶代碼和密碼。QJsonObject object{{"code", 0},{"msg", QJsonValue::Null}};QJsonObject user{{"user_code", "admin"},{"user_name", "admin"}};object.insert("user", user);QJsonDocument usermodel(object);//返回用戶信息。QByteArray body = usermodel.toJson(QJsonDocument::JsonFormat::Indented);response.write(body, true); }Q_INVOKABLE void ApiController::service(HttpRequest & request, HttpResponse & response) { }void ApiController::Result(QString msg, int code, HttpResponse & response) {QJsonObject object{{"code", code},{"msg", QJsonValue(msg)}};QJsonDocument usermodel(object);QByteArray body = usermodel.toJson(QJsonDocument::JsonFormat::Indented);response.write(body, true); }Q_INVOKABLE void ApiController::ApiResult(const QString& msg,int code,HttpRequest & request, HttpResponse & response) { Result(msg, code, response); }ApiController::~ApiController() { }

這2個(gè)文件的代碼屬于業(yè)務(wù)類的代碼，都比較簡(jiǎn)單，實(shí)現(xiàn)了用戶登入，用戶名和密碼的驗(yàn)證,上面已經(jīng)有注釋，這里就不進(jìn)行重點(diǎn)講解。

添加控制器處理入口

我們更多是希望有所有的請(qǐng)求統(tǒng)一入口，所有的控制器，像剛剛添加的控制器都能夠在入口注冊(cè)。

添加通用控制器處理類 requestmapper.cpp ，該類與業(yè)務(wù)無(wú)關(guān)。
主要實(shí)現(xiàn)接收請(qǐng)求，并查找控制器和接口方法，并進(jìn)行轉(zhuǎn)發(fā)請(qǐng)求，文件內(nèi)容如下：

/**@file@author Stefan Frings */#include <QCoreApplication> #include "requestmapper.h" #include "controller/ApiController.h" #include <qmetaobject.h>//靜態(tài)變量 QMultiMap<QString, QString> RequestMapper :: Area; template <typename T> int RegisterController(const char *typeName,const QString& area) { QByteArray tmp=typeName; tmp = tmp.toLower();auto type= tmp.constData();int v=qRegisterMetaType<T>(type);if (!area.isEmpty()){RequestMapper::RegisterArea(area, type);}return v; } template <typename T> int RegisterController(const QString& area) {return RegisterController<T>(T::staticMetaObject.className(), area); } RequestMapper::RequestMapper(QObject* parent):HttpRequestHandler(parent) {qDebug("RequestMapper: created");//注冊(cè)Api控制器,域?yàn)関ue-element-admin。訪問(wèn)格式為：//http://localhost:5050/{域}/{控制器}//例如 http://localhost:5050/vue-element-admin/apiRegisterController<ApiController>("apicontroller", "vue-element-admin"); }RequestMapper::~RequestMapper() {qDebug("RequestMapper: deleted"); }void RequestMapper::RegisterArea(const QString &area, const QString& classname) {Area.insertMulti(area, classname); }//查找控制器，并調(diào)用接口方法。 void RequestMapper::service(HttpRequest& request, HttpResponse& response) {QByteArray path=request.getPath().toLower();qDebug("RequestMapper: path=%s",path.data());fprintf(stderr, "request: %s\n", path.data());//實(shí)現(xiàn)跨域訪問(wèn)，js 調(diào)用API 提供了支持。response.setHeader("Connection", "keep-alive");auto origin = request.getHeader("Origin");response.setHeader("Access-Control-Allow-Origin", origin);response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");response.setHeader("Access-Control-Allow-Headers", "X-PINGOTHER,Content-Type,x-token");response.setHeader("Access-Control-Max-Age", "86400");response.setHeader("Vary", "Accept-Encoding,Origin");response.setHeader("Keep-Alive", "timeout=2,max=99");//set api header response.setHeader("Content-Type", "application/json; charset=utf-8");//response.setHeader("Access-Control-Allow-Origin", "*"); // also important , if not set , the html application wont run.if (request.getMethod() == "OPTIONS"){response.setStatus(200,"OK"); qDebug("RequestMapper: finished request"); // Clear the log bufferreturn;}else{}// For the following pathes, each request gets its own new instance of the related controller. QByteArrayList items = path.split('/');QByteArray areaname;QByteArray controlname;QByteArray actionname;QByteArray a, b, c;for (int i = 0; i < items.length(); i++){QByteArray first = items[i];if (first.isEmpty())continue;else{//get control and action of name.a = first;if(i+1<items.length())b = items[i + 1].toLower();if (i + 2 < items.length())c = items[i + 2].toLower();break;}}QList<QString> controls;//判斷是否是路由。if (Area.contains(a)){areaname = a;controlname = b;actionname = c;controls=Area.values(a);}else{controlname = a;actionname = b;}QString className = (controlname + "Controller").toLower();int id = QMetaType::type(className.toLatin1());HttpRequestHandler* result = NULL;//判斷areaif (id != QMetaType::UnknownType){ if (controls.count() > 0 && !controls.contains(className)){qDebug("RequestMapper: finished request"); return;}}if (id != QMetaType::UnknownType){result = static_cast<HttpRequestHandler*>(QMetaType::create(id));const QMetaObject * theMetaObject = result->metaObject(); int nMetathodCount = theMetaObject->methodCount();QByteArray method;//查找方法for (int nMetathodIndex = 0; nMetathodIndex < nMetathodCount; nMetathodIndex++){QByteArray oneMethod = theMetaObject->method(nMetathodIndex).name(); if (actionname.compare(oneMethod, Qt::CaseSensitivity::CaseInsensitive)==0){ method = oneMethod;break;} }if (!method.isEmpty()){auto token=request.getHeader("X - Token");//判斷token是否是可用。auto v = QMetaObject::invokeMethod(result, method.data(), Qt::DirectConnection,Q_ARG(HttpRequest &, request),Q_ARG(HttpResponse &, response));if (!v)qDebug() << method.data()<<" method invokeMethod is error!";}else{//不存在的方法。auto v = QMetaObject::invokeMethod(result, "ApiResult", Qt::DirectConnection,Q_ARG(const QString&, actionname+" action not found !"),Q_ARG(int, 1),Q_ARG(HttpRequest &, request),Q_ARG(HttpResponse &, response));if (!v)qDebug() << " service method invokeMethod is error!"; }delete result;}else{qDebug() << "UnknownType service method invokeMethod is error!";}qDebug("RequestMapper: finished request");}

特別說(shuō)明：當(dāng)有新的控制器添加的時(shí)候，只需要在requestmapper.cpp
文件的函數(shù) RequestMapper 中注冊(cè)控制器即可，代碼如下：

RequestMapper::RequestMapper(QObject* parent):HttpRequestHandler(parent) {qDebug("RequestMapper: created");//注冊(cè)Api控制器,域?yàn)関ue-element-admin。訪問(wèn)格式為：//http://localhost:5050/{域}/{控制器}//例如 http://localhost:5050/vue-element-admin/apiRegisterController<ApiController>("apicontroller", "vue-element-admin"); }

使用webengine實(shí)現(xiàn) view

在BitPos 項(xiàng)目 main.cpp 源碼修改如下：

#include "BitPos.h" #include <QtWidgets/QApplication> #include <QWebEngineView> #include <httpserver/httplistener.h> #include <logging/filelogger.h> #include <qdir.h> #include "src/requestmapper.h" using namespace stefanfrings;/** Search the configuration file */ QString searchConfigFile() {QString binDir = QCoreApplication::applicationDirPath();QString appName = QCoreApplication::applicationName();QString fileName(appName + ".ini");QStringList searchList;searchList.append(binDir);searchList.append(binDir + "/etc");searchList.append(binDir + "/../etc");searchList.append(binDir + "/../../etc"); // for development without shadow buildsearchList.append(binDir + "/../" + appName + "/etc"); // for development with shadow buildsearchList.append(binDir + "/../../" + appName + "/etc"); // for development with shadow buildsearchList.append(binDir + "/../../../" + appName + "/etc"); // for development with shadow buildsearchList.append(binDir + "/../../../../" + appName + "/etc"); // for development with shadow buildsearchList.append(binDir + "/../../../../../" + appName + "/etc"); // for development with shadow buildsearchList.append(QDir::rootPath() + "etc/opt");searchList.append(QDir::rootPath() + "etc");foreach(QString dir, searchList){QFile file(dir + "/" + fileName);if (file.exists()){// foundfileName = QDir(file.fileName()).canonicalPath();qDebug("Using config file %s", qPrintable(fileName));return fileName;}}// not foundforeach(QString dir, searchList){qWarning("%s/%s not found", qPrintable(dir), qPrintable(fileName));}qFatal("Cannot find config file %s", qPrintable(fileName)); }int main(int argc, char* argv[]) {QApplication a(argc, argv); // Find the configuration fileQString configFileName = searchConfigFile();// Configure and start the TCP listenerQSettings* listenerSettings = new QSettings(configFileName, QSettings::IniFormat, &a);listenerSettings->beginGroup("listener");new HttpListener(listenerSettings, new RequestMapper(&a), &a); //瀏覽器QWebEngineView view;//設(shè)置訪問(wèn)地址view.setUrl(QUrl("http://localhost:5050/vue-element-admin/api/Login?user_code=333&password=3445"));//顯示瀏覽器窗口。view.show(); return a.exec(); }

代碼文件目錄如下圖：

編譯并調(diào)試View

按f5運(yùn)行，即可看到接口返回（也可以用瀏覽器看接口返回），如下圖：
源碼下載：
https://download.csdn.net/download/m0_49654513/12749026

總結(jié)

如果后面添加更多的模塊的接口，只需要按模板添加控制器，按操作在控制器內(nèi)添加方法即可。本節(jié)的源碼在QQ群561506606共享可以下載。

至此，qt 接口開(kāi)發(fā)演示完畢，下一節(jié)講解qt實(shí)現(xiàn)web服務(wù)器加載vue應(yīng)用進(jìn)行C++和html混合編程。
后面的文章主要與技術(shù)有關(guān)，索取源碼，技術(shù)溝通，編譯報(bào)錯(cuò)，請(qǐng)加QQ群561506606 加群無(wú)需驗(yàn)證。
點(diǎn)擊鏈接加入群聊【企業(yè)級(jí)系統(tǒng)實(shí)戰(zhàn)-qt vue.j】：https://jq.qq.com/?_wv=1027&k=CCmkgYYu

總結(jié)

以上是生活随笔為你收集整理的qt 实现MVC Api控制器开发 web api接口-连载【5】-企业级系统开发实战连载系列 -技术栈(vue、element-ui、qt、c++、sqlite)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。