Вчора у мене помер однокласник. А сьогодні бабуся. І хто б міг уявити, що цей рік принесе війну, смерть товариша, та смерть члена сім'ї?
Це боляче... Проте це добре нагадування про те, як швидко тече час. І як його ціна збільшується кожної марно витраченої секунди. І я не скажу щось нове. Фраза: "час швидкоплинний" лунає звідусіль. Проте, хто її розуміє? Хто її розуміє, поки...

Ще вчора ми грали разом в футбол в одній команді. А сьогодні тебе ховають.
Ще вчора ти ділився сосисками в столовій. А сьогодні ти ділиш зі мною тільки спогади.
Ще вчора ми перемагали з тобой. А сьогодні ми програли, друже.

Ще вчора, ти бабусю купувала мені солодкі палички. А сьогодні ми купуємо тобі пам'ятник.
Ще вчора ти кричала на нас з братом. А сьогодні ми плачемо за тобою.
Ще вчора ти везла нас на море. А сьогодні ми відправляємо тебе. Сподіваюся там є море!
Ще вчора ми з тобою сварилися. А сьогодні я сварю себе, чому я був так далеко від тебе.
Я буду сумувати. Я буду жаліти, що так і не сказав тобі головне.

Ти завжди мені казала що хочеш побачити правнуків. А останнього разу сказала, що навряд чи доживеш. Твою останні слова тепер звучать зовсім інакше. Зовсім. Інакше.
Якби я знав, бабусю, якби я знав...

Сподіваюся там є щось, де ви знайшли собі місце.

Луганськ знову стане Україною. Я приїду, обіцяю! Я приїду до тебе бабусю. Я приїду до тебе, дядя Коля.

Моє серце розбито. Проте... В серці. Назавжди. Запам'ятаю ваш приклад. Пронесу любов в серці на протязі всього життя.

"Руський мир" - звучить дуже сильно та виправдовуюче. Гарна обгортка виправдання слабкості, аморальності та нікчемності своїх дійсних намірів. Руський мир, який дуже солодко звучить для всіх, хто хоче закрити очі на факт повномасштабної війни. Дуже добре виправдання вбивства для купки звірів. Втім, це ж росія, в якій все виглядає логічно зовні, гнило зсередини.

Росіяни знають, як це, репресії, заради "миру". Як це, знищення опозиции, заради "благої цілі та розцвіту країни". Ви все прекрасно розумїєте, але не хоче приймати ту правду, яку коїте власноруч. Ви боїтеся бути чесним перед собою, що ця війна - результат дій кожного росіянина: матері, сина, батька, дружини.

Ви це все прекрасно розумієте, але додержуєтесь вигідної позиції. Але ця кров на ваших руках. Як то жити з цим відчуттям?

Ваш мир про те що росія вторглася та принесла війну на нашу землю.
Ви, орки, кажете що прийшли принести мир.
Але мир війною не досягається.
Тип паче, собачий мир.

Мир, в якому одну половину міста бомблять ракети.
Мир, в якому іншу половину міста розграбляють мародери.
Мир, в якому не працює інтеренет та зв'язок, щод зателефонувати рідним.
Мир, в якому з'являється Луганет, але зникає честь і гідність кожного приплічника війни.
Мир, в якому бомбардують пологовий будинок, школу та лікарню.
Мир, в якому люди ходять в гості до бомбосховищ.
Мир, в якому жінки російських воїнів просять вкрасти с України новий ноутбук. Начебто це поїздка до супермаркету.
А вам потрібен такий мир?

Але цей пост зовсім НЕ про мир.
Цей пост про ненависть до всіх причетних в війні в Україні.
Ненавиджу вас стільки разів, скільки ракет та куль було випущено вами.
Ненавиджу вас стільки разів, скільки людей були змушені покинули свої будинки.
Ненавиджу вас стільки ж, скільки людей не можуть покинути свої домівки через обстріли.
Ненавиджу за те, що ви називаючись братнім народом, ховали автомат за спиною.
Ненавиджу кожної хвилини, за той вибір, що ви продовжуєте робити.
Ви не заслуговуєте бути на цій землі. Ви нікчемні.
Ненавиджу, і мені вас не шкода. Шкода, що ви зайшли так далеко, але все одно нас так і не зрозуміли.
Ви прийшли сюди, щоб щось у нас забрати. Але, те, чого вам бракує - забрати неможливо.
Саме іронічне те, що ця війна закінчиться, а ви уйобками так і залишитесь на все життя.
Ганьба - бути таким росіянином.
Вам цього ніхто ніколи не пробачить.

Хіба один божевільний може так дешево розпоряджатися вашими життями, начебто вони нічого і не варті? Хоча, мабуть, життя тих, хто свідомо йде "чтоб пострелять", дійсно, нічого не варті.

Ваші дії вбили мою віру в людство.

Зрада - це завжди боляче. Проте і це ми переживемо. Ви б тільки знали, які люди живуть в цій країні. Якби ви хоч наполовину були схожими на людей України, то вже давно б змогли стати щасливими.

В такі скрутні часи, і починаешь розуміти, що за люди тебе оточують.
І тепер я розумію, як це, бути навколо Людей, Людей з великої літери.
Людей, котрі захищають, евакуюють, здають кров, волонтерять, рятують тварин, продовжують працювати.
Людей, що не перестають вірити і вселяти віру, як би важко зараз це не було.
Людей, що допомагають один одному: їжею, оселею, словом.
Компаніям, що продовжують працювати, платити податки та підтримувати економіку країну.
Пишаюся вами. Отакі ви, супергерої реального світу.

Мені пощастило народитися в Україні. Я пишаюся кожним з вас.
Завдяки вам моя віра в людство повернулася знову.

Це мій перший пост на українській мові.
Пост не про те, щоб переконати когось почати робити хороші речі. Для хороших речей не потрібно когось переконувати.
Це пост самому собі.
Щоб пам'ятати...

Раніше я не розділяв українців, росіян. Я поважав кожного. Більшість моєї аудиторії була з росіі. І багатьом я допіг, створюючи контент, відповідаючи на питання на електронну пошту. Але ви всі нас обдурили. Обдурили через те, що ми довіряли вам більше ніж ви заслуговуєте.

Ось, наприклад лист від одного з тварин підписників.
Тому, як ви вже добре знаєте: "Русский военный корабль, иди нахуй".

Слава Україні!

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

Есть два типа событий, для которых вы можете захотеть перехватить HTTP-вызовы: события запроса и события ответа. Перехватчик запроса должен быть выполнен до отправки фактического HTTP-запроса, в то время как перехватчик ответа должен быть выполнен до того, как он достигнет кода приложения, выполнившего вызов.

Прежде чем погрузиться в код, нам необходимо понять несколько важных факторов. Во-первых, Fetch API не поддерживает перехватчики по умолчанию. Кроме того, для использования Fetch API в Node.js требуются дополнительные пакеты.

JavaScript Fetch API

Сначала рассмотрим некоторые основы Fetch API, например, синтаксис:

const fetchResponsePromise = fetch(resource [, init])

resource определяет ресурс, к которому вы делаете запрос: это может быть либо объект Request, либо URL.
init - необязательный объект, который будет содержать любую пользовательскую конфигурацию, которую вы хотите применить к данному конкретному запросу.

Fetch API основан на промисах. Поэтому, когда вы вызываете метод Fetch, вы получаете промис ответа. Здесь оно обозначается как fetchResponsePromise, как показано в примере выше.

По умолчанию Fetch использует метод GET для вызовов API, как показано ниже:

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((json) => console.log(json))

Ниже приведен пример запроса POST с помощью Fetch:

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  body: JSON.stringify({
    completed: false,
    id: 1,
    title: 'New Todo',
    userId: 1,
  }),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8',
  }),
})
    .then((response) => response.json())
    .then((json) => console.log(json))

POST запрос должен иметь тело (т.е. параметр body). Взгляните на документацию Fetch для более подробной информации.

Реализация перехватчиков

Есть два способа добавить перехватчики к нашим вызовам Fetch API; мы можем использовать либо обезьяний патч, либо библиотеку fetch-intercept.

Обезьяний патчинг Fetch

Один из способов создания перехватчика для любой функции или метода JavaScript - это обезьянье исправление. Обезьянье исправление - это подход к переопределению оригинальной функциональности с помощью вашей версии функции.

Давайте рассмотрим шаг за шагом, как можно создать перехватчик для Fetch API с помощью обезьяньего патча:

const { fetch: originalFetch } = window;

window.fetch = async (...args) => {
    let [resource, config ] = args;
    // перехватчик запросов здесь
    const response = await originalFetch(resource, config);
    // перехватчик ответов здесь
    return response;
};

Приведенный выше код переопределяет исходный метод Fetch пользовательской реализацией и вызывает исходный метод Fetch внутри себя. Вы будете использовать этот шаблонный код для создания перехватчиков запросов и ответов.

Перехватчик запроса

В следующем примере мы создадим простой перехватчик запросов, который изменяет URL ресурса иллюстрации:

const { fetch: originalFetch } = window;
window.fetch = async (...args) => {
    let [resource, config ] = args;

    // начало перехватчика запроса
    resource = 'https://jsonplaceholder.typicode.com/todos/2';
    // конец перехватчика запроса

    const response = await originalFetch(resource, config);

    // перехватчик ответа
    return response;
};


fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((json) => console.log(json));

// log
// {
//   "userId": 1,
//   "id": 2,
//   "title": "quis ut nam facilis et officia qui",
//   "completed": false
// }

Этот вызов API будет получать данные с https://jsonplaceholder.typicode.com/todos/2, а не с https://jsonplaceholder.typicode.com/todos/1, в чем мы можем убедиться по значению поля ID, которое равно 2.

Примечание: одним из наиболее распространенных случаев использования перехватчиков запросов является изменение заголовков для аутентификации.

Перехватчик ответа

Перехватчик ответа будет перехватывать ответ API до того, как он будет доставлен вызывающему коду. Давайте посмотрим на следующий пример:

const { fetch: originalFetch } = window;
window.fetch = async (...args) => {
  let [resource, config] = args;

  let response = await originalFetch(resource, config);

  // перехватчик ответа
  const json = () =>
    response
      .clone()
      .json()
      .then((data) => ({ ...data, title: `Intercepted: ${data.title}` }));

  response.json = json;
  return response;
};

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

// log
// {
//     "userId": 1,
//     "id": 1,
//     "title": "Intercepted: delectus aut autem",
//     "completed": false
// }

В приведенном выше коде мы изменили метод JSON, чтобы вернуть некоторые пользовательские данные вместо исходных. Ознакомьтесь с документацией, чтобы узнать больше о свойствах, которые вы можете изменить.

Примечание: ответы могут быть получены только один раз. Поэтому вам необходимо клонировать ответ каждый раз, когда вы хотите его использовать.

Обработка ошибок

Вы можете легко обрабатывать ошибки для запросов, проверяя значения для response.ok и response.status. В приведенном ниже фрагменте кода вы можете перехватить ошибку 404:

const { fetch: originalFetch } = window;
window.fetch = async (...args) => {
  let [resource, config] = args;
  let response = await originalFetch(resource, config);
  if (!response.ok && response.status === 404) {
    // обработчик 404 ошибки
    return Promise.reject(response);
  }
  return response;
};
fetch('https://jsonplaceholder.typicode.com/todos/1000000')
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.error(error));

Node.js

Вы можете использовать тот же подход в Node.js. Однако Node.js не поддерживает Fetch API нативно (хотя нативная поддержка Fetch API будет доступна в будущих версиях Node.js). Пока что вам нужно установить пакет Node Fetch, а затем выполнить обезьяний патчинг для метода fetch.

Использование библиотеки fetch-intercept

Если вы не любите делать грязную работу (каламбур не удался), библиотека fetch-intercept позволяет регистрировать перехватчики с более чистым API. Вы можете использовать npm или Yarn для установки этой библиотеки следующим образом:

npm install fetch-intercept whatwg-fetch --save
// or
yarn install fetch-intercept whatwg-fetch

Примечание: Библиотека fetch-intercept поддерживает только браузеры и не будет работать в Node.js. Кроме того, для ее работы требуется зависимость whatwg-fetch.

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

import * as fetchIntercept from 'fetch-intercept';

const unregister = fetchIntercept.register({
  request: function (url, config) {
    const modifiedUrl = `https://jsonplaceholder.typicode.com/todos/2`;
    return [modifiedUrl, config];
  },

  requestError: function (error) {
    return Promise.reject(error);
  },

  response: function (response) {
    const clonedResponse = response.clone();
    const json = () =>
      clonedResponse
        .json()
        .then((data) => ({ ...data, title: `Intercepted: ${data.title}` }));

    response.json = json;
    return response;
  },

  responseError: function (error) {
    return Promise.reject(error);
  },
});

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

// отменить регистрацию перехватчиков
unregister();

Метод register позволяет зарегистрировать перехватчики для вызовов Fetch API. Он принимает объект с колбеком request, requestError, response и responseError. Метод register возвращает другой метод, который можно использовать для отмены регистрации перехватчиков.

Fetch API не поддерживает перехватчики изначально. Однако существуют другие библиотеки для выполнения HTTP-вызовов, которые поддерживают перехватчики. Взгляните на Axios, которая предоставляет эту функциональность из коробки.

Резюме

В этой статье мы рассмотрели, что такое перехватчики JavaScript, научились создавать перехватчики как с помощью обезьяньего патчинга Fetch API, так и с помощью библиотеки fetch-intercept.

Перехватчики, изначально появившиеся в Angular, полезны в самых разных случаях, например, при обработке глобальных ошибок, аутентификации, протоколировании и т.п. Вы можете использовать методы, описанные в этой статье, для добавления перехватчиков в ваши JavaScript-приложения, однако помните о дополнительных необходимых зависимостях для Node.js.

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

В этой статье я покажу как менять цветовой профиль в Photoshop. И как сохранять любые свои изображения в формате sRGB.

Хьюстон, проблема

Представим, что мы в Lightroom-е обработали эту фотографию и хотим её сохранить.

Потому, в Lightroom нажмем правой кнопкой мыши на фотографии Edit in -> Edit In Photoshop. Там сохраним фотографию и попробуем ее куда-то отправить, например в телеграм.

И окажется, что картинка, которую мы видели в редакторе отличается от той, что видим после отправки. Вот пример, как ожидание не совпадает с реальностью (фотография стала какой-то блеклой и серой):

Почему так происходит я описывал в прошлой статье. А в этой статье я расскажу, как правильно сохранять фотографии sRGB формата в Photoshop, чтобы такой проблемы не было.

Решение

Ниже приведена инструкция из трех шагов по преобразованию изображения к формату sRGB.

Преобразование существующей фотографии в sRGB:

1. Откройте фотографию в Photoshop

2. Перейдите в меню Редактирование (Edit)
   нажмите Преобразовать в профиль... (Convert to Profile).
   

3. Нажмите на выпадающее поле Профиль в меню Целевое пространство
   

4. Выберите опцию sRGB
   

5. Нажмите Окей.

Настройка параметров цвета в Photoshop:

1. Перейдите во вкладку Редактирование (Edit)
   нажмите Настройка цветов... ( Color Settings).
   

2. Нажмите на выпадающее меню Настройки (Settings)
   

3. Выберите Универсальные настройки для Северной Америки 2 (North America General Purpose 2)
   

4. Нажмите Окей.

Создание нового изображения в sRGB формате:

1. Скопируйте текущее изображение, выделив всю область и нажав CTRL + C
2. Создайте новое изображение (Ctrl + N) или File -> New
3. Установите флажок Цветовой профиль (Color Profile) в разделе Дополнительные параметры (Advanced)
   
4. Если цветовой профиль не sRGB, щелкните выпадающее поле и выберите вариант sRGB.
5. Нажмите Окей.
6. Вставьте скопированное изображение (CTRL + V) и Сохраните.

В результате, можно сравнить этот результат с предыдущим, опять залив в телеграм:

Впервые я столкнулся с событиями, когда работал с Symfony. Смотря обучающие уроки, я заметил, что большинство задач решаются с помощью создания (диспатчинга) и обработки определённых событий (слушателями). В то время мне показалось это сложной концепцией для понимания. Но, работая с разными проектами и фреймворками, эти вещи продолжали появляться, потому мне просто необходимо было с этим разобраться. И в итоге, я принял таблетку правды, и больше никогда не хочу обходиться без событий.

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

