Фреймворк Marko предназначен для создания быстрых и динамичных веб-приложений, при этом интеграция с базами данных играет ключевую роль в разработке. В рамках этой статьи рассматриваются основные подходы и практики для работы с базами данных в приложениях на Marko.
Для работы с базами данных в Marko основное внимание уделяется серверной логике. Marko предоставляет отличную поддержку для серверного рендеринга, что позволяет напрямую интегрировать его с различными backend-решениями. Для реализации взаимодействия с базой данных можно использовать серверный код Node.js, который будет обрабатывать запросы от клиента и выполнять операции с базой данных.
Для взаимодействия с базой данных на сервере, например, можно
использовать такие библиотеки, как pg для PostgreSQL,
mysql2 для MySQL, или mongoose для MongoDB.
Важно помнить, что Marko генерирует HTML на сервере, который затем
отправляется в браузер, что обеспечивает эффективное и быстрое
обновление данных на клиентской стороне.
На серверной стороне часто создаются RESTful API, через которые Marko-компоненты могут запрашивать данные. Эти API служат посредниками между сервером и базой данных, выполняя операции CRUD (Create, Read, Update, Delete).
Пример создания простого REST API на Node.js с использованием Express и PostgreSQL:
const express = require('express');
const { Pool } = require('pg');
const app = express();
const pool = new Pool({
user: 'username',
host: 'localhost',
database: 'mydb',
password: 'password',
port: 5432,
});
app.use(express.json());
// Получение данных из базы данных
app.get('/api/items', async (req, res) => {
try {
const result = await pool.query('SELECT * FROM items');
res.json(result.rows);
} catch (err) {
console.error(err);
res.status(500).send('Ошибка при получении данных');
}
});
// Добавление данных в базу данных
app.post('/api/items', async (req, res) => {
const { name, description } = req.body;
try {
const result = await pool.query(
'INSERT INTO items (name, description) VALUES ($1, $2) RETURNING *',
[name, description]
);
res.status(201).json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).send('Ошибка при добавлении данных');
}
});
app.listen(3000, () => {
console.log('Сервер запущен на порту 3000');
});После того как API настроено, необходимо интегрировать его с компонентами на Marko. Компоненты могут запрашивать данные с сервера при загрузке страницы или при определённых действиях пользователя (например, при клике на кнопку).
Для этого на клиенте можно использовать встроенные механизмы
взаимодействия с сервером через fetch или другие
библиотеки, такие как Axios.
Пример запроса данных в Marko компоненте:
<template>
<div>
<h1>Список элементов</h1>
<ul>
<li for="item in items">
${item.name}: ${item.description}
</li>
</ul>
</div>
</template>
<script>
const fetchData = async () => {
const response = await fetch('/api/items');
const data = await response.json();
return data;
};
export default class {
onCreate() {
this.items = fetchData();
}
}
</script>Этот пример демонстрирует, как компонент может асинхронно загружать
данные с сервера и отображать их. Примечание: данные загружаются в
методе onCreate, который вызывается при создании
компонента.
Для работы с формами и отправки данных на сервер, например, для добавления или редактирования информации в базе данных, можно использовать формы в компонентах Marko. После отправки формы данные передаются на сервер через API.
Пример формы для добавления нового элемента в базу данных:
<template>
<div>
<h1>Добавить новый элемент</h1>
<form method="POST" action="/api/items">
<label for="name">Имя:</label>
<input type="text" name="name" required />
<label for="description">Описание:</label>
<textarea name="description" required></textarea>
<button type="submit">Добавить</button>
</form>
</div>
</template>После отправки формы данные отправляются на серверный API, где они обрабатываются и добавляются в базу данных. Важно помнить, что для корректной работы нужно обеспечить правильную обработку POST-запросов на серверной части, как показано в предыдущем примере.
Иногда необходимо обновлять данные в реальном времени, например, при изменении записи в базе данных. Для таких случаев можно использовать WebSocket или Server-Sent Events (SSE) для двусторонней связи между сервером и клиентом. Это позволит синхронизировать данные без необходимости перезагружать страницу.
Пример использования WebSocket для получения обновлений:
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
console.log('Клиент подключён');
ws.on('message', message => {
console.log('Получено сообщение: %s', message);
});
ws.send('Добро пожаловать на WebSocket сервер!');
});<template>
<div>
<h1>Обновления базы данных</h1>
<ul>
<li for="item in items">
${item.name}: ${item.description}
</li>
</ul>
</div>
</template>
<script>
export default class {
onCreate() {
this.items = [];
const socket = new WebSocket('ws://localhost:8080');
socket.onmess age = (event) => {
const updatedData = JSON.parse(event.data);
this.items.push(updatedData);
};
}
}
</script>С использованием WebSocket клиент может получать обновления в реальном времени без необходимости перезагружать страницу или делать дополнительные запросы к серверу.
Одним из важных аспектов работы с базой данных является валидация данных. Перед тем как отправить данные в базу, необходимо убедиться в их корректности. В Marko можно использовать встроенные механизмы для валидации на клиенте и сервере.
Для серверной валидации можно использовать различные библиотеки,
например, express-validator или joi, которые
позволяют легко проверять данные перед их отправкой в базу.
Пример валидации данных с использованием
express-validator:
const { body, validationResult } = require('express-validator');
app.post('/api/items', [
body('name').isLength({ min: 3 }).withMessage('Имя должно быть не короче 3 символов'),
body('description').isLength({ min: 5 }).withMessage('Описание должно быть не короче 5 символов'),
], async (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
const { name, description } = req.body;
try {
const result = await pool.query(
'INSERT INTO items (name, description) VALUES ($1, $2) RETURNING *',
[name, description]
);
res.status(201).json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).send('Ошибка при добавлении данных');
}
});С помощью этой валидации можно убедиться, что отправляемые на сервер данные соответствуют ожидаемому формату, и в случае ошибок отобразить пользователю подробные сообщения.
Важным аспектом работы с базами данных является защита от SQL-инъекций и других уязвимостей. Использование подготовленных запросов (prepared statements) и ORM (например, Sequelize или TypeORM) помогает минимизировать риски.
Кроме того, для обеспечения безопасности пользовательских данных на
сервере следует использовать методы защиты, такие как шифрование паролей
(например, с использованием библиотеки bcrypt) и
аутентификацию через JWT (JSON Web Tokens).