Début avec la base de données JavaScript côté client Pouchdb côté client

Cet article a été examiné par Sebastian Seitz et Taulant Spahiu. Merci aux pairs examinateurs de SitePoint pour leurs contributions!

Les applications Web modernes côté client exigent des capacités sophistiquées de traitement des données. Les navigateurs offrent désormais des performances JavaScript robustes et des API riches (géolocalisation, communication entre pairs, etc.), alimentant la croissance des applications Web complexes. Cette avancement nécessite des solutions de stockage côté client efficaces, où les bases de données JavaScript comme Pouchdb Excel.

Caractéristiques clés de Pouchdb

• Pouchdb, une base de données JavaScript open source inspirée par Apache Couchdb, fonctionne de manière transparente dans le navigateur, en levant indexé pour le stockage de données persistantes sur les rafraîchissements de page.
• L'installation est simple: intégrez un script autonome dans votre HTML ou utilisez des projets NPM pour Node.js.
• prend en charge les opérations CRUD et la manipulation des documents en vrac, offrant une gestion flexible des données avec des commandes JavaScript simples - aucun schéma rigide requis.
• La synchronisation des données en temps réel et le suivi des changements sont intégrés, permettant des mises à jour dynamiques d'interface utilisateur basées sur des modifications immédiates de la base de données.
• Facilite le stockage de données hors ligne avec une synchronisation transparente avec CouchDB, garantissant la cohérence des données entre les appareils et les sessions, idéal pour des applications hors ligne robustes.

Comprendre Pouchdb

Pouchdb est une base de données JavaScript open source modélisée après Apache Couchdb, optimisée pour les environnements de navigateur.

Une base de données JavaScript, en substance, est une méthodes d'offre d'objets JavaScript (API) pour la manipulation des données (put, get, search). Un objet JavaScript simple sert d'exemple le plus élémentaire. Si vous connaissez Meteor, Minimongo est une base de données côté client comparable imitant l'API MongoDB.

Pouchdb se distingue de Minimongo en utilisant indexéddb pour le stockage persistant (pas seulement en mémoire). IndededDB est une API de bas niveau pour stocker des données structurées substantielles, y compris les fichiers / blobs. Cela garantit la persistance des données même après les actualités de la page (bien que les données soient spécifiques au navigateur). Différents adaptateurs permettent la personnalisation de la couche de stockage sous-jacente.

Pouchdb et Couchdb: la connexion

Pouchdb est une implémentation JavaScript de CouchDB, reflétant étroitement son API. Par exemple, la récupération de tous les documents dans CouchDB utilise /db/_all_docs?include_docs=true, tandis que dans Pouchdb, c'est db.allDocs({include_docs: true}).

Pouchdb permet aux applications de stocker les données localement hors ligne et de les synchroniser avec CouchDB lors de la reconnexion.

pour commencer avec Pouchdb

Incluez la bibliothèque client Pouchdb pour commencer. Utilisez la construction autonome (rendant le constructeur PouchDB disponible à l'échelle mondiale) via un

Alternativement, pour Node.js / Browserify / WebPack, utilisez NPM:

<code class="language-bash">$ npm install pouchdb --save</code>

Ensuite, dans votre javascript:

<code class="language-javascript">var PouchDB = require('pouchdb');</code>

Travailler avec Pouchdb: manipulation de données

Création de base de données

PouchDB La création d'une base de données est aussi simple que d'appeler le constructeur

:

<code class="language-javascript">var movies = new PouchDB('Movies');</code>

.info() Utilisez la méthode

(renvoyant une promesse) pour afficher les informations de la base de données:

<code class="language-javascript">movies.info().then(function(info) { console.log(info); });</code>

Gestion des documents

Pouchdb est nosql, basé sur des documents; Il n'y a pas de schéma fixe. Insérez directement les documents JSON.

Création de documents

.put() Utilisez la méthode

:

<code class="language-javascript">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); });</code>

RECOURATION DES DOCUMENTS

.get() Utilisez la méthode

:

<code class="language-javascript">movies.get('tdkr').then(function(doc) { console.log(doc); }).catch(function(err) { console.log(err); });</code>

Document Mises à jour

.put() Mettez à jour les documents en récupérant, modifiant et utilisant à nouveau _rev, fournissant le champ

:

<code class="language-javascript">movies.get('tdkr').then(function(doc) { doc.year = "2012"; return movies.put(doc); }).then(function(res) { console.log(res); });</code>

Délétion du document

.remove() Utilisez la méthode _deleted: true (ou définissez .put() avant

):

<code class="language-javascript">movies.get('tdkr').then(function(doc) { return movies.remove(doc); }).then(function(res) { console.log("Remove operation response", res); });</code>

Délétion de la base de données

.destroy() Utilisez la méthode

:

<code class="language-javascript">movies.destroy();</code>

Opérations en vrac

Pouchdb offre des opérations en vrac efficaces:

inserts en vrac

.bulkDocs() utiliser

:

<code class="language-javascript">movies.bulkDocs([
  { _id: 'easy-a', title: "Easy A" },
  { _id: 'black-swan', title: 'Black Swan' }
]);</code>

Bulk Reads

.allDocs() utiliser

:

<code class="language-javascript">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
  });</code>

Synchronisation avec Couchdb

Synchroniser les données de Pouchdb locales avec une instance Couchdb distante:

<code class="language-javascript">var localDB = new PouchDB('mylocaldb');
var remoteDB = new PouchDB('http://localhost:5984/myremotedb');

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

Exploration supplémentaire

Explorez les plugins Pouchdb et les adaptateurs de framework. L'extension de l'inspecteur de Pouchdb Chrome fournit une interface graphique utile pour l'inspection de la base de données.

Les questions fréquemment posées

Cette section fournit des réponses concises aux questions communes de Pouchdb, couvrant l'installation, la création de bases de données, la manipulation de documents, la gestion des erreurs et la synchronisation avec CouchDB. Reportez-vous à l'article d'origine pour des explications détaillées et des exemples de code. <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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!