Что такое диспетчеризация событий?

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

Всё работает отлично, но через некоторое время её просят также сообщать менеджеру, когда она заканчивает один из своих продуктов, чтобы он мог проверить её работу. Однако вместо того, чтобы согласиться, она понимает, что это будет отвлекать её от работы, поэтому предлагает альтернативу: "А что, если я просто скажу всем сразу, когда закончу свой продукт, чтобы любой, кто захочет, мог отреагировать и принять меры?".

Теперь она просто будет кричать "Я сделала один товар!" каждый раз, когда она заканчивает работу над одним продуктом - остальные будут принимать соответствующие меры. Теперь она может продолжать работать, и в будущем её больше ни о чём постороннем не будут просить. Менеджер сможет вести запись для своей статистики, а инвентарь обновлять свои записи.

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

Из каких компонентов состоит Event Dispatching?

Теперь, когда мы имеем некоторое представление о том, что такое диспетчеризация событий, давайте немного углубимся и познакомимся со всеми компонентами, учавствующими в диспетчеризации событий.

Event (событие)

Теоретически, событие может быть любым. Лишь бы у него было уникальное имя или ID. Это имя позволяет всем знать, на какое событие реагировать. Как мы увидим далее, события в некоторых случаях могут быть простым значением или даже вообще не иметь значения; но в большинстве современных фреймворков это простой объект класса, содержащий определённый контекст. Поскольку класс имеет уникальное имя (вместе с неймспейсом), его имя часто используется в качестве имени события.

Мы рассмотрим события более подробно позже на примерах из различных фреймворков.

Dispatcher

Поскольку код не может кричать, ему нужен аналог микрофона, чтобы все желающие могли его услышать. Этот микрофон называется диспетчером (Dispatcher), потому что он рассылает события всем желающим (слушателям).

Диспетчер является посредником в общении между событиями и слушателями. Поэтому диспетчер - это тот, кто получает событие от запускающего кода (иногда называемого эмиттером) - контроллера или сервиса. Поскольку диспетчер доставляет событие, ему также нужен список слушателей, которые ждут это событие, чтобы он мог передать это событие им всем. Этот список иногда называют Listener Provider-ом.

Примечание. так же, существуют термины - Emitter и Listener Provider. Это просто слова для обозначения: вашего существующего кода, который вызывает диспетчер, и конфигурации, которая при создании события находит нужного слушателя и передаёт ему весь контекст события. Последний будет отличаться и называться по-разному в различных фреймворках.

Listener (слушатель)

Слушатель содержит код, который будет выполнен при срабатывании события. Слушатель прослушивает только одно событие. Однако у события может быть неограниченное количество слушателей. Таким образом, несколько слушателей могут слушать одно и то же событие и делать совершенно разные вещи.

Слушатель - это либо анонимная функция, либо метод определенного класса, либо даже вызываемый (invokable) класс. Эта вызываемая функция получает объект события или значения, которые были предоставлены в качестве аргумента - контекст события. Иногда имя события является достаточной информацией для слушателя, но чаще всего ему требуется объект или набор значений события определённого контекста.

Subscriber (подписчик)

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

Итак, вкратце: события - это (обычно) объекты с уникальным идентификатором, которые посылаются диспетчером вызываемым слушателям, желающим отреагировать на это событие.

Факт: знали ли вы, что существует список рекомендаций для PHP по работе с определенными концепциями? Это PHP Standard Recommendations, или же просто PSR. Одной из таких рекомендаций является PSR-14: Event Dispatcher. Эта рекомендация, в технических терминах, объясняет как может работать диспетчеризация событий.

События: значения vs объекты, как правильно

Есть два варианта отправки события: вы можете отправить слушателю с набором параметров или объект события. Давайте рассмотрим эти варианты подробнее.

Значения

Если и есть фреймворк, в котором события со значениями возведены в ранг искусства, то это WordPress. Этот фреймворк переполнен событиями, которые могут изменить практически всё, что вы захотите. Это происходит путем отправки события с именем, сопровождаемого переменным набором параметров. Когда событие отправляется, слушатель фактически получает все эти параметры в качестве аргументов. Однако первый аргумент - это значение, которое может быть изменено. Такой тип события называется хуком (подробнее об этом позже). Остальные аргументы доступны слушателю в качестве контекста. Они могут быть абсолютно любыми.

PHP может передать скалярное значение (string, bool, int или float) или даже массив, которые потом получает принимающая функция. Это означает, что вы не можете изменить предоставленную исходную переменную, чтобы значение мутировало и в остальном коде. Таким образом, обработав событие, слушатели возвращают новое значение диспетчеру.

Примечание: хотя можно изменить значение переменной через функцию, если она передана по ссылке, это непростое дело. И это не всегда то, что вам нужно; например, когда вы захотите использовать ту же переменную позже и будете ожидать, что она по-прежнему будет иметь первоначальное значение.

Подход с использованием значения полезен для простых, скалярных значений: булевых или строк. В WordPress даже есть небольшие функции типа __return_true(), которые всегда возвращают true. Они удобны для быстрого изменения настроек через событие. Недостатком этого подхода является то, что по мере роста количества подобных аргументов, слушатель также должен принимать их все в качестве аргументов. У меня были ситуации, когда мне требовался только 11-й(!) параметр в чтобы изменить контекст из первого аргумента.

Пример событий в WordPress:

// Где-то в плагине диспетчеризируется событие `get_title`.
$post = get_post();
$title = 'Original title';
$title = apply_filters('get_title', $title, $post);
 
// Например, где-нибудь в файле functions.php:
// Добавление идентификатора поста перед заголовком.
add_filter('get_title', function(string $title, ?WP_Post $post): string {
    return ($post ? $post->ID . ': ' : '') .  $title;
}, 10, 2);

Объекты

Почти каждый фреймворк или реализация диспетчера событий работает с объектами событий. Этот объект создаётся внутри кода, порождающего событие, а затем передаётся Event Dispatcher-у. Поскольку объект является классом, вы можете добавить к нему любые методы. Методы для получения или добавления значений, если это необходимо. И в отличие от скалярных значений или массивов, объекты передаются в функцию по ссылке.

Это означает, что слушатель работает не с копией, а с тем же экземпляром объекта. Таким образом, обработчик события может ничего не возвращать через return, а может просто работать с объектом через предоставленные методы и модифицировать его значения.

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

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

Пример объектных событий в thephpleage/event:

Этот диспетчер событий является реализацией PSR-14.

// Где-то вы подписались на событие.
$dispatcher->subscribeTo(PostCreatedEvent::class, function(PostCreatedEvent $event): void {
    $post = $event->getPost();
    $newTitle = sprintf('%d: %s', $post->getId(), $post->getTitle());
    $post->setTitle($newTitle);
});
 
// Где-то в коде, где создаётся событие.
$post = $this->createPost('Original title');
$event = $dispatcher->dispatch(new PostCreatedEvent($post));
$title = $event->getPost()->getTitle(); // Тут будет выведен новый заголовок

Поэтому, хотя события значений имеют свое место и применение, рекомендуется всегда использовать объекты событий, поскольку они более гибкие и легко расширяемые в будущем.

Примечание: хотя использование объектов событий в плагинах и темах WordPress не является обычной практикой, я считаю, что это действительно необходимо, поскольку это делает работу разработчика более приятной. Просто создайте объект события в вашем плагине и создавайте его всегда, когда в этом есть смысл.

Как работает диспетчеризация событий?

Теперь, когда вы имеете базовое представление о том, как происходит диспетчеризация событий, пришло время копнуть немного глубже. Что именно происходит, когда вы отправляете событие?

Слушатели являются последовательными

Когда диспетчер передаёт событие в связанные с ним слушатели, он не может послать его всем слушателям сразу. Как и весь код на PHP, события должны вызываться последовательно, то есть они вызываются одно за другим. Они так же получают один и тот же объект события или значения.

Это похоже на регистрационный лист: отправитель передает лист первому человеку. Этот человек добавляет свое имя и передает лист второму человеку; тот тоже записывается, передавая его дальше, пока все не закончат. После этого весь список возвращается отправителю. Не все должны записываться, но они будут передавать лист дальше.

То же самое происходит и с событиями. Событие создается кодом, а затем через диспетчер отправляется первому слушателю. Однако, в отличие от Middleware, слушатели не вызывают следующего слушателя; вместо этого задача диспетчера - передать событие каждому слушателю. Этот процесс передачи события называется распространением события (Event propagation).

Приоритетность слушателей

Поскольку диспетчеризация событий похожа на игру в "горячую картошку", порядок вызова слушателей может быть важным. Поэтому во всех реализациях диспетчера событий есть понятие приоритета. Почти в каждой реализации этот приоритет устанавливается путем добавления значения веса слушателю. Затем диспетчер сортирует слушателей по этому весу, прежде чем начать вызывать слушателей. Laravel имел такую возможность до версии 5.4, но решил убрать эту функциональность.

// задаем приоритет вызова слушателя в WordPress. Чем ниже номер, тем раньше он будет вызван.
add_filter('the_event_name', '__return_true', 10);
 
// Symfony работает наоборот. Чем выше номер, тем больше приоритет.
$dispatcher->addListener(SomeEvent::class, [$listener, 'onBeforeSave'], 30); // 0 - значение по умолчанию.
 
// `thephpleage/event` в этой библиотеке также, чем больше номер, тем раньше обработчик будет вызван.
$dispatcher->subscribeTo(SomeEvent::class, [$listener, 'onBeforeSave'], PHP_INT_MAX); // должно вызваться первым

Останавливаемые события

Иногда слушатель настолько важен, что он должен предотвратить вызов любых других слушателей для этого события. По сути, в этот момент он должен замыкаться. Именно поэтому в большинстве фреймворков есть концепция останавливаемых событий. Это означает, что событие (объект) имеет функцию, которая может быть вызвана, чтобы дать сигнал диспетчеру прекратить вызов дальнейших событий.

Примеры:

Не все фреймворки имеют одинаковый подход. И на данный момент WordPress не имеет поддержки останавливаемых событий.

// В Symfony есть базовый класс `Event`, который содержит метод `stopPropagation()`.
// То же самое справедливо и для библиотеки `thephpleage/event`, но там вы расширяете `StubStoppableEvent`.
// или должны реализовать интерфейс `StoppableEventInterface` (PSR-14).
public function listener(SomeEvent $event): void {
    // тут что-то делаем
    $event->stopPropagation();
}
 
// Laravel остановит выполнение, если слушатель вернет `false`.
public function listener(SomeEvent $event) {
    // тут что-то делаем
    return false;
}

Хуки и экшены

Существует два типа событий. Вы можете создавать хуки или экшены. WordPress фактически нигде не ссылается на "события" в своей документации. Они полностью разделяют эти два типа, предоставляя функции apply_filter() (хук) и do_action() (экшен). Так в чем же разница? Все зависит от того, какой результат нужен вашему коду.

Хуки

Хук - это событие, которое также используется кодом диспетчера после его диспетчеризации и до того, как он выполнит какое-то действие. Например: у вас есть функция, которая устанавливает заголовок для объекта. Этот заголовок имеет логичное значение по умолчанию, но вы хотите, чтобы пользователи могли его переписать. Вы можете отправить событие, содержащее метод setTitle(), чтобы изменить его. В коде будет использоваться значение из события.

Однако его также можно использовать для получения некоторых данных, над которыми будет работать функция. Например: у вас есть какая-то функция импорта, которая работает каждый час. Эта функция может работать с любым классом, который реализует определённый интерфейс. Вы отправляете событие, чтобы определить, какие классы он должен использовать для импорта. Событие имеет метод addDataSource(), который слушатель может использовать для добавления источника данных. Это означает, что у вас может быть несколько источников данных, которые срабатывают только тогда, когда им это нужно. Таким образом, даже если ваш импортер запускается каждый час, источник данных не обязательно должен включаться каждый час.

// стиль Laravel эвент-диспатчинга
$event = DetermineDataSourcesEvent::dispatch();
 
foreach($event->getImporters() as $importer) {
    $this->importFrom($importer);
}

Примечание: поскольку хук используется кодом до того, как срабатывает определённое действие, принято называть их в настоящем времени. Например, DetermineDataSourcesEvent или BeforeSaveEvent.

Экшены

Экшен (читай действие) - это событие, которое отправляется только для того, чтобы слушатели отреагировали на него каким-то образом. Сам код не использует событие после его диспетчеризации. Поэтому экшены обычно создаются после выполнения какого-то действия. Событие создается в контексте определённой операции. Например, если была создана запись в блоге, обычно к событию прикрепляется эта запись в качестве контекста, чтобы слушатели могли что-то с ней сделать.

Примечание: поскольку событие отправляется после выполнения какого-либо действия, принято называть их в прошедшем времени: например, BlogPostCreatedEvent или AfterSaveEvent.

// Стиль создания событий в Symfony
use Symfony\Component\EventDispatcher\EventDispatcher;
 
$post = $this->createBlogPost(); // какой-то код, что создаёт пост
 
$dispatcher = new EventDispatcher();
$dispatcher->dispatch(new BlogPostCreatedEvent($post));

Обобщу: хуки можно рассматривать как предшествующие события, а экшены - как последующие события.

Являются ли вебхуки событиями?

Возможно, вы слышали о вебхуках и задаётесь вопросом, не являются ли они просто другим термином для хуков. Это не так. Хотя вебхуки - это события, но события, которые запускаются по HTTP-запросу. Это означает, что "слушателями" этих событий являются URL-адреса (других) веб-сайтов. Поэтому слушателем не обязательно должен быть PHP-скрипт. Это может быть любое веб-приложение. Оно просто должно понимать запрос.

Заключение

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

MySQL предоставляет возможность сравнивать различные даты между собой, или с каким-то определенным выражением. В этой статье мы обсудим, как работать с датой в Mysql, как из сравнивать и строить запросы с учетом дат.

Когда вам нужно сравнить дату какого-то столбца с произвольной датой, вы можете использовать функцию DATE(), которая извлекает дату из переданного аргумента (без учета времени) и сравнить ее со строкой нужной вам даты.

В прошлой своей статье я писал про работу с индексами. А в этой затрону не менее важную тему работы с датой в MySQL, понимание которое необходимо каждому разработчику.

Например, предположим, что у вас есть таблица MySQL под названием users со следующими строками:

mysql> SELECT * FROM users;
+---------+------------+-----------+---------------------+
| user_id | first_name | last_name | last_update         |
+---------+------------+-----------+---------------------+
|     201 | Peter      | Parker    | 2021-08-01 16:15:00 |
|     202 | Thor       | Odinson   | 2021-08-02 12:15:00 |
|     204 | Loki       | Laufeyson | 2021-08-03 10:43:24 |
+---------+------------+-----------+---------------------+
3 rows in set (0.00 sec)

Теперь вам нужно выбрать все строки из таблицы users, у которых значение last_update больше 2021-08-01.

И это достаточно просто сделать:

SELECT 
    user_id,
    first_name,
    last_name,
    last_update
FROM 
    users
WHERE 
    DATE(last_update) > "2021-08-01"
ORDER BY 
    last_update ASC

Результат запроса выше будет следующим:

+---------+------------+-----------+---------------------+
| user_id | first_name | last_name | last_update         |
+---------+------------+-----------+---------------------+
|     202 | Thor       | Odinson   | 2021-08-02 12:15:00 |
|     204 | Loki       | Laufeyson | 2021-08-03 10:43:24 |
+---------+------------+-----------+---------------------+
2 rows in set (0.00 sec)

При сравнении столбца типа DATETIME или TIMESTAMP с датой в виде строки (как в запросе выше), MySQL автоматически преобразует значения к единому формату для сравнения и веронет подходящзие результаты.

Чтобы проверить результат запроса добавим оператор ORDER BY в приведенный выше запрос.

Вы можете сразу определить, удовлетворяет ли запрос вашему требованию, взглянув на первую строку. Как и в приведенном выше примере, самое раннее значение столбца last_update должно быть 2021-08-02.

Вы также можете использовать оператор BETWEEN, чтобы выбрать все строки, в которых столбец даты находится между двумя указанными выражениями даты:

SELECT 
    user_id,
    first_name,
    last_name,
    last_update
FROM 
    users
WHERE 
    BETWEEN "2021-08-01" AND "2021-08-02"
ORDER BY 
    last_update ASC

Приведенный выше запрос выведет следующий результат:

