Hand-shek с PouchDB и Vue3: пошаговое руководство

Вы планируете создать веб-приложение, которое может работать без подключения к Интернету, используя Vue.js? Вам нужна помощь в поиске правильного способа заставить ваше приложение работать в автономном режиме? Хотите открыть для себя или узнать что-то новое? Если да, то вы не одиноки. В этом блоге я проведу вас через процесс подключения Vue 3 к PouchDB — мощной и удобной базе данных, для работы которой не требуется интернет.

МешокДБ

PouchDB — это бесплатный проект с открытым исходным кодом, написанный на JavaScript. Это реализация CouchDB. Его цель — эмулировать CouchDB API с почти идеальной точностью при работе в браузере или Node.js. PouchDB — это не автономная база данных, а слой абстракции в стиле CouchDB поверх других баз данных. По умолчанию PouchDB поставляется с адаптером IndexedDB для браузера.

PouchDB невероятно универсален, предлагая возможность хранить ваши данные как в локальной базе данных браузера, так и удаленно с использованием служб HTTP. В этом руководстве мы проведем вас через пошаговый процесс подключения PouchDB к Vue 3.

CouchDB

CouchDB – это база данных NoSQL, созданная в 2005 году Дэмиеном Кацем и в настоящее время поддерживаемая Apache Software Foundation. Если вы разработчик JavaScript, вы, вероятно, используете CouchDB каждый день, потому что это основная технология, на которой основан npm.

Пункты, которые мы рассмотрим в этом блоге:

Предпосылки
Создайте новый проект Vue3
Интеграция PouchDB с использованием локальных баз данных браузера
Процесс установки CouchDB
Установление соединения между CouchDB и Vue3
Включение Cors для успешного подключения
Альтернатива CouchDB: сервер PouchDB

Предпосылки

Install Node.js version 16.0 or higher.
Try to install 16.20.0 or higher

If you are using NVM then type below command to install nodejs
nvm install 16.20.0

Чтобы установить NodeJs v16.20.0

Создайте новый проект Vue3

npm create vue@latest

Интеграция PouchDB с использованием локальных баз данных браузера

Для подключения приложения Vue к pouchDB мы будем использовать CDN, а не npm. Это означает, что мы будем загружать pouchDB из CDN, а не с помощью npm.

Шаги:

Шаг 1. Скопируйте приведенный ниже скрипт и вставьте его в свой файл index.html.

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js"></script>

Шаг 2. Теперь чуть ниже добавьте новый раздел скрипта и инициализируйте соединение.

<script>
  // Instead of "test_db" you can write your db name
  var $pouchDB = new PouchDB('test_db');
  if ($pouchDB) {
    console.log("Connection with PouchDB established successfully");
    console.log($pouchDB);
  } else {
    console.warn("Something went wrong")
  }
</script>

Посмотрите, как выглядит файл

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      src="//cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js">
    </script>
    <script>
      var $pouchDB = new PouchDB('test_db');
      if ($pouchDB) {
        console.log("Connection with PouchDB established successfully");
        console.log($pouchDB);
      } else {
        console.warn("Something went wrong")
      }
    </script>
    <!-- The below script is your vuejs script, it is a build file -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Теперь возникает вопрос: как мы можем получить доступ к переменной $pouchDB в файле .vue? Ответ довольно прост — взгляните на фрагмент кода ниже.

Файл App.vue

// App.vue file
<script setup>
import { ref } from 'vue'
let status = ref(null);
$pouchDB.info().then(function (info) {
  status.value = info;
});
</script>

<template>
  <div>
    <h1>Pouch DB Details</h1>
    <div>
      {{ status }}
    </div>
  </div>
</template>

Примечание. Вы можете получить доступ к переменной $pouchDB из любого места в проекте.

Если вы хотите найти, где в браузере хранятся ваши данные…

Процесс установки CouchDB

