Qt5学习笔记（二）关于Qt的MVC结构（参考Sherriff, Nicholas《Learn Qt5》）

参考书目：

Sherriff, Nicholas.Learn Qt5: Build Modern, Responsive Cross-platform Desktop Applications with Qt, C++, and QML

OS: Windows 10

IDE: Qt Creator

Qt version: 5.10.0

为了更好地配合教材，这次把Qt的版本换成了和教材一致的5.10.0版本。

这篇文章讲的是如何使用Qt Creator创建一个MVC框架的项目。

 

啰嗦一下：在上一篇文章（Qt5学习笔记（一）使用单个.pro文件创建Hello World工程（参考Sherriff, Nicholas《Learn Qt5》））中实现了scratchpad应用程序，我们可以把它称作“Qt工程”。在技术层面上这样的工程叫做project，而商业环境中的工程指的是initiative。在实际开发中，project往往是initiative的一部分。我们经常说的“工程”一般是指project。

这次的例子是遵循MVC框架实现的一个多项目工程。关于MVC，这里简单说明一下：MVC（Model View Controller）是一种设计思路，遵循它可以把用户界面（View）、功能逻辑（Controller、Model）的代码分开实现。

M、V、C以及之间的关系是：

• V：View代表用户界面，一般是提供交互式的图形界面由用户下达各种指令。它可以访问Controller和Model，因为它需要将用户通过用户界面发出的命令传递给Controller控制Model并呈现结果；
• C：Controller代表控制器，用来接收用户通过View传递给它的指令对数据模型Model进行操作。可以访问Model，因为它需要对Model的数据进行操作，但是Controller并不能访问到View；
• M：Model可以看作是各种数据模型，用来提供各种数据。它既不能访问View也不能访问Controller。

在菜单栏中单击文件->新建文件或项目->其他项目->子目录项目，然后单击Choose..创建工程。

项目名称为cm，路径任选，这里放在上一篇文章中建立的qt文件夹里，Next。

然后进入开发包选择。Desktop Qt 5.10.0 MinGW 32bit为必选，其他可选。这里全选（不全选当然OK），下一步。

最后两个全部选择默认<None> 之后，单击“完成& 添加子项目”完成子目录项目的创建。

然后会弹出“新建子项目”窗口，选择Application->Qt Quick Application - Empty，单击Choose..

子项目命名为“cm-ui” ，路径默认放在cm目录下，下一步。

Build system默认选qmake，下一步。

Minimal required Qt version默认选Qt 5.9，Use Qt Virtual Keyboard默认不选，下一步。

和之前的开发包选择一样，Desktop Qt 5.10.0 MinGW 32bit为必选，其他可选。这里全选（不全选也OK），然后下一步。

 最后，默认选择作为子项目添加到项目cm.pro中，添加到版本控制系统默认选择<None>，完成创建。

至此，我们MVC中的View部分已经创建完毕。 接下来创建业务逻辑部分。

在“项目”面板中，右击最顶部的cm文件夹，选择“新子项目...”。

选择Library->C++库，单击Choose..

类型默认选择共享库，名称为cm-lib，创建路径默认在cm文件夹下，下一步。

模块默认只选择QtCore，下一步。

这里我们可以创建自己的类了，这里类名为Client，然后头文件和源文件会自动命名为client.h和client.cpp，下一步。 

最后，和之前创建的cm-ui一样，默认选择作为子项目添加到项目cm.pro中，添加到版本控制系统默认选择<None>，完成创建。

至此cm-lib子工程已创建完毕。接下来创建最后一个子工程cm-tests，用于单元测试。

右击项目面板的cm文件夹，选择“新子项目...”，在“其他项目”中选择“Qt单元测试”，单击“Choose..”。

项目名称命名为“cm-tests” ,路径默认在cm文件夹下，下一步。

模块默认选择QtCore和QtTest，下一步。

类名命名为“ClientTests”，勾选“生成初始化和清理代码”，文件命名为client-tests.cpp，下一步。