+---------+------------+-----------+---------------------+
| user_id | first_name | last_name | last_update         |
+---------+------------+-----------+---------------------+
|     201 | Peter      | Parker    | 2021-08-01 16:15:00 |
|     202 | Thor       | Odinson   | 2021-08-02 12:15:00 |
+---------+------------+-----------+---------------------+
2 rows in set (0.00 sec)

НО! MySQL допускает только один формат даты: yyyy-mm-dd, поэтому вам нужно форматировать любое строковое выражение даты по которым вы хотите выбирать данные к нужному формату.

Зачем использовать функцию DATE() для сравнения дат

Функция MySQL DATE() извлекает часть даты из столбца DATETIME или TIMESTAMP и приводит её к формату строки, как показано ниже:

mysql> SELECT DATE('2005-08-28 01:02:03');
-> '2005-08-28'

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

Если не использовать функцию DATE(), то MySQL также будет сравнивать и время столбца с вашим строковым выражением. Таким образом, результатом будут записи, полностью совпадаюащие до секунды.

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

SELECT 
    user_id,
    first_name,
    last_name,
    last_update
FROM 
    users
WHERE 
    last_update > "2021-08-01"
ORDER BY 
    last_update ASC

Вернет такие результаты:

+---------+------------+-----------+---------------------+
| user_id | first_name | last_name | last_update         |
+---------+------------+-----------+---------------------+
|     201 | Peter      | Parker    | 2021-08-01 16:15:00 |
|     202 | Thor       | Odinson   | 2021-08-02 12:15:00 |
|     204 | Loki       | Laufeyson | 2021-08-03 10:43:24 |
+---------+------------+-----------+---------------------+
3 rows in set (0.01 sec)

Как видно из результатов, условие сравнения last_update > "2021-08-01" становится last_update > "2021-08-01 00:00:00", и MySQL возвращает соответствующий набор результатов.

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

Следующий запрос из той же таблицы:

SELECT 
    user_id,
    first_name,
    last_name,
    last_update
FROM 
    users
WHERE 
    last_update > "2021-08-01 20:00:00"
ORDER BY 
    last_update ASC

Даст следующий результат:

+---------+------------+-----------+---------------------+
| user_id | first_name | last_name | last_update         |
+---------+------------+-----------+---------------------+
|     202 | Thor       | Odinson   | 2021-08-02 12:15:00 |
|     204 | Loki       | Laufeyson | 2021-08-03 10:43:24 |
+---------+------------+-----------+---------------------+
2 rows in set (0.00 sec)

Сравнение дат между двумя столбцами дат

Если у вас уже есть два столбца даты, то вы можете сразу же сравнить их с помощью операторов <, <=, =, >=, > или BETWEEN.

Предположим, что в вашей таблице есть столбцы last_update и last_login, как показано ниже:

+---------+------------+-----------+---------------------+---------------------+
| user_id | first_name | last_name | last_update         | last_login          |
+---------+------------+-----------+---------------------+---------------------+
|     201 | Peter      | Parker    | 2021-08-01 16:15:00 | 2021-08-17 10:00:00 |
|     202 | Thor       | Odinson   | 2021-08-02 12:15:00 | 2021-08-02 08:00:00 |
|     204 | Loki       | Laufeyson | 2021-08-03 10:43:24 | 2021-08-10 06:00:00 |
+---------+------------+-----------+---------------------+---------------------+

Чтобы получить все строки, в которых столбец last_login находится позже столбца last_update, вы можете использовать следующий запрос:

SELECT 
    user_id,
    first_name,
    last_name,
    last_update
FROM 
    users
WHERE 
    last_login > last_update
ORDER BY 
    last_update ASC

Результат будет следующим:

+---------+------------+-----------+---------------------+---------------------+
| user_id | first_name | last_name | last_update         | last_login          |
+---------+------------+-----------+---------------------+---------------------+
|     204 | Loki       | Laufeyson | 2021-08-03 10:43:24 | 2021-08-10 06:00:00 |
|     201 | Peter      | Parker    | 2021-08-01 16:15:00 | 2021-08-17 10:00:00 |
+---------+------------+-----------+---------------------+---------------------+
2 rows in set (0.00 sec)

Вот каким образом вы можете выполнять сравнение дат в MySQL.

Не забудьте, что вам нужно иметь строковое выражение даты, отформатированное как yyyy-mm-dd или yyyy-mm-dd hh:mm:ss, если вы хотите сравнить и временную часть.

Выбор дат за определнный интервал

Очень часто приходится выбирать записи с датой за определнный интервал. Для этих целей в MySql существуют встроенная функции INTERVAL, упрощающая работу с датами за определенный период.

Например, для того, чтобы выбрать записи, обновленные за последний год, выполним запрос:

SELECT
    user_id,
    first_name,
    last_name,
    last_update
FROM
    users
WHERE
    last_login > CURDATE() - INTERVAL 1 YEAR
ORDER BY
    last_update ASC

При том, что INTERVAL может работать с различными интервалами времени:

• SECOND - секунды
• MINUTE - минуты
• HOUR - часы
• DAY - дни
• MONTH - месяцы
• YEAR - года

Те же самые действия применимы и к UPDATE-операциям:

UPDATE 
    users
SET 
    last_update = CURDATE() - INTERVAL 10 DAY
WHERE
    id = 1

Резюме

В этой статье поговорили про работу с датами в Mysql. Как можно выбрать даты определенной даты, или по указанному интервалу. А так же, как работать с колонками дат разных типов.

Если вы хотите поупражняться с запросами, то вот вам демонстрационная таблица:

