Настройка маршрутов

В фреймворке Marko маршрутизация реализуется с помощью встроенного инструмента, предоставляющего мощный механизм для обработки URL и связывания их с соответствующими компонентами. Этот механизм является важной частью работы с динамическими веб-приложениями, поскольку позволяет эффективно управлять состоянием приложения в зависимости от URL-адреса и действий пользователя.

Основы маршрутизации

Маршруты в Marko представляют собой сопоставление URL-адресов с определёнными компонентами или функциями. Каждый маршрут может быть привязан к компоненту, который будет отображать нужное содержимое на странице, либо к обработчику, который выполняет логику маршрута.

Существует несколько ключевых понятий, которые важно понимать при настройке маршрутов:

  • Маршрут — это правило, которое определяет, какой компонент или обработчик должен быть вызван для конкретного URL.
  • Роутер — это объект, который управляет маршрутизацией и обеспечивает связь между URL и соответствующими компонентами.
  • Параметры маршрута — динамические части URL, которые могут быть переданы в компонент для обработки.

Установка и настройка роутера

Для начала работы с маршрутизацией необходимо установить и настроить роутер. В Marko используется @marko/express, который интегрируется с фреймворком Express.js. Это позволяет использовать всё многообразие возможностей Express, а также гибко настраивать маршруты.

Установить необходимые зависимости можно с помощью команды:

npm install @marko/express express

После этого необходимо настроить Express-сервер, подключив роутер Marko:

const express = require('express');
const markoExpress = require('@marko/express');
const app = express();

app.use(markoExpress());

Теперь можно приступать к созданию маршрутов.

Создание простых маршрутов

Маршруты в Marko создаются с использованием методов Express. Каждый маршрут может быть привязан к компоненту, который будет отображать контент на странице. Для этого используется метод app.get(), где вторым параметром передаётся компонент Marko.

Пример простого маршрута:

const index = require('./views/index.marko');

app.get('/', (req, res) => {
    res.marko(index);
});

В этом примере при обращении к корневому URL будет отрендерен компонент index.marko.

Динамические маршруты

Маршруты могут включать параметры, которые передаются в компонент или обработчик. Эти параметры обозначаются через двоеточие в URL.

Пример динамического маршрута:

const product = require('./views/product.marko');

app.get('/product/:id', (req, res) => {
    const productId = req.params.id;
    res.marko(product, { id: productId });
});

Здесь :id — это параметр маршрута, который будет доступен через req.params.id. Этот параметр передаётся в компонент product.marko, что позволяет отображать информацию о конкретном товаре.

Группировка маршрутов

Для упрощения управления маршрутизаторами в приложениях с большим количеством URL можно использовать группы маршрутов. В Express это делается с помощью метода app.use(), который позволяет организовать маршруты в подкатегории.

Пример:

const adminRoutes = require('./routes/admin');

app.use('/admin', adminRoutes);

В файле routes/admin.js могут быть определены маршруты, которые будут работать в контексте /admin. Это особенно удобно для создания панели администратора или разделов, защищённых паролем.

const express = require('express');
const router = express.Router();
const adminDashboard = require('../views/admin/dashboard.marko');

router.get('/dashboard', (req, res) => {
    res.marko(adminDashboard);
});

module.exports = router;

Обработка ошибок и редиректы

Для обработки ошибок и редиректов можно использовать стандартные методы Express. Если маршрут не найден или произошла ошибка при рендеринге, можно вернуть соответствующий ответ.

Пример обработки ошибки 404:

app.use((req, res) => {
    res.status(404).send('Страница не найдена');
});

Пример редиректа:

app.get('/old-url', (req, res) => {
    res.redirect(301, '/new-url');
});

Подключение middleware

В Marko можно использовать middleware для обработки запроса перед тем, как он попадёт к маршруту. Это может быть полезно для проверки прав доступа, логирования или других задач.

Пример middleware для проверки аутентификации:

function isAuthenticated(req, res, next) {
    if (req.isAuthenticated()) {
        return next();
    }
    res.redirect('/login');
}

app.get('/profile', isAuthenticated, (req, res) => {
    res.marko(profile);
});

В этом примере перед рендерингом страницы профиля вызывается middleware, который проверяет, авторизован ли пользователь.

Вложенные маршруты и компоненты

Marko позволяет создавать более сложные структуры маршрутов с использованием вложенных компонентов. Вложенные компоненты позволяют разбиение интерфейса на логические блоки и удобную маршрутизацию для каждого блока.

Пример вложенного компонента:

const layout = require('./views/layout.marko');
const content = require('./views/content.marko');

app.get('/home', (req, res) => {
    res.marko(layout, { content: content });
});

Здесь layout.marko является основным контейнером, а компонент content.marko встраивается внутрь.

Заключение

Маршрутизация в Marko предоставляет мощные инструменты для создания динамических веб-приложений. Возможности гибкой настройки маршрутов, использования параметров, middleware и организации вложенных компонентов позволяют создавать как простые, так и сложные системы маршрутизации. Правильная настройка маршрутов в Marko обеспечивает удобную и эффективную работу веб-приложения, позволяя легко управлять состоянием и рендерингом контента на основе URL-адресов.

Оглавление