2. QML中连接数据库MySql

1. 说明：

QT版本为 Qt.5.9，数据库创建使用 SQLiteStudio 。
因为 QML 不能直接连接数据库，所以需要 C++ 在后端连接，需要自定义一个类文件，专门用来处理有关数据库的操作，并注册到 QML 上下文背景中，以供 QML 调用。如何自定义类并注册到 QML 中可参考：注册自定义类

2. 第一步：

创建自定义C++类，命名为 mysql ，后续的一系列关于数据库的操作都会在这个文件中执行。代码如下：
mysql.h:

#ifndef MYSQL_H
#define MYSQL_H

#include <QObject>

#include <QSqlDatabase>
#include <QSqlQuery>
#include <QSqlError>
#include <QSqlField>

#include <QDebug>

class MySql : public QObject
{
    Q_OBJECT
public:
    explicit MySql(QObject *parent = 0);
    ~MySql();
    bool init();	//用于初始化数据库（打开，连接），在构造函数内调用
    bool closeSql();  //用于关闭数据库，在析构函数内调用

    Q_INVOKABLE void selectData();	//用于简单的查询数据 （Q_INVOKABLE 关键字修饰后，可以在 QML 中直接调用）

signals:

private:
    QSqlDatabase db;	//定义一个数据库变量

};

#endif // MYSQL_H

mysql.cpp:

#include "mysql.h"

MySql::MySql(QObject *parent) : QObject(parent)
{
    init();		//调用初始化函数
}

MySql::~MySql()
{
    closeSql();		//关闭数据库
}

bool MySql::init()
{
    db = QSqlDatabase::addDatabase("QSQLITE");	//添加一个数据库类型
    db.setDatabaseName("自己的数据库文件路径");	//指定数据库路径
    if(db.open()){	//尝试打开数据库
        return true;
    }
    return db.open();
}

bool MySql::closeSql()
{
    db.close();	//关闭数据库
    return false;
}

void MySql::selectData()
{
    QSqlQuery query;	//用于查询数据库
    query.prepare(QString("SELECT * FROM friends ;"));	//prepare函数：准备一条查询语句
    if(query.exec()){	//exec函数：执行查询语句
        while (query.next()) {
            qDebug()<<query.value("friendsName").toString() <<"--> Age:" << query.value("friendsAge").toInt();
        }
    }
}

3. 第二步：

在 main.cpp 中将自定义类注册到 QML 的上下文背景中，代码如下：

//注册 MySql 自定义类到 QML 的上下文背景中进行使用
MySql mysql;
engine.rootContext()->setContextProperty("mySql",&mysql);

4. 第三步：

在 QML 界面进行使用：本例实在按钮点击后，调用查询函数进行数据查询，并输出。本文中用到的数据信息如下图：

示例代码如下：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.0

ApplicationWindow {
    id:rootWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
  
    Button{
        anchors.centerIn: parent
        width: 100
        height: 50
        text:"查询姓名"
        onClicked: {
            mySql.selectData()	//在 QML 端调用 C++ 自定义类中的函数
        }
    }
}

5. 实际输出结果：

持续更新中，请大家多多关注…