CREATE TABLE `users` (
  `user_id` smallint unsigned NOT NULL AUTO_INCREMENT,
  `first_name` varchar(45) NOT NULL,
  `last_name` varchar(45) NOT NULL,
  `last_update` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `last_login` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

INSERT INTO `users` (`user_id`, `first_name`, `last_name`, `last_update`, `last_login`)
VALUES
	(201,'Peter','Parker','2021-08-01 16:15:00','2021-08-17 10:00:00'),
	(202,'Thor','Odinson','2021-08-02 12:15:00','2021-08-02 08:00:00'),
	(204,'Loki','Laufeyson','2021-08-03 10:43:24','2021-08-10 06:00:00');

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

Эта статья представляет собой обзор сложного случая, с которым мы столкнулись, где происходит индексации несколько полей, где осуществляется поиск по диапазону значений. Чтобы не затягивать, я объясню только основные концепции индексирования, непосредственно связанные с примером. Для дальнейшего изложения могут потребоваться некоторые базовые знания по индексированию MySQL.

В этой статье поговорим про составной индекс в Mysql, и как правильно его строить в различных случаях. На реальном примере запросе покажем подход к оптимизации с помощью индексов и выбора правильного порядка колонок составного индекса. А так же, разберемся, как работать с индексом по диапазону значений, и какие способы есть обойти ограничение такого индекса.

Проблема

Примеры в этой статье основаны на следующей таблице.

CREATE TABLE `blog_index_example_table` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `to_be_processed_at` datetime NOT NULL,
  `booking_confirmed_at` datetime DEFAULT NULL,
  `processed_at` datetime DEFAULT NULL,
  `canceled_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `ready_to_be_processed_idx_1` (`processed_at`, `canceled_at`, `to_be_processed_at`),
  KEY `ready_to_be_processed_idx_2` (`processed_at`, `canceled_at`, `to_be_processed_at`, `booking_confirmed_at`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Представим, что blog_index_example_table - это большая таблица, содержащая миллионы строк. Мы стремимся сделать эффективный запрос к этой таблице, используя запрос:

SELECT 
  blog_index_example_table.*
FROM 
  blog_index_example_table
WHERE
  booking_confirmed_at IS NOT NULL
  AND to_be_processed_at <= "2020-10-08 09:45:02" and processed_at is null canceled_at null; < code>

Для выполнения этого запроса к таблице, содержащей миллионы строк, определенно потребуется индекс. Но как нам структурировать этот индекс, по каким колонкам мы должны его создавать? Первая и очевидная идея для многих из нас, включая меня - это добавить четырех-колоночный составной индекс типа ready_to_be_processed_idx_2.

Этот индекс подходит для предложенного запроса и действительно позволяет выполнить его за несколько миллисекунд. Однако на самом деле этот индекс использует больше ресурсов, чем нам нужно. Позвольте мне объяснить, что с ним не так.

MySQL умна - но вы можете сделать ее умнее

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

Однако MySQL не меняет порядок самого индекса, чтобы выполнить его более эффективно в зависимости от ваших условий. Это стоило бы достаточно много ресурсов, и все равно не всегда было бы возможно правильно предсказать все сценарии. Другими словами: порядок столбцов во время создания индекса имеет значение (большое).

Однако оптимальный порядок столбцов в индексе не всегда одинаков. Это зависит от ваших данных и потребностей. В приведенном выше случае условие processed_at > фильтрует наибольшее количество строк. По этой причине мы выбрали его в качестве первого столбца нашего индекса. К сожалению, остальные три условия очень похожи по диапазону фильтрации. Как же выбрать правильный порядок индекса для остальных?

Что значит: фильтрует наибольшее количество строк?
Представим, что в нашем запросе не 4 условия WHERE, а 4 разных запроса с одним условием:

• WHERE booking_confirmed_at IS NOT NULL
• WHERE booking_confirmed_at IS NOT NULL
• WHERE processed_at IS NULL
• WHERE canceled_at IS NULL

И какое из этих условий фильтрует большее количество строк (возвращает меньше всего записей), то такое условие нам и подходит больше всего.

Условия

В нашем запросе осталось три колонки, не попадающие в индекс. Нам нужно добавить эти столбцы в индекс, однако мы не уверены на 100%, в каком порядке их следует выбирать. Хорошим началом будет изучение типа условий. Это одиночные условия или условия диапазона? Я сейчас объясню почему это важно и в чем разница.

Одиночные условия

Давайте сначала рассмотрим условие canceled_at:

WHERE ... canceled_at IS NULL

На первый взгляд может показаться, что IS NULL - это критерий описания множества значений, поскольку NULL означает неопределенное значение. Но, если присмотреться внимательнее, NULL - это одиночное и конкретное значение, поэтому оно поддается подсчету и индексированию.

Другими словами, мы можем перечислить NULL так же как и конкретное значение: 10, 20, 500, 15, 0, NULL, 1, 10923... Исходя из этого, можно сделать вывод, что приведенный выше фрагмент запроса является одиночным условием, поскольку указывает на вполне определенное значение.

Условия диапазона

Теперь посмотрим на оставшиеся условие выборки по диапазону значений:

WHERE ... booking_confirmed_at IS NOT NULL
  ... to_be_processed_at <= "2020-10-08 09:45:02"< code>

Вы заметили разницу? booking_confirmed_at и to_be_processed_at обозначают не единственное значение, а диапазон значений. После применения условия на диапазон значений, последующие поля, учавствующие в составном индексе, теряют эффективность, так как MySQL теперь нужно искать внутри этого подмножества значений, чтобы продолжить любой поиск в индексе.

То есть, после применения поиска по диапазону значений, составной индекс по последующим полям перестает работать. Важно добавлять в составной индекс сначала поля, с одиночным значением, а потом поля с диапазоном значений.

Золотое правило: всегда сначала индексируйте столбцы которые в запросе имеют только одно значение, а затем сосредоточьтесь на условиях диапазона.

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

Таким образом, мы выбрали canceled_at в качестве второго столбца индекса. Что дальше босс?

Условия диапазона это: BETWEEN, <>, !=, IS NOT NULL и т.д.
Распространенным хаком обхода поиска по диапазону индекса - использование оператора IN(...).

Например, вместо запроса: WHERE age BETWEEN 10 AND 12 мы можем выполнить WHERE age IN(10, 11, 12), что позволит оптимизатору использовать остальные колонки индекса.

Условия по нескольких диапазонам

Осталось две колонки, которые мы хотим добавить в наш индекс. По обоим колонкам мы ищем диапазон значений с аналогичным диапазоном фильтрации. Какие из них мы должны использовать и в каком порядке? Инстинктивно вам может показаться, что можно добавить оба условия в любом, каком угодно порядке. Отдавая предпочтение условию, которое отфильтровывает немного больше или делает тот же составной индекс многократно используемым, вы можете оказаться полезным в других сценариях. Это справедливое предположение, но оно верно лишь наполовину.

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

В данном случае у нас осталось несколько условий поиска по диапазону. Как мы уже объясняли, условие диапазона будет иметь свой собственный диапазон значений, которые нужно перебрать перед использованием индекса. Это основная концепция, необходимая для понимания нашего кейса:

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

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

Мы решили двигаться дальше с processed_at, canceled_at, to_be_processed_at. Он лучше подходит для наших сценариев, основываясь на диапазонах строк и потенциальном использовании этого индекса в других запросах.

Пример с книжным каталогом

Представьте себе каталог животных, индексированный по "имени" и "цвету". Его индекс организован примерно так:

Type, Color  - Page
...
Dog,  Black  -  11
Dog,  Blue   -  12
Dog,  Brown  -  13
Duck, Black  -  14
Duck, White  -  15
...
Rat,  Black  -  32
Rat,  Gray   -  33
Rat,  White  -  34
...

Теперь давайте выполним несколько запросов к этому каталогу и посмотрим, как он будет использовать этот индекс страниц:

1. Одиночное условия

SELECT * FROM catalog WHERE type = "Duck" AND color = "Black";
SELECT * FROM catalog WHERE type = "Rat"  AND color = "Black";
SELECT * FROM catalog WHERE type = "Dog"  AND color = "Brown";
SELECT * FROM catalog WHERE type = "Rat"  AND color = "White";

Обратите внимание, что с помощью простого индексного поиска можно найти точные значения страниц для этих запросов. Для пары условий всегда найдется одно значение.

2. Условие поиска по диапазону после одиночного условия

SELECT * FROM catalog WHERE type = "Duck" AND color != "Black";
SELECT * FROM catalog WHERE type = "Rat"  AND color != "Black";
SELECT * FROM catalog WHERE type = "Dog"  AND color != "Brown";
SELECT * FROM catalog WHERE type = "Rat"  AND color != "White";

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

3. Условие поиска чисто по диапазону

SELECT * FROM catalog WHERE type != "Duck" AND color != "Black";
SELECT * FROM catalog WHERE type != "Rat"  AND color != "Black";
SELECT * FROM catalog WHERE type != "Dog"  AND color != "Brown";
SELECT * FROM catalog WHERE type != "Rat"  AND color  = "White";

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

Если посмотреть на наш исходный запрос, то этот пример показывает, почему добавление booking_confirmed_at не изменит поведение индекса и не ускорит запрос.

Теперь мы докажем вышесказанное, используя MySQL EXPLAIN.

Доказательство

Мы будем использовать EXPLAIN, чтобы проанализировать, как два разных индекса выполняют запрос, который мы обсуждали в этой статье. Оба индекса имеют одинаковые столбцы и порядок, но один из них имеет дополнительный четвертый столбец. Добавим индексы в существующую таблицу и проведем тесты:

KEY `ready_to_be_processed_idx_1` (`processed_at`, `canceled_at`, `to_be_processed_at`),
KEY `ready_to_be_processed_idx_2` (`processed_at`, `canceled_at`, `to_be_processed_at`, `booking_confirmed_at`)

Выполнив запрос из начала этой статьи, мы получим следующие результаты:

Мы видим, что в обоих случаях использовался один и тот же ключевой диапазон (17). Это означает, что они использовали одну и ту же часть индекса и что дополнительный четвертый столбец был проигнорирован.

Вы можете внести небольшие изменения в свой запрос, которые позволят ему полностью использовать четырехколоночный индекс. Мы изменим условие to_be_processed_at на условие одного значения: to_be_processed_at = "2020-10-08 09:45:02". Таким образом, у нас теперь есть только одно условие диапазона.

Смотрите результаты ниже:

Вы должны были заметить, что теперь мы используем key_range равный 23, что означает, что теперь используется больший диапазон нашего индекса, как и ожидалось. Хотя это доказывает, что мы можем использовать четвертый индекс, он не подходит для нашего реального случая, поскольку нам нужен запрос с диапазоном дат.

Резюме

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

В итоге мы перешли от времени выполнения 6с к 17мс для того же запроса.
Индексы могут показаться простыми на первый взгляд, и их идея довольно проста. Однако, потратив некоторое время на оптимизацию использования индексов, можно добиться значительных улучшений в производительности и занимаемом дисковом пространстве.
Цель данного примера - продемонстрировать некоторые идеи, которые важно учитывать при создании или оптимизации индексов SQL.

Я очень часто покупаю в интернете, уверен, как и вы. И каждый раз я задаюсь вопросом, как можно сэкономить при покупке товаров в интернете. В этой статье я расскажу, как можно реально экономить, покупая на самом популярном интернет магазине Украины - rozetka.com.ua.

Ни для кого не секрет, что акции в интернете - больше маркетинг, чем реальная акция. Обычно цены перед распродажами значительно завышаются, чтобы во время распродажи, понизить её, демонстрируя большой процент скидки. Но, по факту, акционная цена часто оказывается большей чем та, которая была до этих "маркетинговых штук".

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

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

Badseller.net - мониторинг цен на розетке

Заходя на сайт badseller.net вы сразу же увидите главвную страницу, на который показаны товары, на которые действует реальная скидка на сегодняшний день.

Для того, чтобы найти нужный вам товар, с его историей изменения цен, достаточно скопировать ссылку товара с розетки и вставить её в поле для поиска.

Если товар был найден, вы будете перенаправлены на страницу истории изменения цены на товар.

На этой странице можно:

• добавить товар в избранное (просто список для быстрого доступа к товарам)
• добавить в отслеживаемые товары (это позволит вам отслеживать изменение цены и получать уведомления на почту и/или telegram)

На странице отслеживаемых товаров можно в удобном виде увидеть список всех товаров и их краткую информацию. По всем товарам вам будут приходить уведомления сразу же при изменении цены на товары.

Как уже упоминалось, можно подключить почту или телеграм. И вот в таком формате вам будут приходить уведомления:

При том, что вы можете пользоваться одним аккаунтом на любом вашем девайсе.
Для аутентификации вам достаточно перейти по любой ссылке из Telegram/Email сообщения и произойдёт автологин в аккаунт.

Резюме

И вот, сервис уже работает пол года, принося мне личную пользу. И пришло время представить его и вам! Заходите на badseller и делайте правильные покупки. А так же, помими истории изменения цен на сайте появился новый раздел сравнения цен на алкоголь в различных магазинах и супермаркетах Украины. Что тоже позволяет круто экономить. Но это уже тема для отдельной статьи.

К слову, этот сайт очень здорово мне помог при определении скидки 11.11 на Розетке. Я понял, что на Розетке действительно есть реальные понижения цен на товары во время акций. И благодаря этому сервису я прикупил себе новенькую клавиатуру (что на скринах выше).

Как экономить при покупках на Rozetka? Просто покупайте товары на Розетке, когда по акции на розетке действительно есть реальные скидки. А определить это вы сможете по графику цен badseller.net.

Заходите на сайт, пишите пожелания (например, на guruloz99@gmail.com). Сделаем лучший сервис онлайн покупок в Украине вместе!
Если будет интересно, то в будущем могу написать статью, как был разработан сервис. Как построен бекенд, связь с фронтендом: разработка, деплой, мониторинг.

Несмотря на то, что генераторы доступны с версии PHP 5.5, они до сих пор используются крайне редко. На самом деле, большинство разработчиков, которых я знаю, понимают, как работают генераторы, но не видят, когда они могут быть полезны в реальных ситуациях.

"Да, генераторы, безусловно, выглядят здорово, но знаете... за исключением вычисления последовательности Фибоначчи, я не вижу, чем они могут быть мне полезны."

И в чем-то такие люди правы, ведь даже примеры в документации PHP о генераторах довольно упрощены. Они только показывают, как эффективно реализовать диапазон или итерацию по строкам файла.

Но даже из этих простых примеров мы можем понять суть генераторов: это просто упрощенные итераторы.

Генератор позволяет вам написать код, который использует foreach для итерации по набору данных без необходимости создавать массив в памяти.

Учитывая это, я попытаюсь объяснить, почему генераторы являются потрясающими, используя некоторые примеры, взятые из реальных моих приложений, над которыми я работаю.

Немного контекста

У меня был один проект, направленный на чтение электронных книг. Книга проходит весь путь от получения файлов электронных книг от издателей до представления ее на сайте и предоставления конечному покупателю возможности читать их онлайн (с помощью веб-ридера) или на электронной читалке.

Чтобы иметь возможность продавать эти электронные книги и отображать соответствующую информацию для наших клиентов, нам необходимо иметь множество метаданных для наших книг (название, формат, цена, издатель, автор(ы), ...).

В большинстве примеров кода, которые будут показаны ниже, я буду ссылаться на эти метаданные под именем электронной книги.

Итак, начнем!

Итерация больших наборов данных

Для первого примера предположим, что у меня есть большая коллекция электронных книг, и я хочу отфильтровать те, которые можно читать в веб-читалке.

Традиционно я бы написал что-то вроде этого:

private function getEbooksEligibleToWebReader($ebooks)
{
    $rule = 'format = "EPUB" AND protection != "Adobe DRM"';
    $filteredEbooks = [];

    foreach ($ebooks as $ebook) {
        if ($this->rulerz->satisfies($ebook, $rule)) {
            $filteredEbooks[] = $ebook;
        }
    }

    return $filteredEbooks;
}

Проблема здесь очевидна: чем больше у меня бесплатных электронных книг, тем больше переменная $filteredEbooks будет занимать памяти.

Решением могло бы стать создание итератора, который бы перебирал $ebooks и возвращал те, которые соответствуют требованиям. Но для этого пришлось бы создать новый класс, а итераторы немного утомительны в написании... К счастью, начиная с PHP 5.5 мы можем использовать генераторы!

private function getEbooksEligibleToWebReader($ebooks)
{
    $rule = 'format = "EPUB" AND protection != "Adobe DRM"';

    foreach ($ebooks as $ebook) {
        if ($this->rulerz->satisfies($ebook, $rule)) {
            yield $ebook;
        }
    }
}

Да, рефакторинг метода getEbooksEligibleToWebReader для использования генераторов так же прост, как замена присваивания $filteredEbooks на оператор yield.

Если предположить, что $ebooks - это не массив со всеми электронными книгами, а итератор или генератор (еще лучше!), то потребление памяти будет постоянным, независимо от количества книг, и мы обязательно найдем эти книги тогда, когда они нам понадобятся.

Агрегирование данных с нескольких источников

Теперь давайте рассмотрим часть, связанную с извлечением $ebooks. Я не говорил вам, но эти электронные книги поступают из разных источников данных: реляционной базы данных Mysql и Elasticsearch.

Мы можем написать простой метод для объединения этих двух источников:

private function getEbooks()
{
    $ebooks = [];

    // fetch from the DB
    $stmt = $this->db->prepare("SELECT * FROM ebook_catalog");
    $stmt->execute();
    $stmt->setFetchMode(\PDO::FETCH_ASSOC);

    foreach ($stmt as $data) {
        $ebooks[] = $this->hydrateEbook($data);
    }

    // and from Elasticsearch (findAll uses ES scan/scroll)
    $cursor = $this->esClient->findAll();

    foreach ($cursor as $data) {
        $ebooks[] = $this->hydrateEbook($data);
    }

    return $ebooks;
}

Но опять же, объем памяти, используемый этим методом, слишком сильно зависит от количества электронных книг, которые мы имеем в базе данных и в Elasticsearch.

Мы могли бы начать с использования генераторов для получение мерджа этих данных с различных источников:

private function getEbooks()
{
    // fetch from the DB
    $stmt = $this->db->prepare("SELECT * FROM ebook_catalog");
    $stmt->execute();
    $stmt->setFetchMode(\PDO::FETCH_ASSOC);

    foreach ($stmt as $data) {
        yield $this->hydrateEbook($data);
    }

    // and from Elasticsearch (findAll uses ES scan/scroll)
    $cursor = $this->esClient->findAll();

    foreach ($cursor as $data) {
        yield $this->hydrateEbook($data);
    }
}

Это лучше, но у нас все еще есть проблема: наш метод getBooks выполняет слишком много работы! Мы должны разделить эти две обязанности (чтение из базы данных и вызов Elasticsearch) на два отдельных метода:

private function getEbooks()
{
    yield from $this->getEbooksFromDatabase();
    yield from $this->getEbooksFromEs();
}

private function getEbooksFromDatabase()
{
    $stmt = $this->db->prepare("SELECT * FROM ebook_catalog");
    $stmt->execute();
    $stmt->setFetchMode(\PDO::FETCH_ASSOC);

    foreach ($stmt as $data) {
        yield $this->hydrateEbook($data);
    }
}

private function getEbooksFromEs()
{
    // and from Elasticsearch (findAll uses ES scan/scroll)
    $cursor = $this->esClient->findAll();

    foreach ($cursor as $data) {
        yield $this->hydrateEbook($data);
    }
}

Вы заметите использование оператора yield from (доступного с PHP 7.0), который позволяет делегировать использование генераторов. Это идеально подходит, например, для объединения нескольких источников данных, использующих генераторы.

На самом деле, ключевое слово yield from работает с любым объектом Traversable, поэтому массивы или итераторы также могут быть использованы с этим оператором делегирования.

Используя это ключевое слово, мы могли бы объединить несколько источников данных всего несколькими строками кода:

private function getEbooks()
{
    yield new Ebook(…);
    yield from [new Ebook(…), new Ebook(…)];
    yield from new ArrayIterator([new Ebook(…), new Ebook(…)]);
    yield from $this->getEbooksFromCSV();
    yield from $this->getEbooksFromDatabase();
}

Сложная гидратация данных для строк базы данных со связями

Другим примером использования генераторов, который я нашел, была реализация гидратации данных, которая могла обрабатывать связи.

Мне нужно было импортировать сотни тысяч заказов из старой базы данных в нашу систему, причем каждый заказ имел несколько связей - товаров.

Наличие, и строки товаров заказа было необходимым условием для того, что нам нужно было сделать, поэтому я должен был написать метод, который мог бы возвращать объединенные данные по заказам, не будучи слишком медленным и не занимая много памяти.

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

public function loadOrdersWithItems()
{
    $oracleQuery = <<<SQL
SELECT o.*, item.*
FROM order_history o
INNER JOIN ORDER_ITEM item ON item.order_id = o.id
ORDER BY order.id
SQL;

    if (($stmt = oci_parse($oracleDb, $oracleQuery)) === false) {
        throw new \RuntimeException('Prepare fail in ');
    }
    if (oci_execute($stmt) === false) {
        throw new \RuntimeException('Execute fail in ');
    }

    $currentOrderId = null;
    $currentOrder = null;
    while (($row = oci_fetch_assoc($stmt)) !== false) {
        // did we move to the next order?
        if ($row['ID'] !== $currentOrderId) {
            if ($currentOrderId !== null) {
                yield $currentOrder;
            }

            $currentOrderId = $row['ID'];

            $currentOrder = $row;
            $currentOrder['lines'] = [];
        }

        $currentOrder['lines'][] = $row;
    }

    yield $currentOrder;
}

Используя генератор, мне удалось реализовать метод, который может получать заказы из базы данных и соединять соответствующие строки заказов. Все это при стабильном потреблении памяти. Генератор устранил необходимость отслеживать все заказы с их строками заказов: текущий заказ - это все, что мне было нужно для объединения всех данных.

Генераторы при парсинге больших объемов данных

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

Ранее я уже писал статьи по написанию асинхронных парсеров на PHP. Но, в своих проектах, я, в основном, пользуюсь другой библиотекой для парсинга - Guzzle. Это очень крутая и многофункциональная библиотека которая позволяет выполнять параллельные, асинхронные запросы в PHP, добавлять перехватчики ответов, модификаторы запросов, middleware и многое другое. К тому же, с Laravel она идет по умолчанию.

В документации Guzzle есть отличные примеры использования генераторов с их библиотекой для параллельных запросов. Но я приведу свой личный код из персонального проекта.

У меня есть проект по сбору бесплатных прокси с многих источников и проверка их на валидность. Задача, по факту, делится на 2 этапа: сбор прокси и проверка на валидность. Сбор прокси условно быстрая операция. На один сайт, откуда мы парсим список прокси мы делаем от 1 до 5 запросов. Если таких источников будет 15-20, то даже в этом случае эти запросы можно выполнить синхронно где-то в очереди.

Проблемы начинаются, когда нам нужно проверить весь список спаршенных прокси на валидность. Потому что тут два нюанса: к-во прокси после первого этапа равно где-то от 15-20к. Проверка должна быть достаточно быстрой, чтобы в этом была целесообразность. Если мы будем в синхронном режиме ждать проверки каждого из прокси-сервера с максимальным тамймаутом в 5 секунд. То в худшем случае, 100 прокси проверится за 500 секунд. А проверка всего списка займет больше 27 часов.

Потому, нужно сформировать пулл из прокси и парралельно проверять их валидность. И как только один прокси проверен, в пулл добавляется новое значение. То есть, в один момент времени будет проверяться N-значений.

$handler = HandlerStack::create();

$iterator = function () use ($handler, $proxies, $url, $project) {
    /* @var Proxy $proxy */
    foreach($proxies as $proxy) {
        $request = new Request('GET', $project->ping_url, []);

        $startTime = microtime(true);

        yield (new Client([
            'handler' => $handler,
            RequestOptions::TIMEOUT => 5,
            RequestOptions::CONNECT_TIMEOUT => 5,
            RequestOptions::READ_TIMEOUT => 5,
            RequestOptions::PROXY => $proxy->getFullProxy(),
            RequestOptions::ALLOW_REDIRECTS => true,
            RequestOptions::HEADERS => [
                'user-agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36',
            ],
        ]))
            ->sendAsync($request)
            ->then(
                function (Response $response) use ($request, $proxy, $startTime, $project) {
                    $responseTime = microtime(true) - $startTime;

                    $validator = new RulesValidator($response->getBody()->__toString());
                    // добавляем проверки валидации ответа
                    if($validator->validate() === false) {
                        return $proxy->update([
                            'status' => Proxy::STATUS_FAULT,
                            'response_time' => $responseTime,
                            'response_status' => $response->getStatusCode(),
                            // ...
                        ]);
                    }

                    $proxy->update([
                        'status' => Proxy::STATUS_SUCCESS,
                        'response_time' => $responseTime,
                        'response_status' => $response->getStatusCode(),
                        // ...
                    ]);
                },
                function($reason) use($proxy, $startTime) {
                    // обрабатываем ошибку
                });
    }
};

// конкурентно парсить в 100 потоков
$promise = each_limit_all($iterator(), 100);

$promise->wait();

Если интересно, пишите на почту, и я обязательно напишу подробную статью как я писал проект на Laravel по многопоточной проверке прокси, проверки ответа, скорости соединения и это все на PHP.

Вы, вероятно, слышали про axios или использовали его в своих веб-приложениях. Axios - это HTTP-клиент для браузера и node.js. Он значительно упрощает работу с API-запросами. Если вы работаете с Nuxt, есть официальный модуль, который ещё больше упрощает задачу интеграции этой библиотеки в фреймворк: @nuxtjs/axios. Именно на нём я сосредоточусь в этой статье. Предполагается, что вы знакомы с Nuxt и уже настроили проект. Я не буду подробно рассказывать о том, как использовать axios, об этом вы можете почитать в другой статье. Здесь вы узнаете, как настроить axios для ваших нужд в приложении Nuxt.

Как установить модуль axios

В вашем текущем проекте Nuxt запустите yarn add @nuxtjs/axios или npm install @nuxtjs/axios в зависимости от вашей рабочей среды.

Добавьте @nuxtjs/axios в список модулей в nuxt.config.js.

Теперь axios готов к использованию!

Базовое использование

Теперь вы можете использовать axios в ваших компонентах и в любой части приложения, которая имеет доступ к контексту Nuxt. Модуль добавляет axios в контекст и он становится доступен под именем $axios. Например, вы можете использовать this.$axios.get(url) или this.$axios.post(url, data) в любом .vue файле.

Настройка axios с помощью плагина

Одним из способов настройки axios является создание плагина, в котором задаются все значения по умолчанию. Это то же самое, что и создание любого другого плагина для Nuxt. Код плагина запускается до инициализации ядра Vue.

Создание плагина

• Создайте файл в папке plugins. Назовите его как угодно, но, я советую назвать axios.js - это общепринятое название.
• Добавить файл в списке плагинов в nuxt.config.js свойство plugins.
• Готово!

Настройка плагина

Как же должен выглядеть этот плагин?

export default function ({ $axios, store }, inject) {
    // тут будем всё настраивать
})

В этой статье мы будем использовать только $axios и store из контекста. Но список параметров в действительности намного больше. Рекомендую просмотреть документацию по контексту Nuxt, где приведён список всех доступных параметров и их описание.

Вот несколько примеров того, что вы можете сделать в файле плагина plugins/axios.js:

• Установить базовый URL для всех запросов
• Создать несколько экземпляры axios, внедрить их в приложение и использовать в нужных местах необходимые экземпляры
• Прикрепить токен к каждому запросу
• Перехватывать ответ до того, как он попадает в вызываемый код приложения

Установка базового URL для всех запросов

Если все запросы направлены на один и тот же API, то можем задать базовый URL по умолчанию, чтобы в запросах к API мы не хардкодили домен, и в случае чего, могли в любой момент хост на другой. Мы можем настроить экземпляр axios так, чтобы он хранил этот базовый URL.

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

$axios.setBaseUrl('https://api.badcode.ru/')

Теперь при использовании $axios этот URL всегда будет использоваться в качестве базового URL-адреса. Что даёт теперь возможным сделать такой вызов api:

$axios.get('/post/1')

Добавление нового экземпляра axios и внедрение его в приложение

Но что, если нам потребуется обращаться к нескольким доменам разных API? Вы можете создать новый экземпляр axios с любым именем, которое вы предпочитаете, и внедрить его в приложение.

Допустим, мы хотим получить данные о постах блога и пользователях, которые хостятся на разных API. Мы можем создать два разных экземпляра axios с разными базовыми адресами.

const postsApi = $axios.create()
const membersApi = $axios.create()

postsApi.setBaseUrl('https://api.badcode.ru/')
membersApi.setBaseUrl('https://members.badcode.ru/')

inject('postsApi', postsApi)
inject('membersApi', membersApi)

Здесь мы используем функция inject, предоставляемый плагинами Nuxt. Inject принимает два аргумента: первый - ключ, второй - значение.

То есть, после вызова функции inject, в контексте приложения Nuxt появится новое свойство с таким ключом и значением как было указано. Nuxt автоматически добавляет знак доллара к внедряемому ключу.

Чтобы использовать экземпляры axios, которые мы создали, вы можете обратиться так:

this.$membersApi.get('/people/1')
this.$postsApi.get('/posts/1')

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

Добавление токена в заголовок при каждом запросе

Если ваши API вызовы требуют какого-то токена авторизации, это также можно настроить в файле плагина. Чтобы установить заголовок авторизации в запросе, мы должны задать его в параметре option.

Допустим, для примера, API информации о пользователях блога (membersApi) требует аутентификации.
Вот один из способов установить Authorization токен в axios:

this.$membersApi.get('/people/1', {
    headers: {
        Authorization: `Bearer ${token}`,
    },
})

Этот код отлично работает, но быстро надоедает, когда приходится добавлять его в несколько мест. С помощью модуля @nuxtjs/axios мы можем указать добавление токена в запрос в файле плагина.

Если мы хотим использовать токен Bearer, мы можем поступить следующим образом:

const token = 'test_token'
$axios.setToken(token, 'Bearer')

Это добавит токен в заголовок под названием Authorization. Обычно этот токен хранится в localstorage или в хранилище Vuex. Я использую для хранения токена текущего пользователя Vuex state. В функции плагина у вас есть доступ к Vuex из контекста Nuxt.

Теперь можем проверить, добавляется ли токен в запрос к созданному экземпляру axios.

const token = store.state.currentUser.token
membersApi.setToken(token, 'Bearer')

Если вы используете refresh-токен или обновляете текущий токен каким-либо способом, вы также можете вызвать метод setToken, в том месте, где обновляется токен пользователя. В компоненте или модуле Vuex store вы можете, например, выполнить:

this.$membersApi.setToken(newToken, 'Bearer')

Перехват ответа axios

Если вы хотите проверять статус ответа при каждом вызове axios, вы можете зарегистрировать глобальный перехватчик респонсов.

@nuxtjs/axios предоставляет вспомогательные методы для этого. Допустим, мы хотим логировать что-то определённое каждый раз, когда статус ответа равен 404. Это можно реализовать с помощью метода onResponse.

$axios.onResponse((response) => {
    if (response.status === 404) {
        console.log('И вот он, 404 код')
    }
})

Итоговый файл плагина axios

В заключение, полный файл плагина (/plugins/axios.js) со всей конфигурацией, упомянутой в этой статье, может выглядеть примерно так:

export default function ({ $axios, store }, inject) {
    const postsApi = $axios.create()
    const membersApi = $axios.create()

    postsApi.setBaseUrl('https://api.badcode.ru/')
    membersApi.setBaseUrl('https://members.badcode.ru/')

    const token = store.state.currentUser.token
    membersApi.setToken(token, 'Bearer')

    membersApi.onResponse((response) => {
        if (response.status === 404) {
            console.log('И вот он, 404 код')
        }
    })

    inject('postsApi', postsApi)
    inject('membersApi', membersApi)
}

Внедрение зависимости axios-клиента в сервис

Очень часто возникает задача - создать класс, решающий определённые задачи, при работе с API. И в таких сервисах всегда нужен HTTP-клиент. Мы могли бы подключить axios простым импортом в нужном классе, но это не совсем то, что нам нужно.

Идеально было бы в конструктор передавать HTTP-клиент, являющийся абстракцией определённого интерфейса. В результате чего, в каком-то одном месте, мы могли бы подменять реализации HTTP-клиентов.

Или же проще, когда нам нужно просто получить инстанс axios, который создан с помощью плагина (настроены перехватчики, базовый URL и т.д.). Но при обычном импорте мы получаем совершенно другой инстанс. Потому, в этой секции я покажу, как передавать axios в конструктор в качестве зависимости в проекте Nuxt.

Прежде всего, аналогично добавлению плагина axios, нам нужно создать новый плагин, в котором мы будем объявлять все наши сервисы приложения (читай контейнер). Каждому из сервисов могут потребоваться различные зависимости, будь то API клиент для запросов, библиотека сохранения данных в cookie/localStorage.

Потому, для примера, создадим plugins/services.js с таким содержимым:

import PostService from "~/Services/Blog/PostService";
import FavoriteService from "~/Services/Catalog/FavoriteService";
import ConfigService from "~/Services/Shared/ConfigService";

// $cookies - это сторонняя библиотека по работе с cookie (https://www.npmjs.com/package/cookie-universal-nuxt)
export default ({ app: { $axios, $cookies } }, inject) => {
  // как зависимость передаём экземпляр axios
  inject('postService', new PostService($axios));
  inject('favoriteService', new FavoriteService($cookies));
  
  // как зависимость передаём экземпляр axios и библиотеку $cookies 
  inject('configService', new ConfigService($axios, $cookies));
}

Затем, в файле nuxt.config нужно подключить созданный плагин.

plugins: [
    '~/plugins/axios',
    '~/plugins/services.js',
  ],

И после чего, в контексте приложения Nuxt появятся зарегистрированные в плагине сервисы. Вызвать которые можно несколькими способами:

• через переменную контекста ({ route, redirect, $postService, $configService, store })
• в любом компоненте, или Vuex хранилище - this.$favoriteService.add(productId), this.$configService.getParams()

Резюме

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

В этой статье так же было показано, как перехватывать ответ в axios. Так же, разобрались как внедрять зависимости в виде плагина axios в собственные классы.

Надеюсь, вы нашли эту статью полезной.

В этой статье я расскажу, как делать запросы в приложении на Nuxt.js с помощью модуля Axios. Вы также узнаете, как использовать методы asncData и fetch для получения данных на стороне сервера с помощью Axios и в чем разница между этими двумя методами. И, наконец, я покажу, как добавить аутентификацию в наше приложение с помощью модуля Auth.

Это подробное руководство по работе с axios в приложении Nuxt. Если вам нужна шпаргалка по использованию axios, то читайте так же эту статью.

Nuxt.js предоставляет модуль Axios для простой интеграции в ваше приложение. Axios - это HTTP-клиент работающий на основе промисов (Promise), который работает и в браузере и в среде Node.js. Или, проще говоря, это инструмент для выполнения запросов (например, вызовов API) в приложениях на стороне клиента и сервера на Node.js.

В этом руководстве мы узнаем, как использовать модуль Axios и как сделать запрос на стороне сервера, используя asyncData и fetch. Эти два метода выполняют запрос на стороне сервера, но у них есть некоторые различия, которые мы также рассмотрим. Наконец, мы узнаем, как выполнять аутентификацию, используя модуль auth и middleware, и сделаем приватные страницы/роуты, которые будут доступны только аутентифицированным пользователям.

Эта статья требует базовых знаний Nuxtjs и Vuejs, поскольку мы будем разрабатывать приложение на их основе. Тем, кто не имеет опыта работы с Vuejs, я рекомендую начать с изучения статей, официальной документации и официальной страницы Nuxt, прежде чем продолжать эту статью.

Что это за модуль такой - Nuxt.Js Axios?

Согласно официальной документации:

«Это безопасная и простая интеграция Axios с Nuxt.js.»

Вот некоторые из её функциональных особенностей:

• Автоматическая установка базового URL на стороне клиента и сервера
• Добавляет функцию setToken для $axios, чтобы мы могли легко устанавливать глобальный токен аутентификации
• Прокси заголовки для SSR запросов
• Запросы в стиле Fetch
• Интеграция с прогресс-баром Nuxt
• Интеграция с модулем прокси
• Автоматическое повторение запросов с помощью axios-retry

Чтобы использовать модуль axios в своём приложении, вам нужно сначала установить его с помощью npm или yarn.

YARN:

yarn add @nuxtjs/axios

NPM:

npm install @nuxtjs/axios

Добавьте такие настройки в свой файл nuxt.config.js:

  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    // дополнительные настройки
    // BaseURL: 'https://link-to-API'
  }

Массив modules принимает список модулей Nuxt.js, таких как dotenv, auth и, в текущем случае, axios. Мы сообщили нашему приложению, что будем использовать модуль axios, на который мы ссылаемся с помощью @nuxtjs/axios. Затем следует свойство axios, которое представляет собой объект дополнительных настроек модуля, таких как baseURL, например. Список всех доступных опций настройки Axios в Nuxt можете посмотреть здесь.

Теперь вы можете использовать модуль axios из любого места своего приложения, вызвав this.$axios.method или this.$axios.$method. Где метод может быть get, post, put или delete.

Делаем свой первый запрос с помощью Axios

Для этого урока я собрал простое приложение на Github. Репозиторий содержит две папки, start и finish.

В папке start содержится всё, что вам нужно для того, чтобы приступить к изучению урока. Папка finish содержит законченную версию того, что в итоге получилось.

После клонирования репозитория и открытия папки start нам нужно установить все зависимости проекта из package.json, поэтому откройте терминал и выполните следующую команду:

npm install

Как только это будет сделано, мы сможем запустить наше приложение с помощью команды npm run dev. И вот, что вы должны увидеть, когда перейдёте на localhost:3000.

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

API_URL=https://ireporter-endpoint.herokuapp.com/api/v2/

Таким образом, нам не придётся жестко хардкодить URL нашего API в приложении, что полезно при работе с двумя API (development и production).

Следующим шагом нужно открыть файл nuxt.config.js и добавить переменную окружения в конфигурацию axios, которую мы создали выше.

/*
** Axios module configuration
*/
axios: {
    // Все настройки смотрите здесь https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.API_URL,
},

Здесь мы говорим Nuxt.js использовать этот baseURL как для наших клиентских, так и для серверных запросов всякий раз, когда мы используем этот модуль Axios.

Теперь, чтобы получить список отчетов по API, давайте откроем файл index.vue и добавим следующий метод в раздел script.

async getIncidents() {
  let response = await this.$store.dispatch('getIncidents');
  this.incidents = response.data.incidents;
}

Мы создали асинхронную функцию, которую назвали getIncidents(), и по названию можно понять, что она делает - она получает список инцидентов, используя метод хранилища Vuex - this.$store.dispatch. Мы присваиваем ответ от этого метода нашему свойству incidents, чтобы иметь возможность использовать его в компоненте.

Мы будем вызывать метод getIncidents() каждый раз, когда компонент монтируется в DOM. Мы можем сделать это с помощью навешивания на событие mounted.

mounted() {
    this.getIncidents()
}

mount() - это хук жизненного цикла, который вызывается при монтировании компонента в DOM. Сразу же при монтировании компонента, мы сделаем API запрос. Теперь давайте зайдем в наш файл index.js в хранилища Vuex создадим action, в котором мы будем делать наш запрос Axios:

export const actions = {
  async getIncidents() {
    const response = await this.$axios.get('/incidents')
    return response.data;
  }
}

Здесь мы создали action под названием getIncidents, который является асинхронной функцией, затем мы ожидаем ответа от сервера и возвращаем этот ответ. Ответ от этого экшена отправляется обратно в наш метод getIncidents() в файле index.vue.

Если мы обновим наше приложение, то теперь мы должны увидеть длинный список происшествий, отображаемый на странице.

Мы сделали наш первый запрос, используя Axios, но мы не останавливаемся на достигнутом, мы собираемся опробовать asyncData и fetch, чтобы увидеть различия между ними в контексте использования axios.

AsyncData

AsyncData получает данные на стороне сервера и вызывается ДО загрузки компонента страницы. Потому, у этого метода нет доступа к this компонента, потому что он вызывается до создания самого компонента страницы. this становится доступным только после вызова хука created. И только после этого Nuxt.js автоматически объединяет данные полученные в методе asyncData с данными компонента (data).

Использование asyncData полезно для SEO, потому что он получает данные на стороне сервера. Обратите внимание, что метод asyncData можно использовать только в папке pages вашего приложения, и он не будет работать в папке components.

Резонный вопрос - а почему asyncData не работает в папке components? Это всё связано с тем, что хук asyncData вызывается до создания компонента.

Давайте добавим asyncData в наш файл index.vue и посмотрим, как быстро загружаются данные об инцидентах. Добавьте следующий код после свойства components и удалите код хука mounted.

async asyncData({ $axios }) {
    const { data } = await $axios.get("/incidents");
    return { incidents: data.incidents };
  },
  // mounted() {
  //   this.getIncidents();
  // },

Здесь метод asyncData принимает свойство из контекста - $axios. В параметр с именем $axios мы получаем библиотеку Axios.

Теперь, с помощью Axios получим список инцидентов, и вернём из метода asyncData объект { incidents: ... }. И это значит, что ключи, которые мы вернули в этом объекте будут созданы в data-параметрах компонента (реактивные данные), вместе с тем значением, что мы передели.

Открыв страницу заново, увидим, что данные корректно передались в наш компонент. Теперь вы можете заметить, насколько быстро загружается ваш контент, если вы обновляете страницу, а во время рендеринга не происходит никаких ошибок.

Fetch

Метод Fetch также используется для выполнения запросов на стороне сервера. Он вызывается после хука жизненного цикла created, что означает, что он имеет доступ к данным компонента. В отличие от метода asyncData, метод fetch может использоваться во всех файлах .vue и взаимодействовать с Vuex Store.

Это означает, что если у вас в data есть следующие данные.

data() {
    return {
      incidents: [],
      id: 5,
      gender: 'male'
    };
}

Вы можете легко изменить ID или gender, вызвав this.id или this.gender из метода fetch.

Использование Axios в качестве плагина

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

Чтобы расширить Axios, необходимо создать плагин (например, axios.js) в папке plugins.

export default function ({
  $axios,
  store,
  redirect
}) {
  $axios.onError(error => {
    if (error.response && error.response.status === 500) {
      redirect('/login')
    }
  })
  $axios.interceptors.response.use(
    response => {
      if (response.status === 200) {
        if (response.request.responseURL && response.request.responseURL.includes('login')) {
          store.dispatch("setUser", response);
        }
      }
      return response
    }
  )
}

Это пример плагина, который я написал для приложения Nuxt. Здесь ваша функция принимает объект контекста, из которого мы извлекаем $axios, store и redirect, которые мы будем использовать при настройке плагина. Первое, что мы делаем, это отслеживаем ошибку со статусом 500 с помощью $axios.onError и перенаправляем пользователя на страницу логина.

У нас также есть обработчик, который перехватывает каждый ответ на запрос, который мы делаем в нашем приложении, и проверяет, что статус ответа, который мы получаем, равен 200. Если это так, мы проверяем, есть ли в ответе response.request.responseURL параметр login. Если да, то мы отправляем этот ответ с помощью метода dispatch хранилища Vuex, где обновляется состояние.

Добавьте этот плагин в ваш файл nuxt.config.js:

plugins: [
    '~/plugins/axios'
]

После этого ваш плагин Axios будет перехватывать любой запрос, который вы делаете. Теперь вы можете добавить любые проверки, и обрабатывать запросы/ответы в зависимости с вашей бизнес логикой, определяя какие-то особые случаи для обработки.

Введение в модуль Auth

Модуль Auth используется для выполнения аутентификации в вашем Nuxt-приложении, доступ к которому можно получить из любого места вашего приложения с помощью $this.auth. Он также доступен в fetch, asyncData, middleware и NuxtInitServer из объекта контекста (по ключу $auth).

Объект context предоставляет дополнительные параметры из компонентов Nuxt и доступен в специальных областях жизненного цикла Nuxt, подобных упомянутым выше.

Чтобы использовать модуль auth в вашем приложении, вам необходимо установить его с помощью yarn или npm.

YARN

yarn add @nuxtjs/auth

NPM

npm install @nuxtjs/auth

Добавьте его в свой файл nuxt.config.js.

modules: [
  '@nuxtjs/auth'
],
auth: {
  // дополнительные опции
}

Свойство auth принимает список свойств, таких как strategies и redirect. Здесь strategies принимает предпочитаемый метод аутентификации, который может быть:

• local - для флоу аутентификации на основе логина/почты и пароля.
• facebook - для использования учетных записей Facebook в качестве средства аутентификации.
• Github - для аутентификации пользователей с учетными записями Github.
• Google - для аутентификации пользователей с учетными записями Google.
• Auth0 - драйвер для Auth0
• Laravel Passport - драйвер для Laravel Passport

Свойство redirect принимает объект ссылок для эндпоинтов:

• login - пользователи будут перенаправлены на эту ссылку, если потребуется вход в систему.
• logout - эндпоинт куда будет перенаправлен пользователь, если текущий маршрут будет только для залогиненных пользователей.
• home - пользователи будут перенаправлены сюда после входа в систему.

Теперь давайте добавим следующее в наш файл nuxt.config.js.

/*
 ** Auth module configuration
 */
auth: {
  redirect: {
    login: '/login',
    logout: '/',
    home: '/my-reports'
  },
  strategies: {
    local: {
      endpoints: {
        login: {
          url: '/user/login',
          method: 'post',
          propertyName: 'data.token',
        },
        logout: false,
        user: false,
      },
      tokenType: '',
      tokenName: 'x-auth',
      autoFetchUser: false
    },
  },
}

Внутри объекта конфигурации auth у нас есть опция redirect, в которой мы устанавливаем маршрут входа в систему на /login, маршрут выхода из системы на / и маршрут home на /my-reports. У нас также есть свойство tokenType, которое представляет тип авторизации в заголовке нашего запроса. По умолчанию он установлен на Bearer, но может быть изменен для работы с любым типом авторизации.

Для нашего API тип токена отсутствует, поэтому мы оставим его пустой строкой. TokenName представляет имя параметра авторизации (или свойство заголовка, в котором будет передаваться токен) в заголовке к бекенду.

По умолчанию оно установлено на Authorization, но для нашего API имя авторизации сделаем - x-auth. Свойство autoFetchUser используется для включения функции получения объекта пользователя после входа в систему по эндпоинту, указанном под ключом user. По умолчанию оно равно true, но наш API пока не имеет такого эндпоинта, поэтому мы установили значение false.

В этом туториале мы будем использовать стратегию аутентификации local. В наших стратегиях есть опция local с эндпоинтами для login, user и logout, но в нашем случае мы будем использовать только опцию login, поскольку наш демонстрационный API не имеет эндпоинта logout.

Примечание: модуль auth не имеет опции эндпоинта register, поэтому мы будем регистрироваться традиционным способом и перенаправлять пользователя на страницу входа, где мы выполним аутентификацию с помощью this.$auth.loginWith. Это метод, используемый для аутентификации пользователей. В качестве первого аргумента он принимает "стратегию" (например, local), а затем объект для выполнения аутентификации. Посмотрите на следующий пример.

let data {
    email: 'test@test.com',
    password: '123456'
}
this.$auth.loginWith('local', { data })

Использование модуля Auth

Теперь, когда мы настроили наш модуль аутентификации, мы можем перейти к нашей странице регистрации. Если вы посетите страницу /register, вы должны увидеть форму регистрации.

Давайте сделаем эту форму функциональной, добавив следующий код:

methods: {
  async registerUser() {
    this.loading = true;
    let data = this.register;
    try {
      await this.$axios.post('/user/create', data);
      this.$router.push('/login');
      this.loading = false;
      this.$notify({
        group: 'success,
        title: 'Success!',
        text: 'Account created successfully'
      });
    } catch (error) {
      this.loading = false;
      this.$notify({
        group: 'error',
        title: 'Error!',
        text: error.response
          ? error.response.data.error
          : 'Sorry an error occured, check your internet'
      });
    }
  }
}

Здесь у нас есть асинхронная функция registerUser, которая навешена на событие click в нашем шаблоне и выполняет запрос Axios к эндпоинту /user/create. После регистрации пользователь перенаправляется на страницу /login с уведомлением об успешной регистрации.

У нас также есть блок catch, который предупреждает пользователя о любой ошибке, если запрос не был выполнен по какой-то причине.

Если регистрация прошла успешно, вы будете перенаправлены на страницу входа в систему.

Здесь мы будем использовать метод аутентификации this.$auth.loginWith('local', loginData), после чего вызовем this.$auth.setUser(userObj) для установки пользователя в текущем экземпляре auth.

Чтобы страница входа в систему заработала, давайте добавим следующий код в наш файл login.vue.

methods: {
  async logIn() {
    let data = this.login;
    this.loading = true;
    try {
      let res = await this.$auth.loginWith('local', {
        data
      });
      this.loading = false;
      let user = res.data.data.user;
      this.$auth.setUser(user);
      this.$notify({
        group: 'success',
        title: 'Success!',
        text: 'Welcome!'
      });
    } catch (error) {
      this.loading = false;
      this.$notify({
        group: 'error',
        title: 'Error!',
        text: error.response
          ? error.response.data.error
          : 'Sorry an error occured, check your internet'
      });
    }
  }
}

Мы написали асинхронную функцию logIn, используя метод модуля auth this.$auth.loginWith('local, loginData).

Если попытка входа успешна, мы сохраняем данные пользователя в текущий экземпляр auth с помощью this.$auth.setUser(userInfo) и перенаправляем пользователя на страницу /my-report.

Теперь вы можете получить данные пользователя с помощью this.$auth.user или с помощью Vuex, используя this.$store.state.auth.user, но это ещё не всё. Экземпляр auth содержит ещё другие свойства, которые вы можете увидеть, если войдете в систему или проверите своё состояние с помощью инструментов Vue-devtools.

Если вы выведете содержимое this.$store.state.auth с помощью console.log, то увидите следующее:

{
  "auth": {
    "user": {
      "id": "d7a5efdf-0c29-48aa-9255-be818301d602",
      "email": "tmxo@test.com",
      "lastName": "Xo",
      "firstName": "Tm",
      "othernames": null,
      "isAdmin": false,
      "phoneNumber": null,
      "username": null
    },
    "loggedIn": true,
    "strategy": "local",
    "busy": false
  }
}

Экземпляр auth содержит свойство loggedIn, которое полезно для отображение различных навигационных ссылок для аутентифицированных пользователей и гостей. Объект также содержит свойство strategy, который показывает тип стратегии, используемой экземпляром (например, local).

Теперь мы воспользуемся свойством loggedIn для отображения наших навигационных ссылок. Обновите компонент navBar до следующего вида:

<template>
    <header class="header">
      <div class="logo">
          <nuxt-link to="/">
              <Logo />
          </nuxt-link>
        </div>
        <nav class="nav">
          <div class="nav__user" v-if="auth.loggedIn">
            <p>{{ auth.user.email }}</p>
            <button class="nav__link nav__link--long">
              <nuxt-link to="/report-incident">Report incident</nuxt-link>
            </button>
            <button class="nav__link nav__link--long">
              <nuxt-link to="/my-reports">My Reports</nuxt-link>
            </button>
            <button class="nav__link" @click.prevent="logOut">Log out</button>
        </div>
        <button class="nav__link" v-if="!auth.loggedIn">
          <nuxt-link to="/login">Login</nuxt-link>
        </button>
        <button class="nav__link" v-if="!auth.loggedIn">
          <nuxt-link to="/register">Register</nuxt-link>
        </button>
        </nav>
    </header>
</template>

<script>
  import { mapState } from "vuex";
  import Logo from "@/components/Logo";
  
  export default {
      name: "nav-bar",
      data() {
          return {};
      },
      computed: {
          ...mapState(["auth"])
      },
      methods: {
          logOut() {
          this.$store.dispatch('logOut');
          this.$router.push('/login');
      }
    },
    components: {
        Logo
    }
};
</script>

<style></style>

В секции template есть несколько ссылок на различные части приложения, в которых мы теперь используем auth.loggedIn для отображения соответствующих ссылок в зависимости от статуса аутентификации. У нас есть кнопка выхода из системы, которая отслеживает событие click, при котором выполняется функция logOut().

Мы также отображаем почту пользователя, полученную из свойства auth. Доступ к свойству осуществляется через хранилище состояния Vuex с помощью хелпера mapState, который сопоставляет состояние auth с вычисляемым свойством компонента nav. У нас также есть метод logout, который вызывает Vuex-экшен logOut и перенаправляет пользователя на страницу входа.

Теперь давайте обновим код Vuex-хранилища и добавим в него обработку действия logOut.

export const actions = {
  // ....
  logOut() {
    this.$auth.logout();
  }
}

Экшен logOut вызывает метод logout модуля auth, который очищает данные пользователя, удаляет токены из localStorage и устанавливает значение loggedIn в false.

Такие маршруты, как /my-reports и /report-incident не должны быть видны гостям, но на данный момент в нашем приложении это не так. В Nuxt нет навигационных хуков, которые могли бы помочь сделать определённые страницы доступными только залогиненным пользователям.

Для этих целей нам понадобится auth middleware. Этот мидлвар даёт вам возможность создать собственные проверки, чтобы вы могли ограничить доступ к страница для разных групп пользователей.

Мидлвар может работать двумя способами:

• Отдельно для каждого маршрута.
• Глобально для всего приложения (настраивается в вашем файле nuxt.config.js).

router: {
  middleware: ['auth']
}

Мидлвар auth идёт по дефолту с модулем auth, поэтому вам не нужно создавать файл auth.js в папке middleware.

Теперь давайте добавим этот мидлвар в файлы my-reports.vue и report-incident.vue. Добавьте следующие строки кода в секцию script каждого файла.

middleware: 'auth'

И всё, наше приложение будет проверять, имеет ли пользователь, пытающийся получить доступ к этим маршрутам, значение auth.loggedIn, равное true. Если нет, то он будет перенаправлен на страницу входа в систему, используя ваш параметр редиректа в конфигурационном файле auth. Если вы не вошли в систему и пытаетесь открыть страницу /my-report или report-incident, вы будете перенаправлены на /login.

Если вы перейдете на страницу /report-incidents, вот что вы увидите.

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

Чтобы решить эту проблему, мы добавим метод reportIncident, который будет вызываться, когда пользователь нажмет на кнопку Report. Мы расположим его в секции script компонента. Этот метод будет отправлять данные формы на сервер.

Обновите файл report-incident.vue следующим образом:

<template>
  <section class="report">
    <h1 class="report__heading">Report an Incident</h1>
    <form class="report__form">
      <div class="input__container">
        <label for="title" class="input__label">Title</label>
        <input
          type="text"
          name="title"
          id="title"
          v-model="incident.title"
          class="input__field"
          required
        />
      </div>
      <div class="input__container">
        <label for="location" class="input__label">Location</label>
        <input
          type="text"
          name="location"
          id="location"
          v-model="incident.location"
          required
          class="input__field"
        />
      </div>
      <div class="input__container">
        <label for="comment" class="input__label">Comment</label>
        <textarea
          name="comment"
          id="comment"
          v-model="incident.comment"
          class="input__area"
          cols="30"
          rows="10"
          required
        ></textarea>
      </div>
      <input type="submit" value="Report" class="input__button" @click.prevent="reportIncident" />
      <p class="loading__indicator" v-if="loading">Please wait....</p>
    </form>
  </section>
</template>

<script>
export default {
  name: "report-incident",
  middleware: "auth",
  data() {
    return {
      loading: false,
      incident: {
        type: 'red-flag',
        title: '',
        location: '',
        comment: '';
      }
    };
  },
  methods: {
    async reportIncident() {
      let data = this.incident;
      let formData = new FormData();
      formData.append('title', data.title);
      formData.append('type', data.type);
      formData.append('location', data.location);
      formData.append('comment', data.comment);
      this.loading = true;
      
      try {
        let res = await this.$store.dispatch('reportIncident', formData);
        this.$notify({
          group: 'success',
          title: 'Success',
          text: 'Incident reported successfully!';
        });
        this.loading = false;
        
        this.$router.push('/my-reports');
      } catch (error) {
        this.loading = false;
        this.$notify({
          group: 'error',
          title: 'Error!',
          text: error.response
            ? error.response.data.error
            : 'Sorry an error occured, check your internet';
        });
      }
    }
  }
};
</script>
<style>
</style>

Здесь у нас есть форма с полями для заголовка, местоположения и комментария с двусторонней, реактивной привязкой данных с помощью v-model. У нас также есть кнопка submit срабатывающая при событии click. В секции script у нас есть метод reportIncident, который собирает всю информацию, заполненную в форме, и отправляет её на наш сервер, наполняя объект FormData, поскольку API так же может принимать изображения и видео.

Затем вызывается экшен Vuex reportIncident, которому передаётся данные полученные из формы, и если запрос успешен, вы будете перенаправлены на страницу /my-reports с уведомлением об успешном запросе. В противном случае вы получите уведомление с сообщением об ошибке.

На данный момент в нашем Vuex хранилище ещё нет экшена reportIncident, поэтому в консоли браузера вы увидите ошибку, если попытаетесь нажать кнопку submit на этой странице.

Чтобы исправить это, добавьте экшен reportIncident в файл store/index.js.

export const actions = {
  // ...
  async reportIncident({}, data) {
    let res = await this.$axios.post('/incident/create', data)
    return res.data;
  }
}

Теперь у нас есть функция reportIncident, которая принимает пустой объект контекста и данные, которые мы передаём из формы. Затем эти данные отправляются в теле POST-запроса, который создаёт запись в API.

На данном этапе вы должны иметь возможность добавить отчет с помощью формы, после чего вы будете перенаправлены на страницу /my-reports.

Эта страница должна отображать список записей, созданных пользователем, но сейчас она показывает только то, что мы видим выше, давайте исправим это.

Для получения всего списка мы будем использовать метод fetch, который мы обсуждали ранее.

Обновите файл my-reports.vue следующим образом:

<script>
import incidentCard from "@/components/incidentCard.vue";
export default {
  middleware: 'auth',
  name: 'my-reports',
  data() {
    return {
      incidents: []
    };
  },
  
  async fetch() {
    let { data } = await this.$axios.get('/user/incidents');
    this.incidents = data.data;
  },
  
  components: {
    incidentCard
  }
};
</script>

Здесь мы используем метод fetch для получения всех записей, относящихся к конкретному пользователю, присваивая ответ от API переменной incidents.

Если вы обновите страницу после добавления инцидента, вы должны увидеть что-то вроде этого.

На этом этапе мы заметим разницу в том, как метод fetch и asyncData загружают наши данные.

Заключение

Итак, из этой статьи вы узнали о модуле axios и всех его возможностях. Вы также узнали больше о различиях asyncData и fetch, и о том, как можно использовать оба метода вместе, несмотря на их различия. В этой статье так же было показано, как подключить аутентификацию в приложение Nuxt.js. А так же, как выполнять аутентификацию в нашем приложении с помощью модуля auth и как использовать мидлвары проверки аутентификации на различных страницах сайта.

Советую так же, почитать полезную статью про работу с Мета-тегами в Nuxt.

В одной своей статье я уже рассказывал о лучших практиках работы с Vuex в больших приложениях. А в этой статье я покажу вам, как начать работу с Vuex в приложении Nuxt. Как создать свой первый Vuex модуль и как вы можете управлять состоянием в ваших компонентах и страницах приложения Nuxt.js. Я не буду вдаваться в подробности о том, как работает хранилище состояния. Я сосредоточусь на том, как использовать Vuex в приложении Nuxt и покажу как легко начать с ним работать.

Что такое Vuex

Самое простое объяснение заключается в том, что Vuex - это инструмент управления состоянием для Vue. Он хранит глобальное состояние, которое может быть доступно и изменено в вашем приложении. Он позволяет вам работать с состоянием очевидным образом и использовать такие соглашения, как экшены и мутации, для обработки изменений состояния.

Это отдельный модуль в экосистеме Vue, поддерживаемый разработчиками ядра Vue и сообществом.

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

Как установить Vuex в приложение Nuxt

Vuex поставляется вместе с Nuxt по умолчанию. При создании нового проекта вы могли заметить пустую папку store. Это место, где мы работаем с Vuex. По умолчанию он отключен, но будет активирован, как только в этой папке будет создан .js файл. Каждый файл в этой папке будет преобразован в модуль Vuex. Файл index.js будет корневым модулем.

Вот четыре основных блока, из которых состоит каждый модуль Vuex:

// store/index.js

export const state = () => {}

export const mutations = {}

export const actions = {}

export const getters = {}

Допустим, нам нужен определенный модуль Vuex для учёта фруктов в нашем приложении. Да, давайте работать с фруктами. Почему бы и нет. Это отличная метафора.

Создайте новый .js файл в папке store под названием store/fruits.js и добавьте в него несколько методов.

// store/fruits.js

export const state = () => ({
    fruits: [],
})

export const mutations = {
    addFruit(state, fruit) {
        state.fruits.push(fruit)
    },
    removeFruit(state, fruitId) {
        state.fruits = state.fruits.filter((fruit) => fruit.id !== fruitId)
    },
}

export const actions = {
    addFruit(context, fruit) {
        const slicedFruit = sliceFruit(fruit)
        context.commit(slicedFruit)
    },
}

export const getters = {
    getApples: (state) => {
        return state.fruits.filter((fruit) => fruit.type === 'Apple')
    },
}

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

На мой взгляд, если есть экшен, который только передаёт данные мутации, этот экшен можно удалить и использовать мутацию напрямую. Нет смысла в бесполезной прослойке.

Мы также создали геттер, который будет фильтровать список фруктов в хранилище, чтобы вернуть только список яблок. Это полезно, поскольку геттер будет реактивным. Поэтому, когда список фруктов будет обновляться, геттер будет реактивно отражать эти изменения.

Итак, как мы можем использовать созданный модуль в нашем приложении?

Работа с состоянием Vuex из страниц (pages) и компонентов

Использование хелпера контекстного хранилища Nuxt

Доступ к состоянию

Nuxt добавляет свойство store к объекту контекста, к которому можно получить доступ с помощью вызова this.$store в любом компоненте Vue. Таким образом, если мы хотим вывести список фруктов, мы можем сделать что-то вроде этого:

<template>
    <ul>
        <li v-for="fruit in fruits" :key="fruit.id">
            {{ fruit.name }} - {{ fruit.type }}
        </li>
    </ul>
</template>

<script>
export default {
    computed: {
        fruits() {
            return this.$store.fruits.state.fruits
        },
    },
}
</script>

Обратите внимание, что нам нужно обращаться по имени модуля (по названию файла), чтобы извлечь состояние модуля из $store. Если бы мы добавили наше состояние в индексный файл, мы могли бы получить доступ к нему непосредственно по свойству $store.state.fruits. А в нашем случае мы ещё используем вычисляемое (computed) свойство, чтобы получить реактивный список яблок.

Использование экшенов и мутаций

Итак, как мы используем экшены и мутации для добавления нового фрукта? Для демонстрации я жестко захардкодил данные нового фрукта.

<script>
export default {
    methods: {
        addFruitFromComponent() {
            const newFruit = {
                name: 'Pink Lady',
                type: 'Apple',
                id: 2,
            }

            // Используем dispatch чтобы вызвать экшен
            this.$store.dispatch('fruits/addFruit', newFruit)

            // Используем коммит чтобы вызвать мутацию
            this.$store.commit('fruits/addFruit', newFruit)
        },
    },
}
</script>

Экшены и мутации можно вызывать непосредственно из свойства $store. Существует два различных метода: dispatch и commit.
Dispatch запускает экшен, а commit вызывается для мутаций данных.

В приведенном выше примере оба метода добавят новое значение в список фруктов, но экшен сначала вызовет метод sliceFruit(...). Если вам нужно манипулировать, изменять или проверять добавляемые данные, это следует делать в экшене, а не в методе мутации. А может быть, и вообще перед отправкой в Store, но это уже другая тема.

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

Использование геттеров (getters)

Геттеры работают очень похоже на вычисляемые свойства. С той лишь разницей, что они доступны глобально из любого места приложения. В нашем случае геттер getApples будет выглядеть следующим образом:

<template>
    <ul>
        <li v-for="apple in apples" :key="apple.id">
            {{ apple.name }}
        </li>
    </ul>
</template>

<script>
export default {
    computed: {
        apples() {
            return this.$store.fruits.getters.getApples()
        },
    },
}
</script>

Использование хелперов Vuex (mappers)

Vuex также предоставляет мапперы, которые вы можете использовать вместо вызова this.$store напрмямую. Для более подробного объяснения того, как их использовать, я снова обращаюсь к документации Vuex, а особенно, к разделу о хелперах биндинга.

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

<template>
    <ul>
        <li v-for="apple in apples" :key="apple.id">
            {{ apple.name }}
        </li>
    </ul>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState('fruits', ['fruits']
  }
}
</script>

А если ещё применить экшены и мутаций:

<script>
import { mapActions, mapMutations } from 'vuex'

export default {
    methods: {
        ...mapMutations('fruits', ['removeFruit']),
        ...mapActions('fruits', ['addFruit']),
        handleFruits() {
            const newFruit = {
                name: 'Pink Lady',
                type: 'Apple',
                id: 2,
            }

            // Вызов экшена добавления фрукта
            this.addFruit(newFruit)

            // Вызов мутации удаления фрукта
            this.removeFruit(newFruit.id)
        },
    },
}
</script>

Одним из преимуществ использования хелперов биндинга является то, что вы можете вызывать методы с меньшим количеством кода. Это особенно полезно при вызове экшена или мутации непосредственно в шаблоне компонента (template).

<!-- С хелпером биндинга -->
<template>
    <button @click="addFruit(fruit)" />
</template>

<!-- С хелпером $store-->
<template>
    <button @click="$store.addFruit(fruit)" />
</template>

Одним из недостатков является то, что может потеряться визуальная связь с хранилищем состояни Store. Не очевидно, метод this.addFruit относится к текущему компоненту или к экшену Vuex. Попробуйте эти подходы и решите, что вам больше подходит. В больших проектах вы, скорее всего, столкнетесь с обоими способами. Это может быть опасно, и я рекомендую всегда стремиться к однообразному стилю. Выясните, как вы или ваша команда предпочитает делать подобные вещи, и применяйте это во всех местах в едином стиле.

Использование метода nuxtServerInit

Nuxt предлагает специальный экшен, который позволяет отправить запрос на бекенд (до старта всего приложения), получить какие-то данные (с помощью axios, например), и их передать в начальное состояние приложения Vuex. А затем, это состояние синхронизируется с клиентом. Для этого требуется, чтобы Nuxt работал в универсальном режиме (universal) и чтобы экшен nuxtServerInit был определён в файле index.js.

Пример взят непосредственно из документации экшена nuxtServerInit.

// store/index.js

export const actions = {
    nuxtServerInit({ commit }, { req }) {
        if (req.session.user) {
            commit('user', req.session.user)
        }
    },
}

Может показаться, что nuxtServerInit не работает в остальных модулях Vuex. И так оно и есть - этот экшен вызывается только если его добавить в store/index.js. В других же дочерних модулях он НЕ срабатывает. И это логично, ведь модулей может быть 100500 штук, и каждому может потребоваться запрос на бекенд, что сильно затормозит старт приложения. А нахождение всей логики в index.js файле позволяет держать под контролем всю комплексность логики инициализации состояния приложения и видеть все начальные запросы.

Но, если вдуг вам понадобится для разных модулей получать состояние на бекенде и задавать его до старта приложения, выход есть :) Вы можете делать нужные запросы в nuxtServerInit (store/index.js), а потом поочередно вызывать мутации каждого необходимого модуля:

Например, как в этом примере из моего реального проекта:

// store/index.js
export const state = () => ({
  usdRate: 0.0,
})

export const mutations = {
  setUsdRate(state, usdRate) {
    state.usdRate = usdRate
  }
}

export const actions = {
  async nuxtServerInit ({ commit }) {
    const initParams = await this.$configService.getInitParams();
    commit('setUsdRate', initParams.usdRate)
    commit('user/setAuth', initParams.user)
    commit('user/setSubscriptions', initParams.subscriptions)

    const favorites = initParams.user.favorites
    commit('favorite/setFavoriteList', favorites)
  }
}

Заключение

Работа с Vuex в приложении Nuxt проста и удобна. Vuex обеспечивает создание модулей на основе структуры папок и файлов в папке store. Вспомогательное свойство контекста $store полезно при обращении к хранилищу состояния из компонентов. Кроме этого, в Nuxt нет никаких специфических способов работы с Vuex по сравнению с обычным приложением Vue. Nuxt позволяет быстро запустить приложение, чтобы вы могли сосредоточиться на реализации, а не на настройке.

Надеюсь что эта статья была вам полезна и вы узнали, как работать с Vuex в приложении Nuxt. Думаю, вы подчерпнули интересные практики из этой статьи. Уверен, что теперь у вас не возникает вопрос, как делать запросы к бекенду до загрузки страницы и синхронизировать состояние бекенда и Nuxt приложения.

Что такое мета-данные?

Сначала давайте поговорим о том, что такое метаданные. Вы можете указывать информацию о html-документе в тегах <meta>. Мета-теги располагаются внутри элемента <head> html-документа. Метатеги могут содержать информацию о следующем:

• Информация для браузера о том, как отображать HTML-документ
• Инструкции для поисковых систем о том, как интерпретировать и отображать информацию
• Описание для платформ социальных сетей, как отображать информацию при публикации ссылки в общем доступе.

Метаданные не видны на странице. Они анализируются браузером и поисковыми системами. Вы можете просмотреть веб-страницу и найти в теге <head> все теги <meta>, добавленные на этой странице. Данные внутри метатегов не являются скрытыми в этом смысле.

Пример мета-тегов

<head>
    <title>Current title</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Это моё описание, которое может быть видно на страницах результатов поисковых систем" />
    <meta name="author" content="Badcode.ru" />
</head>

Технически тег <title> не является метатегом. Его принято называть метаданными, и он влияет на SEO и удобство просмотра страницы. Поэтому я рекомендую относиться к нему именно так.

Полный список доступных HTML метатегов можете посмотреть на этой странице.

Что такое Open Graph?

Open Graph - это протокол, созданный Facebook. С целью структурирования информации о ссылках, которыми делятся на платформах социальных сетей. Теги дают автору возможность решать, какой контент будет показан в предварительном просмотре при обмене ссылкой.

Метатеги Open Graph добавляют к свойству префикс og:. У Twitter также есть свои собственные теги для указания метаданных. Вместо og: они используют twitter:. Но Twitter также распознаёт og теги в качестве запасного варианта, если теги twitter:* не были найдены.

<head>
    <meta property="og:title" content="Текущий заголовок" />
    <meta property="og:description" content="Описание. Может быть таким же, как meta description" />
    <meta property="og:image" content="https://badcode.ru/content/images/2020/01/cover-1.jpg" />
    <meta property="og:url" content="https://badcode.ru/" />
</head>

Пример с тегами Twitter

<head>
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:creator" content="@true_hero99" />
    <meta name="twitter:description" content="Описание. Может быть таким же, как meta description" />
</head>

Как указывать метаданные в Nuxt

Итак, теперь мы знаем, что такое мета-теги и как они используются для отображения информации о вашем сайте. Но как установить значения мета-данных динамически для каждой страницы в приложении Nuxt? Допустим, у нас есть блог. Например, этот. Где мы хотим показывать разные заголовки и описания, уникальные для каждой статьи.

В Nuxt у вас есть доступ к специальному свойству под названием head. Свойство head определяется так же, как и все остальные свойства компонента. На том же уровне, что и data, fetch, methods и т.д. Оно может быть как объектом, так и функцией. Скоро я объясню разницу.

С помощью свойства head вы можете установить заголовок и метаданные для каждой страницы в вашем приложении. Вы также можете использовать head для установки всего, что связано с тегом <head>. То есть вы можете добавлять таблицы стилей, теги скриптов, теги ссылок и многое другое. В этой статье я сосредоточусь на части метаданных, но полезно знать и остальное.

Использование свойства head

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

Добавим заголовок и описание.

export default {
    head: {
        title: 'Мой заголовок',
        meta: [
            {
                hid: 'description',
                name: 'description',
                content: 'Моё описание... Badcode.ru...',
            },
        ],
    },
}

Как я уже говорил, тег title на самом деле не является мета-тегом. Поэтому он устанавливается вне массива тегов meta. Если мы посмотрим на свойство description, вы можете задаться вопросом, что это за свойство hid. Это свойство специфично для Nuxt и используется как уникальный идентификатор, благодаря чему свойства могут быть перезаписаны дочерними компонентами. Таким образом, если мы хотим установить описание в дочернем компоненте, мы должны использовать то же самое значение hid.

При изменении метаданных, как указано выше, значения title и description мы задали статичные данные. И если нам нужно использовать статическую информацию, мы можем изменять head с помощью определения объекта, как выше. Но если мы хотим установить динамические данные, например, title и description текущей записи блога, нам нужно использовать head как метод.

Позвольте мне показать вам, как я использовал бы head для этой записи в блоге.

head() {
    return {
        title: this.article.title,
        meta: [
            {
                hid: 'description',
                name: 'description',
                content: this.article.description,
            },
            {
                hid: 'og:title',
                name: 'og:title',
                content: this.article.title,
            },
            {
                hid: 'og:image',
                property: 'og:image',
                content: `${this.article.image}`,
            },
            {
                hid: 'og:description',
                property: 'og:description',
                content: this.article.description,
            },
            {
                hid: 'og:url',
                property: 'og:url',
                content: `https://badcode.ru/${this.article.slug}`,
            },
        ],
    }
},

