В этом посте мы обсудим, как создать стандартное веб-приложение Phoenix с аутентификацией пользователя и панелью администратора, а также загрузкой изображений в Elixir.
TodoMVC стал де-факто инструментом для сравнения различных MV * -фреймворков на основе JavaScript. В том же духе я считаю, что приложение для блога может стать решающим фактором при выборе новой серверной части или инфраструктуры API.
Итак, давайте начнем и построим его в Фениксе. Мы будем следовать настройке по умолчанию, то есть Phoenix подключен к Ecto, работающему на PostgreSQL.
Вот последние экраны, чтобы дать вам представление о том, как приложение будет выглядеть в конце.
На целевой странице будут показаны все опубликованные блоги в виде карточки. Карточку можно щелкнуть, чтобы просмотреть конкретную публикацию.
У нас будет дашборд, который кратко покажет статистику. Для доступа к этой странице требуется логин администратора.
Будет отдельный раздел, в котором будет обзор всех постов. Здесь вы можете публиковать / изменять / удалять сообщения.
Это макет редактора сообщений с редактором разметки и средством выбора файлов для избранного изображения.
Примечание: полный рабочий код размещен на GitHub. В проекте много файлов, которыми нельзя поделиться в одном блоге. Итак, я объяснил некоторые из них, которые, как мне кажется, имеют решающее значение.
Давайте пока сохраним название проекта как CMS. Итак, начнем с создания нового проекта с mix phx.new cms. Запустите mix deps.get, чтобы установить зависимости.
Создайте файл миграции для пользователей и сообщений соответственно.
# User migration file mix phx.gen.schema Auth.User users name:string email:string password_hash:string is_admin:boolean # Posts migration file mix phx.gen.schema Content.Post posts title:string body:text published:boolean cover:string user_id:integer slug:string
В базе данных должны быть созданы две таблицы, которые представляют пользователей и сообщения. Я оставил его довольно простым, оставив только обязательные поля и расширяя при необходимости.
Впоследствии мы можем определить наборы изменений и дополнительные методы в пользовательской и пост-схеме.
user.ex
post.ex
@derive {Phoenix.Param, key: :slug}Поскольку мы хотим, чтобы сообщения имели читаемую и дружественную к SEO структуру URL-адресов, мы сообщаем помощникам маршрутов, что они должны ссылаться на slug вместо id в пространстве имен URL.
Маршруты описаны здесь:
Ресурсы, относящиеся к разделу администратора, объединяются и назначаются конвейер, который вызывает аутентификацию.
Между тем, глобальные маршруты обрабатываются пассивной аутентификацией. Сведения о пользователе извлекаются, если сеанс присутствует, но страницы все еще доступны. Вход и домашние страницы принадлежат сюда.
Выполнение mix phx.routes дает мне следующий результат:
Представление разделено на три логических раздела:
- Панель навигации
- Боковая панель
- Основное содержание
Хотя панель навигации всегда видна, боковая панель отображается только в том случае, если пользователь с правами администратора вошел в систему. Контент просмотра будет находиться в контексте администратора. Ссылки на боковой панели будут увеличиваться по мере развития приложения.
Контроллер Admin.Post следует типичной архитектуре CRUD и включает действие для переключения опубликованного состояния данного сообщения.
Многие элементы управления находятся на главной странице раздела сообщений администратора. Здесь сообщения можно удалять, публиковать и изменять.
templates / admin / post / index.html.eex
Чтобы шаблон не загромождался, мы можем определить вспомогательные средства удобного просмотра, такие как время форматирования и т. Д., Отдельно.
views / admin / post_view.ex
Arc вместе с arc_ecto предоставляет готовые возможности загрузки файлов. Поскольку сообщение имеет изображение обложки, мы должны определить конфигурацию дуги в нашем приложении.
Для каждого сообщения в нашем блоге требуются две версии изображений обложки - исходная, которая отображается в определенном виде публикации, и версия большого пальца с меньшим размером для заполнения карточек. А пока давайте выберем разрешение 250x250 для версии для большого пальца.
Вернувшись на целевую страницу приложения, вы увидите карточки для всех опубликованных сообщений. И каждый пост будет доступен через сформированный слаг.
controllers/page_controller.ex
Этот проект исследует Phoenix - как структурировано приложение Phoenix и как демонтировать проект, основанный на Phoenix. Надеюсь, вы чему-то научились и вам понравилось!
Полноценное рабочее приложение находится на Github: «https://github.com/ramansah/ фактически. Не стесняйтесь клонировать 👍 и хлопайте в ладоши, если вы найдете этот блог полезным 😃
