Kuinka rakentaa yksinkertainen, laajennettava blogi Elixirin ja Phoenixin kanssa

Tässä viestissä keskustelemme siitä, miten rakennetaan kattilapohjainen Phoenix-verkkosovellus käyttäjän todennuksella ja hallintapaneelilla yhdessä kuvien lataamisen kanssa Elixirissä.

TodoMVC: stä on tullut tosiasiallinen työkalu vertailla erilaisia ​​JavaScript-pohjaisia ​​MV * -kehyksiä. Samalla tavoin katson, että blogisovellus voi olla tiebreaker uuden backend- tai API-kehyksen valinnassa.

Joten aloitetaan ja rakennetaan yksi Phoenixiin. Seuraamme oletusasetuksia, eli Phoenix on kytketty PostgreSQL: ssä toimivaan Ectoon.

Tässä ovat viimeiset näytöt, jotka antavat sinulle käsityksen siitä, miltä sovellus näyttää lopussa.

Aloitussivulla näkyvät kaikki julkaistut blogit korttiasetteluna. Korttia voi napsauttaa nähdäksesi kyseisen viestin.

Meillä on hallintapaneeli, joka näyttää tilastot lyhyesti. Pääsy tälle sivulle edellyttää järjestelmänvalvojan käyttäjän kirjautumista.

Tulee erillinen osa, jossa on yleiskatsaus kaikista viesteistä. Täällä voit julkaista / muokata / poistaa viestejä.

Tämä on postieditorin asettelu, jossa on merkintöjen muokkausohjelma sekä esivalitun kuvan tiedostovalitsin.

Huomaa: Koko käyttökoodi on GitHubissa. Projektissa on lukuisia tiedostoja, joita ei voi jakaa yhdessä blogissa. Joten olen selittänyt erityiset, joiden oletan olevan kriittisiä.

Pidetään projektin nimi CMS: nä toistaiseksi. Joten aloitamme uuden projektin luomisella mix phx.new cms. Suorita mix deps.getasentamaan riippuvuudet.

Luo siirtotiedosto vastaavasti käyttäjille ja viesteille.

# 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

Tietokantaan on luotava kaksi taulukkoa, jotka edustavat käyttäjiä ja viestejä. Olen pitänyt sen melko yksinkertaisena, pitänyt vain vaaditut kentät ja laajentunut tarpeen mukaan.

Myöhemmin voimme määritellä muutosjoukot ja lisämenetelmät sekä käyttäjän että postimallissa.

user.ex

post.ex

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

Koska haluamme viestiä olla luettavissa ja SEO friendly URL-rakenteen, ilmoitamme reitti auttajien viittaus slugsijaan idURL nimiavaruudessa.

Reitit on kuvattu tässä:

Resurssit, jotka ovat erityisiä järjestelmänvalvojaosastolle, yhdistetään yhteen ja niille määritetään putki, joka pakottaa todennuksen.

Samaan aikaan maailmanlaajuisia reittejä käsitellään passiivisella todennuksella. Käyttäjätiedot haetaan, jos istunto on läsnä, mutta sivut ovat silti käytettävissä. Sisäänkirjautuminen ja kotisivut kuuluvat tähän.

Suorittaminen mix phx.routesantaa minulle tämän tuloksen:

Näkymä on jaettu kolmeen loogiseen osaan:

  1. Navigointipalkki
  2. Sivupalkki
  3. Pääsisältö

Vaikka siirtymispalkki on aina näkyvissä, sivupalkki näkyy vain, jos järjestelmänvalvojan käyttäjä on kirjautunut sisään. Sisällön selaaminen on järjestelmänvalvojan kontekstissa. Linkit sivupalkissa kasvavat sovelluksen kehittyessä.

Admin.Post-ohjain noudattaa tyypillistä CRUD-arkkitehtuuria ja sisältää toiminnon tietyn viestin julkaistun tilan vaihtamiseksi.

Paljon hallintalaitteita on järjestelmänvalvojan viestiosaston hakemistosivulla. Tässä viestit voidaan poistaa, julkaista ja muokata.

templates / admin / post / index.html.eex

Jotta malli pysyisi siistinä, voimme määrittää erikseen mukavuusnäkymän apuvälineet, kuten muotoiluajan jne.

views / admin / post_view.ex

Kaari ja arc_ecto tarjoavat heti käyttövalmiit tiedostojen latausominaisuudet. Koska viesti sisältää kansikuvan, meidän on määritettävä kaarikokoonpano sovelluksessamme.

Jokainen blogissamme oleva viesti vaatii kaksi versiota kansikuvista - alkuperäinen, joka näkyy tietyn postinäkymän sisällä, ja peukaloversio, jossa on pienempi jalanjälki korttien täyttämiseksi. Nyt mennään 250x250-tarkkuudella peukaloversiolle.

Palaten sovelluksen aloitussivulle, siinä on kortit kaikille julkaistuille viesteille. Ja jokaiseen viestiin pääsee muodostetun etanan kautta.

controllers/page_controller.ex

Tämä projekti tutkii Phoenixia - kuinka Phoenix-sovellus on rakennettu ja kuinka purkaa Phoenix-pohjainen projekti. Toivottavasti olet oppinut jotain ja nauttinut siitä!

Täysi toimiva sovellus on Githubissa: //github.com/ramansah/cms. Voitko kloonata? ja taputa, jos pidät tästä blogista hyödyllistä