ionic保存到mysql_ionic sqlite 存取数据封装（兼容真机与webkit浏览器）
不管是真機還是H5，都有提供sqlite數據庫進行存儲數據。那么我們只要封裝好函數就能隨意調用了。
如果只是存儲簡單的鍵值對形式的話，ionic官網也提供了一個兼容網頁的storage，https://ionicframework.com/docs/storage，但只能key/value ，當然value可以是Json。
但是很多時候為了前后端數據保存一致，所以前端也采用多字段存儲，那么只能自己封裝函數處理了。
*如果websql支持的瀏覽器無法滿足自己的需求，請使用IndexedDB
1. 安裝數據庫操作插件
$ ionic cordova plugin add cordova-sqlite-storage
$ npm install --save @ionic-native/sqlite
所有的原生插件和自定義provider都要在app.module的providers中聲明
import { SQLite } from '@ionic-native/sqlite';
@NgModule({
declarations: [
MyApp
],
imports: [
HttpModule,
JsonpModule,
BrowserModule,
IonicModule.forRoot(MyApp, {
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
SQLite
]
})
export class AppModule { }
2. 封裝調用函數
控制臺輸入命令創建provider
$ ionic g provider native
執行后目錄如下：
1.png
填入//異步問題進行修改
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
import { Injectable } from '@angular/core';
import { Platform , Events } from 'ionic-angular';
import { StorageServiceProvider } from '../../providers/storage-service/storage-service';
@Injectable()
export class NativeProvider {
database: SQLiteObject;
win_db: any;//H5數據庫對象
win: any = window;//window對象
constructor( private platform: Platform,
private sqlite: SQLite，
private events: Events,
private storage: StorageServiceProvider) { }
/**
* 創建數據庫
*/
createDb() {
if (this.isMobile()) {
this.sqlite.create({
name: 'data.db',
location: 'default'
})
.then((db: SQLiteObject) => {
this.database = db;
//創建表如果已存在就創建
if (this.storage.read('db:create') != "Yes") {
//創建表
this.createTable();
} else {
this.events.publish('db:create');
}
})
.catch(e => {
this.showAlert(this.text.CREATE_DB);
this.events.publish('db:create');
});
} else {
//H5數據庫存儲，注意測試瀏覽器兼容，websql w3c沒維護
try {
this.win_db = this.win.openDatabase("data.db", '1.0', 'database', 5 * 1024 * 1024);//聲明H5 數據庫大小
this.createTable();
} catch (err) {
console.log('創建數據庫失敗')
}
}
}
/**
* 創建表
*/
async createTable() {
// this.querySql('', []);
//可能存在多個執行創建表語句，只需最后一個使用await
await this.executeSql('CREATE TABLE remindMaster(remind_id INTEGER PRIMARY KEY AUTOINCREMENT,user_id TEXT,state TEXT , content TEXT,remind_time TEXT,create_time TEXT)', []);
this.events.publish('db:create');
this.storage.write('db:create', "Yes");
}
/**
* 執行語句
*/
executeSql(sql: string, array: Array): Promise {
return new Promise((resolve, reject) => {
if (this.isMobile()) {
if (!!!!this.database) {
this.database.executeSql(sql, array).then((data) => {
resolve(data);
}, (err) => {
reject(err);
console.log('Unable to execute sql: ' + err);
});
} else {
return new Promise((resolve) => {
resolve([]);
});
}
} else {
if (this.win_db) {
return this.execWebSql(sql, array).then(data => {
resolve(data);
}).catch(err => {
console.log(err);
});
}
}
});
}
/**
* 查詢H5數據庫
*/
execWebSql(sql: string, params: Array): Promise {
return new Promise((resolve, reject) => {
try {
this.win_db.transaction((tx) => {
tx.executeSql(sql, params,
(tx, res) => resolve(res),
(tx, err) => reject(err));
},
(err) => reject(err));
} catch (err) {
reject(err);
}
});
}
/**
* 是否真機環境
* @return {boolean}
*/
isMobile(): boolean {
return this.platform.is('mobile') && !this.platform.is('mobileweb');
}
}
3. 調用
刪除app.html里的默認root屬性
圖片.png
在程序初始化的時候調用創建數據庫(即app.component.ts里)
constructor(
private statusBar: StatusBar,
private splashScreen: SplashScreen，
private nativeProvider: NativeProvider) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.init();//初始化
});
}
init(){
//確保異步執行完后才隱藏啟動動畫
this.events.subscribe('db:create', () => {
//創建數據庫與表成功后才關閉動畫跳轉頁面
this.statusBar.styleDefault();
this.splashScreen.hide();
this.nav.setRoot(TabsPage);
})
//初始化創建數據庫
this.nativeProvider.createDb();
}
在所需頁面引入調用即可
//插入數據
this.nativeProvider.executeSql('INSERT INTO remindMaster(user_id,state,content,remind_time,create_time) VALUES (?,?,?,?,?)',
['1', '0', 'haha', '2017-12-14', new Date().getTime().toString()]);
//查詢數據
//如果使用直接拼接sql查詢，需要注意參數加 ''，否則真機sqlite查看不到數據 例如：(`SELECT remind_id,state,user_id,content,remind_time,create_time FROM remindMaster WHERE state='0' AND user_id = '${user_id }' ORDER BY remind_time ASC`, []
this.nativeProvider.executeSql('SELECT remind_id,state,user_id,content,remind_time,create_time FROM remindMaster WHERE state=? AND user_id = ? ORDER BY remind_time ASC', ['0','1']).then(data => {
if (!!!!data && !!!!data.rows && data.rows.length > 0) {
for (let i = 0; i < data.rows.length; i++) {
console.log(data.rows.item(i));
}
}
});
4. 瀏覽器查看
image.png
總結
以上是生活随笔為你收集整理的ionic保存到mysql_ionic sqlite 存取数据封装（兼容真机与webkit浏览器）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 车辆年检需要什么手续吗？
- 下一篇： mysql定时作业_mysql 让一个存