在使用 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进行增删改查的实战
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