Здесь я использую head как функцию, которая возвращает объект. Я устанавливаю все метаданные на основе информации о текущей статье. Это делает их динамичными и более уникальными для каждой страницы.

Установка метаданных в nuxt.config

У вас также есть доступ к свойству head в файле nuxt.config.js. Здесь вы можете установить значения по умолчанию для всех страниц. Это полезно, если вы не хотите копипастить некоторые основные метаданные для каждой страницы вашего приложения.

Вы также можете использовать шаблон для заголовка. Если вы хотите, чтобы каждый заголовок на вашем сайте заканчивался, например, названием вашего сайта. Вы можете настроить это здесь с помощью свойства titleTemplate.

head: {
    title: 'Мой заголовок по-умолчанию, который каждый компонент может переопределить, если что',
    titleTemplate: '%s - badcode.ru',
    meta: [
        ...
    ]
}

Теперь каждый тег title будет заканчиваться на - badcode.ru. Символ %s является спецификатором преобразования, который потом будет заменён на заданный title.

Использование нового хелпера useMeta

Несмотря на то, что Nuxt 3 еще не выпущен, вы можете использовать новые возможности, связанные с Vue 3. Например, хелпер useMeta. Более подробную информацию смотрите в Nuxt Composion API Module.

Хелпер useMeta можно использовать в методе setup(). Что упрощает установку динамических данных и более явно показывает, какие данные используются. Чтобы задействовать функциональность useMeta, необходимо импортировать хелпер и задать свойству head значением пустой объект. Базовый пример может выглядеть следующим образом.

