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

<ion-header no-border>
  <ion-navbar color="secondary">
    <ion-title>
      ClouDO
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="createTodo()"><ion-icon name="cloud-upload"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list no-lines>
    <ion-item-sliding *ngFor="let todo of todos">
      <ion-item>
        {{todo.title}}
      </ion-item>
      <ion-item-options>
        <button ion-button icon-only color="light" (click)="updateTodo(todo)">
          <ion-icon name="create"></ion-icon>
        </button>
        <button ion-button icon-only color="primary" (click)="deleteTodo(todo)">
          <ion-icon name="checkmark"></ion-icon>
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list> 
</ion-content>

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
);