Как делаются ЧПУ в SPA?

Question

[Max89]

Здравствуйте. Сейчас адреса выглядят так /catalog/2/2, сервер присылает ID и я отправляю c ними запрос. Но как сделать, что бы вместо id было название рубрики в адресной строке? Сервер должен отправлять slug?

Comments

[Александр]

чо?

[Алексей Дубровин]

Что такое ЧПУ? Станок?

[Сергей delphinpro]

Алексей Дубровин, Человеко-Понятный Урл. Вполне себе устоявшийся термин.

Answer 1

[Сергей delphinpro]

А в чем проблема? Всё так же.

В роутере задаётся адрес типа такого
/catalog/{slug}

На сервер улетает запрос типа /catalog/matreshka, Сервак ищет в базе товар, у которого в поле slug значение matreshka и возвращает его данные.

Собственно ничем не отличается от запроса по ID, и также ничем не отличается от реализации ЧПУ без SPA.

Comments

[Max89]

А откуда slug брать? Сейчас только ID прилетает с сервера.

[Сергей delphinpro]

Max89, я не понимаю, почему прилетает с сервера?
Наоборот же.

1. Клик по ссылке
   
2. SPA анализирует УРЛ и на его основании отправляет запрос к серверу за данными
   
3. сервер присылает данные
   
4. SPA рендерит их в красивую страницу.
   

[Max89]

Сергей delphinpro, Да, но урл динамические. Прилетает список категорий, где указана id и имя категории кириллицей, далее я формирую список ссылок и уже перехожу, что бы запросить данные детальной страницы по ID

[Сергей delphinpro]

Max89, ну значит должен прилетать список со слагами и названиями.
Можно попробовать реализовать только на клиенте.
То есть вам прилетает список ID-название. SPA транслитерирует название (или прямо так, кириллицией бахает) и генерит ссылку /catalog/матрешка
При этом на клиенте сохраняется ассоциация между сгенерированным слагом и идентификатором.
Далее при клике по ссылке слаг разрешается в айдишник, и делается запрос к серверу уже с айдишниками.
Однако тут возникает проблема первичного входа по ссылке, сразу в карточку. У клиента нет ассоциативной таблицы ID-слаг и не известно на какой айди отправлять запрос.
Так что скорее всего, нужно будет поправить и серверную часть, добавить слаги в таблицу, ну и на клиенте поправить при необходимоси.

[Max89]

Сергей delphinpro, Вот у меня и было непонимание как генерировать таблицу id = slug. Попрошу поправить бек.