挑战ArkUI复刻手机备忘录
发布时间：2022-08-02 11:01:32 所属栏目：云计算 来源：互联网
导读：前言 学习了关系型数据库和一些相关的codelabs后，为了更深入地了解ArkUI关系型数据库的使用和操作，我决定复刻一个小小的手机备忘录。整个实现过程不仅有对关系型数据库接口的尝试封装，还碰了各种UI实现、路由跳转的壁，印象很深，所以就想分享一下这次复刻
|
前言 学习了关系型数据库和一些相关的codelabs后，为了更深入地了解ArkUI关系型数据库的使用和操作，我决定复刻一个小小的手机备忘录。整个实现过程不仅有对关系型数据库接口的尝试封装，还碰了各种UI实现、路由跳转的壁，印象很深，所以就想分享一下这次复刻实现的过程，总结一下经验。由于写的代码量较大，下面主要说一下与数据库通信的环节和路由通信的环节，UI布局放在上传的zip里。 部分效果展示 这是主界面（是不是有点像:-)： #夏日挑战赛#【FFH】挑战ArkUI复刻手机备忘录(rdb数据库)-开源基础软件社区 由于界面功能较多，更多的gif在后面功能拆分环节再来展示 #夏日挑战赛#【FFH】挑战ArkUI复刻手机备忘录(rdb数据库)-开源基础软件社区 代码实现流程 代码结构： #夏日挑战赛#【FFH】挑战ArkUI复刻手机备忘录(rdb数据库)-开源基础软件社区 实现思路 首先把繁多的rdb数据库接口封装成几个功能较完备的大接口，在UI界面进行调用和数据处理、数据通信。 一、关系型数据库的封装 官方对它的宣传就是：不用学会sql也能用（确实对，但还是要有些数据库基础才能处理结果集resultSet和使用executeSql接口）。 导入包： import data_rdb from ‘@ohos.data.rdb’。 创建数据库： data_rdb.getRdbStore返回一个数据库管理对象。 参数名 类型 说明 context Context 应用的上下文。 config StoreConfig 与此RDB存储相关的数据库配置。 version number 数据库版本。 众所周知，数据库有增删改查四大操作，则它也提供了几个常用接口。 api data_rdb.insert data_rdb.query data_rdb.delete data_rdb.update executeSql 其中，插入操作只需一个用于存储键值对的valueBucket就够了，而删除、更新和查询都要借助RdbPredicates谓词来获取数据索引才能进一步操作： RdbPredicates 表示关系型数据库（RDB）的谓词。该类确定RDB中条件表达式的值是true还是false。 let predicates = new data_rdb.RdbPredicates(“EMPLOYEE”)//例如创建一个为"EMPLOYEE"表服务的predicates实例。 还有更多的跟分布式有关的接口： setDistributedTables obtainDistributedTableName sync 还需要简单了解一下结果集的使用。 结果集文档 下面是看一些codelabs后进一步封装成的rdbStoreServer接口。 操作 接口名 插入 insertValue 更新 updateValue 列表查询 queryValue 限定词查询 search 删除 deleteValue 封装了五个接口，其中把查询参数以及查询得到的结果集从封装中解耦出来，能更灵活的查询数据和处理结果集。比如查询：通过field、value、table（表名）三个参数查询后获得结果集后再回调处理，如下： rdbStoreServer.js： 复制 import featureAbility from '@ohos.ability.featureAbility' import data_rdb from '@ohos.data.rdb' const STORE_CONFIG = { name: "rdbStore.db" } export default class rbdStoreModel { rdbStore #tableList = [] constructor(SQL_CREATE_TABLE_LIST) { //---在构造时传入准备好的sql语句 for (let i in SQL_CREATE_TABLE_LIST) {//---可插入多条SQL语句，一个库建多个表 this.#tableList.push(SQL_CREATE_TABLE_LIST[i]) } } createKvStore(cb) { if (typeof (this.rdbStore) === 'undefined') { let self = this; let context = featureAbility.getContext(); //---获取上下文 let promise = data_rdb.getRdbStore(context, STORE_CONFIG, 1) promise.then((rdbStore) => { self.rdbStore = rdbStore; for (let i in this.#tableList) { rdbStore.executeSql(this.#tableList[i], null); } console.info("xxx--- rdbStore " + 'create table.') cb(); }).catch((err) => { console.info("xxx--- rdbStore " + err) cb(); }) } else { cb(); } } insertValue(table, valueBucket) { this.createKvStore(() => { let promise = this.rdbStore.insert(table, valueBucket) promise.then((rows) => { console.info('xxx--- rdbStore.insert done ' + rows) }) }) } updateValue(valueBucket, table, field, value) { this.createKvStore(() => { console.info(`xxx--- rdbStore.update field = ${field} value = ${value} == ${JSON.stringify(valueBucket)}`) let predicates = new data_rdb.RdbPredicates(table) predicates.equalTo(field, value) this.rdbStore.update(valueBucket, predicates, function (err, rows) { console.info("xxx--- rdbStore.update updated row count: " + rows) }) }) } deleteValue(table, field, value,cb) { this.createKvStore(() => { console.info(`xxx--- rdbStore.delete field = ${field} value = ${value}`) let predicates = new data_rdb.RdbPredicates(table) predicates.equalTo(field, value) this.rdbStore.delete(predicates, (err, rows) => { if (rows === 0) { console.info("xxx--- rdbStore.delete rows: -1") } else console.info("xxx--- rdbStore.delete rows: " + rows) cb() }) }) } queryValue(table,callback) { //---所有columns值查找 this.createKvStore(() => { let predicates = new data_rdb.RdbPredicates(table) let promise = this.rdbStore.query(predicates)//---当query没有columns键值对集时默认返回所有columns console.info("xxx--- rdbStore query start") promise.then((resultSet) => { callback(resultSet); }) }) } search(table,field,value,callback){ //---限定词查找 this.createKvStore(()=>{ let predicates = new data_rdb.RdbPredicates(table) predicates.contains(field,value) let promise = this.rdbStore.query(predicates) console.info("xxx--- rdbStore search start") promise.then((resultSet) => { callback(resultSet); }) }) } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. index.js： 复制 import router from '@ohos.router'; import rdbStore from '../../common/model/rdbServer' const SQL_CREATE_TABLE = ["CREATE TABLE IF NOT EXISTS NOTES (ID INTEGER PRIMARY KEY AUTOINCREMENT, TITLE TEXT NOT NULL, CONTENT TEXT NOT NULL)"] export default { data: { rdbStore: new rdbStore(SQL_CREATE_TABLE), list: [], length: 0, }, onShow() { this.query() }, query() { let self = this this.rdbStore.queryValue('NOTES', (resultSet) => {//查找操作与查询操作不同但对结果集处理相同 self.resultSetServer(resultSet) }) }, onChange(e) { let val = e.value var self = this console.info('xxx--- search value change ' + val) this.rdbStore.search('NOTES', 'TITLE', val, (resultSet) => {//查找操作与查询操作不同但对结果集处理相同 self.resultSetServer(resultSet) }) } resultSetServer(resultSet) { //---结果集处理 let contactList = [] var self = this if (resultSet.rowCount > 0) { while (resultSet.goToNextRow()) { let id = resultSet.getLong(resultSet.getColumnIndex("ID")); let title = resultSet.getString(resultSet.getColumnIndex("TITLE")); let content = resultSet.getString(resultSet.getColumnIndex("CONTENT")); let obj = { id: id, title: title, content: content }; contactList.push(obj); } if (contactList.length > 0) { this.flag = true self.list = contactList this.length = contactList.length console.info('xxx--- query suc length = ' + contactList.length) } } else { console.info('xxx--- query empty') this.length = 0 this.flag = false } resultSet.close(); resultSet = null; }, }  （编辑：荆门站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
