Începeți să construiți blogul dvs. cu Parse.js Lucrul cu datele

Ultima dată, ați configurat un server local (XAMPP), un server web (pagina GitHub) și un server de bază de date (Parse.com). De asemenea, ați bootstrapat codul HTML al unei pagini de blog și codul de bază Parse.js încorporat pentru a vă conecta la baza de date. În această sesiune, vă voi învăța cum să creați, să preluați și să redați primul obiect.

Dacă poți purta folosind Parse.com ca panoul de administrare, poți crea cu ușurință portofolii, bloguri, pagini de destinație etc. pentru tine după ce ai învățat această sesiune.

Conceptul unei clase și al unei instanțe

Înainte de a ne scufunda în baza de cod și de a face acest lucru, permiteți-mi să vă asigur că sunteți familiarizat cu clasele și instanțele. Din nou, nu ezitați să renunțați la această parte dacă sunteți familiarizați cu aceste concepte.

Potrivit Wikipedia:

O clasă este un "program extensibil de cod-șablon pentru crearea obiectelor, oferind valori inițiale pentru variabilele de stat și implementări ale comportamentului (funcții membre, metode)" și "când un obiect este creat de un constructor al clasei, obiectul rezultat se numește o instanță a clasei. "  

Dacă aceste definiții sunt prea abstracte pentru dvs., hai să le punem în contextul unui blog. 

O clasă de blog

Gândiți-vă la componentele comune ale tuturor blogurilor. Probabil fiecare are un titlu, un autor, o pagină de conținut, un timp în care sunt create etc. Atributele comune vor face un șablon comun pentru toate blogurile pe care le avem, astfel încât clasa Blog:

O instanță a blogului

Și când avem Blog clasa, fiecare blog specific care se potrivește cu acest șablon ar fi o instanță a Blog clasă:

Pentru a vă ajuta să identificați când ne referim la Blog și atunci când ne referim la un anumit blog, întotdeauna vom capitaliza prima literă a unei clase. Deci, "blog" pentru clasa de blog și "blog" pentru un exemplu de blog. Această regulă se aplică atât acestui articol tutorial cât și codului JavaScript pe care îl veți scrie.

De asemenea, veți observa că pe Parse.com veți vedea foarte mult cuvântul "obiect". În acest context, vom folosi regula de scriere a majusculelor și vom folosi cuvântul "obiect" și "Obiect" pentru clasă. În curând vă veți obișnui cu asta.

Un tabel de blog

Deoarece o clasă definește toate atributele pe care le are instanțele, este ușor să stocați toate instanțele unei clase date într-un singur tabel: fiecare atribut ar fi o coloană și fiecare instanță ar fi un rând:

Și exact așa cum veți păstra datele pe Parse.com

Creați Clasa Blog

Acum să mergem mai departe și să o creăm pe Parse.com.

Pasul 1: Adăugați o clasă de blog

Mai întâi, du-te la tabloul de bord pe Parse.com, găsiți proiectul și mergeți la "Core" - "Data" (anterior Browser de date). Apoi, dați clic pe "Adăugați o clasă".

După cum puteți vedea în captura de ecran, trebuie să creați o clasă personalizată pentru blogurile dvs. Să spunem asta Blog. Întotdeauna doriți ca numele dvs. de clasă să fie clare și să spuneți ce stochează.

Și după cum puteți vedea, acum aveți o clasă personalizată goală pe Parse.com:

Fiecare clasă personalizată ar avea patru atribute ale sistemului:

• objectId - un identificator unic generat automat de Parse atunci când este creat un obiect nou. În acest fel, programul cunoaște întotdeauna obiectul la care te referi. (După cum puteți vedea, aici, obiectul reprezintă doar un exemplu.)
• creat la - o marcă de timp generată automat de Parse atunci când creați pentru prima dată un obiect.
• updatedAt - un timestamp generat automat și actualizat de Parse de fiecare dată când actualizați obiectul respectiv.
• ACL - o listă de control al accesului la nivel de obiect care definește cine poate citi și scrie la acel obiect. Dacă este nedefinit, acesta este implicit la controlul accesului la nivel de clasă. Vom discuta despre aceasta în sesiunile viitoare. Poți să-l lași gol acum.

Pasul 2: Adăugați coloane în clasa Blog

Apoi, hai să mergem mai departe și să creăm coloane pentru atributele care definesc un blog. Pentru a păstra cât mai simplu posibil, să facem doar două dintre ele: titlu și conţinut.