import { defineComponent, useMeta } from '@nuxtjs/composition-api'

export default defineComponent({
    head: {},
    setup() {
        useMeta({
            title: 'Мой заголовок',
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: 'Моё описание...',
                },
            ],
        })
    },
})

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

import { defineComponent, useMeta } from '@nuxtjs/composition-api'

export default defineComponent({
    head: {},
    setup() {
        const { title } = useMeta()
        title.value = 'Мой переопределённый заголовок'
    },
})

В этом случае вы можете изменить значение title в методе setup. Мы также можем получить переменную meta и применить изменения к description и всем мета-свойствам, доступным в массиве meta.

Что если я захочу динамически внести изменения в title (или любые другие мета-данные) извне метода setup? Возможно, заголовок должен меняться в зависимости от действий пользователя на странице. Наш последний пример делает title редактируемым в методе setup. Но этот подход не даёт изменить title из кода самого компонента.

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

<template>
    <div>
        <button @click="title = 'New title'">Изменить title</button>
        <button @click="title = 'Another new title'">Изменить title again</button>
    </div>
</template>

<script lang="ts">
import { defineComponent, useMeta, ref } from '@nuxtjs/composition-api'

export default defineComponent({
    head: {},
    setup() {
        const title = ref('')
        useMeta(() => ({ title: title.value }))

        return {
            title,
        }
    },
})
</script>

