- "Введение"
- Настройка пустого проекта
- Установка SQLite и подключение к базе данных
- Наполнение базы данных
- Получение данных из базы данных
- Общение между бэкендом и внешним интерфейсом с помощью IPCMain
- "Заключение"
ВВЕДЕНИЕ
Эта статья покажет вам, как вы можете использовать базу данных SQLite для своего приложения Electron.
Недавно я начал создавать автономное настольное приложение с помощью Electron. Это означало, что мне нужно было иметь локальную базу данных для моего приложения.
Проведя некоторое исследование, я обнаружил, что использование SQLite лучше всего подходит для моего сценария. Однако мне пришлось много копать, и я не смог найти надежный ресурс, который показал бы мне, как я могу реализовать это в своем приложении Electron, использующем Vite и React.
Поэтому я создаю эту статью для тех, кто в будущем может оказаться в такой же ситуации, как я.
Настройка пустого проекта
В этом уроке я буду использовать этот шаблон для создания пустого проекта. Как всегда, спасибо разработчикам, которые сделали шаблон!
Используйте следующую команду в своем терминале и просмотрите параметры для настройки проекта. Вы также можете нажать кнопку «использовать этот шаблон» на GitHub и настроить такой репозиторий.
Обратите внимание, что по какой-то причине «npm create electronic-vite» не пытается использовать пряжу.
yarn create electron-vite
зайдите в свой проект и откройте его в коде VS (или другой вашей любимой IDE) и установите все зависимости, используя следующую команду в своем терминале.
yarn
Проверьте, что у вас есть работающий проект, используя
yarn dev
Ваш проект должен выглядеть примерно так
Установка SQLite и подключение к базе данных
Введите следующую команду, чтобы установить SQLite3 в свой проект.
yarn add sqlite3
Если вы используете другой менеджер пакетов, просто убедитесь, что вы устанавливаете sqlite3 как зависимость, а не зависимость Dev.
После установки создайте файл с именем "database.db" на верхнем уровне вашего проекта.
После установки Sqlite3 и создания файла "database.db" создайте файл "databaseConnection.ts" в папке electron.
Для целей этого руководства я сделаю все в этом файле, но может быть хорошей практикой иметь файл подключения к базе данных и отдельный файл для взаимодействия с базой данных.
В этом файле сначала мы импортируем sqlite и подключимся к нашей базе данных.
import sqlite3 from "sqlite3"; export const db = new sqlite3.Database("database.db");
Аргумент «database.db» попытается подключиться к файлу с таким именем в родительском каталоге вашего проекта. Если файл не существует, он создаст этот файл.
Заполнение базы данных
Следующим шагом будет создание таблиц внутри нашего файла базы данных. Мы можем сделать это, создав функции в нашей программе, но я буду использовать программу под названием Beekeeper Studio для создания таблиц, потому что это намного проще.
Запустите приложение, подключитесь к созданному вами файлу базы данных sqlite и выполните запросы для создания таблиц!
Получение данных из базы данных
Теперь мы создадим функцию в нашем файле «databaseConnection.ts» для извлечения данных из таблицы имен. Вот так выглядит наша функция.
Мы собираемся создать функцию, которая возвращает обещание. Это будет иметь смысл, когда мы попытаемся получить наши данные во внешнем интерфейсе.
export function getAllNames() { const query = "SELECT * FROM names;"; return new Promise((resolve, reject) => { let statement = db.prepare(query); statement.all((err, rows) => { if (err) { console.error(err.message); reject(err); } else { resolve(rows); } statement.finalize(); }); }); }
Связь между бэкендом и внешним интерфейсом с помощью IPCMain
Мы будем использовать IPCMain (модуль в nodejs для отправки и получения сообщений) для отправки наших данных в наш интерфейс.
В том же «databaseConnection.ts» создайте еще одну функцию с именем IPCHandlers и введите в нее следующее.
export function IpcHandlers() { ipcMain.handle("get-all-names", async (event, args) => { const data = await getAllNames(); return data; }); }
Что делает эта функция, так это то, что каждый раз, когда IPCMain получает событие «get-all-names», эта функция срабатывает и отправляет данные обратно.
Теперь в electron/main/index.ts добавьте функцию IpcHandlers, чтобы электрон зарегистрировал их. Измените следующее
app.whenReady().then(createWindow)
К этому
app.whenReady().then(() => { IpcHandlers(); createWindow(); });
Теперь все ваши обработчики зарегистрированы, и вы сможете вызывать их в своем интерфейсе!
В вашем App.tsx давайте проверим это!
function App() { const [count, setCount] = useState(0) async function getData() { const data = await ipcRenderer.invoke("get-all-names") console.log("This data came from my database:", data) } getData(); return ( <div className='App'>...
И вуаля! теперь вы можете извлекать и получать данные из своей базы данных.
Заключение
В заключение в этой статье представлено пошаговое руководство по настройке базы данных sqlite для электронного приложения, использующего React и TypeScript. Я показал, как установить sqlite3; как общаться с вашей базой данных с помощью IPCMain и как получать данные в вашем интерфейсе.
Вы также можете найти репозиторий, который я создал для демонстрации того, что я показал в этой статье, здесь.
Надеюсь, вам была полезна эта статья :)