Это еще один подход к подключению приложения Vue к PouchDB. CouchDB предоставляет отличный пользовательский интерфейс для взаимодействия с данными. он работает на локальном хосте с портом 5984 (по умолчанию). Он работает как служба на вашем локальном компьютере.

Давайте посмотрим, как установить и запустить CouchDB

Во-первых, нам нужно скачать CouchDB. После завершения установки нажмите на приведенный ниже URL-адрес:

http://локальный:5984/_utils/#логин

Если вы видите экран, подобный следующему, значит, вы готовы к работе с CouchDB.

Имя пользователя: admin | Пароль: ‹ВАШ_ПАРОЛЬ›

Чтобы посетить после входа в систему, пожалуйста, нажмите здесь.

Установление соединения между CouchDB и Vue3

Чтобы установить соединение, все шаги одинаковы, просто нужно обновить строку подключения в нашем существующем коде.

Откройте файл index.html и скопируйте предоставленный фрагмент кода. Затем замените его ранее добавленным кодом.

<script>
// var $pouchDB = new PouchDB('test_db');
// http://user:pass@host/name.
// user: admin
// pass: YOUR PASSWORD
// host: localhost
// name: test_db
var $pouchDB = new PouchDB('http://admin:YOUR_PASSWORD@localhost:5984/test_db');
if ($pouchDB) {
  console.log("Connection with PouchDB established successfully");
  console.log($pouchDB);
} else {
  console.warn("Something went wrong")
}
</script>

Вы также можете инициализировать соединение, используя следующий фрагмент кода: просто замените его ранее упомянутым кодом.

var $pouchDB = new PouchDB('http://localhost:5984/test_db', {
  username: 'admin',
  password: 'YOUR_PASSWORD'
});

Включение Cors для успешного подключения

Почему требуется включение cors?

Включение CORS (Cross-Origin Resource Sharing) необходимо для обеспечения безопасной и контролируемой связи между веб-приложениями, размещенными в разных доменах или на разных портах.

Чтобы включить CORS, войдите в систему и перейдите к настройкам. Нажмите на раздел «CORS», и вы найдете кнопку «Включить CORS». Нажмите здесь. После этого вы увидите раздел «Исходные домены», где вы найдете эти две опции:

Все домены ( * ) — (Выберите этот вариант на данный момент)
Ограничить определенными доменами

После этого перейдите в свое приложение и перезагрузите его; ваше соединение будет успешно установлено.

БОНУС

Вы можете включить CORS с помощью команды: npm install -g add-cors-to-couchdb

# run to install script
npm install -g add-cors-to-couchdb

# Run after installation is completed
$ add-cors-to-couchdb http://localhost:5984 -u admin -p <PASSWORD>

Альтернатива CouchDB: сервер PouchDB

Если вам не нравится установка CouchDB, не волнуйтесь; доступен еще один вариант: сервер PouchDB.

Сервер PouchDB в настоящее время является экспериментальным, и мы не рекомендуем его для производственных сред.

npm install -g pouchdb-server
pouchdb-server --port 5983

Примечание.Если вы установили сервер PouchDB, CORS включен по умолчанию, и в этом шаге нет необходимости.

Важно отметить, что вы должны выбрать один из этих вариантов для автономного хранения данных приложения. Это очень важно, потому что CouchDB и PouchDB Server хранят данные в разных местах.

Если вы ищете идею для автономного проекта, пожалуйста, проверьте список ниже:

To-Do List App
Note Taking App
Weather App
Calculator App
Flashcard Quiz App
Pomodoro Timer
Language Learning App
Recipe Book
Timer App
Image Gallery

Заключение

В заключение вы получили инструменты для создания устойчивых приложений Vue 3 путем слияния PouchDB и CouchDB. Ваше понимание этих технологий, от локальных баз данных до CORS и других, открывает целый мир автономных возможностей. Используйте эти знания, чтобы создавать приложения, расширяющие границы и расширяющие возможности пользователей.