1. 程式人生 > 實用技巧 >qt 實現MVC Api控制器開發 web api介面-連載【5】-企業級系統開發實戰連載系列 -技術棧(vue、element-ui、qt、c++、sqlite)

qt 實現MVC Api控制器開發 web api介面-連載【5】-企業級系統開發實戰連載系列 -技術棧(vue、element-ui、qt、c++、sqlite)

作者背景描述:

本人就職於外資IT企業,擔任電商訂單處理產品開發經理一職,領導過非常多次大小專案的開發工作,對電商平臺訂單處理流程非常熟悉。

公司專注鞋服行業相關軟體開發和服務,公司規模100多人以上,在臺北,廣州,成都,上海,北京,國外等均有分公司。

為什麼寫此係列文章?

本人在學校至工作到現在十餘年時間,使用.netC#開發語言,結合在公司實際開發,和市場的需求中,NET.開發的商業企業級系統遇到的缺點有如下:

1.程式首次載入慢,因為虛擬機器編譯的原因。

2.WINFORM介面開發不夠炫麗,精美。

3.WINFORM介面設計人員難找。

4.程式可以被反編譯。

5.安裝包過大,部署麻煩,framework.

6.跨平臺不夠好。

結論:

結合近年來前端設計的走向,最終選擇了qt+vue+element UI+sqlite(資料庫根據需要情況選擇)

qt負責介面和硬體處理

sqlite做資料儲存

vue+element UI實現前端。

結果預覽

qt 實現MVC Api控制器開發 web api介面-連載【5】-企業級系統開發實戰連載系列 -技術棧(vue、element-ui、qt、c++、sqlite)

使用微軟mvc 的同學都知道編寫一個web api 是非常方便的,本文通過使用qt 實現 Controller action 開發web api

MVC 結構圖如下:

下載QtWebApp(本文最後有下載方式),整合到專案中,這個庫主要是實現http 協議,和 QT Web Api庫支援。

對於單機版本,不需要使用者安裝iis tomcat,簡化了部署的難度。

QtWebApp目錄結構如下:

QtWebApp解壓放到BitPos(上一章節建立的專案)目錄下。

效果如下:

開啟上一章節建立的解決方案:BitPos

在解決方案資源管理器,右鍵》新增》現有專案 ,如下:

BitPos.vcxproj 新增現在專案

如下圖:

選擇QtWebApp ,右鍵》屬性

在常規選項中修改sdk 版本,和平臺工具集,配置型別,輸出為靜態庫,如下:

qt project settings 選項中,修改 qt installation 我們上一節配置的qt版本,如下:

編譯原始碼,這裡能夠一次編譯成功,如下圖:

點選BitPos專案,右鍵》新增》引用

BitPos新增 包含目錄,因為後面會用QtWebApp的標頭檔案。

選擇BitPos 》屬性》vc++目錄》包含目錄》輸入QtWebApp 如下圖:

修改BitPos執行庫為靜態連結。

按上面的步驟,修改這2個專案的配置為release 模式,重複一次操作。否則release編譯會報錯。

接下來演示如何新增一個使用者登入時密碼驗證的介面。

這個介面有2個引數,分別是user_code ,password

返回為json ,返回了使用者程式碼和使用者名稱稱 ,分別是user_code,user_name

請求描述如下圖:

接下來進行實操:新增API 控制器 和登入介面Login的方法

新增 src 目錄,然後在目錄下建立 controller

如下圖:

選中controller 右鍵》新增》Add qt class

輸入類名:ApiController

如下圖:

add 如下圖:

點選next:如下圖

Base class 修改為HttpRequestHandler

最後貼出這2個類的原始碼分別是:

ApiController.h的程式碼如下:

 1 #pragma once
 2 //解決中文亂碼問題。
 3 #pragma execution_character_set("utf-8")
 4 #include <httpserver/httprequesthandler.h>
 5 
 6 using namespace stefanfrings;
 7 
 8 //控制器 http://localhost:5050/vue-element-admin/api
 9 class ApiController :
