项目有个需求，需要生成app和小程序，app支持离线数据库，如果当前没有网络提醒用户开启离线模式，所以就随便搞了下，具体的思路就是： 一个接口和多个实现类（类似后端的模板设计模式），例如sqlite实现类，indexedDB实现类等等，根据环境动态选用具体的实现类
indexedDB有些方法没有改，sqlite没有测试，此处就是提供一个思路，只是用来学习和研究着玩了
目录
class类
BaseApi
ts
import type LocalDB from '@/class/DbClass'
import { tableConfig } from '@/enums/DbEnums'
import { CallBackFunType } from '@/utils/request'
class BaseApi {
public localDB: LocalDB;
public table: string;
public hasTable: boolean;
constructor(table: string, localDB: LocalDB){
this.table = table
this.hasTable = false
this.localDB = localDB
if(this.localDB.Db().isOpen()){
this.localDB.Db().hasTable(table).then((res:any) => {
this.hasTable = res
}).catch((res: any) => {
console.log("构造初始化失败， table: " + this.table)
})
}
}
public getTable(): string{
return this.table;
}
public getHasTable(): boolean{
return this.hasTable;
}
public setHasTable(hasTable:boolean){
this.hasTable = hasTable;
}
/**
* 验证是否存在表信息
*/
public async verifyTable(init: boolean = false): Promise<CallBackFunType<any>>{
if(!this.getHasTable() && init){
const res = await this.init();
if(!res){
return new CallBackFunType({}).fail('初始化数据库失败')
}else {
return new CallBackFunType({}).success('初始化数据库成功');
}
}
return new CallBackFunType({}).success('存在数据库');
}
/**
* 初始化
*/
public async init(): Promise<boolean>{
// 浏览器不能直接新建，需要适配
const res = await this.localDB.Db().createTable(this.table, tableConfig[this.table])
return res;
}
}
export default BaseApi;DbClass
ts
import type SqlAbapter from '@/plugins/db/SqlAbapter'
// 根据平台选择适配器
class LocalDB {
private db : SqlAbapter;
public name : string;
public isSupport: boolean;
constructor(db:SqlAbapter , name: string, isSupport: boolean){
this.db = db;
this.name = name
this.isSupport = isSupport
}
/**
* 批量初始化表
*/
public initDb(tables: Record<string, Record<string, any>>): void{
// 验证当前是否开启了离线缓存，验证当前是否支持离线缓存
if(!this.isSupport){
console.log("当前不支持离线缓存")
return;
}
this.db.open(tables).then((res: boolean) => {
if(res){
console.log('数据库打开成功')
}else {
console.log('数据库打开失败')
}
})
}
// 验证是否
public Db():SqlAbapter{
// 验证当前是否开启了离线缓存，验证当前是否支持离线缓存
if(!this.isSupport){
console.log("当前不支持离线缓存")
}
return this.db;
}
}
export default LocalDB;方法抽象
抽象模版 SqlAbapter.ts
ts
interface SqlAbapter {
/**
* 数据库是否开启
*/
isOpen: () => boolean;
/**
* 开启数据库
*/
open: (tables: Record<string, Record<string, any>>) => Promise<boolean>;
/**
* 关闭数据库
*/
close: () => Promise<boolean>;
/**
* 是否存在表
*/
hasTable: (dbTable: string) => Promise<boolean>;
/**
* 创建表
*/
createTable: (dbTable: string, data: string[]) => Promise<boolean>;
/**
* 删除表
*/
dropTable: (dbTable: string) => Promise<boolean>;
/**
* 新增数据： indexedDb 重读id会报错
*/
insertTableData: (dbTable: string, data:Record<string,any>) => Promise<boolean>;
/**
* 新增或修改
*/
insertOrReplaceData: (dbTable:string, data:Record<string,any>, condition:Record<string,any>) => Promise<boolean>;
/**
* 查询数据
*/
selectTableData: (dbTable:string, condition: Record<string,any>) => Promise<any>;
/**
* 删除数据
*/
deleteTableData: (dbTable:string, condition: Record<string,any>) => Promise<boolean>;
/**
* 更新数据
*/
updateTableData: (dbTable:string, data: Record<string,any>, condition: Record<string,any>) => Promise<Boolean>;
/**
* 分页查询
*/
pullSQL: (dbTable: string, id:string, current: number, size:number) => Promise<any>;
}
export default SqlAbapter;sqlite实现
ts
import type SqlAbapter from '@/plugins/db/SqlAbapter'
import { replace, keyValSql, isEmpty, whereSql, updateSetSql } from '@/plugins/utils';
class SqliteAdapter implements SqlAbapter {
public dbName: string;
public dbPath: string;
constructor(dbName: string, dbPath:string){
this.dbName = dbName;
this.dbPath = dbPath;
}
// 判断数据库是否打开
isOpen() {
// 数据库打开了就返回 true,否则返回 false
var open = plus.sqlite.isOpenDatabase({
name: this.dbName, // 数据库名称
path: this.dbPath // 数据库地址
})
return open;
}
// 创建数据库 或 有该数据库就打开
open(tables: Record<string, Record<string, any>>):Promise<boolean> {
return new Promise((resolve, reject) => {
// 打开数据库
plus.sqlite.openDatabase({
name: this.dbName,
path: this.dbPath,
success(e) {
resolve(true); // 成功回调
// 初始化表 todo:
},
fail(e) {
reject(false); // 失败回调
}
})
})
}
hasTable(dbTable: string): Promise<boolean> {
let sql = `select * from sqlite_master where type = 'table' and name = '${dbTable}'`
return new Promise((resolve, reject) => {
// 打开数据库
plus.sqlite.executeSql({
name: this.dbName,
sql: [sql],
success(res) {
if (res.resultSet.length > 0) {
resolve(true); // 成功回调
} else {
resolve(false); // 失败回调
}
},
fail(e) {
reject(false); // 失败回调
}
})
})
}
// 关闭数据库
close(): Promise<boolean> {
return new Promise((resolve, reject) => {
plus.sqlite.closeDatabase({
name: this.dbName,
success(e) {
resolve(e);
},
fail(e) {
reject(e);
}
})
})
}
// 数据库建表 sql:'CREATE TABLE IF NOT EXISTS dbTable("id" varchar(50),"name" TEXT)
// 创建 CREATE TABLE IF NOT EXISTS 、 dbTable 是表名，不能用数字开头、括号里是表格的表头
createTable(dbTable: string, data: string[]): Promise<boolean> {
let keys = '';
if(!data || data.length <= 0){
return new Promise((resolve, reject) => { reject("创建失败,索引不能为空") })
}
data.forEach((key:string) => {
keys = keys + key +",";
})
keys = replace(keys, ",")
// todo: 增加表 属性， varchar等等
let sql = `CREATE TABLE IF NOT EXISTS ${dbTable}(${keys})`
return new Promise((resolve, reject) => {
// executeSql: 执行增删改等操作的SQL语句
plus.sqlite.executeSql({
name: this.dbName,
sql: [sql],
success(e) {
resolve(true);
},
fail(e) {
reject(false);
}
})
})
}
// 数据库删表 sql:'DROP TABLE dbTable'
dropTable(dbTable: string): Promise<boolean> {
return new Promise((resolve, reject) => {
plus.sqlite.executeSql({
name: this.dbName,
sql: [`DROP TABLE ${dbTable}`],
success(e) {
resolve(true);
},
fail(e) {
reject(false);
}
})
})
}
// 向表格里添加数据 sql:'INSERT INTO dbTable VALUES('x','x','x')' 对应新增
// 或者 sql:'INSERT INTO dbTable ('x','x','x') VALUES('x','x','x')' 具体新增
// 插入 INSERT INTO 、 dbTable 是表名、根据表头列名插入列值
insertTableData(dbTable: string, data:Record<string,any>): Promise<boolean> {
// 判断有没有传参
if (dbTable !== undefined && data) {
// 判断传的参是否有值
if (!isEmpty(data)) {
let res = keyValSql(data)
// 拼接sql，执行插入
var sql = `INSERT INTO ${dbTable} (${res.keySql}) VALUES(${res.valSql})`;
// console.log(sql);
return new Promise((resolve, reject) => {
// 表格添加数据
plus.sqlite.executeSql({
name: this.dbName,
sql: [sql],
success(e) {
resolve(e);
},
fail(e) {
reject(e);
}
})
})
} else {
return new Promise((resolve, reject) => { reject("错误添加") })
}
} else {
return new Promise((resolve, reject) => { reject("错误添加") })
}
}
// 根据条件向表格里添加数据 有数据更新、无数据插入
// (建表时需要设置主键) 例如 --- "roomid" varchar(50) PRIMARY KEY
insertOrReplaceData(dbTable: string, data: Record<string,any>):Promise<boolean> {
// 判断有没有传参
if (dbTable !== undefined && data) {
if (!isEmpty(data)) {
let res = keyValSql(data)
let sql = `INSERT OR REPLACE INTO ${dbTable} (${res.keySql}) VALUES(${res.valSql})`;
// console.log(sql);
return new Promise((resolve, reject) => {
// 表格添加数据
plus.sqlite.executeSql({
name: this.dbName,
sql: [sql],
success(e) {
resolve(e);
},
fail(e) {
reject(e);
}
})
})
}else {
return new Promise((resolve, reject) => { reject("错误添加") })
}
} else {
return new Promise((resolve, reject) => { reject("错误添加") })
}
}
// 查询获取数据库里的数据 sql:'SELECT * FROM dbTable WHERE lname = 'lvalue''
// 查询 SELECT * FROM 、 dbTable 是表名、 WHERE 查找条件 lname,lvalue 是查询条件的列名和列值
selectTableData(dbTable:string, condition: Record<string,any>): Promise<any> {
if (dbTable !== undefined) {
// 第一个是表单名称，后两个参数是列表名，用来检索
let where = ''
if(!isEmpty(condition)){
where = whereSql(condition)
}
// if (lname !== undefined && cc !== undefined) {
// // 两个检索条件
// var sql = `SELECT * FROM ${dbTable} WHERE ${lname} = '${lvalue}' AND ${cc} = '${dd}'`;
// }
let sql = `SELECT * FROM ${dbTable}`;
if(where){
sql = sql + " where " + where;
}
return new Promise((resolve, reject) => {
// 表格查询数据 执行查询的SQL语句
plus.sqlite.selectSql({
name: this.dbName,
sql: sql,
success(e) {
resolve(e);
},
fail(e) {
reject(e);
}
})
})
} else {
return new Promise((resolve, reject) => { reject("错误查询") });
}
}
// 删除表里的数据 sql:'DELETE FROM dbTable WHERE lname = 'lvalue''
// 删除 DELETE FROM 、 dbTable 是表名、 WHERE 查找条件 lname,lvalue 是查询条件的列名和列值
deleteTableData(dbTable:string, condition: Record<string,any>): Promise<boolean> {
if (dbTable !== undefined) {
let where = ''
if(!isEmpty(condition)){
where = whereSql(condition)
}
var sql = `DELETE FROM ${dbTable}`;
if(where){
sql = sql + " where " + where
}
return new Promise((resolve, reject) => {
// 删除表数据
plus.sqlite.executeSql({
name: this.dbName,
sql: [sql],
success(e) {
resolve(e);
},
fail(e) {
reject(e);
}
})
})
} else {
return new Promise((resolve, reject) => { reject("错误删除") });
}
}
// 修改数据表里的数据 sql:"UPDATE dbTable SET 列名 = '列值',列名 = '列值' WHERE lname = 'lvalue'"
// 修改 UPDATE 、 dbTable 是表名, data: 要修改的列名=修改后列值, lname,lvalue 是查询条件的列名和列值
updateTableData(dbTable:string, data: Record<string,any>, condition: Record<string,any>): Promise<boolean> {
if(!dbTable || isEmpty(data)){
return new Promise((resolve, reject) => { reject("修改错误") });
}
let res = updateSetSql(data)
var sql = `UPDATE ${dbTable} SET ` + res;
if(!isEmpty(condition)){
let where = whereSql(condition)
if(where){
sql = sql + " where " + where
}
}
// WHERE 前面是要修改的列名、列值，后面是条件的列名、列值
return new Promise((resolve, reject) => {
// 修改表数据
plus.sqlite.executeSql({
name: this.dbName,
sql: [sql],
success(e) {
resolve(e);
},
fail(e) {
reject(e);
}
})
})
}
// 获取指定数据条数 sql:"SELECT * FROM dbTable ORDER BY 'id' DESC LIMIT 15 OFFSET 'num'"
// dbTable 表名, ORDER BY 代表排序默认正序, id 是排序的条件 DESC 代表倒序，从最后一条数据开始拿
// LIMIT 15 OFFSET '${num}',这句的意思是跳过 num 条拿 15 条数据, num 为跳过多少条数据是动态值
// 例 初始num设为0，就从最后的数据开始拿15条，下次不拿刚获取的数据，所以可以让num为15，这样就能一步一步的拿完所有的数据
pullSQL(dbTable: string, id:string, current: number, size:number): Promise<any> {
if(current <= 0){
return new Promise((resolve, reject) => { reject("分页查询错误，页码必须从1开始") });
}
let num = 0;
if(current > 0){
num = (current - 1) * size
}
return new Promise((resolve, reject) => {
plus.sqlite.selectSql({
name: this.dbName,
sql: `SELECT * FROM ${dbTable} ORDER BY '${id}' DESC LIMIT ${size} OFFSET '${num}'`,
success(e) {
resolve(e);
},
fail(e) {
reject(e);
}
})
})
}
}
export default SqliteAdapter;indexedDb 实现
ts
import type SqlAbapter from '@/plugins/db/SqlAbapter'
import { keyValSql, isEmpty, whereSql, updateSetSql } from '@/plugins/utils';
class IndexDbAdapter implements SqlAbapter {
// 这个做法是因为 不同的浏览器获取indexedDB的方式不一样。
// mozIndexedDB：火狐浏览器内核；webkitIndexedDB：webkit内核；msIndexedDB：IE内核。
public indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
public dbName: string;
public dbPath: string;
private request: IDBOpenDBRequest | undefined;
private db: IDBDatabase | undefined;
constructor(dbName: string, dbPath:string){
this.dbName = dbName;
this.dbPath = dbPath;
// this.request = this.indexedDB.open(this.dbName,1)
}
// 判断数据库是否打开
isOpen() {
// 数据库打开了就返回 true,否则返回 false
if(this.request == null){
return false;
}else {
return true;
}
}
// 创建数据库 或 有该数据库就打开
open(tables: Record<string, Record<string, any>>):Promise<boolean> {
return new Promise((resolve, reject) => {
this.request = this.indexedDB.open(this.dbName,1)
let _this = this;
this.request.onerror = function(event) {
console.error('Database error:', event.target?.errorCode);
reject("数据库打开失败");
};
this.request.onupgradeneeded = function(event) {
console.log('onupgradeneeded ====>', event)
resolve(true);
_this.db = (event.target as IDBOpenDBRequest).result;
// _this.createTable('ttt', ['name', 'val'])
if(!isEmpty(tables)){
let tabs = Object.keys(tables)
tabs.forEach((tab:string) => {
_this.hasTable(tab).then((res: boolean) => {
if(res){
// 当前
console.log(`当前数据库: ${tab} 已存在，不进行初始化`)
}else {
// 初始化表
_this.createTable(tab, Object.keys(tables[tab])).then((creRes:any) => {
if(creRes){
console.log(`当前数据库: ${tab} 初始化完成`)
}else {
console.log(`当前数据库: ${tab} 初始化失败`)
}
})
}
})
})
}
};
this.request.onsuccess = function(event) {
_this.db = (event.target as IDBOpenDBRequest).result;
resolve(true);
console.log('Database opened successfully');
};
})
}
hasTable(dbTable: string): Promise<boolean> {
let _this = this;
return new Promise((resolve, reject) => {
let res = _this.db?.objectStoreNames.contains(dbTable) as boolean
console.log('hasTable this.db? =====>', this.db)
console.log('hasTable =====>', res)
resolve(res);
})
}
// 关闭数据库
close(): Promise<boolean> {
let _this = this;
return new Promise((resolve, reject) => {
_this.db?.close();
resolve(true);
})
}
// 数据库建表 sql:'CREATE TABLE IF NOT EXISTS dbTable("id" varchar(50),"name" TEXT)
// 创建 CREATE TABLE IF NOT EXISTS 、 dbTable 是表名，不能用数字开头、括号里是表格的表头
createTable(dbTable: string, data: string[]): Promise<boolean> {
if(!data || data.length <= 0){
return new Promise((resolve, reject) => { reject("创建失败,索引不能为空") })
}
let _this = this;
return new Promise((resolve, reject) => {
// executeSql: 创建表
const objectStore = _this.db?.createObjectStore(dbTable,{ keyPath: 'id' });
data.forEach((key:any) => {
objectStore?.createIndex(key, key, {unique: false})
})
resolve(true)
})
}
// 数据库删表 sql:'DROP TABLE dbTable'
dropTable(dbTable: string): Promise<boolean> {
return new Promise((resolve, reject) => {
reject(false);
})
}
// 向表格里添加数据 sql:'INSERT INTO dbTable VALUES('x','x','x')' 对应新增
// 或者 sql:'INSERT INTO dbTable ('x','x','x') VALUES('x','x','x')' 具体新增
// 插入 INSERT INTO 、 dbTable 是表名、根据表头列名插入列值
insertTableData(dbTable: string, data:Record<string,any>): Promise<boolean> {
// 判断有没有传参
if (dbTable !== undefined && data) {
// 判断传的参是否有值
if (!isEmpty(data)) {
let _this = this;
return new Promise((resolve, reject) => {
// 添加数据到对象存储空间
let transaction = _this.db?.transaction([dbTable], 'readwrite');
const objectStore = transaction?.objectStore(dbTable);
let request = objectStore?.add(data) as IDBRequest;
// 写入数据的事件监听
request.onsuccess = function (event) {
resolve(true)
console.log('数据写入成功');
};
request.onerror = function (event) {
reject("数据写入失败: " + event?.target?.error?.message)
console.log('数据写入失败： event =====》 ', event);
}
})
} else {
return new Promise((resolve, reject) => { reject("错误添加") })
}
} else {
return new Promise((resolve, reject) => { reject("错误添加") })
}
}
// 根据条件向表格里添加数据 有数据更新、无数据插入
// (建表时需要设置主键) 例如 --- "roomid" varchar(50) PRIMARY KEY
insertOrReplaceData(dbTable: string, data: Record<string,any>):Promise<boolean> {
// 判断有没有传参
if (dbTable !== undefined && data) {
if (!isEmpty(data)) {
return new Promise((resolve, reject) => {
// 表格添加数据
reject(false);
})
}else {
return new Promise((resolve, reject) => { reject("错误添加") })
}
} else {
return new Promise((resolve, reject) => { reject("错误添加") })
}
}
// 查询获取数据库里的数据 sql:'SELECT * FROM dbTable WHERE lname = 'lvalue''
// 查询 SELECT * FROM 、 dbTable 是表名、 WHERE 查找条件 lname,lvalue 是查询条件的列名和列值
selectTableData(dbTable:string, condition: Record<string,any>): Promise<any> {
if (dbTable !== undefined) {
// 第一个是表单名称，后两个参数是列表名，用来检索
return new Promise((resolve, reject) => {
reject(false);
})
} else {
return new Promise((resolve, reject) => { reject("错误查询") });
}
}
// 删除表里的数据 sql:'DELETE FROM dbTable WHERE lname = 'lvalue''
// 删除 DELETE FROM 、 dbTable 是表名、 WHERE 查找条件 lname,lvalue 是查询条件的列名和列值
deleteTableData(dbTable:string, condition: Record<string,any>): Promise<boolean> {
if (dbTable !== undefined) {
return new Promise((resolve, reject) => {
reject(false);
})
} else {
return new Promise((resolve, reject) => { reject("错误删除") });
}
}
// 修改数据表里的数据 sql:"UPDATE dbTable SET 列名 = '列值',列名 = '列值' WHERE lname = 'lvalue'"
// 修改 UPDATE 、 dbTable 是表名, data: 要修改的列名=修改后列值, lname,lvalue 是查询条件的列名和列值
updateTableData(dbTable:string, data: Record<string,any>, condition: Record<string,any>): Promise<boolean> {
return new Promise((resolve, reject) => {
reject(false);
})
}
// 获取指定数据条数 sql:"SELECT * FROM dbTable ORDER BY 'id' DESC LIMIT 15 OFFSET 'num'"
// dbTable 表名, ORDER BY 代表排序默认正序, id 是排序的条件 DESC 代表倒序，从最后一条数据开始拿
// LIMIT 15 OFFSET '${num}',这句的意思是跳过 num 条拿 15 条数据, num 为跳过多少条数据是动态值
// 例 初始num设为0，就从最后的数据开始拿15条，下次不拿刚获取的数据，所以可以让num为15，这样就能一步一步的拿完所有的数据
pullSQL(dbTable: string, id:string, current: number, size:number): Promise<any> {
return new Promise((resolve, reject) => {
reject(false);
})
}
}
export default IndexDbAdapter;动态选取
db-plugins
ts
import SqliteAdapter from './db/sqlite/sqliteAdapter';
import IndexDbAdapter from './db/indexedDb/indexedDbAdapter';
import { DbConfig, tableConfig } from '@/enums/DbEnums'
import LocalDB from '@/class/DbClass'
let localDB : LocalDB;
// #ifdef APP-PLUS
// App 环境使用 sqlite 适配器
localDB = new LocalDB(new SqliteAdapter(DbConfig.Name, DbConfig.Path), 'sqlite', true);
// #endif
// #ifdef MP-WEIXIN
// 小程序环境使用内存适配器,自定义实现
// #endif
// #ifdef H5
// 浏览器 环境使用 indexeddb 适配器
localDB = new LocalDB(new IndexDbAdapter(DbConfig.Name, DbConfig.Path), 'indexedDb', true);
// #endif
console.log('当前环境注册的本地数据库为',localDB.name)
// 初始化表
localDB.initDb(tableConfig)
export default localDB;api应用
testService
ts
import {request , CallBackFunType} from '@/utils/request'
import { HttpPath } from '@/enums/constant'
import localDB from '@/plugins/db-plugins'
import type LocalDB from '@/class/DbClass'
import { DbTable, DbConfig } from '@/enums/DbEnums'
import BaseApi from '@/class/baseApiClass'
class TestApi extends BaseApi{
constructor(table: string, localDB:LocalDB){
super(table, localDB)
}
public save(data: {id: string ,name: string, value: string}) {
return request({
'url': HttpPath.App + '/dict/type',
'method': 'post',
data
},
async (requestConfig: any) => {
console.log('离线回调操作: ', requestConfig)
const res = await this.verifyTable(true);
return new Promise<CallBackFunType<any>>((resolve, reject) => {
if(res.code != 200){
reject(res)
}else{
// 执行数据库操作
this.localDB.Db().insertTableData(DbTable.Test, data).then((res) => {
if(res){
resolve(new CallBackFunType({}).success())
}else {
reject(new CallBackFunType({}).fail())
}
})
.catch((e:any) => {
reject(e)
})
}
})
})
}
}
export default new TestApi(DbTable.Test, localDB);页面使用
js
<template>
<view>
测试
</view>
</template>
<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import TestApi from '@/api/testService'
onLoad(() => {
TestApi.save({id:'1231',name: '2321', value: 'dasdas'}).then((res:any) => {
console.log(res)
})
})
</script>
<style lang="scss">
</style>执行效果 以浏览器(indexedDb)为例
