Обновлено: 16 января 2019 г.
Поиск, сортировка и разбивка на страницы (GitHub)
Нашим последним шагом будет реализация функций поиска, сортировки и разбивки на страницы. Сделаем это с помощью Rummage.Phoenix 1.0.0.
ПРИМЕЧАНИЕ. На момент публикации этого сообщения в версии 1.2.0 есть ошибки, которые делают ее непригодной для использования, а над 2.0 все еще ведутся работы. Я обновлю это снова, когда выйдет 2.0.
На первом этапе мы добавим {:rummage_phoenix, git: “https://github.com/thebrianemory/rp_catcasts"} к нашим зависимостям. Это версия, в которой все классы CSS уже обновлены. По умолчанию rummage_phoenix использует Bootstrap, а мы используем Tailwind. Это избавит нас от необходимости обновлять классы в нашей зависимости или добавлять собственный CSS.
Поскольку rummage_phoenix ожидает другую версию Phoenix, а rummage_ecto (который установлен вместе с rummage_phoenix) ожидает другую версию ecto, нам нужно будет обновить эти строки в нашем mix.exs.
ПРИМЕЧАНИЕ. Несмотря на то, что ecto_sql устанавливает ecto, нам нужно будет добавить ecto в качестве зависимости, чтобы мы могли ее переопределить.
После запуска mix deps.get мы перейдем к нашему config.exs, добавим нашу конфигурацию для Rummage Phoenix и перезапустим наш сервер (8033ae2).
Затем мы добавим use Rummage.Ecto в наш video.ex модуль.
Затем мы добавим use Rummage.Phoenix.View к нашему video_view_ex (d04729c).
Нам нужно будет добавить Rummage в наш VideoController. Для этого мы добавим use Rummage.Phoenix.Controller, добавим псевдоним для Catcasts.Repo и обновим действие index внутри нашего VideoController ( 29efa3c ).
Теперь мы готовы обновить нашу страницу индекса видео для отображения кнопок нумерации страниц, добавить форму поиска и добавить возможность сортировки наших видео.
Внутри нашего видео video/index.html.eex мы добавим <%= pagination_link(@conn, @rummage) %> в новый div, чтобы отображать наши кнопки нумерации страниц (04906dd).
Если вы добавили более пяти видео, теперь вы сможете увидеть свои кнопки нумерации страниц.
Мы можем добавить функции сортировки и поиска с помощью некоторых помощников, которые мы получили от Rummage.Phoenix. Мы добавим сортировку и строку поиска под заголовком страницы с видео о кошках (74f061f).
На нашей индексной странице теперь есть три ссылки, которые мы можем использовать для сортировки видео, и окно поиска для поиска видео по названию. Давайте проведем mix test последний прогон, чтобы убедиться, что все наши тесты по-прежнему проходят! Если вы заинтересованы в развертывании своего приложения, в Phoenix docs есть отличное руководство по развертыванию на Heroku (которое является бесплатным!).
Вы можете посетить https://www.catcasts.com, чтобы увидеть мою работу!
Часть 1: Настройка
Часть 2: Использование Tailwind CSS
Часть 3: Панель навигации, ошибки и домашняя страница
Часть 4: Использование Google Ueberauth
Часть 5: Настройка текущего пользователя
Часть 6: Использование API YouTube
Часть 7: Настройка авторизации
Часть 8: Делаем все лучше
Часть 9: Поиск, сортировка, разбивка на страницы
Далее:
Бонус за часть 10: Использование программы форматирования кода Elixir 1.6
Подписывайтесь на меня в Twitter @thebrianemory. Следуйте за мной здесь, нажмите на руки ниже, чтобы выразить признательность, оставьте комментарий и свяжитесь с нами!
