zoukankan      html  css  js  c++  java
  • 使用PouchDB来实现React离线应用

    最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB。
    PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来打造浏览器的离线应用。

    如果你要使用PouchDB,那么建议你的远程数据库使用CouchDB,那样的话可以更好地协调起来。

    建立数据库

    const localDB = new PouchDB('docs');  
    const remoteDB = new PouchDB('http://localhost:5984/docs'); 
    

    同步本地数据到远程数据库

    PouchDB API 提供了方法可以让你备份本地数据到服务器: sync。

    live: true表示如果数据一发生变更,就立即同步到远程服务器。

    retry: true表示如果在离线状态下导致同步失败之后,会自动重新尝试重连,直到连接建立成功为止。该选项在live:true时生效。代码如下:

    const sync = localDB.sync(remoteDB, {  
      live: true,
      retry: true
    });
    

    更多关于sync方法的操作,可以参考文档: PouchDB Sync

    添加数据

    onDocSubmit(doc) {  
      localDB.put({_id: doc, content: doc, imageUrl: imageUrl})
        .catch(console.log.bind(console, 'Error inserting'));
    }
    

    更新数据

    先查询,再更新,PouchDB的增删查改操作都是异步的,即使操作本地数据库也是异步。

    localDB.get('doc1').then(doc => 
        db.put({
            _id: 'doc1',
            _rev: doc._rev,
            title: 'zzbo'
        })
    ).then(result =>
        // handle result
    ).catch(err => console.log(err));
    

    删除数据

    先查询,再删除

    localDB.get('doc1').then(doc =>
      db.remove(doc)
    ).then(result =>
        // handle result
    ).catch(err => console.log(err));
    

    监听数据的变更

    当数据库的数据发生增删改时,我们需要通知React来更新UI,那么结合React:

    class DocsApp extends Component {  
      componentDidMount {
        localDB.changes({
          live: true,
          include_docs: true //Include all fields in the doc field
        }).on('change', this.handleChange.bind(this))
      }
    
      handleChange(change) {
        var doc = change.doc;
    
        if (!doc) {
          return;
        }
    
        if (doc._deleted) {
          this.removeDoc(doc);
        } else {
          this.addDoc(doc);
        }
      }
    
      addDoc(newDoc) {
        if (!_.find(this.state.docs, '_id', newDoc._id)) {
          this.setState({
            docs: this.state.docs.concat(newDoc)
          });
        }
      }
    
      removeDoc(oldDoc) {
        this.setState({
          docs: this.state.docs.filter(doc => doc._id !== oldDoc._id)
        });
      }
    }
    

    当用户使用移动网络时,网络环境往往会变得非常复杂,在离线状态时也能让用户得到好的用户体验是一个重要的课题。
    全文完

  • 相关阅读:
    HDU 5744
    HDU 5815
    POJ 1269
    HDU 5742
    HDU 4609
    fzu 1150 Farmer Bill's Problem
    fzu 1002 HangOver
    fzu 1001 Duplicate Pair
    fzu 1150 Farmer Bill's Problem
    fzu 1182 Argus 优先队列
  • 原文地址:https://www.cnblogs.com/zzbo/p/5906495.html
Copyright © 2011-2022 走看看