【问题标题】:How to use database method ( Sqlite plugin) as a Provider in Ionic 3?如何在 Ionic 3 中使用数据库方法(Sqlite 插件)作为提供者?
【发布时间】:2018-07-21 04:45:27
【问题描述】:

我在 Ionic 3 App 中使用 SqlLite 原生插件。 根据 documentation ,它按预期工作。 在 app.commponent.ts 中,我创建了这样的表:

this.sqlite.create({
        name: 'sdt.db',
        location: 'default'
      })
        .then((db) => {
          //create table if not exists!!!

          this.db = db;

          console.log(" within app components");


         var createTableAccount = "CREATE TABLE IF NOT EXISTS 'accounts' (  'accountid' INTEGER,   'accountName'    TEXT NOT NULL,  'remarks'   TEXT, 'initBalance' INTEGER NOT NULL,   PRIMARY KEY('accountid')   );"            

          this.db.transaction(function(tx) {     

            tx.executeSql(createTableAccount);     
            //todo: create a transaction table ......... 
            //todo: insert data to table             

          }).then(() => {
            console.log("basic structure sql executed")
            //this.presentToast();

          }).catch(e => console.log(e));;


        });

在 Home.ts pages 构造函数中,我是这样使用的

this.sqlite.create({
      name: 'sdt.db',
      location: 'default'
    })
      .then((db) => {
        this.db = db;


      });

在页面中:

  ionViewDidLoad() {

    this.loader = this.loading.create({
      content: 'Loading ...',
      cssClass: "loadingControllerCustomCss"
    });

    this.loader.present().then(() => {
     this.getBalance();
    });

  }

详细方法是

 getBalance() {
    var balanceQuery = "select sum(trxamount) sumofamount from transactiontable";
    this.db.executeSql(balanceQuery, [])
      .then((data) => {
       this.balance = data.rows.item(0).sumofamount;
      }

      )
      .catch(e => console.log(e));

  }

但我想创建一次表重用 getBalance() 方法,这样我就不必重复代码段.因此,我想使用提供者(例如BackendService)作为服务方法,它可以被所有页面重用。

最佳做法是什么?

任何人都可以提供一个作为 Ionic 3 中提供程序的 sqlite 本机插件的完整示例,其中将显示打开数据库、创建模式和获取数据?

提前致谢!

【问题讨论】:

  • 请在此处分享实际代码,否则假设太多;(需要 app.module.ts(这是您将初始化提供程序的地方),app.component.ts,您希望提供程序提供的页面被使用。
  • 我已经分享了所有代码。我想在任何页面中使用提供程序。

标签: angular sqlite ionic2 ionic3 ionic2-providers


【解决方案1】:

好的,首先你需要安装原生插件,看这里的说明:https://ionicframework.com/docs/native/sqlite/

一旦完成创建您的 sqlite 提供程序。通常在 src 你做文件夹“providers”并添加 sqlite.ts。

其内容:

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

@Injectable()
export class SqLiteProvider {
    
    // we need to declare a var that will point to the initialized db:
    public db: SQLiteObject;

    constructor(
        private sqlite: SQLite
    ) 
    {
        this.sqlite.create({
            name: 'data.db',
            location: 'default'
          }).then((db: SQLiteObject) => {
              // here we will assign created db to our var db (see above)
              this.db = db;
              // we can now create the table this way:
              this.db.executeSql('create table danceMoves(name VARCHAR(32))', {})
                .then(() => console.log('Executed SQL'))
                .catch(e => console.log(e));
            }).catch(e => console.log(e));
    }
    
    // here in this provider we create getBalance method, that should be accessible by other pages:
    getBalance() {
    // we will do Promise here:
    return new Promise((resolve, reject) => {
        let balanceQuery = "select sum(trxamount) sumofamount from transactiontable";
        this.db.executeSql(balanceQuery, []).then((data) => {
            let balance = data.rows.item(0).sumofamount;
            // if we successfully obtain data - we resolve it, means it can be available via callback
            resolve(balance)
        }).catch((err)=>{ console.log(err); reject(err)}) // we deal with errors etc
    })
  }
}

然后,如果您想在应用程序的任何位置使用它,则需要创建此“全局范围”提供程序。为此,您转到 app.module.ts 并导入:

从 '../../providers/sqlite' 导入 { SqLiteProvider }; // 确保这是您创建 sqlite.ts 的文件夹

现在对于任何页面/组件,如果您需要使用此提供程序,您只需: - 导入它, - 然后使用构造函数对其进行初始化。

// 一些页面或组件:

从 '../../providers/sqlite' 导入 { SqLiteProvider } ... 构造函数( 私有 sqlProvider: SqlLiteProvider ) {}

现在在此页面中,您可以通过以下方式访问此提供者的方法

this.sqlProvider.getBalance().then((data)=>{ console.log(data)})。

【讨论】:

  • 感谢您的回答。您可以在页面中添加带有示例使用的方法(获取数据)吗?它是一个承诺还是一个简单的方法调用?
  • 确定您想使用哪种方法?得到平衡?
  • 因为您正在处理 DB,所以它是异步调用,是的,我可能会做基于 Promise 的调用。如果您确认需要 getBalance 作为示例,我可以添加它
  • 如果您将 getBalance() 方法添加为承诺并在页面中使用该方法,这将非常有帮助。谢谢。
  • 好的,我添加了逻辑,但是因为我没有您的代码作为工作示例,所以我可以验证它是否按原样工作。但是你应该从中得到逻辑。如果它解决了您的问题,请在您的项目中尝试后告诉我。
猜你喜欢
  • 1970-01-01
  • 2018-07-12
  • 2018-09-10
  • 2019-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-05-09
  • 2018-09-22
相关资源
最近更新 更多