QML学习系列-QML实战 msql增删改查

在使用 QML 进行数据库增删改查的示例之前,我们需要先建立一个与 MySQL 数据库的连接。

建立 MySQL 数据库连接

为了与 MySQL 数据库建立连接,我们需要安装 Qt 的 SQL 模块和相关的 MySQL 驱动程序。在 Qt Creator 中,可以通过打开 “帮助” 菜单栏,选择 “关于插件”,切换至 “安装的产品” 标签页,然后搜索 “sql” 来安装 SQL 模块和 MySQL 驱动程序。

在代码中,我们可以使用 Qt 的 QSqlDatabase 类来建立连接。以下是一个建立 MySQL 数据库连接的示例:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.3
import QtSql 2.0

Item {

    property string databaseName: "mydatabase"
    property string userName: "root"
    property string password: "password"
    property string hostName: "localhost"

    Component.onCompleted: {
        var db = QSqlDatabase.addDatabase("QMYSQL");
        db.setHostName(hostName);
        db.setDatabaseName(databaseName);
        db.setUserName(userName);
        db.setPassword(password);
        if (db.open()) {
            console.log("Connected to database.");
        } else {
            console.log("Failed to connect to database.");
        }
    }
}

在上面的代码中,我们首先导入了 QtSql 模块,以便使用 QSqlDatabase 类。然后我们定义了一些属性,包括数据库名、用户名、密码和主机名。在 Component.onCompleted 函数中,我们创建了一个 QSqlDatabase 对象,并设置其数据库类型为 MySQL,并指定相关的连接信息。然后我们尝试通过 open 函数打开数据库连接,并输出连接状态到控制台。

显示 MySQL 数据库记录

要在 QML 中显示 MySQL 数据库的记录,我们可以使用 ListView 组件来呈现数据,同时使用一个 ListModel 对象来保存和管理我们从数据库中取出的记录。

以下是一个展示 MySQL 数据库记录的示例:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.3
import QtSql 2.0

Item {

    property string databaseName: "mydatabase"
    property string userName: "root"
    property string password: "password"
    property string hostName: "localhost"

    Component.onCompleted: {
        // Connect to database
        var db = QSqlDatabase.addDatabase("QMYSQL");
        db.setHostName(hostName);
        db.setDatabaseName(databaseName);
        db.setUserName(userName);
        db.setPassword(password);
        if (db.open()) {
            console.log("Connected to database.");
        } else {
            console.log("Failed to connect to database.");
            return;
        }
        
        // Fetch data
        var query = db.exec("SELECT * FROM mytable");
        var data = [];
        while (query.next()) {
            data.push({
                "id": query.value("id"),
                "name": query.value("name"),
                "description": query.value("description")
            });
        }
        
        // Create list model and assign data
        var model = Qt.createQmlObject('import QtQuick 2.0; ListModel {}', parent);
        for (var i = 0; i < data.length; i++) {
            model.append(data[i]);
        }
        
        // Create list view
        var view = Qt.createQmlObject('import QtQuick 2.0; ListView {}', parent);
        view.model = model;
        view.delegate = Text { text: name }
        view.width = 200;
        view.height = 300;
        view.x = 100;
        view.y = 100;
    }
}

在上面的代码中,我们首先建立了与 MySQL 数据库的连接,然后执行了一条 select 语句来获取数据库中的所有记录。我们将这些记录存储在一个 JavaScript 数组中,并使用 Qt.createQmlObject 函数创建了一个 ListModel 对象,然后用 model.append 方法将数据添加到该对象中。最后,我们使用 Qt.createQmlObject 函数创建了一个 ListView 组件,并将其 model 属性设置为我们刚才创建的 ListModel 对象,并为其指定了一个简单的文本代理来显示每个项目的名称。我们还为 ListView 指定了一些基本的属性,如宽度、高度、位置等。

插入 MySQL 数据库记录