10     public HttpRequestHandler
11 {
12 
13     Q_OBJECT 
14 public:
15     Q_INVOKABLE ApiController(const ApiController & v)
16     {
17         *this = v;
18     }
19     Q_INVOKABLE ApiController &operator=(const ApiController &v)
20     {
21                 return *this;  
22     }
23      
24     Q_INVOKABLE ApiController()
25     {
26 
27     }
28 
29     //action 登入介面。http://localhost:5050/vue-element-admin/api/login
30     Q_INVOKABLE  void Login(HttpRequest & request, HttpResponse & response);
31  
32     Q_INVOKABLE void  ApiResult(const QString& msg, int code,HttpRequest & request, HttpResponse & response);
33     /** Generates the response */
34     Q_INVOKABLE void service(HttpRequest& request, HttpResponse& response);
35 
36     void Result(QString msg, int code, HttpResponse & response);
37 
38     ~ApiController();
39 };
View Code

ApiController.cpp的程式碼如下:

 1 #include "ApiController.h"
 2 #include <qjsondocument.h>
 3 #include <qjsonobject.h>
 4 #include <qcryptographichash.h>
 5 #include <qlist.h>
 6 
 7  
 8  
 9 
10 
11  
12 
13 Q_INVOKABLE void ApiController::Login(HttpRequest & request, HttpResponse & response)
14 {
15     //request.
16 
17     //獲取post請求的表單 。
18     QMultiMap<QByteArray, QByteArray> forms = request.getParameterMap();
19     //獲取使用者提交表單中的user_code 
20     auto usercode = forms.value("user_code").trimmed();
21     if (usercode.isEmpty())
22     {
23         Result("使用者程式碼不能為空!", 1, response);
24         return;
25     }
26     //獲取使用者提交表單中的password 
27     auto password = forms.value("password").trimmed();
28     if (password.isEmpty())
29     {
30         Result("密碼不能為空!", 1, response);
31         return;
32     }
33     //二次判斷
34     QByteArray hash = QCryptographicHash::hash(password, QCryptographicHash::Algorithm::Sha256).toBase64();
35 
36     //驗證使用者程式碼和密碼。
37 
38     QJsonObject object
39     {
40         {"code", 0},
41         {"msg", QJsonValue::Null}
42     };
43     QJsonObject user
44     {
45         {"user_code", "admin"},
46         {"user_name", "admin"}
47     };
48     object.insert("user", user);
49 
50     QJsonDocument usermodel(object);
51 
52     //返回使用者資訊。
53     QByteArray body = usermodel.toJson(QJsonDocument::JsonFormat::Indented);
54 
55     response.write(body, true);
56 }
57 
58 
59 Q_INVOKABLE void ApiController::service(HttpRequest & request, HttpResponse & response)
60 { 
61      
62 }
63 
64 void ApiController::Result(QString msg, int code, HttpResponse & response)
65 {
66     QJsonObject object
67     {
68         {"code", code},
69         {"msg", QJsonValue(msg)}
70     };
71   
72 
73     QJsonDocument usermodel(object);
74 
75     QByteArray body = usermodel.toJson(QJsonDocument::JsonFormat::Indented);
76 
77     response.write(body, true);
78 }
79 
80 Q_INVOKABLE void ApiController::ApiResult(const QString& msg,int code,HttpRequest & request, HttpResponse & response)
81 { 
82     Result(msg, code, response);
83 }
84 
85 
86 
87 ApiController::~ApiController()
88 {
89 }
View Code

這2個檔案的程式碼屬於業務類的程式碼,都比較簡單,實現了使用者登入,使用者名稱和密碼的驗證,上面已經有註釋,這裡就不進行重點講解。

新增通用控制器處理類 requestmapper.cpp ,該類與業務無關。

