ionic2框架pouchDB离线数据库的使用

ionic2框架pouchDB离线数据库的使用。

1 pouchDB的介绍

个人感觉比storage(http://ionicframework.com/docs/storage/)好用多了，同是具有sqlite的一些特点， PouchDB(https://pouchdb.com)是一个开源JavaScript项目,来自Apache CouchDB数据库设计运行在浏览器中。PouchDB帮助web开发人员构建应用程序创建工作离线在线一样。它允许应用程序在本地存储数据离线,然后同步CouchDB和兼容的服务器应用程序重新上线时,保持用户的数据同步不管他们下一个登录。 在ionic2中的使用可以参开这篇文章

https://www.joshmorony.com/offline-syncing-in-ionic-2-with-pouchdb-couchdb/

再是先不用云储存couchDB，

1)安装

npm install @types/pouchdb --save

2)在app.module.ts配置

import { NgModule, ErrorHandler } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { Todos } from '../providers/todos';

@NgModule({

declarations: [

MyApp,

HomePage

],

imports: [

IonicModule.forRoot(MyApp)

],

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

],

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Todos]

})

export class AppModule {}

3)创建一个provider(todo.ts)中输入

import { Injectable } from '@angular/core';

import PouchDB from 'pouchdb';

@Injectable()

export class Todos {

data: any;

db: any;

remote: any;

constructor() {

this.db = new PouchDB('cloudo');//相当于创建一个数据表，类似于关系型数据库的表，一个应用最好创建一个表

}

//获取所有储存的数据

getTodos() {

if (this.data) {

return Promise.resolve(this.data);

}

return new Promise(resolve => {

this.db.allDocs({

include_docs: true

}).then((result) => {

this.data = [];

let docs = result.rows.map((row) => {

this.data.push(row.doc);

});

resolve(this.data);

this.db.changes({live: true, since: 'now', include_docs: true}).on('change', (change) => {

this.handleChange(change);

});

}).catch((error) => {

console.log(error);

});

});

}

//插入数据插入之后会自动生成一个_id和_rev两个参数与

createTodo(todo){

this.db.post(todo);

}

//修改数据

updateTodo(todo){

this.db.put(todo).catch((err) => {

console.log(err);

});

}

//删除数据

deleteTodo(todo){

this.db.remove(todo).catch((err) => {

console.log(err);

});

}

}

4)在home.ts中使用

import { Component } from "@angular/core";

import { NavController, AlertController } from 'ionic-angular';

import { Todos } from '../../providers/todos';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

todos: any;

constructor(public navCtrl: NavController, public todoService: Todos, public alertCtrl: AlertController) {

}

ionViewDidLoad(){

this.todoService.getTodos().then((data) => {

this.todos = data;

});

}

createTodo(){

let prompt = this.alertCtrl.create({

title: 'Add',

message: 'What do you need to do?',

inputs: [

{

name: 'title'

}

],

buttons: [

{

text: 'Cancel'

},

{

text: 'Save',

handler: data => {

this.todoService.createTodo({title: data.title});

}

}

]

});

prompt.present();

}

updateTodo(todo){

let prompt = this.alertCtrl.create({

title: 'Edit',

message: 'Change your mind?',

inputs: [

{

name: 'title'

}

],

buttons: [

{

text: 'Cancel'

},

{

text: 'Save',

handler: data => {

this.todoService.updateTodo({

_id: todo._id,

_rev: todo._rev,

title: data.title

});

}

}

]

});

prompt.present();

}

deleteTodo(todo){

this.todoService.deleteTodo(todo);

}

}

5)home.html

ClouDO

{{todo.title}}

6)home.scss

.ios, .md {

page-home {

.scroll-content {

background-color: #ecf0f1;

display: flex !important;

justify-content: center;

}

ion-list {

width: 90%;

}

ion-item-sliding {

margin-top: 20px;

border-radius: 20px;

}

ion-item {

border: none !important;

font-weight: bold !important;

}

}

}

7)src/theme/variables.scss

$colors: (

primary: #95a5a6,

secondary: #3498db,

danger: #f53d3d,

light: #f4f4f4,

dark: #222,

favorite: #69BB7B

);