Ionic2 调用本地SQlite

作者: 蓝山牧童 | 来源:发表于2017-04-21 13:35 被阅读1823次

    普通的app用ionic内置的Storage存储键值对的方式可以满足日常的使用,但是有时候遇到一些奇怪的需求。比如说有个网友留言说做一个离线版的App,怎样调用本地Sqlite执行SQL语句。问题描述清楚直接上代码。
    需要说明的是SQLite是手机内置的数据库存储方式,在Ionic2中需要安装相应的插件和安装包。过程很简单

    • 第一步

    安装插件、并加入项目

    $ ionic plugin add cordova-sqlite-storage
    $ npm install --save @ionic-native/sqlite
    
    • 第二步

    把服务加入到src/app/app.moudle.ts

    ...
    import { SQLite } from '@ionic-native/sqlite';
    ...
    providers: [
        ...
        SQLite
      ]
    ...
    
    • 第三步

    使用数据库,常规来说,这一步应该封装成公共服务或者工具类。类中是具体的创建数据库,调用数据库,CRUD等方法。这里只是说明原理,直接调用

    import { Component } from '@angular/core';
    import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
    @Component({
      selector: 'page-hello-ionic',
      templateUrl: 'hello-ionic.html'
    })
    export class HelloIonicPage {
      constructor(
                  private sqlite: SQLite) {
    
      }
     database :SQLiteObject;
      ngOnInit(){
        this.initDB();
      }
      initDB(){
        this.sqlite.create({
          name: 'data.db',
          location: 'default'
        })
        .then((db: SQLiteObject) => {
        db.executeSql('create table t_log(name VARCHAR(32))', {})//建表
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));
    
        this.database = db;
        db.executeSql("insert into t_log values('123')",{});//插入数据
        })
        .catch(e => console.log(e));
    
      }
    //查询
    query() {
        let results = this.database.executeSql("select * from t_log",{});
        alert(data.rows.length);
        alert(data.rows.item(0).name);
        })
     }
    }
    
    
    • 最后一步

    这一步一定要生成app安装到手机才能得到结果,毕竟是调用手机内置的SQLite。
    ionic build android
    用上面的命令构建APP并安装到手机看看效果吧

    相关文章

      网友评论

      • 8b3a8d90c86f:你好,我想问下这里说的是先创建数据库,然后做一些操作,那如果手机本地有个文件夹下有一个.db文件,我应该怎么去读取里面的内容
      • 53d44359dce3:楼主 我想问下 如何调用android指定路径的数据库啊?比如我放在了/storage/emulated/0/database 下面,location要怎么写才会被识别啊?
        蓝山牧童:@Paboo199148 这个在ionic中无法实现,我目前想到的办法是实现plugin
      • ceido:大佬好,我数据库和表创建成功了,但为什么插入数据会报错呢:ERROR TypeError: Cannot read property 'executeSql' of undefined。这是我的代码:
        insert(db: SQLiteObject){

        let input:string = "insert into myTable values('test')";
        db.executeSql(input,{})
        .then(() => console.log("成功插入数据!"))
        .catch(e => console.log(e));
        }
        ceido:@蓝山牧童 不行呀,搞不懂。增删改查操作只能在创建数据库的那个页面使用,我想在其他页面使用它就会报上面那个错,那还怎么封装成服务类。不仅是executeSql()方法,其他sql的方法如open也会报这样的错
        蓝山牧童:从代码来看没什么错误,调试看看。强烈建议定义变量不要用input,console,window等这类词
      • 9899d4236a87:请问一下 为什么pop之后就读取不到数据库信息了?
      • 麻辣小面瘫:楼主,请问你知道这个data.db存放在哪里么?? 手机里面找不到
        蓝山牧童:this.sqlite.create({
        name: 'data.db',
        location: 'default'
        })
        这里是创建名为data.db数据库文件。android 和ios都内置sqlite数据库。
      • 23bb1d79aae5:db.executeSql("insert into t_log values('123')",{});//插入数据
        这句是插入数据到name 字段吗? 要插入其他字段的时候该怎么写呢?
        蓝山牧童::sweat: SQL语句不会写?insert into tablename(col1,col2,col3...) values(val1,val2,val3...)
      • 胡哈哈胡:我想请教一下,这个用create方法创建过数据库之后它是一直打开的吗?第二次用这个方法就是打开吗?还是重新创建覆盖原来的😃
        蓝山牧童: @胡玉军 try it ,u can do it
        胡哈哈胡: @胡玉军 也就是如果不删除的话,以后用就不用再create了吗?
        蓝山牧童:@胡玉军 create创建数据库调用一次即可,Sqlite与普通的数据库不一样,它其实是一个文件。create调用之后创建了一个文件。
      • _qyang:最新版本试了会报错。
        安装以下版本已经解决
        npm install --save @ionic-native/core@3.1.0
        npm install --save @ionic-native/sqlite@3.5.0
        蓝山牧童: @4767ea3a6f1a core目前到3.6.1了~更新下即可
      • 胡哈哈胡:博主您好,看完您这篇文章我想请问一下,sqlite数据库只能在真机上用吗?可以在谷歌浏览器上看到效果,或者在浏览器上测试吗?😄
        蓝山牧童: @YuRi_1 需要安装插件吗?
        YuRi_1:@莫干牧童 是可以在浏览器上用的,也可以浏览器调试
        蓝山牧童:Sqlite是文件型数据库,暂时没想到如何远程运行在浏览器端。如果有类似需求,可以考虑PouchDB
      • Seekkim:可以,成功了,我也觉得应该封装成公共工具类,以方便调用
        6c8ebecdb8b3:@神奇的小卷毛 搞定了没
        Seekkim:@神奇的小卷毛 你需要吗?需要的话加Q,867086661,我空了整理下
        ceido:你好,你封装成服务类了吗?为什么我增删改查操作只能在创建数据库的那个页面使用,我想在其他页面使用它就会报这个错误:ERROR TypeError: Cannot read property 'executeSql' of undefined。

      本文标题:Ionic2 调用本地SQlite

      本文链接:https://www.haomeiwen.com/subject/oqjdzttx.html