Erste Schritte mit der javaScript-Datenbank von PouchDB-Client-Seite

Dieser Artikel wurde von Sebastian Seitz und Taulant Spahiu überprüft. Vielen Dank an die Peer -Rezensenten von SitePoint für ihre Beiträge!

Moderne clientseitige Webanwendungen erfordern komplexe Datenbearbeitungsfunktionen. Browser bieten nun eine robuste JavaScript-Leistung und eine reiche APIs (Geolokalisierung, Peer-to-Peer-Kommunikation usw.) an, um das Wachstum komplexer Web-Apps zu befeuern. Dieser Fortschritt erfordert effektive clientseitige Speicherlösungen, bei denen JavaScript-Datenbanken wie Pouchdb Excel.

Schlüsselmerkmale von pouchdb

• pouchdb, eine von Apache CouchDB inspirierte Open-Source-JavaScript-Datenbank, arbeitet nahtlos innerhalb des Browsers und nutzt IndexedDB für persistente Datenspeicher über Seiten-Aktualisierungen hinweg.
• Die Installation ist einfach: Integrieren Sie ein eigenständiges Skript in Ihr HTML oder verwenden Sie NPM für Node.js -Projekte.
• unterstützt CRUD Operations und Bulk -Dokumentmanipulation und bietet flexible Datenverwaltung mit einfachen JavaScript -Befehlen - kein starres Schema erforderlich.
• Echtzeitdatensynchronisation und Änderungsverfolgung sind integriert, wodurch dynamische UI-Updates basierend auf sofortigen Datenbankänderungen ermöglicht werden.
• erleichtert die Offline-Datenspeicherung mit nahtloser Synchronisation zu CouchDB und stellt die Datenkonsistenz über Geräte und Sitzungen hinweg sicher, ideal für robuste Offline-First-Anwendungen.

pouchdb

verstehen

pouchdb ist eine Open-Source-JavaScript-Datenbank, die nach Apache CouchDB modelliert ist, die für Browser-Umgebungen optimiert ist.

Eine JavaScript -Datenbank ist im Wesentlichen ein JavaScript -Objekt -Angebotsmethoden (API) zur Datenmanipulation (put, get, suche). Ein einfaches JavaScript -Objekt dient als grundlegendste Beispiel. Wenn Sie mit Meteor vertraut sind, ist Minimongo eine vergleichbare clientseitige Datenbank, die die MongoDB-API nachahmt.

pouchdb unterscheidet sich von minimongo, indem es indexedDB für persistentes Speicher verwendet (nicht nur in Memory). IndexedDB ist eine API auf niedriger Ebene zum Speichern von erheblichen strukturierten Daten, einschließlich Dateien/Blobs. Dies sorgt für die Durchführung von Daten auch nach dem Aktualisieren von Seiten (obwohl die Daten browserspezifisch sind). Verschiedene Adapter ermöglichen die Anpassung der zugrunde liegenden Speicherschicht.

pouchdb und couchdb: die Verbindung

pouchdb ist eine JavaScript -Implementierung von CouchDB, die seine API genau widerspiegelt. Zum Beispiel verwendet das Abrufen aller Dokumente in CouchDB /db/_all_docs?include_docs=true, während es in Pouchdb db.allDocs({include_docs: true})

ist

pouchdb ermächtigt Anwendungen, um Daten lokal offline zu speichern und mit CouchDB bei der Wiederverbindung zu synchronisieren.

Erste Schritte mit pouchdb

Fügen Sie die POUBDB -Client -Bibliothek ein, um zu beginnen. Verwenden Sie den Standalone -Build (erstellen Sie den PouchDB -Konstruktor global) über ein

Alternativ verwenden Sie für node.js/browserify/webpack npm:

$ npm install pouchdb --save

Dann in Ihrem JavaScript:

var PouchDB = require('pouchdb');

Arbeiten mit PouchdB: Datenmanipulation

Datenbankerstellung

PouchDB Erstellen einer Datenbank ist so einfach wie das Aufrufen des

Konstruktors:

var movies = new PouchDB('Movies');

.info() Verwenden Sie die Methode

(Rückgabe eines Versprechens), um Datenbankinformationen anzuzeigen:

movies.info().then(function(info) { console.log(info); });

Dokumentverwaltung

pouchdb ist noSQL, dokumentbasiert; Es gibt kein festes Schema. Fügen Sie JSON -Dokumente direkt ein.

Dokumentenerstellung

.put() Verwenden Sie die Methode

:

movies.put({ _id: 'tdkr', title: 'The Dark Knight Rises', director: 'Christopher Nolan' })
  .then(function(response) { console.log("Success", response); })
  .catch(function(err) { console.log("Error", err); });

Dokumentenabruf

.get() Verwenden Sie die Methode

:

movies.get('tdkr').then(function(doc) { console.log(doc); }).catch(function(err) { console.log(err); });

Dokument Updates

.put() Aktualisieren Sie Dokumente, indem Sie _rev das Feld

erhalten:

movies.get('tdkr').then(function(doc) { doc.year = "2012"; return movies.put(doc); }).then(function(res) { console.log(res); });

Dokument Löschen

.remove() Verwenden Sie die Methode _deleted: true (oder setzen Sie .put() vor

):

movies.get('tdkr').then(function(doc) { return movies.remove(doc); }).then(function(res) { console.log("Remove operation response", res); });

Datenbank Löschung

.destroy() Verwenden Sie die Methode

:

movies.destroy();

Bulk -Operationen

pouchdb bietet effiziente Massenoperationen:

Bulk Inserts

.bulkDocs() Verwenden Sie

:

movies.bulkDocs([
  { _id: 'easy-a', title: "Easy A" },
  { _id: 'black-swan', title: 'Black Swan' }
]);

Bulk liest

.allDocs() Verwenden Sie

:

movies.allDocs({ include_docs: true }).then(function(docs) { console.log(docs); });
```  This method allows for ordering, filtering, and pagination using `startkey`, `endkey`, and `descending` parameters.


Real-time Updates with ChangeFeeds
---------------------------------

PouchDB's `changes()` API allows monitoring database changes:

```javascript
db.changes({ since: 'now', live: true, include_docs: true })
  .on('change', function(change) {
    // Update UI based on change.id and change.doc
  })
  .on('error', function(err) {
    // Handle errors
  });

Synchronisation mit CouchDB

Synchronisieren Sie lokale Pokaldaten mit einer Remote -CouchDB -Instanz:

var localDB = new PouchDB('mylocaldb');
var remoteDB = new PouchDB('http://localhost:5984/myremotedb');

localDB.sync(remoteDB, { live: true }); // For live, bidirectional syncing

Weitere Erkundung

pouchdB -Plugins und Framework -Adapter entdecken. Die Erweiterung der PouchdB Inspector Chrome bietet eine hilfreiche GUI für die Datenbankinspektion.

häufig gestellte Fragen

Dieser Abschnitt enthält kurze Antworten auf gemeinsame Beutelfragen, die Abdeckung von Installation, Datenbankerstellung, Dokumentmanipulation, Fehlerbehandlung und Synchronisation mit CouchDB. Ausführliche Erläuterungen und Code -Beispiele finden Sie im Originalartikel. <script> tag: <pre class="brush:php;toolbar:false"><code class="language-html"><script src="https://cdn.jsdelivr.net/pouchdb/5.4.5/pouchdb.min.js"></script>

Das obige ist der detaillierte Inhalt vonErste Schritte mit der javaScript-Datenbank von PouchDB-Client-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!