Πώς να δημιουργήσετε ένα απλό, επεκτάσιμο ιστολόγιο με τους Elixir και Phoenix

Σε αυτήν την ανάρτηση, θα συζητήσουμε πώς να δημιουργήσετε μια εφαρμογή web Phoenix με boilerplate με έλεγχο ταυτότητας χρήστη και πίνακα διαχειριστή, καθώς και μεταφόρτωση εικόνων στο Elixir.

Το TodoMVC έχει γίνει ένα de facto εργαλείο για τη σύγκριση διαφόρων πλαισίων MV * που βασίζονται σε JavaScript. Σύμφωνα με τις ίδιες κατευθύνσεις, πιστεύω ότι μια εφαρμογή ιστολογίου μπορεί να αποτελέσει το tiebreaker στην επιλογή ενός νέου συστήματος υποστήριξης ή API.

Ας ξεκινήσουμε λοιπόν και δημιουργήστε ένα στο Φοίνιξ. Θα ακολουθήσουμε την προεπιλεγμένη ρύθμιση, δηλαδή το Phoenix συνδέεται με το Ecto να λειτουργεί με PostgreSQL.

Ακολουθούν οι τελικές οθόνες που θα σας δώσουν μια ιδέα για το πώς θα φαίνεται η εφαρμογή στο τέλος.

Η σελίδα προορισμού θα εμφανίσει όλα τα δημοσιευμένα ιστολόγια σε διάταξη κάρτας. Μπορείτε να κάνετε κλικ σε μια κάρτα για να δείτε τη συγκεκριμένη ανάρτηση.

Θα έχουμε έναν πίνακα ελέγχου που θα εμφανίζει τα στατιστικά στοιχεία εν συντομία. Η πρόσβαση σε αυτήν τη σελίδα απαιτεί σύνδεση χρήστη διαχειριστή.

Θα υπάρχει μια ξεχωριστή ενότητα που έχει μια επισκόπηση όλων των δημοσιεύσεων. Εδώ μπορείτε να δημοσιεύσετε / τροποποιήσετε / διαγράψετε δημοσιεύσεις.

Αυτή είναι η διάταξη του προγράμματος επεξεργασίας δημοσιεύσεων που περιλαμβάνει έναν επεξεργαστή markdown μαζί με έναν επιλογέα αρχείων για την επιλεγμένη εικόνα.

Σημείωση: Ο πλήρης κωδικός εργασίας φιλοξενείται στο 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μου δίνει αυτήν την έξοδο:

Η προβολή χωρίζεται σε τρεις λογικές ενότητες:

  1. Μπάρα πλοήγησης
  2. Πλευρική γραμμή
  3. Κυρίως περιεχόμενο

Ενώ η γραμμή πλοήγησης είναι πάντα ορατή, η πλευρική γραμμή εμφανίζεται μόνο εάν ένας χρήστης διαχειριστή είναι συνδεδεμένος. Το περιεχόμενο περιήγησης θα βρίσκεται εντός του περιβάλλοντος διαχειριστή. Οι σύνδεσμοι στην πλαϊνή μπάρα θα αυξηθούν όσο και όταν εξελίσσεται η εφαρμογή

Ο ελεγκτής Admin.Post ακολουθεί την τυπική αρχιτεκτονική CRUD και περιλαμβάνει μια ενέργεια για εναλλαγή της δημοσιευμένης κατάστασης μιας δεδομένης ανάρτησης.

Πολλά στοιχεία ελέγχου βρίσκονται στη σελίδα ευρετηρίου της ενότητας δημοσιεύσεων του διαχειριστή. Εδώ, οι δημοσιεύσεις μπορούν να διαγραφούν, να δημοσιευτούν και να τροποποιηθούν.

templates / admin / post / index.html.eex

Για να διατηρήσουμε το πρότυπο ακατάστατο, μπορούμε να ορίσουμε τους βοηθούς προβολής ευκολίας όπως τη μορφοποίηση του χρόνου κ.λπ. ξεχωριστά.

προβολές / διαχειριστής / post_view.ex

Το Arc μαζί με το arc_ecto παρέχει δυνατότητες μεταφόρτωσης αρχείων εκτός πλαισίου. Δεδομένου ότι μια ανάρτηση διαθέτει μια εικόνα εξωφύλλου, πρέπει να καθορίσουμε μια διαμόρφωση τόξου στην εφαρμογή μας.

Κάθε ανάρτηση στο ιστολόγιό μας απαιτεί δύο εκδόσεις εικόνων εξωφύλλου - πρωτότυπη που είναι ορατή σε συγκεκριμένη προβολή ανάρτησης και μια έκδοση αντίχειρα με μικρότερο αποτύπωμα για τη συμπλήρωση των καρτών. Προς το παρόν, ας πάμε με ανάλυση 250x250 για την έκδοση αντίχειρα.

Επιστρέφοντας στη σελίδα προορισμού της εφαρμογής, θα φιλοξενήσει τις κάρτες για όλες τις δημοσιευμένες δημοσιεύσεις. Και κάθε θέση θα είναι προσβάσιμη μέσω του σχηματισμένου γυμνοσάλιαγκας.

controllers/page_controller.ex

Αυτό το έργο διερευνά το Phoenix - πώς είναι δομημένη μια εφαρμογή Phoenix και πώς να αποσυναρμολογηθεί ένα έργο που βασίζεται στο Phoenix. Ελπίζω να μάθατε κάτι και να το απολαύσατε!

Η πλήρης εφαρμογή λειτουργεί στο Github: //github.com/ramansah/cms. Νιώθετε ελεύθεροι να κλωνοποιήσετε; και χειροκρότημα αν βρείτε αυτό το ιστολόγιο χρήσιμο;