Резюме

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

Очень распространенной практикой является создание некоторой вспомогательной функции для работы с метаданными. Поскольку метаданные представляют собой обычный объект, вы можете создать функцию, которая возвращает метаобъект на основе некоторых входных параметров. Это делает их ещё более динамичными и облегчает работу с метатегами на множестве страниц в приложении Nuxt.

Последние несколько недель я экспериментировал с генеративным искусством, используя PHP. Генеративное искусство - это создание произведений искусства с помощью программирования. У генеративного искусства есть разные названия, такие как процедурное искусство или креативное кодирование.

PHP не является распространенным языком для генеративного искусства, JavaScript - один из более распространенных вариантов, но на самом деле вы можете использовать любой язык программирования, которому доступны функции работы с изображениями и файлами.

Я выбрал PHP, по нескольким причинам. Во-первых, потому что знаю его довольно хорошо и могу быстро писать код на нём, а во-вторых (и это самое главное), потому что с его помощью я сразу же могу сохранять изображения на жестком диске. Ещё, ввиду того, что все мои проекты написаны на PHP, то это так же позволяет легко интегрировать подобные скрипты в уже существующие мои проекты.

Если бы не эти преимущества, я бы, вероятно, выбрал JavaScript, поскольку это позволит мне добавить элементы управления для динамического редактирования изображений в реальном времени - но это сделает процесс сохранения изображений гораздо более сложным.

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