项目管理中，同样默认选择作为子项目添加到项目cm.pro中，添加到版本控制系统默认选择<None>，完成创建。

经历过漫长的创建向导，至此三个子工程已全部创建完成，现在我们的项目面板结构应该是这样的：

下面对这三个子工程分别处理。 

cm-lib

首先在cm-lib文件夹下新建文件夹source（Tip：新建文件夹的快捷键是Shift+Ctrl+N），把cm-lib下的cm-lib_global.h移动到source下，然后在source文件夹下再新建文件夹models，把cm-lib下的client.cpp和client.h移动到models下。

然后回到Qt Creator，打开cm-lib.pro，编辑代码如下：

QT -= gui

TARGET = cm-lib
TEMPLATE = lib

CONFIG += c++14

DEFINES += CMLIB_LIBRARY

INCLUDEPATH += source

SOURCES += source/models/client.cpp

HEADERS += source/cm-lib_global.h \
        source/models/client.h

逐行解释：

由于cm-lib是一个库工程，所以这里不用加载默认的GUI模块，所以我们在变量QT中去掉了这个模块。

TARGET变量是我们要给我们的二进制输出文件起的名字（这里是cm-lib.dll），如果没有给TARGET变量赋值，这个输出文件的名字就默认为工程名。

TEMPLATE变量在上一篇文章中提到过，它指的是工程的类型，这次我们的类型不再是app而是lib。

CONFIG变量也在上一篇文章中提到过，这里仍然使用C++14的特性。

cm-lib_global.h是一个预处理器模板，用于导出.dll文件，这里添加值CMLIB_LIBRARY到DEFINES可以触发这次导出。

INCLUDEPATH的值对应于源文件中#include的声明，当使用#include包含某个文件时，会根据INCLUDEPATH的值寻找。

SOURCES和HEADERS的值较原来修改了一下，来匹配之前移动.cpp和.h文件的操作。

现在在项目面板中右击cm-lib文件夹，单击“执行qmake”，成功后再次右击cm-lib单击“重新构建”。

cm-tests

在cm-tests目录下新建两层子目录source\models，把client-tests.cpp移动到models下。

回到Qt Creator，编辑cm-tests.pro：

QT += testlib
QT -= gui

TARGET = client-tests
TEMPLATE = app

CONFIG += c++14

CONFIG += console

CONFIG -= app_bundle

INCLUDEPATH += source

SOURCES += source/models/client-tests.cpp 

这里配置与cm-lib.pro相似，只是工程类型是app而不是lib了；而且这次也不需要GUI模块，但需要添加testlib模块用来获取Qt单元测试的功能。

然后对cm-tests执行qmake，然后重新构建。

cm-ui

这次在cm-ui目录下新建两个文件夹：source、views，把main.cpp移动到source下，把main.qml移动到views下，并把qml.qrc重命名为views.qrc。编辑cm-ui.pro：

QT += qml quick

TEMPLATE = app

CONFIG += c++14

INCLUDEPATH += source

SOURCES += source/main.cpp

RESOURCES += views.qrc


# Additional import path used to resolve QML modules in Qt Creator's code model

QML_IMPORT_PATH = $$PWD

实现UI界面要使用QML编写，这里需要的是qml和quick两个模块。

关于变量QML_INCLUDE_PATH等到之后使用QML模块时再解释。

接下来在文件资源管理器中用文本编辑器（这里使用的Atom）编辑views.qrc：

<RCC>
    <qresource prefix="/">
        <file>views/main.qml</file>
    </qresource>
</RCC>

最后，编辑main.cpp，只需要修改这一行：

    engine.load(QUrl(QStringLiteral("qrc:/views/main.qml")));

好了，对cm-ui执行cmake并重新构建。

运行之前，先调整一下左下角的配置：

配置好之后就可以点绿色三角运行了：

 嗯，就是一个空白的Hello World窗口，说明运行成功了。这就是目前构建的MVC多项目解决方案（multiproject solution）