Rails и JavaScript

Я написал простое одностраничное приложение (SPA), в котором используются HTML, CSS и JavaScript для фронтального и рубина на рельсах, действующих в качестве сервера API. Для этого проекта я пошел с концепцией сайта обмена фотографиями для гитаристов, которую я удачно назвал Гитарные выборы Анкет

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

Предоставление данных JSON

Следующий фрагмент-это запрос GET от переднего конца до заднего конца и нацеливается на this.api Затем следует маршрут для заполнения данных для Гитара класс конструктор.

getGuitars = () => {
    return fetch(this.api + "/guitars")
    .then(response => response.json())
  }

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

static getGuitars = () => {
    api.getGuitars().then(guitars => {
      Guitar.all = []
      guitars.forEach(guitar => new Guitar(guitar))
      this.renderGuitars()
    })
  }

Передние проблемы

Несколько вопросов, с которыми я столкнулся с этой концепцией, было то, как представить обновленную информацию, например, когда пользователь удаляет пост гитары. Гитара хранится в массиве Гитара. Все , но без обновления этого массива, будет производить гитару до тех пор, пока страница не будет обновлена или что я сделал (согласно требованию этого проекта), поскольку это спа -салон, и обновление страницы не допускается. Позвонив Guitar.getGuitars () Данные JSON хранят синхронизацию JSON с синхронизацией с фронтальной частью без необходимости обновления страницы.

Я быстро узнал, что на любой написанный сценарий должен быть указан в Html используя <Скрипт> тег для чтения. Я столкнулся с некоторыми головными болями, а не захватывая эту концепцию с самого начала, так как с Rails не были проблемными, так как все файлы, где их читали по мере необходимости. Это первое место, где можно было бы искать код, не работает и не проверяя SRC нацелен на правильное местоположение указанного файла скрипта.

Рельс задняя установка

Настройка сервера Rails таким образом была довольно простой. Начиная с Rails New Server_name -API Анкет С -Пи Флаг, это говорит Rails, чтобы генерировать только файлы, которые зависят от обслуживания данных, а не воспользоваться преимуществами взгляды и Erb Файлы, которые обычно выполняют рендеринг информации на экране. Контроллеры похожи на написание Ruby Код с изменением вместо использования перенаправить , можно было бы написать рендеринг json: Анкет Представление захватит переменную экземпляра от контроллера и сделает что -то с ней, пока рендеринг json: сделал бы именно это. Пройдя по маршруту в браузере, с запуском сервера Rails, http://localhost: 3000/guitars будет производить объект JSON только с данными, хранящимися в текущей базе данных.

def show
    guitar = Guitar.find_by(id: params[:id])
    if guitar
      render json: guitar
    else
      render json: { message: "No guitars found" }
    end
  end

Добавить в если еще блокировать И если гитара id Не существует, даст сообщение, чтобы утверждать, что в этом месте нет информации.

Рельс модели

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

Сериализаторы

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

class GuitarSerializer < ActiveModel::Serializer
  attributes :id, :style, :brand, :model, :image_url, :username, :created_at

  def username 
    self.object.user.username
  end

  def created_at
    self.object.created_at.strftime("%b-%d-%Y")
  end
end

Гитара У класса было принадлежит_to Отношение к Пользователь , но не имел атрибута имя пользователя . Создавая пользовательский метод, чтобы рассказать сериализатор Чтобы найти Имя пользователя из Пользователь объект связан с ним. Еще одна вещь, извлеченная из этого проекта, была форматирование даты в сериализатор работал лучше, если он отформатирован для данных здесь, а не для всего объекта. Это позволяет коду спереди захватить дату как есть и быть напечатано непосредственно в DOM.

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

Оригинал: “https://dev.to/swislokdev/rails-and-javascript-16d4”