Ionic学习日记6：使用SQLite保存用户数据

前言

这一部分并不是完全自己完成的，因为还在学习SQLite，可能这次表述的会有问题，若是给大家带来困扰和误解，在此表示抱歉，有错误的地方，我会及时改正

思路

这是一个必须得有的功能，当用户选择注册的时候，数据应当保存在数据库当中，方便下次做其他操作访问用，这次就使用sqlite，但是官方给的开发文档我有些看不懂（https://ionicframework.com/docs/native/sqlite/），虽然还是大部分和官网提示的相同，这次涉及到的页面有HomePage（登陆页面），RegPage（注册页面），（TabsPage）（登陆成功后的页面）

安装SQLite插件

根据官方文档中的提示，在自己的项目当中安装插件，打开提示命令符

cd myApp

依次执行

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

如果没有error的话就可以继续了，如果有的话，emmmmmmm我没遇到过，有啥报错我可以帮忙一起看看，然后在app.module.ts中添加

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

和在该文件下中provides

SQLite,

RegPage

这部分需要完成注册功能，所以需要建表和保存用户信息，之前已经在项目中安装了插件，所以可以在constructor中加入 private sqlite: SQLite，可以导包，然后初始化数据库，并建表，我这边是表名users，用id做key，其中dataphone保存用户的账号,datapassword保存用户的密码，这里大部分还是和官网的差不多。

database: SQLiteObject;
  //数据库SQLite操作
  ngOnInit() {
    this.initDB();
  }
  initDB() {
    this.sqlite.create({
      name: 'data.db',
      location: 'default'
    })
      .then((db: SQLiteObject) => {
        db.executeSql('create table if not exists users(id INTEGER PRIMARY KEY AUTOINCREMENT, dataphone text NOT NULL,datapassword text)', {})//建表
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));

        this.database = db;
      });
  }

在注册的时候需要判断是否已经注册过，所以需要检查数据库当中是否已经有相同的dataphone

 //判断用户名是否存在
 this.database.executeSql("select dataphone from users WHERE dataphone=?", [dataphone.value]).then((data) => {
      if (data.rows.length != 0) {
      let toast = this.toastCtrl.create({
        message: '此账号已注册',
        duration: 2000,
        position: 'top'
      });
      toast.present(toast);

如果检索出来数据不为0就用toast提示用户
如果通过就执行保存步骤

 //用SQLite的方式存储信息
 this.database.executeSql("INSERT INTO users(dataphone,datapassword) VALUES(?,?);", [dataphone.value, datapassword1.value])
    .then(() => {
      let toast = this.toastCtrl.create({
           message: '注册成功',
           duration: 2000,
           position: 'top'
        });
        toast.present(toast);
        this.navCtrl.setRoot(HomePage);//保存数据后并跳转至HomePage
       })
        .catch(e => console.log(e))

我是使用正则一起做的，结合日记5共同完成dataphone和datapassword的正则判断，才能保存到数据库中

HomePage

这是登陆页面，所以是需要查询，但首先还是需要初始化数据库（我也不知道为什么还要初始化一次）

database: SQLiteObject;
  ngOnInit() {
    this.initDB();
  }
  initDB() {
    this.sqlite.create({
      name: 'data.db',
      location: 'default'
    })
      .then((db: SQLiteObject) => {
        db.executeSql('create table if not exists users(id INTEGER PRIMARY KEY AUTOINCREMENT, dataphone text NOT NULL,datapassword text)', {})//建表
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));

        this.database = db;
      });
  }

别忘了在constructor添加public sqlite: SQLite
接下来是查询数据库，决定用户是否能登陆上的时候到了，我这边判断的逻辑是，检查是否用户账号，再判断密码，怕我表述不清，所以在这里贴这部分所有的代码

if (userName.value.length == 11 && passWord.value.length != 0) {
  this.database.executeSql("select * from users WHERE dataphone=?", [userName.value]).then((data) => {
        if (data.rows.length == 0) {
          let alert = this.alerCtrl.create({
            title: '账号未注册',
            message: '请检查一下账号',
            buttons: ['OK']
          })
          alert.present()
        } else {
          if (passWord.value == data.rows.item(0).datapassword) {
            let loader = this.loadingCtrl.create({
              content: "请稍等...",
              duration: 2000
            });
            loader.present();
            let toast = this.toastCtrl.create({
              message: '欢迎你回来 ' + data.rows.item(0).dataphone,
              duration: 2000,
              position: 'top'
            });
            setTimeout(() => {
              toast.present(toast);
              this.navCtrl.setRoot(TabsPage);
            }, 2000);
          } else {
            let alert = this.alerCtrl.create({
              title: '密码错误',
              message: '请检查一下密码',
              buttons: ['OK']
            })
            alert.present()
          }
        }
      });
}

后言

整理一下我的整体思路
HomePage（“用户注册按钮”）
---跳转---
RegPage（注册功能，初始化数据库+新增数据+正则，“注册”）
---跳转---
HomePage（登陆，初始化数据库+检查数据+各种if-else，“登陆”）
---跳转---
TabsPage（登陆成功后的主页面）
如果有什么说的不对的地方，欢迎留言或者私下交流，我会及时做出改正^_