Kako izraditi jednostavan, proširiv blog s Elixir-om i Phoenixom

Programiranje

U ovom ćemo postu razgovarati o tome kako izraditi standardnu ​​web-aplikaciju Phoenix s autentifikacijom korisnika i administratorskom pločom, zajedno s prijenosom slika u Elixir.

TodoMVC je postao de facto alat za usporedbu različitih MV * okvira temeljenih na JavaScript-u. U skladu s istim linijama, smatram da aplikacija bloga može biti prekid u odabiru nove pozadine ili API okvira.

Pa krenimo i napravimo jedan u Phoenixu. Slijedit ćemo zadane postavke, to jest Phoenix spojen s Ectoom koji radi na PostgreSQL-u.

Evo posljednjih zaslona koji će vam dati ideju kako će aplikacija izgledati na kraju.

Odredišna stranica prikazat će sve objavljene blogove u rasporedu kartica. Klikom na karticu možete pogledati taj post.

Imat ćemo nadzornu ploču koja će ukratko prikazivati ​​statistiku. Za pristup ovoj stranici potrebna je prijava administratora.

Bit će zaseban odjeljak koji ima pregled svih postova. Ovdje možete objavljivati ​​/ mijenjati / brisati postove.

Ovo je izgled uređivača postova koji sadrži uređivač oznaka zajedno s biračem datoteka za istaknutu sliku.

Napomena: Puni radni kod hostiran je na GitHubu. U projektu postoje brojne datoteke koje se ne mogu dijeliti na jednom blogu. Stoga sam objasnio one specifične za koje pretpostavljam da su kritične.

Zadržimo za sada ime projekta kao CMS. Stoga ćemo započeti s izradom novog projekta s mix phx.new cms. Pokrenite mix deps.getza instaliranje ovisnosti.

Generirajte datoteku za migraciju za korisnike, odnosno postove.

# 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

U bazi podataka treba stvoriti dvije tablice koje predstavljaju korisnike i postove. Držao sam ga prilično jednostavnim, zadržavajući samo potrebna polja i proširujući se kad se za tim ukaže potreba.

Nakon toga možemo definirati skupove promjena i dodatne metode u korisničkoj i post shemi.

korisnik.ex

post.ex

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

Budući da želimo da postovi imaju čitljivu i SEO prilagođenu URL strukturu, obavještavamo pomagače rute da se pozovu slugumjesto idu prostor imena URL-a.

Rute su ovdje opisane:

Resursi koji su specifični za administrativni odjeljak udruženi su i dodijeljeni cjevovod koji prisiljava provjeru autentičnosti.

U međuvremenu, globalne rute tretiraju se pasivnom autentifikacijom. Podaci o korisniku dohvaćaju se ako je prisutna sesija, ali stranice su i dalje dostupne. Prijava i početne stranice pripadaju ovdje.

Izvršenje mix phx.routesmi daje ovaj rezultat:

Pogled je podijeljen u tri logična dijela:

  1. Navigacijska traka
  2. Bočna traka
  3. Glavni sadržaj

Iako je navigacijska traka uvijek vidljiva, bočna se traka pojavljuje samo ako je prijavljen korisnik administratora. Sadržaj pregledavanja nalazit će se u kontekstu administratora. Veze na bočnoj traci će rasti kako i kada se aplikacija razvije.

Upravljač Admin.Post slijedi tipičnu CRUD arhitekturu i uključuje radnju za prebacivanje objavljenog stanja datog posta.

Puno kontrola nalazi se na indeksnoj stranici odjeljka administratora. Ovdje se postovi mogu brisati, objavljivati ​​i mijenjati.

predlošci / admin / post / index.html.eex

Kako bi predložak ostao neuredan, odvojeno možemo definirati pomoćnike u praktičnom prikazu poput vremena formatiranja itd.

pogleda / admin / post_view.ex

Arc zajedno s arc_ecto pruža mogućnost prijenosa datoteka iz okvira. Budući da post sadrži naslovnu sliku, u našoj aplikaciji moramo definirati konfiguraciju luka.

Svaki post na našem blogu zahtijeva dvije verzije naslovnih slika - originalnu koja je vidljiva unutar određenog pogleda posta i verziju palca s manjim otiskom za popunjavanje kartica. Za sada idemo s rezolucijom 250x250 za verziju palca.

Vraćajući se na odredišnu stranicu aplikacije, u nju će se smjestiti kartice za sve objavljene postove. I svaki će post biti dostupan kroz formirani puž.

controllers/page_controller.ex

Ovaj projekt istražuje Phoenix - kako je strukturirana aplikacija Phoenix i kako demontirati projekt zasnovan na Phoenixu. Nadam se da ste nešto naučili i uživali!

Cijela radna aplikacija nalazi se na Githubu: //github.com/ramansah/cms. Slobodno klonirajte? i pljeskajte ako vam je ovaj blog koristan?