На этой неделе мы собираемся разработать контактную форму для записи того, что хотят сказать пользователи.
В предыдущей главе мы реализовали все необходимое для отображения деталей игры и взаимодействия с ней. В следующем разделе мы собираемся немного отойти от него. Поскольку теперь наши пользователи могут просматривать и взаимодействовать с веб-сайтом, давайте добавим контактную форму, чтобы, если что-то не так или им очень понравился наш веб-сайт, они могли связаться с нами.
Если вы хотите сразу перейти к коду, вы можете найти его здесь.
Модель
У нас нет регистрации пользователей. Таким образом, сообщения, отправляемые на сервер, будут содержать только заголовок и описание. Для облегчения управления мы добавим флаг чтения и флаг обработки. Вот как мы кодируем эту модель.
Как видите, мы добавили две статики; один для поиска непрочитанных сообщений, а другой для поиска непрочитанных сообщений. Они будут использоваться в области администрирования в будущей реализации, выходящей за рамки этой серии.
Бэкенд
Конечная точка контактной формы проста, поскольку мы разрешаем только отправку сообщений. Следуя той же номенклатуре для внутренних маршрутов, которая использовалась ранее, мы сохраняем ее в routes/contact.json.ts.
Мы ловим ошибки, чтобы отправить пользовательский объект с сообщением об ошибке.
Внешний интерфейс
Страница контактов состоит из контактной формы с двумя полями, заголовком и описанием. Мы можем структурировать и стилизовать их как угодно. При отправке формы мы отправляем контактное сообщение со следующей функцией.
Как только serverRes имеет значение, мы показываем обратную связь пользователю, чтобы сообщить ему, было ли сообщение контакта успешно отправлено или в процессе произошла ошибка.
Мы явно определяем SVG для сообщений об успехе или ошибках. Если бы мы использовали библиотеку иконок, код мог бы быть более кратким.
И все вместе это будет работать так.
И сообщение сохраняется.
Мы приближаемся к концу этой серии. Следующим шагом будет предоставление пользователям возможности создавать новые записи, когда игра, которую они ищут, еще не существует.
Вы можете увидеть весь код до этого момента в https://github.com/omirobarcelo/retro-ps5/tree/part4.
Спасибо, что прочитали все здесь! Продолжим это путешествие на следующей неделе!
