QtQuick通过LocalStorage链接SQLite数据库,完成增删改查

时间:2024-03-24 13:23:57

一、创建与链接

LocalStorage官方给的说明:

This is a singleton type for reading and writing to SQLite databases;

链接调用的方法:

object openDatabaseSync(string name, string version, string description, int estimated_size, jsobject callback(db))

导入头文件:

import QtQuick.LocalStorage 2.0


为了便于维护和方便模块化管理数据库我们添加一个JavaScript文件:Database.js

该文件存放所有数据库操作函数,在qml文件中直接调用函数即可,main.qml导入:

import "Database.js" as JS                                     //JS是别名


(1)在Database.js文件中初始化数据库:

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查

先以同步打开数据库,名称“Phone_DB”,版本“1.0”,描述“Phone Database”,最大容量“1000000”;

接着用句柄db的transaction方法中的参数tx完成创建表,后续增删改查;tx.executeSql中添加数据库操作语句;

若不存在表Phone则创建,类型、名称以键值对的方式书写,“,”分隔;

数据库的位置,Windows下在:

C:\Users\Administrator\AppData\Local\localstorage\QML\OfflineStorage\Databases

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查

一个配置文件、一个数据库文件;配置文件里面是数据库的相关描述信息;


二、增

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查


其中“Pdate,Pdesc,Pdistance”代表一条记录的三个数值,最后返回SQLite数据库隐藏的一列属性“rowid”,

相当于索引值;


三、删

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查

根据数据库内部索引值(rowid)删除对应记录;


四、改

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查

根据数据库内部索引值(rowid)更新对应记录的信息;


五、查

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查

实际只用到了中间几行就可以了,我这里把函数写在了qml文件中,通过JS.db.xx调用javascript文件中的数据库句柄后面几行我是根据查询结果取出对应值显示在了ListView的footer区域;


六、数据库操作与MVC显示


qml文件中加载数据库的数据:

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查

加载:首先SELECT语句查询数据库中的数据,把结果保存在result中,接着调用ListView.model.append逐条添加到ListModel中(开始时ListModel为空)


后面界面上的增删改查操作都需要完成两步(1)操作ListModel(2)操作对应数据库;

这样保证数据库信息与显示的是一致的;该函数建议放在控件初始化函数中调用,也就是

Component.onCompleted函数中;


最后看一下运行结果:

前台:

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查

数据库:

QtQuick通过LocalStorage链接SQLite数据库,完成增删改查


我用的 Navicat 12 for SQLite显示SQLite数据库信息;

更多信息查看官方用户手册LocalStorage


小结:LocalStorage目前适合链接自身创建的SQLite数据库,外部提供的、没有配置文件的SQLite数据库文件,需要更加复杂的C++自定义的API导入到Qml文件中使用;