要插入新记录到 MySQL 数据库中,我们可以使用一个 Dialog 组件来收集用户输入的数据,然后将这些数据插入到数据库中。

以下是一个插入记录的示例:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.3
import QtSql 2.0

Item {

    property string databaseName: "mydatabase"
    property string userName: "root"
    property string password: "password"
    property string hostName: "localhost"

    Component.onCompleted: {
        // Connect to database
        var db = QSqlDatabase.addDatabase("QMYSQL");
        db.setHostName(hostName);
        db.setDatabaseName(databaseName);
        db.setUserName(userName);
        db.setPassword(password);
        if (db.open()) {
            console.log("Connected to database.");
        } else {
            console.log("Failed to connect to database.");
            return;
        }
        
        // Create list model
        var model = Qt.createQmlObject('import QtQuick 2.0; ListModel {}', parent);
        
        // Create dialog to collect input
        var dialog = Qt.createQmlObject('import QtQuick.Dialogs 1.3; Dialog {}', parent);
        dialog.title = "Add Item";
        dialog.width = 300;
        dialog.height = 200;
        
        var nameField = Qt.createQmlObject('import QtQuick.Controls 2.15; TextField {}', dialog);
        nameField.width = 200;
        nameField.height = 30;
        nameField.x = 50;
        nameField.y = 50;
        
        var descField = Qt.createQmlObject('import QtQuick.Controls 2.15; TextField {}', dialog);
descField.width = 200;
descField.height = 30;
descField.x = 50;
descField.y = 90;

    var cancelButton = Qt.createQmlObject('import QtQuick.Controls 2.15; Button {}', dialog);
    cancelButton.text = "Cancel";
    cancelButton.width = 80;
    cancelButton.height = 30;
    cancelButton.x = 50;
    cancelButton.y = 140;
    cancelButton.clicked.connect(function() {
        dialog.close();
    });
    
    var saveButton = Qt.createQmlObject('import QtQuick.Controls 2.15; Button {}', dialog);
    saveButton.text = "Save";
    saveButton.width = 80;
    saveButton.height = 30;
    saveButton.x = 170;
    saveButton.y = 140;
    saveButton.clicked.connect(function() {
        var name = nameField.text;
        var desc = descField.text;
        
        // Insert new record into database
        var query = db.exec("INSERT INTO mytable (name, description) VALUES ('" + name + "', '" + desc + "')");
        if (query.lastError().type != QSqlError.NoError) {
            console.log("Failed to insert record: " + query.lastError().text);
        } else {
            // Add new record to list model
            var id = query.lastInsertId();
            model.append({
                "id": id,
                "name": name,
                "description": desc
            });
            
            console.log("Record inserted with ID " + id);
            
            // Close dialog
            dialog.close();
        }
    });
    
    // Show dialog
    dialog.show();
}
}

在上面的代码中,我们首先创建了一个空的 ListModel 对象,然后使用 Qt.createQmlObject 函数创建一个 Dialog 组件,并为其指定一些基本的属性,如标题、宽度和高度。然后我们创建了两个文本输入框和两个按钮,并将它们添加到对话框中。我们还为保存按钮指定了一个点击处理程序,该处理程序将从文本输入框中获取名称和描述,并将其插入到 MySQL 数据库中。如果插入操作成功,我们将使用 model.append 方法将新记录添加到我们的 ListModel 对象中。如果插入操作失败,我们将在控制台上输出一个错误信息。

更新 MySQL 数据库记录

要更新 MySQL 数据库中的记录,我们可以使用与插入新记录类似的方法创建一个 Dialog 组件,用于收集用户输入的新值。然后我们可以使用更新语句将这些新值应用到数据库中。

以下是一个更新记录的示例:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.3
import QtSql 2.0

