Τα τελευταία χρόνια, η ανάπτυξη ενός υπόλοιπου API για το WordPress έχει ανοίξει νέες πόρτες για τους προγραμματιστές. Οι προγραμματιστές που είχαν περιοριστεί στο παρελθόν στη σύνταξη ενός έργου που τροφοδοτείται από το WordPress στο PHP τώρα έχει μεγαλύτερη ευελιξία και έλεγχο του τρόπου με τον οποίο μπορούν να προσεγγίσουν την τεχνολογική στοίβα της ιστοσελίδας τους.
Αυτό σημαίνει ότι είναι δυνατό να διατηρηθούν όλα τα πλεονεκτήματα του λαμπρού πίνακα ελέγχου Wordpress, η οποία γίνεται εξαιρετικά ευέλικτη από τη δημοφιλή Plugins wordpress Όπως τα προηγμένα προσαρμοσμένα πεδία και έχετε ένα εντελώς προσαρμοσμένο μετωπικό μέτωπο που αλληλεπιδρά μόνο με το WordPress όταν χρειάζεται.
Σε αυτό Wordpress tutorial Θα εξερευνήσουμε τον τρόπο εφαρμογής του API του WordPress Rest σε μια απλή εφαρμογή blog, η οποία χρησιμοποιεί αυτήν τη στιγμή ένα τοπικό αρχείο JSON ως πηγή δεδομένων και είναι κατασκευασμένη ως εφαρμογή μιας σελίδας (SPA) χρησιμοποιώντας το δημοφιλές πλαίσιο JavaScript Vue.js . Αυτό θα περιλαμβάνει την εφαρμογή του Vuex, την οποία θα χρησιμοποιήσουμε για την αποθήκευση των δεδομένων που ζητάμε από ένα wordpress χρησιμοποιώντας ένα συνδυασμό των μεθόδων δράσης και μετάλλαξης.
Μόλις ολοκληρωθεί, θα έπρεπε να έχετε δημιουργήσει ένα άπαχο, απλό σπα, το οποίο έχει όλη την αντιδραστικότητα του vue.js, ενώ εμφανίζει αναρτήσεις που ανακτώνται και διαχειρίζονται από το WordPress.
Για πιο φοβερό API για να εξερευνήσετε, ρίξτε μια ματιά στους οδηγούς μας στο καλύτερο Javascript apis , Html apis και Apis google .
Πρώτα πράγματα πρώτα, θα πρέπει Κατεβάστε τα αρχεία του έργου και να τα ανοίξετε στον προτιμώμενο επεξεργαστή σας.
Στην κονσόλα, CD σε Ιστοσελίδα-πρότυπο και εκτελέστε την παρακάτω εντολή για να εγκαταστήσετε τις εξαρτήσεις κόμβων του έργου (αν δεν έχετε εγκατεστημένο κόμβο, Κάνετε αυτό πρώτα ). Θα δουλέψουμε καθαρά στο src Κατάλογος από εδώ έξω.
npm install
Στη συνέχεια, χρησιμοποιώντας την παρακάτω εντολή, θα εγκαταστήσουμε Vuex , το οποίο είναι ένα πρότυπο κατάστασης διαχείρισης και βιβλιοθήκη για εφαρμογές vue.js. Αυτό θα λειτουργήσει ως κεντρικό κατάστημα πληροφοριών για όλα τα στοιχεία του vue που εξαρτώνται από τα δεδομένα που λαμβάνουμε από το API WordPress. Για τους προγραμματιστές εξοικειωμένοι με την αντίδραση, ο Vuex εμπνέεται έντονα από τη ροή.
npm install vuex --save
Στην κονσόλα, εκτελέστε την παρακάτω εντολή για να ξεκινήσετε τον διακομιστή ανάπτυξης. Αυτό θα συγκεντρώσει το έργο vue.js όπως αυτή τη στιγμή βρίσκεται και το αναθέτει σε μια διεύθυνση URL, ώστε να μπορείτε να έχετε πρόσβαση σε αυτό. Αυτό είναι συνήθως localhost: 8080 .
Ένα μεγάλο πλεονέκτημα που φέρνει ότι είναι ζωντανή επαναφόρτωση, οπότε μόλις κάνετε αλλαγές στην εφαρμογή και να αποθηκεύσετε, η σελίδα στο πρόγραμμα περιήγησής σας θα ενημερώσει τον εαυτό του χωρίς την ανάγκη χειροκίνητης επαναφόρτωσης.
npm run dev
Σε src , δημιουργήστε έναν κατάλογο που ονομάζεται κατάστημα και μέσα σε αυτό ένα νέο αρχείο που ονομάζεται index.js . Αυτό θα είναι όπου θα καθοριστεί το κατάστημα Vuex. Αν και πριν φτάσουμε σε αυτό, πρέπει πρώτα να βεβαιωθούμε ότι η εφαρμογή μας Vue.js έχει επίγνωση της ύπαρξής της. Για να το κάνετε αυτό, ανοίξτε main.js και να εισάγετε το κατάστημα και να το συμπεριλάβετε ως εξάρτηση, όπως στο απόσπασμα παρακάτω.
Εισαγωγή VUE από το «VUE»
Εισαγωγή εφαρμογής από το './App'
Εισαγωγή δρομολογητή από το './ROUTER'
Εισαγωγή αποθήκευσης από το './store'
Vue.config.productionTip = false
/ * απενεργοποιήστε το ESlint No-New * /
Νέο vue ({
EL: '# #APP',
δρομολογητής,
κατάστημα,
Πρότυπο: '& lt; app / & gt;',
Εξαρτήματα: {app}
})
Για να μας βοηθήσετε να απλοποιήσουμε τα αιτήματα AJAX, το κατάστημά μας θα κάνει το API WordPress, θα εγκαταστήσουμε τον Αξιό, το οποίο είναι ένας πελάτης HTTP που βασίζεται σε υπόσχεση. Για να το κάνετε αυτό, ανοίξτε ένα ξεχωριστό παράθυρο κονσόλας, μεταβείτε στο Ιστοσελίδα-πρότυπο Κατάλογος και εκτέλεση NPM εγκατάσταση axios - Αποθήκευση .
Στη συνέχεια, ας αρχίσουμε να ικρίωσε το κατάστημα με την αύξηση ενός νέου άδειου αντικειμένου αποθήκευσης Vuex. Αυτή τη στιγμή, δεν κάνει τίποτα, αλλά τουλάχιστον το Vue θα πρέπει να το γνωρίζει.
Εισαγωγή Αξιού από το «Αξιού»
Εισαγωγή VUE από το 'VUE'
Εισαγωγή vuex από το 'Vuex'
Vue.use (vuex)
const store = new vuex.store ({
κατάσταση: {},
Ενέργειες: {},
μεταλλάξεις: {}
})
Εξαγωγή προεπιλεγμένου καταστήματος
Στο Vuex, το κράτος αντικείμενο κρατά πληροφορίες εφαρμογών, η οποία σε αυτή την περίπτωση θα είναι τα δεδομένα WordPress Post θα πάμε με το API. Μέσα σε αυτό το αντικείμενο, δημιουργήστε μια νέα ιδιοκτησία που ονομάζεται δημοσιεύσεις και την εκχωρήστε μια τιμή μηδέν.
Κράτος: {
Δημοσιεύσεις: Null
}
Στο Vuex, οι δράσεις είναι ο κύριος τρόπος με τον οποίο χειρίζονται τα ασύγχρονα αιτήματα. Αυτές είναι συνήθως μέθοδοι που ορίζονται στο κατάστημα, οι οποίες στη συνέχεια μπορούν να αποσταλούν όπως απαιτείται από την εφαρμογή.
Σε άδειο Ενέργειες Αντικείμενο, ας ορίσουμε ένα από το οποίο εάν η κατάσταση των δημοσιεύσεών μας εξακολουθεί να είναι μηδενική, ο Αξιός χρησιμοποιείται για να εκτελέσει ένα αίτημα Ajax στο API WordPress και να επιστρέψει μια λίστα μηνυμάτων. Μόλις λάβουμε μια θετική απάντηση, θα επιλύσουμε τότε την υπόσχεση και θα διαπράττουμε τις θέσεις χρησιμοποιώντας το αποθήκες μετάλλαξη.
GetPosts: λειτουργία (πλαίσιο) {
Επιστρέψτε τη νέα υπόσχεση ((αποφασιστικότητα, απορρίψτε) = & gt; {
αν (context.state.posts) {
αποφασίζω()
}
αλλιώς {
axios.get ('http://lukeharrison.net/
WebDesigner / WP-JSON / WP / V2 / POSTS ')
.Then ((απάντηση) = & gt; {
Control.commit ('Storeposts',
απάντηση.Data)
αποφασίζω()
}). Catch ((σφάλμα) = & GT; {
απόρριψη (σφάλμα).
});
}
})
}
Μια άλλη ιδέα που εισάγεται από το Vuex είναι μεταλλάξεις, οι οποίες είναι επίσης συνήθως μέθοδοι που ορίζονται στο κατάστημα. Οι μεταλλάξεις είναι ο μόνος τρόπος αλλαγής της κατάστασης σε ένα κατάστημα Vuex, το οποίο επιτρέπει την εύκολη παρακολούθηση της κατάστασης κατά την αποσφαλμάτωση.
Σε άδειο μεταλλάξεις αντικείμενο, ας ορίσουμε το αποθήκες Μέθοδος που αναφέραμε στο προηγούμενο βήμα και την καθιστούσαμε να παρακάμψει τη θέση ιδιοκτησίας στο κράτος αντικείμενο με οποιαδήποτε δεδομένα, η μετάλλαξη λαμβάνει ως ωφέλιμο φορτίο.
Storeposts (κατάσταση, απάντηση) {
State.Posts = απάντηση}
Δημιουργήσαμε τις μεθόδους δράσης και μετάλλαξης που αρπάζουν τις δημοσιεύσεις από το API WordPress και τους διαπράττονται στο κράτος Vuex, αλλά τώρα πρέπει να ενεργοποιήσουμε πραγματικά αυτή τη διαδικασία κάπου. Στο ανώτατο επίπεδο VUE.JS App.vue , προσθέστε το απόσπασμα παρακάτω.
δημιουργήθηκε () είναι ένα γάντζο κύκνου ζωής που ενεργοποιεί τον κώδικα μόλις δημιουργηθεί το στοιχείο Vue στο φορτίο, ενώ η χρήση του παγκόσμιου $ κατάστημα Η μεταβλητή μας επιτρέπει να έχουμε πρόσβαση στα περιεχόμενα του καταστήματος Vuex και να αποστέλλουμε το getposts δράση από το βήμα 7.
Δημιουργήθηκε () {
αυτό. $ store.Dispatch ('getposts')}
Εάν εργάζεστε στο Chrome ή στο Firefox και έχετε το Vue.js devtools επέκταση (Εάν όχι, συνιστώ να κάνετε όπως είναι πολύ χρήσιμο), θα πρέπει τώρα να μπορείτε να δείτε τις φορτωμένες θέσεις WordPress In Κατάσταση βάσης σύμφωνα με το Vuex αυτί.
Επιστροφή στην εφαρμογή, στο /components/posts/posts.vue , το πρότυπο HTML πρέπει να επισημάνει αυτά τα δεδομένα, οπότε ας τσιμπήσουμε μερικές από τις διαδρομές χαρακτηριστικών.
Διακόπτης 'post.title' στο 'post.title.rendered'
Διακόπτης 'post.preview' σε 'post.acf.preview'
Διακόπτης 'Post.Previewimage' στο 'post.acf.header_image_small'
Στο στοιχείο Δημοσίευση στοιχείων, υπάρχει μια οδηγία VUE.js κατά τη χρήση που ονομάζεται v-για . Αυτός ο βρόχος μέσω όλων των δημοσιεύσεων και για το καθένα εκτυπώνει μια περίπτωση του Post Component, εμφανίζοντάς τα σε μια λίστα.
Πρέπει να ενημερώσουμε τη διαδρομή που διαβιβάστηκε στην παρούσα οδηγία, καθώς εξακολουθεί να χρησιμοποιεί τα τοπικά daty daty test. Ενημερώστε το V-για οδηγία στο απόσπασμα παρακάτω, προκειμένου να επισημάνετε τις αποθηκευμένες θέσεις μας στο κατάστημα Vuex.
V-for = "post σε αυτό. $ Store.state.posts"
Μια λίστα με τις θέσεις WordPress θα πρέπει τώρα να εμφανίζεται. Καθώς δεν χρησιμοποιούμε πλέον τα τοπικά δεδομένα μετά, ας διαγράψουμε SRC / Δεδομένα . Στη συνέχεια, στο στοιχείο Posts, αφαιρέστε το Δημοσιεύσεις: postdata.data Ακίνητα στο τοπικό κατάστημα στοιχείων στοιχείων και στη συνέχεια η εισαγωγή μετάdatata.
Μπορεί να παρατηρήσετε ότι για κάθε θέση ο συγγραφέας εμφανίζεται ως αριθμός. Αυτό συμβαίνει επειδή το API WordPress επιστρέφει ένα αναγνωριστικό συγγραφέα, αντί για ένα όνομα. Πρέπει να χρησιμοποιήσουμε αυτό το αναγνωριστικό για να αναρωτηθούμε το WordPress για τις πληροφορίες πλήρους συγγραφέα. Ας ξεκινήσουμε δημιουργώντας ένα μέρος για να αποθηκεύσετε αυτό στο κατάστημα Vuex, παράλληλα με τις πληροφορίες μας, στο Κατάστημα / Index.js .
Κράτος: {
Συγγραφείς: Null,
Δημοσιεύσεις: Null}
Όπως και με τις θέσεις, θα δημιουργήσουμε μια ενέργεια στο /Store/index.js Για να ενεργοποιήσετε ένα αίτημα AJAX για να αναρωτηθείτε το API WordPress. Μόλις ληφθεί επιτυχημένη απάντηση, η υπόσχεση θα επιλύσει και θα ενεργοποιήσει το αποθήκες μετάλλαξη, την οποία θα δημιουργήσουμε στη συνέχεια.
Getauthors: λειτουργία (πλαίσιο) {
axios.get ('http://lukeharrison.net/
WebDesigner / WP-JSON / WP / V2 / χρήστες)
.then (λειτουργία (απάντηση) {
control.commit ('storeauthors',
απάντηση.Data)
})
}
Εντός των μεταλλάξεων αντικειμένων του καταστήματος Vuex, δημιουργήστε το αποθήκες μετάλλαξη χρησιμοποιώντας το απόσπασμα παρακάτω. Όπως με αποθήκες Από το βήμα 8, αυτό παίρνει το ωφέλιμο φορτίο που περνάει και το ορίζει ως αξία του ακινήτου των συγγραφέων στην κατάσταση του καταστήματός μας.
StoreAphors (κατάσταση, απάντηση) {
State.Aesshors = απάντηση}
Πρέπει να πάρουμε τις πληροφορίες του συγγραφέα από το WordPress μόλις αρχίσει η εφαρμογή να φορτώνει. Ας τροποποιήσουμε το συστατικό του ανώτατου επιπέδου App.vue και πάλι και αποστέλλονται το getauthors δράση στο ίδιο δημιουργήθηκε () Γάντζο κύκνου ζωής ως το getposts δράση.
Δημιουργήθηκε () {
Αυτό. $ stores.Dispatch ('getauthors')
αυτό. $ store.Dispatch ('getposts')}
Τώρα είμαστε ερωτώμενοι Wordpress για πληροφορίες συγγραφέα στο φορτίο, το μόνο που πρέπει να κάνουμε είναι να ορίσετε μια μέθοδο στη συνιστώσα των δημοσιεύσεών μας που μας επιτρέπει να περάσουμε ένα αναγνωριστικό συγγραφέα και να πάρετε ένα όνομα σε αντάλλαγμα. Αντιγράψτε το απόσπασμα παρακάτω στις μεθόδους των συνιστωσών θέσεων, κάτω από τα υπάρχοντα getinglingpost μέθοδος.
GetUsername: Λειτουργία (UserID) {
VAR USERNAME = 'Άγνωστο'.
αυτό. $ store.State.
Συγγραφείς.Filter (λειτουργία (χρήστης) {
αν (χρήστης.id === userid) {
username = user.name
}
});
Επιστρέψτε το όνομα χρήστη.
}
Τώρα πρέπει απλά να καλέσουμε getusername . Ακόμα στο στοιχείο Posts, στο πρότυπο, αντικαταστήστε την αναφορά του χαρακτηριστικού του συντάκτη post.Author Έτσι αντικατοπτρίζει το απόσπασμα παρακάτω. Το όνομα του συγγραφέα θα πρέπει τώρα να εμφανίζεται σωστά για κάθε θέση.
: Συγγραφέας = "getusername (post.author)"
Καθώς φορτώνουμε τα δεδομένα που χρησιμοποιούν ασύγχρονα δεδομένα, υπάρχει μια στιγμή πριν από την ολοκλήρωση της αίτησης όπου η εφαρμογή είναι κενή. Για να αντιμετωπίσετε αυτό, θα εφαρμόσουμε μια κατάσταση φόρτωσης που είναι ενεργή μέχρι να συμπληρωθεί πλήρως το blog. Στο στοιχείο Posts, επικολλήστε το απόσπασμα κάτω από το άνοιγμα & lt; script & gt; Ετικέτα για την εισαγωγή των εικόνων που θα χρησιμοποιήσουμε.
Εισαγωγή εικονιδίου από '@ / components / icons'
Εισαγωγή φόρτωσης από './../../..
Περιουσιακά στοιχεία / img / loading.svg '
Στη συνέχεια, ακόμα μέσα στα μηνύματα, προσθέστε μια αναφορά στο εικονίδιο στα αντικείμενα εξαρτημάτων. Αυτό καθιστά τη συνιστώσα των μηνυμάτων που γνωρίζουν το πρόσφατα εισαγόμενο στοιχείο εικονιδίων.
Στοιχεία: {
εικόνισμα,
post}
Τώρα πρέπει απλώς να προσθέσουμε τα στοιχεία φόρτωσης στο πρότυπο θέσεων, ώστε να εμφανίζεται στη σελίδα. Πρώτον, τυλίξτε το δεύτερο div στο απόσπασμα γύρω από τα δύο divs με το v-αν Οδηγίες για να βεβαιωθείτε ότι δεν εμφανίζονται μηνύματα μέχρι να ολοκληρωθεί η φόρτωση.
Στη συνέχεια, προσθέστε το πρώτο div από το απόσπασμα πάνω από αυτό. Αυτό περιέχει το εικονίδιο φόρτωσης και ένα v-αν Η οδηγία, η οποία σημαίνει ότι θα είναι ορατή μόνο μέχρι το σημείο όπου η εφαρμογή είναι πλήρως φορτωμένη. Μόλις γίνει, η φόρτωση πρέπει τώρα να εφαρμοστεί.
& lt; div v-If = "αυτό, $ store.state.posts"
class = "u-leign-center" & gt;
& lt; class icon = "c-load-loading"
χρήση = "φόρτωση" & gt; / its & gt;
& lt; / div & gt;
& lt; div v-if = "αυτό. $ store.state.posts" & gt;
[...]
& lt; / div & gt;
Το μόνο που μένει να κάνει είναι να βεβαιωθείτε ότι οι μονές θέσεις ρυθμίζονται σωστά ώστε να χρησιμοποιούν τα δεδομένα του WordPress στο κατάστημα Vuex. Το πρώτο βήμα είναι να ενημερώσετε τις διαδρομές χαρακτηριστικών στο πρότυπο συνιστωσών μηνυμάτων μέσα στο V-IF = "αυτό.Type === 'single'" div, η οποία χειρίζεται την εμφάνιση μονών μηνυμάτων.
Διακόπτης 'singlepost.title' στο 'singlepost.title.rendered'
Διακόπτης 'singlepost.author' στο 'getusername (singlepost.author)'
Διακόπτης 'singlepost.fullimage' στο 'singlepost.acf.header_image'
Διακόπτης 'singlepost.Content' στο 'ένα' singlepost. Περιεχόμενο.rendered '
Πρέπει επίσης να αναγνωρίζουμε τα εξαρτήματα θέσεων getinglingpost μέθοδος. Πρέπει να επιστρέψει μια υπόσχεση που αποστέλλει το getposts δράση. Στην παρακολούθηση έπειτα Λειτουργία, θα αναζητήσουμε τις δημοσιεύσεις του Store Vuex για μια καταχώρηση με ένα γυμνοσάλιαγκας που ταιριάζει με το ένα που πέρασε στη διεύθυνση URL. Αν βρεθεί, θα αντιγράψουμε τα δεδομένα στην τοπική κατάσταση του συστατικού μας και να επιλύσουμε την υπόσχεση. Εάν δεν βρεθεί, η υπόσχεση θα απορριφθεί.
Λειτουργία: Λειτουργία () {
Επιστρέψτε τη νέα υπόσχεση
((Επιλύρωση, απορρίψτε) = & GT; {
αυτό. $ stores.Dispatch ('getposts')
.Then (() = & gt; {
var alentpost = false;
αυτό. $ store.state.posts.
Φίλτρο ((POST) = & GT; {
Αν (post.slug ===
αυτό. $ dire.params.slug) {
αυτό.singerpost = post;
Βιδώνετε = TRUE; }
});
Βιδώνετε; Επίλυση (): Απόρριψη ();
})
})
}
Στη συνέχεια, πρέπει να αναγνωρίσουμε το δημιουργήθηκε () Γάντζος κύκνου κύκνου στο στοιχείο θέσεων. Αν χρειαστεί να προβάλλετε μια μόνο θέση, το άγκιστρο θα πρέπει να καλέσει το getinglingpost Μέθοδος από το προηγούμενο βήμα και εάν η υπόσχεσή της απορριφθεί, στείλτε το χρήστη στη σελίδα που δεν βρέθηκε στη σελίδα 404 '. Αυτό αντιπροσωπεύει τα σενάρια όπου οι χρήστες εισάγουν ανύπαρκτη θέση στη διεύθυνση URL.
Δημιουργήθηκε () {
αν (αυτό.Type === 'single') {
αυτό το. Στη συνέχεια (NULL, () = & GT; {
Αυτό. $ router.push ({Όνομα: 'PAGENOTFOUND'})
});
}
}
Το τελευταίο βήμα είναι να προσθέσετε το απόσπασμα παρακάτω στο στοιχείο Post Component στο πλαίσιο του V-IF = "αυτό.Type === 'single'" div στο πρότυπο. Αυτή η οδηγία σημαίνει ότι η ανάρτηση θα εμφανίζεται μόνο όταν τα τοπικά δεδομένα μετά τη διάθεση του getinglingpost η μέθοδος κατοικείται. Αυτό είναι να σταματήσει η vue από την πρόωρη απόδοση του συστατικού και έτσι να προκαλέσει σφάλματα.
V-IF = "Μονόβιο"
Τώρα με τα πάντα που εργάζονται, στην κονσόλα, ακυρώστε το npm τρέχει dev εντολή ή ανοίξτε μια νέα κονσόλα και εκτελέστε την παρακάτω εντολή για να δημιουργήσετε μια έκδοση παραγωγής για να μεταφορτώσετε στον δικό σας διακομιστή. Αυτό θα εμφανιστεί στο μάτι Ευρετήριο.
NPM Run Build
Αυτό το άρθρο εμφανίστηκε σε εξέταση 268 του σχεδιαστή ιστοσελίδων, το Creative Web Design Magazine - προσφέροντας εκπαιδευτικά υπολογιστές, τάσεις αιχμής και δωρεάν πόρους. Εγγραφείτε στο Web Designer τώρα.
Διαβάστε περισσότερα:
Όταν μάθετε πώς να σχεδιάσετε ένα λαιμό και τους ώμους, μπορεί συχνά να είναι δύσκολο να δείξουμε τους όγ..
Έχουμε δει πολλά νέα API που προστέθηκαν στο διαδίκτυο τα τελευταία χρόνια τα τελευταία χρόνια που έχουν �..
Προσθέτοντας λεπτομέρειες στη σκηνή σας είναι πάντα ο τρόπος να πάτε ό..
Η προέλευση της μινιατούρας ζωγραφικής εκτείνεται προς τα πίσω στη με�..
Ολλανδικός post-ιμπρεσιονιστής ζωγράφος Vincent Van Gogh (1853-1890) δημιούργησε πο�..
Αφού τα αποτελέσματα έχουν κάποια ισχυρά εργαλεία που μπορούμε να χρησιμοποιήσουμε για να μιμηθούν την ..
Χρησιμοποιώντας το Unreal My Engine 4 το έργο της τελευταίας διακοπής ως παράδ..