Таким образом, работы, которые я создал, - это пиксель-арт, вдохновленный ретро-играми. На данный момент я создал 2 работы - скрипт генерации пиксельных аватаров и генерация целых изометрических пиксельных городов, и это всё на PHP.

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

Дисклеймер

Честно говоря, я не прилагал особых усилий для соблюдения всех возможных правил и рекомендаций по написанию кода. Эти проекты, как правило, являются тем, над чем я работаю неделю или две, а затем откладываю в сторону.

Несомненно, есть лучшие способы сделать код, который я пишу для этой статьи. В коммерческих проектах я бесконечно комментирую и стараюсь сохранить всё как можно более структурированным, поскольку вероятнее всего мне в скором времени мне нужно будет вернуться к доработкам проекта; а эти проекты, как правило, те, над которыми я работаю пару недель, а потом больше не занимаюсь ими. Потому, здесь для меня главное - результат.

Учитывая это, я сделал несколько примеров для этой статьи и довольно подробно прокомментировал их, чтобы постараться сделать код как можно более простым для понимания.

Генерация пиксельных аватаров

Скрипт генерации аватарок работает максимально примитивно. Я просто создал различные заготовки слоёв для всех частей аватара (фоновый цвет, глаза, рот), а затем использовал PHP для наложения слоёв различных частей, выбирая случайный слой для каждой из группы.

При работе с PHP я использую библиотеку GD, которая часто идет по дефолту при установке PHP. Так же, для разработки я использовал Docker, благодаря которому вы сможете запустить этот проект у себя локально в пару команд и проверить работу этого скрипта.

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

Я никак не взаимодействую с базой данных, в этом скрипте всё абсолютно случайно. Красота генеративного искусства в том, что вы можете мгновенно создавать тысячи различных изображений, и нет необходимости хранить что-то долгое время. Мне очень нравится, когда я дохожу до стадии, когда мне нравится (почти) всё, что создает алгоритм.

Для создания аватарок я вручную нарисовал целую кучу изображений, с одинаковыми размерами, для каждой черты лица, очертания глаз, носов, ртов и волос, а затем поместил каждую из этих частей в разные папки, сгруппированные по типу (по части тела). И с помощью PHP я накладываю один слой изображения на другой.

В псевдокоде процесс создания случайной аватарки выглядит так:

• Создаём изображение (imagecreatetruecolor).
• Получаем массив всех возможных частей для первого слоя (используя функцию glob для поиска файлов в указанной папке определённой группы).
• Перемешиваем все найденные картинки, чтобы выбрать случайный элемент.
• Накладываем слой на результирующее изображение (imagecreatefrompng > imagecopy).
• Повторяем для каждого слоя.
• Сохраняем изображение (imagepng).

Вероятно, вы уже видели подобные проекты с генерацией аватарок. Все они используют разновидность приведённого здесь кода (возможно, не на PHP), они накладывают различные картинки, чтобы создать совершенно новое изображение - с достаточным количеством деталей вы можете быстро создать множество различных, уникальных аватарок.

В моём примере набор изображений составляет: 9 изображений глаз, 5 изображений рта и 7 изображений кожи - что даёт 315 уникальных комбинаций (9 * 5 * 7). Если добавить волосы, очки (и всё остальное), то можно быстро получить десятки тысяч возможных вариантов.

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

При создании слоёв аватарок, важно учитывать одну особенность. Все изображения частей лица (рот, глаза) должны быть одного размера (в моём случае - 32х32). А определённая группа должна быть в соответствующем участке картинки.

Глаза - вверху, рот - внизу изображения. Так, чтобы при накладывании изображений друг на друга они становились в правильное место.

Создание заготовок для генерации изображений

Мой путь генеративного искусства начинается с предварительно нарисованных объектов, которые я затем комбинирую в различных сочетаниях. Можно создавать элементы полностью с нуля с помощью PHP, но это меня не интересует, мне нравится иметь некоторый художественный контроль. Из-за влияния видеоигр я создал всё в виде пиксель-арта.

Для создания пиксельных изображений я использую Aseprite. Aseprite - это потрясающий инструмент!

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

Я включил файлы .aseprite в репозиторий, чтобы вы могли использовать их в качестве отправной точки, если захотите создать свои собственные вариации.

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

Если вы когда-нибудь играли в 2D видеоигры, вы наверняка видели уровни, созданные с помощью двухмерных сеток тайлов. Это очень интересная задача, учитывая мой недостаток опыта работы в этой области. К тому же, я не работал с изометрическими сетками раньше - поэтому моя следующая работа была немного сложнее.

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

Основной принцип заключается в том, что у вас есть многомерный массив (массив массивов), в котором хранится информация о различных блоках. Затем вы перебираете массивы и рендерите указанные блоки на картинке.

Набор всех возможных блоков я храню в одном изображении (читай спрайт), а затем рисую эти блоки на результирующем изображении по мере необходимости. Так делают в видеоиграх, но вы можете использовать отдельные изображения (каждое изображение для отдельного типа блока), если захотите.

Для изометрического города код выглядел примерно так:

• Создаём вложенные массивы города.
• Решаем, где что находится, используя некоторые простые алгоритмы, и обновляем массивы города соответствующим образом (нужно поместить дороги, парки, реки).
• Нужно пройтись по массивам и отрисовать соответствующие тайлы. Если на карте есть место для здания, создаём случайное здание и рисуем его поверх тайла.
• Рендерим всё на изображение.

Как я уже говорил, я раньше не работал с изометрическими сетками, но это не сильно отличается от работы с квадратной сеткой. Самое большое изменение было в том, как я рассчитывал положение каждого тайла. Я использовал этот туториал, чтобы понять, как рассчитать его положение.

Помимо расположения тайлов, при изометрическом рисовании необходимо следить за тем, чтобы всё рисовалось задом наперёд, чтобы передние объекты закрывали задние. Из-за этого я рисую всё, что связано с каждым тайлом, за один раз. Я рисую тайл, затем рисую декорацию (деревья, людей и т.д.), затем рисую здание. Если бы я нарисовал их по отдельности, они могли бы наложиться не так, как предполагалось.

Создание зданий

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

Пример сетки

Код примера для демонстрации сетки немного длиннее, чем для демонстрации пака изображений. Большая часть дополнительного кода используется для прокладки дорог и парков.

Как и в случае изометрического города, я рисую дороги и парки, а плитки выбираю из стандартного набора изображений. Сетка квадратная, не изометрическая, но принцип точно такой же.

Для примера я взял тайлсет, который я сделал примерно за 5 минут (в отличие от того, сколько было потрачено на тайлсеты для изометрического города, что по ссылке выше).

Процесс создания тайлов города выглядит примерно так:

Создаём базовое изображение и подгружаем объекты.

• Инициализируем массив мира.
• Добавляем дороги.
• Добавляем парки.
• Рисуем подготовленные данные.
• Сохраняем в изображение.

Изучить исходный код вы можете на Github.

Дороги и парки

Самая сложная часть кода - это добавление дорог и парков. Это просто случайно расположенные линии (дороги) и квадраты (парки), которые я затем добавляю в массив мира, используя соответствующий индекс. Сложность заключается в определении размеров и направлений различных элементов.

Как только вы поймете основной принцип, добавить реки, мосты и дорожки в парках будет довольно просто. Самое сложное - подстроить значения так, чтобы последовательно получить привлекательный макет.

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

Что еще?

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

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

В этой статье были приведены примеры работы с GD на PHP и реальный код по работе с графикой на примере генеративного искусства.

Перевод статьи: Creating Generative Art with PHP

Знаешь, бывает так, что ты ещё не успев закоммитить транзакцию нового желания, а вселенная уже даёт тебе возможность его осуществить. И хз как это правильно называется - судьба, награда, или везение. Но что-то подобное случилось и со мной, когда я только решил поменять работу, и искал, куда мне, как PHP-программисту, пойти работать в Днепре.

Про work.ua, очевидно, слышали все. И я, думая о своём будущем месте работы, видел себя только в двух компаниях, одной из которых была компания Реактор, разрабатывающая Work.ua. А тут - идеальное совпадение всех факторов, ведь только пожелав, мне сразу же написала HR компании с предложение о работе. Совпадение? Не думаю)

Желание работать именно в этой компании было вызваны объективными плюсами:

• Круто быть частью чего-то, что ты сам любишь, и пользуешься
• Это highload - полезный опыт, буст скиллов, сильная команда
• Идеалы компании не только на бумаге, а на деле, которые были мне близки
• У меня уже работал друг в этой компании, потому я знал, куда иду :)

И вот, успешно пройдя техническое собеседование, затем собеседование с сооснователем. И я уже полноценный работник Work.ua. И сознанием, пока ещё тот, кто до конца не понимает, куда попал, и как мне повезло на самом деле.

А затем, я уже счастливый обладатель 3 футболок, 1 бананки, отличной команды (футбольной в том числе), бесценного опыта, мотивации и сердца наполненного безграничным уважением и любовью ко всем, с кем мне удалось соприкоснуться. И это спустя всего 3 месяца. И это только начало.

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

Реактор - это люди. Люди, которые являются сердцем компании, её ядром. Люди, которые двигают компанию вперёд, развиваются сами, и вдохновляют двигаться окружающих их людей. Двигаться, стремиться к идеальному, и становиться лучшей версией себя.

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

В этой компании я повстречал огромное количество нереально крутых, душевных, веселых, и умных ребят. Здесь я увидел много уникальных, вдохновляющих историй. Историй роста в компании. Историй преодоления себя. Историй труда, которые были вознаграждены. Сейчас на уме вертится поговорка из детства "Терпение и труд всё перетрут". Но сейчас, смотря на ребят, она воспринимается совсем по другому.

На самом деле, ещё на этапе собеседования с сооснователем я уже увидел крутые знаки. После него я ещё больше вдохновился на благотворительность, помощь людям. После него хотелось быть ещё лучше, ещё больше поддерживать людей, которые это заслуживают, помогать. И этими эмоциями пропитан каждый сантиметр офиса этой компании.

Спасибо вам, ребята, вы классные!

• Андрей, Артур за компанию, внимательность к мелочам и успешную попытку создать идеальную компанию.
• Лена, Стас, за теплоту, открытость, невероятные и вдохновляющие истории труда, целеустремлённости. За любовь к своим командам. Та и вообще, просто общаясь с вами, хочется прям радоваться, улыбаться, наслаждаться моментом.
• Дима - за отличный пример, самоотдачу, позитив, опыт и ум. За помощь и доверие. За крутой пример, как нужно брать самые сложные куски, успевать хорошо делать и их, и помогать команде.
• Рома, Вадим - superteam, которые показали, что такое команда, что собрания команды могут быть похожими на тусовку.
• Никита, Маша, Даша за крутое настроение, игры по пятницам и самый вкусный кофе в вашей компании.
• Спасибо футбольной команде, команде продукта, Максу и Андрею, которые поверили в меня на собеседовании.
• Ане - за самые яркие события, корпоративы, сделанные только на "хорошо".
• Лене с Олей, которые нашли меня, привели в лучшую компанию.
• Этот список можно продолжать вечно, ведь кого не возьми, каждый из вас неповторим, с глубиной и чем-то удивительным и захватывающим внутри. Спасибо всем, вы крутые. Вы делаете эту компанию лучше.

Да, в Днепре, да и вообще, в Украине, много крутых компаний. И компания Реактор - определённо крутая. Я, как человек, который помнит свои опаски по поводу этой компании, и побывавший внутри, могу сказать, что внутри всё в разы круче, чем мне казалось со стороны.

Перед устройством на работу в Реактор меня беспокоило, что об этой компании очень мало отзывов. А ведь это незаслуженно несправедливо. Потому что как и каждая хорошая девушка должна найти себе хорошего мужа, так и каждый работник должен найти компанию, в которой захочется остаться. И если тебе интересно, то для меня, это именно та компания, в которой я хотел бы остаться.

Я всегда искал такую работу, где мне хотелось бы остаться навсегда. И если ты до сих пор думаешь, что ходить на работу с радостью - это миф. То, вероятно, ты просто не работал в Реакторе.

Очень приятно быть частью чего-то воистину достойного и великого. Чего-то, что приносит пользу людям, и частью чего приятно себя ощущать. А главное - видеть, что твой, даже минимальный вклад, приносит результат, который ценится.

Эта компания помогает открывать новые горизонты: как внутренне, так и профессионально. И хочется верить, что я делаю эту компанию чуть лучше тоже. Так что, сделаем это вместе)

Эта работа придала мне сил сделать то, что так давно хотелось, но никак не получалось. Сдесь можно сделать всё: набрать лучшую форму, о которой мечтал; начать бегать до или после работы; начать ходить на конференции; или даже записаться на кроссфит. С этими ребятами ты сможешь всё!

Есть отличная фраза "быть, а не казаться". И это как раз про Work.ua, про Реактор, и про людей этой компании. Потому, если ты хотел услышать отзывы про компанию Реактор в Днепре, то вот он, самый честный и искренний отзыв от сотрудника компании. И если бы меня ранее спросили, стоит ли идти работать в Реактор, я бы задумался. Если ты спросишь меня об этом сейчас, то, ответ, думаю, очевиден.

Отзыв конечно, выглядит как проплаченный. Но, честно говоря, это и есть - проплаченный отзыв. Только заплатили мне совсем не деньгами)

Если вдруг, каким-то чудом, алгоритм гугла отправил тебя на эту страницу, и ты её дочитал, пришел на собеседование по какой-то из вакансий. Пиши мне на почту (guruloz99@gmail.com), и я обязательно угощу тебя обедом :)
Вперёд и вверх!

Если не это супер-команда, то кто тогда? Если не это работа твоей мечты, то я уже даже не знаю, что тебе предложить)
Ты только посмотри, какие они все тут крутые:

Тут конечно же не все, кого я хотел добавить на картинку. У меня было очень много идей, кого добавить, и куда. Но сердце подсказало - добавить свою первую команду, которая меня приняла, влюбила в себя и вдохновила. А как мы все знаем, после первой команды других не бывает, потому вот, все эти люди собраны тут)