Како направити једноставан, проширив блог са Еликир-ом и Пхоеник-ом

У овом посту ћемо разговарати о томе како направити стандардну веб апликацију Пхоеник са аутентификацијом корисника и администраторском плочом, заједно са отпремањем слика у Еликир.

ТодоМВЦ је постао де фацто алат за упоређивање различитих МВ * оквира заснованих на ЈаваСцрипт-у. У складу с тим, сматрам да апликација блога може бити прелом у одабиру нове позадине или АПИ оквира.

Па кренимо и направимо један у Фениксу. Пратићемо подразумевано подешавање, то је Пхоеник повезан са Ецто-ом који ради на ПостгреСКЛ-у.

Ево последњих екрана који ће вам дати идеју како ће апликација изгледати на крају.

Одредишна страница ће приказати све објављене блогове у распореду картица. Кликом на картицу можете погледати тај пост.

Имаћемо контролну таблу која ће укратко приказивати статистику. Приступ овој страници захтева пријаву администратора.

Биће одвојен одељак који има преглед свих постова. Овде можете објављивати / мењати / брисати постове.

Ово је изглед уређивача постова који садржи уређивач ознака заједно са бирачем датотека за истакнуту слику.

Напомена: Комплетни радни код је хостован на ГитХуб-у. У пројекту постоје бројне датотеке које се не могу делити на једном блогу. Дакле, објаснио сам конкретне за које претпостављам да су критични.

Задржимо за сада име пројекта као ЦМС. Па ћемо започети са стварањем новог пројекта са 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

У бази података треба направити две табеле које представљају кориснике и постове. Држао сам то прилично једноставно, задржавајући само потребна поља и проширујући се када се укаже потреба.

После тога можемо дефинисати скупове промена и додатне методе у шеми корисника и поште.

усер.ек

пост.ек

@derive {Phoenix.Param, key: :slug}

С обзиром да желимо да постови имају читљиву и СЕО прилагођену УРЛ структуру, обавештавамо помагаче руте да се позивају slugуместо idу простору имена УРЛ-а.

Руте су овде описане:

Ресурси који су специфични за административни одељак удружени су и додељени цевовод који намеће потврду идентитета.

У међувремену, глобалне руте се третирају пасивном аутентификацијом. Подаци о кориснику се преузимају ако је присутна сесија, али су странице и даље доступне. Овде припадају пријава и почетне странице.

Извршење mix phx.routesми даје овај излаз:

Поглед је подељен у три логичка одељка:

  1. Трака за навигацију
  2. Бочна трака
  3. Главни садржај

Иако је трака за навигацију увек видљива, бочна трака се појављује само ако је пријављен корисник администратора. Садржај прегледања биће унутар административног контекста. Везе на бочној траци ће расти како и када се апликација развија.

Админ.Пост контролер следи типичну ЦРУД архитектуру и укључује радњу за пребацивање објављеног стања датог поста.

Много контрола налази се на индексној страници административног одељка за објаве. Овде се постови могу брисати, објављивати и мењати.

темплатес / админ / пост / индек.хтмл.еек

Да би шаблон био неуредан, одвојено можемо да дефинишемо помоћнике за практични приказ, као што је време форматирања итд.

виевс / админ / пост_виев.ек

Арц заједно са арц_ецто пружа могућност отпремања датотека из оквира. Будући да пост садржи насловну слику, морамо да дефинишемо конфигурацију лука у нашој апликацији.

Свака објава на нашем блогу захтева две верзије насловних слика - оригиналну која је видљива у одређеном приказу поста и велику верзију са мањим отиском за попуњавање карата. За сада, идемо са резолуцијом 250к250 за верзију палца.

Враћајући се на одредишну страницу апликације, у њој ће бити смештене картице за све објављене постове. И сваки пост ће бити доступан кроз формирани пуж.

controllers/page_controller.ex

Овај пројекат истражује Пхоеник - како је структурирана апликација Пхоеник и како демонтирати пројекат заснован на Пхоенику. Надам се да сте нешто научили и уживали!

Комплетна радна апликација је на Гитхуб-у: //гитхуб.цом/рамансах/цмс. Слободно клонирајте? и тапшајте ако вам је овај блог користан?