Изграждане на блог двигател с Phoenix и Elixir
От преводача: „Elixir и Phoenix са чудесен пример за това накъде върви съвременното уеб развитие. Тези инструменти вече осигуряват висококачествен достъп до технологии в реално време за уеб приложения. Сайтове с повишена интерактивност, мултиплейър браузър игри, микроуслуги са области, в които тези технологии ще служат добре. Следва превод на поредица от 11 статии, които описват подробно аспектите на разработката на рамката Phoenix, изглежда толкова тривиално нещо като блог двигател. Но не се цупете, ще бъде наистина интересно, особено ако статиите ви насърчават да обърнете внимание на еликсира или да станете негови последователи.
В момента нашето приложение се основава на:
Къде спряхме
Добавяне на канали
И тогава ще създадем самия канал, с който ще работим. За целта използваме генератора Phoenix:
- Коментарът е създаден
- Коментарът е изтрит
- Коментарът е одобрен
За всички:
- Коментарът е одобрен
- Коментарът е изтрит
Първо трябва да настроим някои основни неща. Нека добавим jQuery към приложението, за да взаимодействаме с DOM по-лесно.
Добавяне на jQuery с Brunch
Нека започнем с инсталирането на jQuery чрез NPM.
След това ще рестартираме Phoenix сървъра и ще проверим дали jQuery е инсталиран успешно. Отворете файлаweb/static/js/app.js и добавете следния код най-отдолу:
Ако видите съобщението "jquery работи!" в конзолата за разработчици на браузъра можете да изтриете тези редове и да продължите към следващата стъпка.
Внедряване на канал в Javascript
ТогаваНека отворим файла web/static/js/socket.js и направим няколко малки редакции:
След това ще започнем да добавяме манипулатори на събития към канала за всяко от тези действия.
Усъвършенстване на кода за поддръжка на канали
Ако се опитате да тествате в браузър, приложението ще се срине. Ще получите съобщение за грешка като това:
В момента нямаме функция за обработка на съобщения в канал. Отворете web/channels/comment_channel.ex и нека накараме функцията handle_in да излъчва съобщения до абонатите, вместо да гледат мълчаливо. Също така трябва да променим функцията за присъединяване по подразбиране в горната част:
Сега можем да добавим подобен код за другите две съобщения, които искаме да прослушаме.
Също така трябва да направим няколко промени в шаблоните. Трябва да знаем с коя публикация работим и кой е текущият потребител. Така че нека добавим следния код в горната част на файла web/templates/post/show.html.eex:
След това отворете файла web/templates/comment/comment.html.eex и променете отварящия div:
Сега трябва да внедрим правилно всяка от функциите за излъчване, така че нека се върнем към „javascript полето“ и да продължим!
Внедряване на User ID чрез Phoenix.Token
Нека започнем с добавяне на персонализиран токен към шаблона на приложението. Това е доста удобно, защото вероятно искаме да го показваме навсякъде. Във файла web/templates/layout/app.html.eex добавете следното към останалите мета тагове:
Тук казваме, че искаме подписан токен, който сочи към ID на потребителя (ако приемем, че потребителят е влязъл, разбира се). Това ще ни даде чудесен начин да потвърдим user_id на потребителя чрез Javascript, без да се налага да се доверяваме на скрити полета за въвеждане илиизползвайте други странни начини.
След това във файла web/static/js/socket.js направете няколко промени в кода за свързване на сокета:
Сега нека предадем валидния токен обратно към кода на Phoenix. Този път се нуждаем от файла web/channels/user_socket.ex, в който ще променим функцията за свързване, за да проверим потребителския токен:
И така, извикваме функцията за проверка от модула Phoenix.Token и предаваме към нея сокета, стойността за проверка, самия токен и стойността max_age (максималния живот на токена, например две седмици).
Ако проверката е била успешна, изпратете обратно кортежа, който в нашия случай е user_id. Тогава нека поддържаме връзката жива със стойността на user_id, съхранена в сокета (подобно на съхраняването на стойността в сесията или conn).
Обратно към Socket.js
Ще имаме нужда от тон Javascript код, за да поддържаме всичко, което ще правим. Нека разгледаме по-подробно задачите:
И ви предупредих, че тук ще има много javascript :) Нека не губим време и веднага да започнем да пишем всяка от тези функции. Коментарите в тази част от кода описват съответно всяко от изискванията.
Помощни функции за канали
Да започнем отгоре. Често ще се позоваваме на модулите Comment/Post/User/Repo, така че за чистотата на кода би било правилно да добавим псевдоними за тях. Също така трябва да импортираме функцията build_assoc от Ecto, но само arity версия 2.
Упълномощаването се извършва вътре във функцията и след това се изпълняват действията, предадени с блока fn ->. . край. Това е добър пример, когато много логика се дублира.
С функцията authorize_and_perform е достатъчно. Нека да преминем към функцията за изтриване:
И накрая, нека да разгледаме по-малките помощни функции.
Всичко, от което се нуждаем, е да заменим оригиналния код сCREATED/APPROVED/DELETED съобщения към помощните функции. Отворете файла web/channels/comment_channel.ex:
Принципите са еднакви и при трите извиквания, така че нека просто да разгледаме create:
Заключение
Дизайнът все още е лош, така че трябва да се обърне внимание на това. За да направите това, нека добавим Zurb Foundation 6 и да създадем изчистен външен вид и усещане за нашата платформа за блогове!
Други статии от поредицата
Скромно заключение от преводача
И тук можете да получите грант за тестов период на Yandex.Cloud. Необходимо е само да въведете "Habr" в полето "секретна парола".