Share
Cosa starai creandoL'ultima volta, si imposta un server locale (XAMPP), un server Web (pagina GitHub) e un server database (Parse.com). Hai anche eseguito il boot dell'HTML di una pagina del blog e incorporato il codice Parse.js di base per collegarlo al database. In questa sessione, ti insegnerò come creare, recuperare e rendere il tuo primo oggetto.
Se riesci a utilizzare Parse.com come pannello di amministrazione, puoi creare facilmente portafogli, blog, pagine di destinazione, ecc. Per te stesso dopo aver appreso questa sessione.
Prima di immergerci nel codice base e farlo accadere, assicurati che tu abbia familiarità con le classi e le istanze. Di nuovo, sentiti libero di saltare questa parte se conosci questi concetti.
Secondo Wikipedia:
Una classe è "un modello di codice programma estendibile per la creazione di oggetti, che fornisce valori iniziali per stato (variabili membro) e implementazioni di comportamento (funzioni membro, metodi);" e "quando un oggetto viene creato da un costruttore della classe, l'oggetto risultante è chiamato un'istanza della classe. "
Se quelle definizioni sono troppo astratte per te, inserirle nel contesto di un blog.
Pensa ai componenti comuni di tutti i blog. Probabilmente ognuno di essi ha un titolo, un autore, una pagina di contenuti, un tempo in cui vengono creati, ecc. Questi attributi condivisi formeranno un modello comune per tutti i blog che abbiamo, quindi la classe Blog:
E quando abbiamo il blog classe, ogni blog specifico che si adatta a questo modello sarebbe un'istanza del blog classe:
Per aiutare a identificare quando ci riferiamo al blog classe e quando ci riferiamo a un blog specifico, capitalizziamo sempre la prima lettera di una classe. Quindi "Blog" per la classe blog e "blog" per un'istanza blog. Questa regola si applica sia a questo articolo tutorial che al codice JavaScript che scriverai.
Inoltre, noterai che su Parse.com vedresti molto la parola "oggetto". In questo contesto, utilizzeremo la regola della capitalizzazione e useremo la parola "oggetto" per esempio e "Oggetto" per la classe. Presto ti abituerai.
Poiché una classe definisce tutti gli attributi delle sue istanze, è facile memorizzare tutte le istanze di una data classe in una tabella: ogni attributo sarebbe una colonna e ogni istanza sarebbe una riga:
E questo è esattamente come archiviare i dati su Parse.com
Ora andiamo avanti e creala su Parse.com.
Per prima cosa vai nella tua bacheca su Parse.com, trova il tuo progetto e vai su "Core" - "Dati" (in precedenza Data Browser). Quindi, fai clic su "Aggiungi classe".
Come puoi vedere nello screenshot, devi creare una classe personalizzata per i tuoi blog. Diamo un nome blog. Vuoi sempre che i tuoi nomi di classe siano chiari e dicano cosa memorizzano.
E come puoi vedere, ora hai un corso personalizzato vuoto su Parse.com:
Ogni classe personalizzata avrebbe quattro attributi di sistema:
Accentsconagua
objectId - un identificatore univoco generato automaticamente da Parse quando viene creato un nuovo oggetto. In questo modo, il programma riconosce sempre a quale oggetto ti stai riferendo. (Come puoi vedere, qui object significa solo istanza.)createdAt - un timestamp generato automaticamente da Parse quando crei per la prima volta un oggetto.updatedAt - un timestamp generato automaticamente e aggiornato da Parse ogni volta che si aggiorna quell'oggetto.ACL - un elenco di controllo degli accessi a livello di oggetto che definisce chi può leggere e scrivere su quell'oggetto. Se non definito, il valore predefinito è il controllo di accesso a livello di classe. Ne discuteremo nelle sessioni future. Puoi lasciarlo vuoto per ora.Successivamente, passiamo e creiamo le colonne per gli attributi che definiscono un blog. Per mantenerlo il più semplice possibile, facciamo solo due di essi: titolo e soddisfare.
Fai clic sul pulsante "+ Col" per creare una nuova colonna. Impostare il tipo su "String" e nominarlo titolo.
Ripeti lo stesso processo e crea un soddisfare colonna, imposta anche il tipo su "Stringa".
È ora di aggiungere alcuni blog! Clicca sul "+ Riga"e fai doppio clic sul titolo e sulle celle del contenuto per aggiungere alcuni contenuti:
Si noti che è anche possibile inserire la sintassi HTML nella colonna del contenuto. In effetti, tutte le colonne di stringhe possono memorizzare correttamente la sintassi HTML. Tuttavia, ricorda di non usarlo troppo. In questo caso, la colonna del titolo probabilmente non dovrebbe contenere la sintassi HTML.
Come ho detto prima, poiché Parse.com ti consente di manipolare il tuo database in questo modo, puoi utilizzarlo totalmente come pannello di amministrazione se non vuoi scriverne uno tuo. E una volta che impari come renderizzare questi dati sul tuo sito web, puoi creare facilmente un blog dinamico o un portfolio tutto tuo. Passando alla parte successiva, ti mostrerò come farlo.
Torna al tuo blog.js file. È ora di estrarre il codice di prova e ottenere i dati del blog da Parse.com sul tuo sito web!
Innanzitutto, estendi una classe JavaScript dalla classe Blog su Parse.com:
var Blog = Parse.Object.extend ("Blog");Pensando a una homepage di un blog, probabilmente vorrai ottenere una lista di blog contemporaneamente. Quell'elenco di oggetti della stessa classe è chiamato una raccolta di Parse. Definiamo anche che:
var Blogs = Parse.Collection.extend (model: Blog);
Notare che entrambi blog e Blog sono classi. Sono i modelli astratti per i blog e le raccolte di blog. Puoi avere blog diversi e specifici e raccolte di blog. Quelle sono le loro istanze.
Così ora, per avere una vera raccolta di tutti i blog che hai aggiunto su Parse.com, devi creare una nuova istanza della raccolta Blog (nota che la prima lettera non deve essere maiuscola qui):
var blogs = new Blogs ();
Se non specificiamo nulla e recuperiamo la nuova raccolta con i dati, otterremo tutte le righe nel file blog tabella per impostazione predefinita.
Prendiamo e registriamo nella console:
blogs.fetch (success: function (blog) console.log (blog);, errore: funzione (blog, errore) console.log (errore););
Carica di nuovo il sito Web sul tuo server locale e controlla la tua console nei tuoi strumenti per sviluppatori, dovresti essere in grado di vedere questo:
Ora hai i dati!
Prima di visualizzare i dati del blog sulla pagina, è necessario preparare un modello HTML per questo.
Pulisci tutto dentro .blog-principale e sostituirlo con un semplice contenitore:
Quindi, se dai un'occhiata al modello di blog originale, troverai che la struttura HTML di un singolo post può essere semplificata in questo modo:
Un titolo
Di volta in volta da un autore
Alcuni contenuti
Tutto ciò che vogliamo è sostituire il testo segnaposto con i dati di ogni blog che abbiamo su Parse.com.
Per fare ciò, abbiamo prima bisogno di cambiare l'HTML in un modello, che prende un oggetto dati e lo cambia una stringa di HTML.
Vogliamo che il modello prenda una serie di blog:
[title: 'Hello World', contenuto: 'Il primo post sul blog!' , title: "Secondo blog", contenuto: "Puoi anche inserire HTML nei contenuti.
', ...]
E renderlo come HTML come questo:
Ciao mondo
Di volta in volta da un autore
Il primo post sul blog!Secondo blog
Di volta in volta da un autore
Puoi anche inserire HTML nei contenuti.
Ti mostrerò come utilizzare handlebars.js per farlo in questo tutorial, ma puoi anche utilizzare underscore.js, baffi o altri modelli che preferisci.
Per poter usare handlebars.js, aggiungiamolo prima al index.html sotto parse.js:
Quindi, prendiamo l'HTML ripulito da un singolo post del blog e lo inseriamo in uno speciale Quindi, per consentire al manubrio di sapere dove collocare il titolo e il valore del contenuto, è necessario modificare "Un titolo" in Si noti che per il contenuto, usiamo Il cambiamento finale che devi fare al Ora che abbiamo un modello, torniamo a Per fare ciò, creerai una vista per la raccolta di blog. Il concetto di una vista proviene dal modello architettonico MVC (model-view-controller) e Parse segue tale schema. Non mi tufferò in MVC qui. Sappi solo che un'istanza di visualizzazione per una raccolta di blog genera HTML per esso e gestisce tutti i suoi eventi. E una classe View è il modello astratto per quell'istanza. Può essere fonte di confusione per ora, ma sarebbe più chiaro mentre scriviamo il codice. Scriviamo a Come come abbiamo esteso Qui, il Quindi, cambiamo il Notare quando si crea una nuova istanza di BlogsView, si passa Ora aggiorniamo la pagina: http: // localhost / blog / E sta funzionando! Ora puoi semplicemente inviarlo alla tua pagina GitHub e avere un sito di lavoro con contenuti dinamici! Se ti prendi un po 'di tempo per cambiare il modello del blog e modificare leggermente il codice, puoi creare facilmente portafogli e altri siti Web di contenuti. Oggi hai creato la tua prima lezione su Parse.com. Hai anche imparato come aggiungere contenuti in quella classe su Parse.com e come renderlo sul tuo sito web. Potrebbero esserci molti nuovi concetti per te, ma sono sicuro che ti familiarizzeranno con quelli molto presto. Nella prossima sessione, inizieremo a creare la pagina di amministrazione per il sistema del blog. Creerai la tua seconda classe - la classe User. Imparerai anche come gestire l'accesso utente e creerai due nuove viste: vista di accesso e visualizzazione di benvenuto. Quindi rimanete sintonizzati, molte buone capacità stanno arrivando. Penso che voi ragazzi potreste divertirvi molto con quello che avete imparato in questa sessione. Fammi sapere se questo tutorial ti ha aiutato a creare qualcosa. E come sempre, controlla il file sorgente se ti sei bloccato e lascia un commento se incontri difficoltà nel seguire.titolo e "Alcuni contenuti" a soddisfare. Handlebars.js identifica il contenuto all'interno di "double-stash" come variabili. invece di solo . Questo perché handlebars.js HTML-fugge i valori per impostazione predefinita. Utilizzo di "triple-stash" mantiene tutta la sintassi HTML nel contenuto.# blog-tpl è quello di avvolgere il modello del blog all'interno #each blog / each, quindi accetta una serie di oggetti e li rende uno a uno:Passaggio 3: Renderizza blog
blog.js e rendere quei blog sulla pagina. BlogsView classe:var BlogsView = Parse.View.extend (template: Handlebars.compile ($ ('# blog-tpl'). html ()), render: function () var collection = blog: this.collection.toJSON () ; this. $ el.html (this.template (collection)););blog classe da Parse.Object e Blog classe da Parse.Collection, puoi semplicemente estendere una nuova classe View da Parse.View quindi ha tutti i valori e le funzioni predefiniti da Parse.modello variabile prendi il modello che abbiamo preparato prima. Poi il render () funzione ottenere i dati in this.collection, convertirlo in formato JSON, renderlo con il modello di manubri e assegnarlo a questo. $ el.successo callback di blogs.fetch () per creare una nuova istanza di BlogsView, eseguire il rendering della nuova istanza e inserirla in $ ( 'Main-container') sulla pagina.success: function (blogs) var blogsView = new BlogsView (collezione: blog); blogsView.render (); $ ( 'Main-contenitore.') Html (blogsView.el).;
blog, i dati dei blog che ottieni dal server Parse, quel valore diventa this.collection per il render () funzione. E quando inserisci l'HTML $ ( 'Main-container'), usi il valore di blogsView.el, quale era il contenuto di questo. $ el, creato dal render () funzione. (Qui blogView. $ el = $ (blogsView.el)) Ecco come funziona la classe View e l'istanza di visualizzazione.
Conclusione