Item {

    property string databaseName: "mydatabase"
    property string userName: "root"
    property string password: "password"
    property string hostName: "localhost"

    Component.onCompleted: {
        // Connect to database
        var db = QSqlDatabase.addDatabase("QMYSQL");
        db.setHostName(hostName);
        db.setDatabaseName(databaseName);
        db.setUserName(userName);
        db.setPassword(password);
        if (db.open()) {
            console.log("Connected to database.");
        } else {
            console.log("Failed to connect to database.");
            return;
        }
        
        // Create list model
        var model = Qt.createQmlObject('import QtQuick 2.0; ListModel {}', parent);
        
        // Fetch data and create list items
        var query = db.exec("SELECT * FROM mytable");
        while (query.next()) {
            model.append({
                "id": query.value("id"),
                "name": query.value("name"),
                "description": query.value("description")
            });
        }
        
        // Create dialog to collect input
        var dialog = Qt.createQmlObject('import QtQuick.Dialogs 1.3; Dialog {}', parent);
        dialog.title = "Edit Item";
        dialog.width = 300;
        dialog.height = 200;
        
        var nameField = Qt.createQmlObject('import QtQuick.Controls 2.15; TextField {}', dialog);
        nameField.width = 200;
        nameField.height = 30;
        nameField.x = 50;
        nameField.y = 50;
        
        var descField = Qt.createQmlObject(‘import QtQuick.Controls 2.15; TextField {}’, dialog);
descField.width = 200;
descField.height = 30;
descField.x = 50;
descField.y = 90;

    var cancelButton = Qt.createQmlObject('import QtQuick.Controls 2.15; Button {}', dialog);
    cancelButton.text = "Cancel";
    cancelButton.width = 80;
    cancelButton.height = 30;
    cancelButton.x = 50;
    cancelButton.y = 140;
    cancelButton.clicked.connect(function() {
        dialog.close();
    });
    
    var saveButton = Qt.createQmlObject('import QtQuick.Controls 2.15; Button {}', dialog);
    saveButton.text = "Save";
    saveButton.width = 80;
    saveButton.height = 30;
    saveButton.x = 170;
    saveButton.y = 140;
    saveButton.clicked.connect(function() {
        var name = nameField.text;
        var desc = descField.text;
        var id = model.get(view.currentIndex).id;
        
        // Update record in database
        var query = db.exec("UPDATE mytable SET name = '" + name + "', description = '" + desc + "' WHERE id = " + id);
        if (query.lastError().type != QSqlError.NoError) {
            console.log("Failed to update record: " + query.lastError().text);
        } else {
            // Update record in list model
            model.setProperty(view.currentIndex, "name", name);
            model.setProperty(view.currentIndex, "description", desc);
            
            console.log("Record updated with ID " + id);
            
            // Close dialog
            dialog.close();
        }
    });
    
    // Create list view
    var view = Qt.createQmlObject('import QtQuick 2.0; ListView {}', parent);
    view.model = model;
    view.delegate = Text { text: name }
    view.width = 200;
    view.height = 300;
    view.x = 100;
    view.y = 100;
    view.editable = true;
    view.onEditBegan.connect(function() {
        // Open edit dialog
        var index = view.currentIndex;
        nameField.text = model.get(index).name;
        descField.text = model.get(index).description;
        dialog.show();
    });
}
}

在上面的代码中,我们首先创建了一个空的 ListModel 对象,并使用 Qt.createQmlObject 函数创建了一个 ListView 组件,并将其 model 属性设置为我们的 ListModel 对象。我们还为 ListView 指定了一个简单的文本代理来显示每个项目的名称,并启用了 editable 属性以允许用户编辑列表项。

当用户开始编辑一个列表项时,我们将在 onEditBegan 信号处理程序中打开一个编辑对话框,并将当前项目的名称和描述值加载到文本输入框中。然后我们使用更新语句将新值插入到 MySQL 数据库中,并使用 setProperty 方法更新我们的 ListModel 对象中相应项目的名称和描述。如果更新操作失败,我们将在控制台上输出一个错误信息。

