带数据库的离子项目

Question

我正在尝试创建一个移动项目，这是我在 Ionic 平台上的第一个项目。同样，我必须学习 Angular 和 Ionic。所以我决定做一个简单的移动项目。我在移动技术中搜索了太多数据库，所以我得到了很多数据库，比如 - MongoDb、SQLite、Firebase 等，所以我有点困惑我应该在 ionic 移动项目中使用哪个数据库？是否有任何数据库的初学者文档可以帮助我在我的离子项目中实现数据库？

非常感谢。

Answer 1

为了训练目的，我建议不要尝试一次全部掌握，而是只从 Angular 本身开始。然后，在第二个项目中，尝试 Ionic。

angular 的一些好的起点是：
https://www.codecademy.com/pt-BR/learn/learn-angularjs
http://www.learn-angular.org/

然后，对于 Ionic，我使用了： https://thinkster.io/ionic-framework-tutorial

现在，特别是关于数据库：
Ionic 与 cordova 一起工作，后者在 Web 开发和移动原生功能之间创造了 link。它通过插件实现。

原生 Android 和 IOS 支持 SQLite。所以，如果你想使用尽可能多的原生资源，我认为 SQLite 是最好的选择。

最好的插件（恕我直言）是 https://github.com/litehelpers/Cordova-sqlite-storage。

这个插件非常容易使用：

在 Ionic cordova 项目中，运行

cordova plugin add cordova-sqlite-storage

然后，在您的代码中，使用

访问数据库

var db = window.sqlitePlugin.openDatabase({name: 'my.db', location: 'default'}, successcb, errorcb);

然后，只需运行你的 SQL：

db.executeSql("select length('tenletters') as stringlength", [], function (res) {
      var stringlength = res.rows.item(0).stringlength;
      console.log('got stringlength: ' + stringlength);
      document.getElementById('deviceready').querySelector('.received').innerHTML = 'stringlength: ' + stringlength;
   });

在插件网站上，有更多完整的例子。

但是，我再次建议先学习和平。

编辑

回复评论：

在数据库中添加信息很简单，几乎就像上面的SELECT示例一样。只需将您的数据作为数组传递给 executeSQL() 的 2º 参数。像这样：

db.executeSql('INSERT INTO MyTable VALUES (?)', ['test-value'], function (resultSet) {
  console.log('resultSet.insertId: ' + resultSet.insertId);
  console.log('resultSet.rowsAffected: ' + resultSet.rowsAffected);
}, function(error) {
  console.log('SELECT error: ' + error.message);
});

看看文档，那里还有其他示例。

Answer 2

我一直在浏览一篇又一篇的 "not quite what I am looking for" 答案。我找到了一个法语视频。这是：Ionic 3 Store Data

话虽这么说，这里是如何设置代码以使 ionic 3 cordova sqlite 可用。

1) 在您的 npm 或 cmd 提示符下通过运行这两个命令导入您的原生 sqlite。

ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic-native/sqlite

2) 导入您的 app.module.ts

import { SQLite} from '@ionic-native/sqlite';

3) 在您的 app.module.ts

中添加为提供商

providers: [
   ...
    SQLite,
   ...
  ]

4) 创建一个新文件夹（如果你想让它成为一个不同的组件）并制作一个数据库 ts 文件。为了方便起见，我将我的命名为 database.ts

5) 添加以下代码（请注意这不是我使用的真实代码。只是一个示例。用户名和密码不应以这种方式存储）：

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


 @Injectable()
export class Database {

    theConsole: string = "Console Messages";

    options: any = {
        name: data.db,
        location: 'default',
        createFromLocation: 1
    }

    private db: SQLiteObject;

    constructor(private sqlite: SQLite) {

        this.connectToDb();
    }

    private connectToDb():void {

        this.sqlite.create(this.options)
            .then((db: SQLiteObject) => {

                this.db = db;
                var sql = 'create table IF NOT EXISTS `user` (username VARCHAR(255), password VARCHAR(255))';
                //IF you move the below statment out of here then the db variable will not be initialized
                //before you can use it to execute the SQL. 
                this.db.executeSql(sql, {})
                .then(() => this.theConsole += 'Executed SQL' + sql)
                .catch(e => this.theConsole += "Error: " + JSON.stringify(e));
            })
            .catch(e => this.theConsole += JSON.stringify(e));

    }

     addUser(username, password):void {

        var sql = "INSERT INTO `user` (username,password) VALUES ('"+username+"','"+ password+"')";

        this.db.executeSql(sql,{})
        .then(() => this.theConsole += "\n" + 'Executed SQL' + sql)
        .catch(e => this.theConsole += "Error: " + JSON.stringify(e));


    }
    getDealer() {
        var sql = "SELECT * FROM user";

        this.db.executeSql(sql, {})
            .then((result) => {
                this.theConsole += JSON.stringify(result);
                if (result.rows.length > 0) {
                    this.theConsole += 'Result' + result.rows.item(0);
                }
                this.theConsole += "\n" + result.rows.item(0).username+ result.rows.item(0).password;
                this.theConsole +=  "\n" +'Rows' + result.rows.length;

            })

            .catch(e => this.theConsole += JSON.stringify(e));
    }

    getConsoleMessages() {
        return this.theConsole;
    }
}

然后您只需要将数据库组件(Class) 导入到您的一个页面中，您就可以通过运行这些函数或创建您自己的 RunSQL 函数来访问数据库随便扔进去。

ionic 网站真正让我感到困惑的部分是，他们展示了 SQLiteObject 的创建而不是重用。通过添加：

private db: SQLiteObject;

我在 class 变量声明和 db 对象初始化中的代码：

 ...
 this.sqlite.create(this.options)
            .then((db: SQLiteObject) => {

                this.db = db;
 ...

我能够重用 db 变量，而不必一遍又一遍地打开 db 连接。

6) 将组件 class 导入页面

import { Database } from '../../data/database';

我使用这个网站：ionic native sqlite 主要了解如何设置它和前面提到的法语视频。我希望我会发现我希望可以帮助其他人遇到同样的 sqlite 墙。我希望我能早点找到我今天找到的东西。我希望能帮助其他人遇到同样的 sqlite 墙。

带数据库的离子项目

Ionic project with database

sqlite

mongodb

angularjs

ionic-framework

firebase-realtime-database