Я был активным пользователем StackOverflow и заметил, что многие разработчики сталкиваются с трудностями при реализации Rails AJAX. Поэтому я подумал о создании демонстрационного приложения и объяснении, как оно работает.
В любой момент, если вы захотите обратиться к коду, вот ссылка на мое репозиторий git.
Я буду создавать приложение для голосования, используя гем act_as_votable, который является хорошим способом понять, как работает AJAX.
Начнем с создания приложения:
rails new voting_app -d mysql
Нам нужно добавить пароль нашей базы данных в database.yml
файл и следующие драгоценные камни в Gemfile
.
Запустите bundle install
, а затем выполните следующие команды, чтобы настроить удобный идентификатор, модель пользователя, модель публикации и контроллер.
После того, как мы выполнили миграцию, мы можем запустить наш сервер приложений, используя rails s
.
Установите отношения один-ко-многим между пользователем и моделью публикации:
Обновите метод create в post_controller.rb, так как мы хотели бы связать сообщение с пользователем:
Кроме того, чтобы убедиться, что сообщения могут создаваться только аутентифицированными пользователями, добавьте эту строку в application_controller.rb, как показано ниже:
Откройте localhost: 3000 в своем любимом браузере и создайте свое первое сообщение.
Теперь нам нужно создать новый метод, который будет обрабатывать вызовы AJAX:
Обновите файл routes.rb только что созданным новым методом.
Теперь мы можем добавить часть HTML, необходимую для завершения потока:
Нам нужно создать еще один файл: vote.js.erb (помните о соглашении по настройке, мы всегда должны пытаться называть представления такими же, как имя метода контроллера).
Если вы попытаетесь запустить приложение и нажмете кнопку голосования, вы увидите, что ничего не происходит, поскольку мы еще не добавили код в наш метод голосования. Итак, давайте добавим в него код.
Наш метод голосования должен проверять, понравилась ли публикация пользователю или нет, а затем отличаться или нравится в зависимости от условия.
Добавьте следующий код в vote.js.erb, который соответствующим образом обновит представление. Здесь мы добавляем класс понравился к кнопке голосования, который меняет свой цвет на синий, если пользователю понравился блог, и удаляем класс понравился, если он не понравился пользователю.
И, наконец, обновите количество лайков на странице. Теперь код должен выглядеть так в файле vote.js.erb.
На скриншотах ниже вы можете увидеть, как кнопка голосов будет обновляться после того, как нравится или не нравится:
Прежде чем поставить отметку "Нравится":
Если отметка "Мне не нравится":
Несколько важных моментов:
Всякий раз, когда вы видите, что при выполнении действия на вашей странице ничего не происходит, даже если вы добавили код js в файл js.erb, это происходит из-за ошибки, которая возникает в файле js и, следовательно, код js не выполняется.
Всегда не забывайте обновлять свою страницу всякий раз, когда вы отлаживаете функциональные возможности на основе AJAX в своем приложении, поскольку ваши новые изменения кода не отражаются, пока вы не обновите страницу.
Не стесняйтесь задавать любые сомнения по поводу реализации AJAX в вашем приложении Rails.