Счастливого жуткого сезона! В этом блоге я буду обсуждать бэкэнд Ruby Sinatra с интерфейсом React. На этом этапе моего буткемпа мы начали изучать бэкэнд, и все, наконец, начинает складываться воедино. Итак, я расскажу, как выглядят запросы GET как из бэкенда, так и из внешнего интерфейса, а также насколько они полезны. include может быть!

Аид дает жуткие вибрации, верно?


GET-запрос внешнего интерфейса

Во-первых, давайте быстро рассмотрим, что такое запрос GET.

GET — это метод HTTP-запроса, который используется для получения ресурсов с серверов. [1].

Запрос GET просто «получает» данные с вашего сервера, который в нашем случае является нашим бэкэндом Sinatra. Давайте посмотрим, как наш запрос будет выглядеть из нашего внешнего интерфейса:

// ./App.js
const [demons, setDemons] = useState([])

 useEffect(() => {
    fetch("http://localhost:9292/demons")
    .then((r) => r.json())
    .then((data) => setDemons(data));
  },[])
Войти в полноэкранный режим

Выйти из полноэкранного режима

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


Бэкэнд ПОЛУЧИТЬ

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

class ApplicationController < Sinatra::Base
  set :default_content_type, 'application/json'

  get "/demons" do
      demons = Demon.all
      demons.to_json
  end

end
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это говорит нам о том, что при использовании маршрута «/demons» мы получаем все данные о демонах в нашей базе данных и возвращаем их в формат json. Если вы перейдете на свой локальный маршрут, вы увидите данные, которые извлекает запрос. Вот пример того, как будут выглядеть данные нашего демона:
без включенияИдеальный! Теперь вы можете спросить себя, получаем ли мы одни и те же данные из нашего интерфейса? Давайте выясним, мы можем использовать console.log() для просмотра данных, отправляемых на наш интерфейс в нашем запросе на выборку. Данные в нашей консоли будут выглядеть примерно так:
консольный результат
Теперь мы успешно соединили наш фронтенд и бэкенд. Поздравляем, вы только что научились использовать запросы GET для извлечения данных из нашего бэкэнда и использования их в нашем интерфейсе!



include:

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

  get "/demons" do
      demons = Demon.all
      demons.to_json(include: :souls)
  end
Войти в полноэкранный режим

Выйти из полноэкранного режима

include: позволяет использовать доступ к душам, связанным с демонами. Итак, теперь с этим небольшим изменением наша база данных будет выглядеть примерно так:
с включением Теперь это дает нам каждую душу, связанную с этим конкретным демоном, с использованием внешнего ключа (в данном случае это будет demo_id). Внешний ключ — это то, что позволяет нам соединять демонов с душами и, следовательно, позволяет нам включают это отношение в нашей базе данных.
Теперь у нас есть доступ к этим данным о душах из нашего интерфейса! Идея того, что мы могли бы сделать в интерфейсе сейчас, это что-то вроде списка душ для каждого демона, чтобы отобразить их на нашем веб-сайте! 👻


Вывод

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

Ресурсы:
[1] Д. Ландуп, «Получить HTTP-запрос в ответ», Stack Abuse, 28 сентября 2022 г. [Online]. Доступный: https://stackabuse.com/get-http-request-in-react/. [Accessed: 27-Oct-2022].