ionic项目中sqlite的简单运用

1. 创建一个ionic模板项目

$ionic start IonicDemo tabs && cd ./IonicDemo
$ionic cordova platform add ios

2. 安装插件

$ionic cordova plugin add cordova-sqlite-storage
$npm i -S @ionic-native/sqlite@^4.0.0 //指定版本号兼容ionic3

3. 修改文件

替换/IonicDemo/src/app/app.module.ts为

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { SQLite } from '@ionic-native/sqlite';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    SQLite,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

替换/IonicDemo/src/pages/about/about.html为

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <button ion-button (click)="initDataBase()">初始化数据库</button>
  
  <button ion-button (click)="insertData('Tom', '12345678910')">插入数据</button> 
  
  <button ion-button (click)="updateData('Tom', '12312312312')">更新数据</button> 

  <button ion-button (click)="deleteData('Tom')">删除数据</button> 

  <button ion-button (click)="queryData('Tom')">查询数据</button> 

</ion-content>

替换/IonicDemo/src/pages/about/about.ts为

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

export class AboutPage {

  database: SQLiteObject;

  constructor(public navCtrl: NavController,private sqlite:SQLite,public toastCtrl : ToastController) {

  }
  /*
    //页面加载时调用
    ionViewDidLoad() {
      this.initDataBase();
    }
  
    //页面即将进入时调用
    ionViewWillEnter() {
      this.initDataBase();
    }
  */
    //创建数据库
  initDataBase(){
    this.sqlite.create({
      name: 'data.db',
      location: 'default'
    })
      .then((db: SQLiteObject) => {
        db.executeSql('create table if not exists person(id integer primary key autoincrement,name varchar(20),phone varchar(11))', [])
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));

        this.database = db;
      });
  }

  //增
  insertData (name: string, phone: string) {
      this.database.executeSql('insert into person(name,phone) values(?,?)', [name, phone])
      .then(() => {
          let toast = this.toastCtrl.create({
          message: 'insertData success',
          duration: 2000,
          position: 'top'
          });
        toast.present(toast);
    
      })
      .catch(e => console.log(e))
  }

  //改
  updateData(name: string, phone: string) {
        this.database.executeSql('update person set phone=?  where name=?', [phone, name])
      .then(() => {
          let toast = this.toastCtrl.create({
          message: 'updateData success',
          duration: 2000,
          position: 'top'
          });
        toast.present(toast);
    
      })
      .catch(e => console.log(e))
  }

  //删
  deleteData(name: string) {
        this.database.executeSql('delete from person where name=?', [name])
      .then(() => {
          let toast = this.toastCtrl.create({
          message: 'deleteData success',
          duration: 2000,
          position: 'top'
          });
        toast.present(toast);
    
      })
      .catch(e => console.log(e))
  }

  //查
  queryData(name: string) {
      this.database.executeSql("select phone from person where name=?", [name]).then((data) => {
          let toast;
          if (data.rows.length != 0) {
              toast = this.toastCtrl.create({
                  message: '数据已存在',
                  duration: 2000,
                  position: 'top'
              });
              toast.present(toast);
        } else {
              toast = this.toastCtrl.create({
                  message: '数据不存在',
                  duration: 2000,
                  position: 'top'
              });
        }
        toast.present(toast);
    });
  }
}

4. 编译项目

$ionic build --prod
$ionic cordova prepare ios

5. 在Xcode中运行项目

它应该是这样的

Simulator Screen Shot - iPhone 11 Pro Max - 2019-11-29 at 01.17.08.png

在模拟器about页面中可以看到几个菜单，在点击"初始化数据库"之后就可以增删改查了！

控制台会打印沙盒中DB的路径，可以查看结果是否正确！

Just do it！