前言
这一部分并不是完全自己完成的，因为还在学习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（登陆成功后的主页面）
如果有什么说的不对的地方，欢迎留言或者私下交流，我会及时做出改正_
网友评论