主要實現接收請求,並查詢控制器和介面方法,並進行轉發請求,檔案內容如下:

  1 /**
  2   @file
  3   @author Stefan Frings
  4 */
  5 
  6 #include <QCoreApplication>
  7 #include "requestmapper.h"
  8 #include "controller/ApiController.h"
  9 #include <qmetaobject.h>
 10 
 11 //靜態變數
 12 QMultiMap<QString, QString> RequestMapper :: Area;
 13 template <typename T>
 14 int RegisterController(const char *typeName,const QString& area)
 15 { 
 16     QByteArray tmp=typeName;  
 17     tmp = tmp.toLower();
 18     auto type= tmp.constData();
 19      
 20     int v=qRegisterMetaType<T>(type);
 21     if (!area.isEmpty())
 22     {
 23         RequestMapper::RegisterArea(area, type);
 24     }
 25     return v;
 26 }
 27 template <typename T>
 28 int RegisterController(const QString& area)
 29 {
 30     return RegisterController<T>(T::staticMetaObject.className(), area); 
 31 }
 32 RequestMapper::RequestMapper(QObject* parent)
 33     :HttpRequestHandler(parent)
 34 {
 35     qDebug("RequestMapper: created");
 36     //註冊Api控制器,域為vue-element-admin。訪問格式為:
 37     //http://localhost:5050/{域}/{控制器}
 38     //例如 http://localhost:5050/vue-element-admin/api
 39     RegisterController<ApiController>("apicontroller", "vue-element-admin"); 
 40 }
 41 
 42 
 43 RequestMapper::~RequestMapper()
 44 {
 45     qDebug("RequestMapper: deleted");
 46 }
 47 
 48  void RequestMapper::RegisterArea(const QString &area, const QString& classname)
 49 {
 50     Area.insertMulti(area, classname);
 51 }
 52 
 53  //查詢控制器,並呼叫介面方法。
 54 void RequestMapper::service(HttpRequest& request, HttpResponse& response)
 55 {
 56     QByteArray path=request.getPath().toLower();
 57     qDebug("RequestMapper: path=%s",path.data());
 58     fprintf(stderr, "request: %s\n", path.data());
 59     //實現跨域訪問,js 呼叫API 提供了支援。
 60     response.setHeader("Connection", "keep-alive");
 61     auto origin = request.getHeader("Origin");
 62     response.setHeader("Access-Control-Allow-Origin", origin);
 63     response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
 64     response.setHeader("Access-Control-Allow-Headers", "X-PINGOTHER,Content-Type,x-token");
 65     response.setHeader("Access-Control-Max-Age", "86400");
 66     response.setHeader("Vary", "Accept-Encoding,Origin");
 67     response.setHeader("Keep-Alive", "timeout=2,max=99");
 68     //set api header 
 69     response.setHeader("Content-Type", "application/json; charset=utf-8");
 70     //response.setHeader("Access-Control-Allow-Origin", "*");   // also important , if not set , the html application wont run.
 71     if (request.getMethod() == "OPTIONS")
 72     {
 73         response.setStatus(200,"OK"); 
 74         qDebug("RequestMapper: finished request"); 
 75         // Clear the log buffer
 76      
 77         return;
 78     }
 79     else
 80     {
 81 
 82     }
 83 
 84     // For the following pathes, each request gets its own new instance of the related controller. 
 85         QByteArrayList items = path.split('/');
 86         QByteArray areaname;
 87         QByteArray controlname;
 88         QByteArray actionname;
 89         QByteArray a, b, c;
 90 
 91         for (int i = 0; i < items.length(); i++)
 92         {
 93             QByteArray first = items[i];
 94             if (first.isEmpty())
 95                 continue;
 96             else
 97             {
 98                 //get control and action of name.
 99                 a = first;
100                 if(i+1<items.length())
101                 b = items[i + 1].toLower();
102 
103                 if (i + 2 < items.length())
104                     c = items[i + 2].toLower();
105                 break;
106             }
107         }
108         QList<QString> controls;
109         //判斷是否是路由。
110         if (Area.contains(a))
111         {
112             areaname = a;
113             controlname = b;
114             actionname = c;
115             controls=Area.values(a);
116         }
117         else
118         {
119             controlname = a;
120             actionname = b;
121         }
122 
123         QString className = (controlname + "Controller").toLower();
124         
125         int id = QMetaType::type(className.toLatin1());
126         HttpRequestHandler* result = NULL;
127         //判斷area
128         if (id != QMetaType::UnknownType)
129         { 
130             if (controls.count() > 0 && !controls.contains(className))
131             {
132                  
133                 qDebug("RequestMapper: finished request"); 
134                  
135                 return;
136             }
137         }
138 
139         if (id != QMetaType::UnknownType)
140         {
141             result = static_cast<HttpRequestHandler*>(QMetaType::create(id));
142             const QMetaObject * theMetaObject = result->metaObject(); 
143             int nMetathodCount = theMetaObject->methodCount();
144             QByteArray method;
145             //查詢方法
146             for (int nMetathodIndex = 0; nMetathodIndex < nMetathodCount; nMetathodIndex++)
147             {
148                 QByteArray oneMethod = theMetaObject->method(nMetathodIndex).name(); 
149                 if (actionname.compare(oneMethod, Qt::CaseSensitivity::CaseInsensitive)==0)
150                 { 
151                     method = oneMethod;
152                     break;
153                 } 
154             }
155             if (!method.isEmpty())
156             {
157                 auto token=request.getHeader("X - Token");
158                 //判斷token是否是可用。
159                 auto v = QMetaObject::invokeMethod(result, method.data(), Qt::DirectConnection,
160                     Q_ARG(HttpRequest &, request),
161                     Q_ARG(HttpResponse &, response));
162                 if (!v)
163                     qDebug() << method.data()<<" method  invokeMethod is error!";
164              }
165             else
166             {
167              //不存在的方法。
168                  auto v = QMetaObject::invokeMethod(result, "ApiResult", Qt::DirectConnection,
169                     Q_ARG(const QString&, actionname+" action not found !"),
170                     Q_ARG(int, 1),
171                     Q_ARG(HttpRequest &, request),
172                     Q_ARG(HttpResponse &, response));
173                 if (!v)
174                     qDebug() <<  " service method invokeMethod is error!"; 
175             }
176             delete result;
177         }
178         else
179         {
180             qDebug() << "UnknownType service method invokeMethod is error!";
181         }
182 
183     qDebug("RequestMapper: finished request");
184  
185 }
View Code