Faceți clic pe butonul "+ Col" pentru a crea o coloană nouă. Setați tipul la "String" și denumiți-l titlu.

Repetați același proces și creați un conţinut coloana, de asemenea, setați tipul la "Şir".

Pasul 3: Adăugați câteva bloguri

Este timpul să adăugați câteva bloguri! Faceți clic pe "+ Rând"și faceți dublu clic pe elementele de titlu și de conținut pentru a adăuga conținut:

Observați că puteți introduce și sintaxă HTML în coloana de conținut. De fapt, toate coloanele de șir pot stoca corect sintaxa HTML. Cu toate acestea, nu uitați să nu o utilizați. În acest caz, coloana din titlu nu ar trebui să conțină sintaxă HTML.

După cum am menționat mai înainte, deoarece Parse.com vă permite să manipulați baza dvs. de date astfel, puteți să o utilizați în totalitate ca panou de administrare, dacă nu doriți să vă scrieți propria dvs. Și odată ce ați învățat cum să faceți aceste date pe site-ul dvs., puteți crea cu ușurință un blog dinamic sau portofoliu propriu. Trecând la următoarea parte, vă voi arăta cum să faceți asta.

Preluați datele din blog

Întoarce-te la tine blog.js fişier. Este timpul să scoateți codul de testare și să obțineți datele blogului de pe Parse.com pe site-ul dvs. web!

Mai întâi, extindeți o clasă JavaScript din clasa Blog pe Parse.com:

var Blog = Parse.Object.extend ("Blog");

Gândindu-vă la o pagină de pornire a blogului, probabil că doriți să obțineți o listă de bloguri simultan. Această listă de obiecte din aceeași clasă se numește o colecție de către Parse. Să definim, de asemenea, că:

var Blogs = Parse.Collection.extend (model: Blog);

Observați că amândouă Blog și Blog-uri sunt clase. Acestea sunt șabloanele abstracte pentru bloguri și colaționarea blogurilor. Puteți avea bloguri diferite, specifice și colecții de bloguri. Acestea sunt instanțele lor.

Deci, acum, pentru a avea o colecție reală a tuturor blogurilor pe care le-ați adăugat pe Parse.com, trebuie să creați o nouă instanță a colecțiilor de bloguri (observați că prima literă nu trebuie să fie capitalizată aici):

var blogs = Bloguri noi ();

Dacă nu specificăm nimic și doar preluăm acea colecție nouă cu date, ea va primi toate rândurile din Blog tabel implicit.

Să o luăm și să o logăm în consola:

blogs.fetch (succes: funcția (bloguri) console.log (blogs);, eroare: funcție (bloguri, eroare) console.log (eroare););

Încărcați din nou site-ul web pe serverul dvs. local și verificați-vă consola în instrumentele de dezvoltare, ar trebui să puteți vedea:

Acum aveți datele!

Afișați date pe pagina

Înainte de a afișa datele din blog pe pagină, trebuie să pregătim un șablon HTML pentru asta.

Pasul 1: Clean Up HTML

Curăță totul înăuntru .Blogul-principal și înlocuiți-l cu un container simplu:

Apoi, dacă aruncați o privire la șablonul blogului original, veți găsi structura HTML a unei singure postări poate fi simplificată astfel:

 
Un titlu
 
În timp, de către un autor
 
Unele conținut
 

Tot ce vrem este să le înlocuim cu datele din fiecare blog pe care îl avem pe Parse.com.

Pasul 2: Pregătiți șablonul Blog

Pentru a face acest lucru, trebuie mai întâi să modificăm codul HTML într-un șablon care prelucrează un obiect de date și îl modifică într-un șir de cod HTML.

Vrem ca șablonul să ia o serie de bloguri:

[title: 'Hello World', conținut: 'Primul post pe blog!' , title: 'Second Blog', conținut: '
Puteți pune HTML și în conținut.
', ...]

Și redați-l ca HTML ca acesta:

 
Salut Lume
 
În timp, de către un autor
 
Prima postare pe blog!
 
 
 
Al doilea blog
 
În timp, de către un autor
 
Puteți pune HTML și în conținut.
 

Vă voi arăta cum să utilizați handlebars.js pentru a face acest lucru în acest tutorial, dar puteți folosi și underscore.js, mustaș sau alte șabloane preferate.

Pentru a folosi handlebars.js, să o adăugăm mai întâi la index.html sub parse.js:

Apoi, hai să luăm curățatul cod HTML al unui singur post de blog și să-l punem într-un mod special

Apoi, pentru a lăsa ghidonurile să știe că unde să plasezi titlul și valoarea de conținut, trebuie să schimbi "Un titlu" titlu și "Unele conținut" la conţinut. Handlebars.js identifică conținutul din "dublu-stash"  ca variabile. 


Observați că pentru conținut folosim  în loc de doar . Acest lucru se datorează faptului că handlebars.js valorile HTML scapă în mod implicit. Folosind "triplu-stash"  păstrează toată sintaxa HTML din conținut.


Modificarea finală pe care trebuie să o faceți la # bloguri-TPL este să înfășurați șablonul de blog înăuntru #each blog / fiecare, așa că este nevoie de o serie de obiecte și le facem una câte una:


Pasul 3: Render Blogs

Acum, când avem un șablon, să ne întoarcem blog.js și face aceste bloguri pe pagină. 

Pentru a face acest lucru, veți crea o vizualizare pentru colecția de bloguri. Conceptul de vizualizare este din modelul arhitectural MVC (model-view-controller), iar Parse urmează modelul respectiv. Nu mă voi arunca în MVC aici. Știți că o instanță de vizualizare pentru o colecție de bloguri generează cod HTML pentru aceasta și gestionează toate evenimentele. Și o clasă View este șablonul abstract pentru acea instanță.

Acesta poate fi confuz pentru moment, dar ar fi mai clar atunci când vom scrie codul. Să scriem a BlogsView clasă:

var BlogsView = Parse.View.extend (template: Handlebars.compile ($ ('blogs-tpl'). html ()), render: function () var collection = blog: this.collection.toJSON ; $ el.html (această colecție););

Cum ne-am extins Blog clasa de la Parse.Object și Blog-uri clasa de la Parse.Collection, puteți extinde pur și simplu o nouă clasă de vizualizare de la Parse.View deci are toate valorile și funcțiile predefinite din Parse.

Aici șablon variabilă obțineți șablonul pe care l-am pregătit înainte. Apoi, face() funcția obține datele în this.collection, convertiți-l în format JSON, faceți-l cu șablonul ghidon și alocați-l acest lucru. $ el.

Apoi, hai să schimbăm succes apel invers blogs.fetch () pentru a crea o nouă instanță a BlogsView, a face acea instanță nouă și a pune-o în $ ( 'Principal-container') pe pagină.

succes: funcție (bloguri) var blogsView = noi BlogsView (colecție: bloguri); blogsView.render (); $ ( 'Main-container.') Html (blogsView.el).; 

Observați când creați o nouă instanță a BlogsView, treci bloguri, datele din blogurile pe care le obțineți de la serverul de parse, valoarea devine this.collection pentru face() funcţie. Și când introduceți codul HTML $ ( 'Principal-container'), utilizați valoarea de blogsView.el, care a fost conținutul acest lucru. $ el, creat de face() funcţie. (Aici blogsView. $ el = $ (blogsView.el)) Asa functioneaza modul de vizualizare a clasei si a vederii.


Acum să reîmprospătăm pagina: http: // localhost / blog /

Și funcționează! Acum puteți să-l împingeți pe pagina GitHub și să aveți un site de conținut dinamic de lucru! Dacă aveți nevoie de ceva timp pentru a modifica șablonul de blog și pentru a modifica puțin codul, puteți crea cu ușurință portofolii și alte site-uri de conținut.

Concluzie

Astăzi, ați creat prima dvs. clasă pe Parse.com. De asemenea, ați învățat cum să adăugați conținut în acea clasă pe Parse.com și cum să îl redați pe site-ul dvs. Web. Ar putea fi câteva concepte noi pentru tine, dar sunt sigur că te vei familiariza cu acele foarte curând.

În următoarea sesiune, vom începe să construim pagina de administrare pentru sistemul de bloguri. Veți crea a doua clasă - clasa Utilizator. De asemenea, veți afla cum să gestionați datele de conectare ale utilizatorilor și să creați două vizualizări noi: vizualizarea de conectare și vizualizarea bun venit. Asa ca stai bine, o multime de abilitati bune vin in calea ta.

Cred că ați putea să vă distrați cu ceea ce ați învățat în această sesiune. Anunță-mă dacă acest tutorial te-a ajutat să creezi ceva. Și, ca întotdeauna, verificați fișierul sursă dacă ați blocat și lăsați un comentariu dacă întâmpinați dificultăți de urmat.

Cod