Бэкенд сайта (динамические обработчики)
Помимо статических файлов у загруженного сайта может быть настоящий бэкенд — небольшие JavaScript-обработчики, привязанные к отдельным адресам. Каждый обработчик привязан к пути и HTTP-методу; когда посетитель открывает этот адрес, Qubix запускает обработчик и возвращает всё, что тот сформирует, — страницу, JSON-ответ, редирект, код состояния.
Используйте это, когда страница должна что-то делать на сервере, а не просто показывать статическое содержимое: принять лид через POST-запрос, ответить на определённый путь сгенерированным HTML или отправить редирект в зависимости от запроса. Для обычных вайтпейджей и лендингов это не нужно — оставьте вкладку Бэкенд пустой, и сайт будет отдаваться как обычные файлы.
Откройте вкладку «Бэкенд»
У карточки сайта вверху три вкладки: Файлы, Бэкенд и Превью. Активная вкладка сохраняется в адресной строке, поэтому вы можете скопировать ссылку сразу на нужную вкладку.
- Откройте раздел «Websites» и нажмите на нужный сайт.
- Переключитесь на вкладку Бэкенд.
Если у сайта ещё нет обработчиков, в списке отображается подсказка, что «+ new» создаёт обработчик из шаблона.
Вкладка Бэкенд нужна только тогда, когда страница должна что-то обрабатывать на сервере. Чисто статическая страница работает без обработчиков.
Создайте обработчик
- На вкладке Бэкенд нажмите «+ new» слева вверху, над списком обработчиков. Новый обработчик создаётся из готового шаблона и открывается в редакторе.
🎬 GIF: нажатие «+ new» и открытие шаблонного обработчика в редакторе
- В форме заголовка над редактором задайте путь — адрес, на котором отвечает обработчик. Поле принимает шаблон с плейсхолдерами (например,
/users/:id)::name— захватывает один сегмент пути (например,:idв/users/:idсоответствует/users/42);*— захватывает остаток пути по нескольким сегментам;**— соответствует остатку пути, не захватывая его.
- Выберите метод —
GET,POST,PUT,DELETE,PATCH,HEAD,OPTIONSили ANY (отвечает на любой метод). - Оставьте флажок enabled включённым, чтобы обработчик работал на боевом сайте. Снимите его, чтобы сохранить обработчик, но оставить неактивным.
- В центральном редакторе напишите код обработчика (см. Код обработчика ниже).
- Нажмите Сохранить (или Cmd+S, на Windows — Ctrl+S).
В списке слева каждый обработчик показан своим методом и путём (обработчик без заданного метода отображается как ANY); отключённый помечается соответствующим образом.
Если на один и тот же адрес может ответить несколько обработчиков, Qubix выбирает наиболее конкретный — обработчик с точным путём выигрывает у обработчика с плейсхолдером или вайлдкардом. Поэтому вы можете держать точный обработчик рядом с широким перехватчиком, и они не будут конфликтовать.
Код обработчика
Обработчик — это JavaScript-функция, которая получает объект запроса — назовём его r — открывающий доступ к запросу (метод, путь, аргументы query и формы, заголовки, захваченные сегменты пути) и ответу (задать заголовки, вернуть статус с телом или редирект). Шаблон, с которого стартует редактор, уже показывает типичную структуру.
Редактор — это полноценный редактор кода с подсветкой синтаксиса и автодополнением: начните вводить r., и Qubix подскажет доступные поля запроса и ответа с их описаниями, так что держать их в голове не нужно.
Внутри обработчика вам также доступен общий набор инструментов Qubix: запросы к базе данных только на чтение, обращения к внешним сервисам и состояние, которое сохраняется между вызовами. Они работают так же, как в Скриптах — подробности в той статье. Исходящие запросы разрешены только на адреса, которые администратор внёс в список разрешённых. Какие таблицы и колонки доступны запросу — в Таблицах для запросов sql.
Справочник объекта r
Всё, что обработчик читает из запроса и чем формирует ответ.
Чтение запроса:
| Поле | Что это |
|---|---|
r.method | HTTP-метод запроса (GET, POST, …) |
r.uri | Адрес, на который сработал обработчик (например, /promo/123) |
r.rawUri | Полный внешний адрес со служебным префиксом |
r.args | Параметры адреса и формы (ключ → значение) |
r.params | Значения, захваченные из шаблона пути (например, id из /users/:id) |
r.requestBuffer | Тело запроса строкой |
r.headersIn | Заголовки запроса |
r.remoteAddress | IP посетителя |
r.variables | Контекст перехода: geo, click_id, sub1…sub5, lang |
r.session | Сессия посетителя: get(key), set(key, value), delete(key) |
Формирование ответа:
| Поле / метод | Действие |
|---|---|
r.headersOut | Заголовки ответа (можно задавать и удалять) |
r.return(status, body?, location?) | Отправить ответ; location — адрес для редиректа |
r.log(...), r.warn(...), r.error(...) | Запись в лог прогона (видно в тестовом прогоне) |
Крипто-помощники
В обработчике также доступны крипто-помощники:
| Метод | Что делает |
|---|---|
crypto.uuid() | Случайный идентификатор |
crypto.hmac(algo, key, data) | HMAC от data с ключом key, в hex; algo — 'sha256', 'sha1' или 'md5' |
Пригодится, например, чтобы подписать данные перед отправкой во внешний сервис через fetch.
Протестируйте обработчик
У каждого обработчика есть встроенный тестовый прогон справа от редактора — отправьте тестовый запрос и посмотрите, что именно отвечает обработчик, не затрагивая боевой сайт.
- Выберите метод и введите путь для теста (например,
/users/42). - (Необязательно) Заполните входные данные запроса:
- Запрос (JSON) — параметры query в виде JSON-объекта;
- Тело (raw) — сырое тело запроса;
- гео и click_id — значения, передаваемые обработчику как переменные запроса.
- Нажмите Запуск.
Результат появляется ниже:
- статус ответа (окрашен зелёным / синим / красным) и сколько времени занял прогон;
- параметры — значения, захваченные из шаблона пути;
- Редирект — цель редиректа, если обработчик её задал;
- заголовки и тело ответа;
- консоль — всё, что обработчик залогировал за прогон.
Если запрос обращается к сохранённому состоянию обработчика или меняет его, панель также помечает сессия как затронутое.
Запрос (JSON) должно быть валидным JSON. Если это не так, тест не запустится, а поле подсветится — исправьте JSON и снова нажмите Запуск.
Редактируйте файлы сайта
Вторая половина карточки — вкладка Файлы — статические файлы сайта (HTML, CSS, JS, изображения, шрифты) в дереве слева и редактор кода справа. Текстовые файлы открываются с подсветкой синтаксиса; сохраняйте через Сохранить или Cmd+S (на Windows — Ctrl+S). Для изображений, видео, аудио и других файлов показывается предпросмотр или загрузка. Вы можете перетаскивать файлы между папками и добавлять новые с компьютера.
Полный разбор вкладки Файлы — в Сайтах и Загрузке сайта.
Заметки о полях и поведении
путь — шаблон адреса, на котором отвечает обработчик. Поддерживает :name (один сегмент), * (остаток, захватывается) и ** (остаток, не захватывается). Захваченные сегменты доступны обработчику и показываются как params в тестовом прогоне.
method — какой HTTP-метод запускает обработчик. ANY отвечает на любой метод.
enabled — работает ли обработчик на боевом сайте. Отключённый обработчик остаётся сохранённым, но пропускается.
«+ new» — создаёт обработчик из встроенного шаблона, готовый к редактированию.