特別說明:當有新的控制器新增的時候,只需要在requestmapper.cpp

檔案註冊控制器即可。

在BitPos 專案 main.cpp 原始碼修改如下:

 1 #include "BitPos.h"
 2 #include <QtWidgets/QApplication>
 3 #include <QWebEngineView>
 4 #include <httpserver/httplistener.h>
 5 #include <logging/filelogger.h>
 6 #include <qdir.h>
 7 #include "src/requestmapper.h"
 8 using namespace stefanfrings;
 9 
10 /** Search the configuration file */
11 QString searchConfigFile()
12 {
13     QString binDir = QCoreApplication::applicationDirPath();
14     QString appName = QCoreApplication::applicationName();
15     QString fileName(appName + ".ini");
16 
17     QStringList searchList;
18     searchList.append(binDir);
19     searchList.append(binDir + "/etc");
20     searchList.append(binDir + "/../etc");
21     searchList.append(binDir + "/../../etc"); // for development without shadow build
22     searchList.append(binDir + "/../" + appName + "/etc"); // for development with shadow build
23     searchList.append(binDir + "/../../" + appName + "/etc"); // for development with shadow build
24     searchList.append(binDir + "/../../../" + appName + "/etc"); // for development with shadow build
25     searchList.append(binDir + "/../../../../" + appName + "/etc"); // for development with shadow build
26     searchList.append(binDir + "/../../../../../" + appName + "/etc"); // for development with shadow build
27     searchList.append(QDir::rootPath() + "etc/opt");
28     searchList.append(QDir::rootPath() + "etc");
29 
30     foreach(QString dir, searchList)
31     {
32         QFile file(dir + "/" + fileName);
33         if (file.exists())
34         {
35             // found
36             fileName = QDir(file.fileName()).canonicalPath();
37             qDebug("Using config file %s", qPrintable(fileName));
38             return fileName;
39         }
40     }
41 
42     // not found
43     foreach(QString dir, searchList)
44     {
45         qWarning("%s/%s not found", qPrintable(dir), qPrintable(fileName));
46     }
47     qFatal("Cannot find config file %s", qPrintable(fileName));
48 }
49 
50 int main(int argc, char* argv[])
51 {
52     QApplication a(argc, argv); 
53     // Find the configuration file
54     QString configFileName = searchConfigFile();
55      
56     // Configure and start the TCP listener
57     QSettings* listenerSettings = new QSettings(configFileName, QSettings::IniFormat, &a);
58     listenerSettings->beginGroup("listener");
59     new HttpListener(listenerSettings, new RequestMapper(&a), &a); 
60     //瀏覽器
61     QWebEngineView view;
62     //設定訪問地址
63     view.setUrl(QUrl("http://localhost:5050/vue-element-admin/api/Login?user_code=333&password=3445"));
64     //顯示瀏覽器視窗。
65     view.show(); 
66     return a.exec();
67 }
View Code

檔案目錄如下圖:

按f5執行,即可看到介面返回(也可以用瀏覽器看介面返回),如下圖:

如果後面新增更多的模組的介面,只需要按模板新增控制器,按操作在控制器內新增方法即可。

至此,qt 介面開發演示完畢,下一節講解如何使用postman 進行介面除錯。

後面的文章主要與技術有關,索取原始碼,技術溝通,編譯報錯,請加QQ群561506606 加群無需驗證。

點選連結加入群聊【企業級系統實戰-qtvue.j】:https://jq.qq.com/?_wv=1027&k=CCmkgYYu