删除 MySQL 数据库记录

要删除 MySQL 数据库中的记录,我们可以在 ListView 中启用删除功能,当用户删除一个项目时,我们可以使用一个确认对话框来要求用户确认该操作,然后使用删除语句从数据库中删除该记录。

以下是一个删除记录的示例:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.3
import QtSql 2.0

Item {

    property string databaseName: "mydatabase"
    property string userName: "root"
    property string password: "password"
    property string hostName: "localhost"

    Component.onCompleted: {
        // Connect to database
        var db = QSqlDatabase.addDatabase("QMYSQL");
        db.setHostName(hostName);
        db.setDatabaseName(databaseName);
        db.setUserName(userName);
        db.setPassword(password);
        if (db.open()) {
            console.log("Connected to database.");
        } else {
            console.log("Failed to connect to database.");
            return;
        }
        
        // Create list model
        var model = Qt.createQmlObject('import QtQuick 2.0; ListModel {}', parent);
        
        // Fetch data and create list items
        var query = db.exec("SELECT * FROM mytable");
        while (query.next()) {
            model.append({
            ................................................
            ..................................

这就是采用qml进行增删改查的实战

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在QML中实现表格的增删改查功能,可以在QML中使用Qt提供的QAbstractItemModel类或自定义QML组件。 1. 使用QAbstractItemModel类 QAbstractItemModel是一个抽象类,用于表示表格数据模型。它定义了用于访问、编辑和操作表格数据的接口。在QML中,可以通过绑定QAbstractItemModel对象的属性和方法来实现表格的增删改查。 示例代码: ``` TableView { id: tableView model: myModel // 数据源 anchors.fill: parent // 填充父容器 columnWidthProvider: function (column) { return 100 } // 列宽 rowHeightProvider: function (row) { return 30 } // 行高 // 添加行 function addRow(rowData) { myModel.insertRow(rowCount, rowData) } // 删除行 function deleteRow(row) { myModel.removeRow(row) } // 修改单元格值 function setCellValue(row, column, value) { myModel.setData(myModel.index(row, column), value) } // 获取单元格值 function getCellValue(row, column) { return myModel.data(myModel.index(row, column)) } } ``` 2. 自定义QML组件 如果您需要更复杂的表格,或者需要自定义表格的外观和行为,可以使用自定义QML组件来实现。 示例代码: ``` import QtQuick 2.0 Item { property alias model: tableView.model property int rowCount: 0 property int columnCount: 0 property int cellWidth: 100 property int cellHeight: 30 ListView { id: rowList model: rowCount orientation: Qt.Vertical delegate: ListView { id: columnList model: columnCount orientation: Qt.Horizontal delegate: Item { width: cellWidth height: cellHeight Rectangle { width: parent.width height: parent.height border.width: 1 color: "white" Text { text: model.data(model.index, Qt.DisplayRole) anchors.centerIn: parent } } } } } TableView { id: tableView model: myModel // 数据源 visible: false // 隐藏TableView } // 添加行 function addRow(rowData) { myModel.insertRow(rowCount) for (var i = 0; i < columnCount; i++) { myModel.setData(myModel.index(rowCount, i), rowData[i]) } rowCount++ } // 删除行 function deleteRow(row) { myModel.removeRow(row) rowCount-- } // 修改单元格值 function setCellValue(row, column, value) { myModel.setData(myModel.index(row, column), value) } // 获取单元格值 function getCellValue(row, column) { return myModel.data(myModel.index(row, column)) } Component.onCompleted: { rowCount = tableView.rowCount columnCount = tableView.columnCount cellWidth = tableView.columnWidthProvider(0) cellHeight = tableView.rowHeightProvider(0) tableView.visible = true } } ``` 以上是两种实现表格增删改查的方法,您可以根据实际需求选择使用哪种方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值