Kom deg i gang med å bygge bloggen din med Parse.js Arbeide med data

Sist gang oppretter du en lokal server (XAMPP), en webserver (GitHub-side) og en databaseserver (Parse.com). Du har også bootstrapped HTML-en av en bloggside og innebygd grunnleggende Parse.js-kode for å koble til databasen. I denne sesjonen vil jeg lære deg hvordan du lager, henter og gjengir ditt første objekt.

Hvis du kan bære ved å bruke Parse.com som administrasjonspanel, kan du enkelt lage porteføljer, blogger, destinasjonssider, etc. for deg selv etter å ha lest denne sesjonen..

Konseptet av en klasse og en instans

Før vi dykker inn i koden, og gjør det skje, la meg sørge for at du er kjent med klasser og forekomster. Igjen, vær så snill å hoppe over denne delen hvis du er kjent med disse konseptene.

Ifølge Wikipedia:

En klasse er "en utvidbar programkode-mal for å skape objekter, og gir initialverdier for tilstand (medlemsvariabler) og implementeringer av oppførsel (medlemsfunksjoner, metoder);" og "når en objekt er opprettet av en konstruktør av klassen, Det resulterende objektet kalles en forekomst av klassen. "  

Hvis disse definisjonene er for abstrakte for deg, la oss sette dem i sammenheng med en blogg. 

En blogg klasse

Tenk på de vanlige komponentene i alle bloggene. De har sannsynligvis alle en tittel, en forfatter, en innholdsside, en tid de er opprettet, etc. De delte attributter vil lage en felles mal for alle bloggene vi har, og dermed blogglassen:

En blogginstans

Og når vi har bloggen klasse, vil hver bestemt blogg som passer til denne malen være en forekomst av bloggen klasse:

For å hjelpe til med å identifisere når vi henviser til bloggen klasse og når vi refererer til en bestemt blogg, kapitaliserer vi alltid den første bokstaven i en klasse. Så "Blogg" for bloggklassen og "bloggen" for en blogginstans. Denne regelen gjelder både denne opplæringsartikkelen og JavaScript-koden du skal skrive.

Også, du vil legge merke til at på Parse.com, ville du se ordet "objekt" mye. I denne sammenheng vil vi benytte kapitaliseringsregelen og bruke ordet "objekt" for eksempel og "Objekt" for klassen. Du blir snart vant til det.

En blogg tabell

Fordi en klasse definerer alle attributter sine forekomster har, er det enkelt å lagre alle forekomster av en gitt klasse i ett bord: hvert attributt ville være en kolonne, og hver forekomst ville være en rad:

Og dette er akkurat hvordan du skal lagre data på Parse.com

Lag Blog Class

La oss nå gå videre og lage det på Parse.com.

Trinn 1: Legg til en blogg klasse

Gå først til dashbordet på Parse.com, finn prosjektet ditt og gå til "Core" - "Data" (tidligere Data Browser). Deretter klikker du på «Legg til klasse».

Som du kan se i skjermbildet, må du opprette en egendefinert klasse for bloggene dine. La oss nevne det bloggen. Du vil alltid at klassenavnene dine skal være krystallklare og si hva de lagrer.

Og som du kan se, har du nå en tom tilpasset klasse på Parse.com:

Hver tilpasset klasse vil ha fire systemattributter:

• objectId - en unik identifikator som automatisk genereres av Parse når et nytt objekt blir opprettet. På den måten vet programmet alltid hvilken gjenstand du refererer til. (Som du kan se, er objektet bare et eksempel.)
• createdAt - en tidsstempel generert automatisk av Parse når du først lager et objekt.
• updatedAt - en tidsstempel genereres automatisk og oppdateres av Parse hver gang du oppdaterer objektet.
• ACL - en objektnivå tilgangskontroll liste som definerer hvem som kan lese fra og skrive til den objekten. Hvis den ikke er definert, er den standard på tilgangskontroll på klassenivå. Vi vil diskutere det i fremtidige sesjoner. Du kan bare la den stå tom for nå.

Trinn 2: Legg til kolonner i blogglassen

Deretter la vi gå videre og lage kolonner for attributter som definerer en blogg. For å holde det så enkelt som mulig, la oss bare gjøre to av dem: tittel og innhold.

Klikk på "+ Col" -knappen for å opprette en ny kolonne. Sett typen til "String" og gi den navnet tittel.

Gjenta den samme prosessen og opprett en innhold kolonne, angi også typen til "string".

Trinn 3: Legg til noen blogger

Tid til å legge til noen blogger! Klikk på "+ Rad"og dobbeltklikk på tittel- og innholdscellene for å legge til noe innhold:

Legg merke til at du også kan sette HTML-syntaks i innholdskolonnen. Faktisk kan alle strengkolonner lagre HTML-syntaks riktig. Husk imidlertid ikke å bruke den over. I dette tilfellet bør tittelkolonnen sannsynligvis ikke inneholde HTML-syntaks.

Som jeg nevnte tidligere, fordi Parse.com lar deg manipulere databasen din slik, kan du helt bruke den som administrasjonspanel hvis du ikke vil skrive din egen. Og når du lærer å gjengjøre dataene på nettstedet ditt, kan du enkelt lage en dynamisk blogg eller egenportefølje. Fortsett til neste del, jeg vil vise deg hvordan du gjør det.

Hent bloggdata

Gå tilbake til din blog.js fil. Det er på tide å ta ut testkoden og få disse bloggdataene fra Parse.com til nettstedet ditt!

Først utvider du en JavaScript-klasse fra Blog-klassen på Parse.com:

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

Å tenke på en blogg hjemmeside, vil du sannsynligvis få en liste over blogger på en gang. Den listen over objekter av samme klasse kalles en samling av Parse. La oss også definere at:

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

Legg merke til at begge bloggen og blogger er klasser. De er de abstrakte malene for blogger og samlinger av blogger. Du kan ha forskjellige, spesifikke blogger og samlinger av blogger. Det er deres tilfeller.

Så nå, for å kunne få en ekte samling av alle bloggene du la til på Parse.com, må du opprette en ny forekomst av Blogs-samling (merk at første bokstaven ikke skal aktiveres her):

var blogs = nye blogger ();

Hvis vi ikke spesifiserer noe og bare henter den nye samlingen med data, vil den få alle rader i bloggen tabellen som standard.

La oss hente og logge den inn i konsollen:

blogs.fetch (suksess: funksjon (blogger) console.log (blogger);, feil: funksjon (blogger, feil) console.log (error););

Last inn nettstedet på den lokale serveren din igjen, og kontroller konsollen i utviklerverktøyene dine. Du bør kunne se dette:

Nå har du dataene!

Vis data på siden

Før vi viser bloggdataene på siden, må vi lage en HTML-mal for det.

Trinn 1: Oppryd HTML

Ryd opp alt innenfor .blog-hoved og erstatt det med en enkel beholder:

Så, hvis du tar en titt på den opprinnelige bloggmalen, finner du HTML-strukturen i ett enkelt innlegg, kan forenkles slik:

 
En tittel
 
På tid av en forfatter
 
Noen innhold
 

Alt vi vil, er å erstatte den plassholderteksten med dataene til hver blogg vi har på Parse.com.

Trinn 2: Klargjør Blogg-mal

For å gjøre det, må vi først endre HTML-en til en mal, som tar et dataobjekt og endrer det en streng med HTML.

Vi vil at malen skal ta en rekke blogger:

[title: 'Hello World', innhold: 'Det første blogginnlegget!' , title: 'Second Blog', innhold: '
Du kan også sette HTML i innhold.
', ...]

Og gjør det som HTML slik:

 
Hei Verden
 
På tid av en forfatter
 
Det første blogginnlegget!
 
 
 
Second Blog
 
På tid av en forfatter
 
Du kan også sette HTML i innhold.
 

Jeg vil vise deg hvordan du bruker handlebars.js for å gjøre det i denne opplæringen, men du kan også bruke underscore.js, bart eller andre maler du foretrekker.

For å kunne bruke handlebars.js, la oss først legge den til i index.html under parse.js:

Så la oss ta den rydde opp HTML av et enkelt blogginnlegg og sette det i en spesiell

Neste, for å la styrer vet at hvor du skal sette tittel og innholdsverdien, må du endre "En tittel" til tittel og "noe innhold" til innhold. Handlebars.js identifiserer innholdet i "double-stash"  som variabler. 


Legg merke til at for innhold, bruker vi  i stedet for bare . Det er fordi manuelt HTML-rømmer som standard. Ved å bruke "triple-stash"  holder hele HTML-syntaksen i innholdet.


Den siste endringen du må gjøre til # blogger-tpl er å pakke inn bloggen i #each blog / each, så det tar i en rekke objekter og gjør dem en etter en:


Trinn 3: Render blogger

Nå som vi har en mal, la oss gå tilbake til blog.js og gjør disse bloggene på siden. 

For å gjøre det, vil du opprette en visning for blogginnsamlingen. Konseptet med en visning er fra MVC (modell-visning-kontrolleren) arkitektonisk mønster, og Parse følger dette mønsteret. Jeg vil ikke dykke inn i MVC her. Bare vis at et visningseksempel for en blogginnsamling genererer HTML for det og håndterer alle hendelsene. Og en visningsklasse er den abstrakte mal for den forekomsten.

Det kan være forvirrende for nå, men det ville være tydeligere når vi skriver koden. La oss skrive en BlogsView klasse:

var BlogsView = Parse.View.extend (mal: Handlebars.compile ($ ('# blogs-tpl'). html ()), gjengi: funksjon () var collection = blog: this.collection.toJSON ; dette. $ el.html (this.template (samling)););

Som hvordan vi utvidet bloggen klasse fra Parse.Object og blogger klasse fra Parse.Collection, Du kan ganske enkelt utvide en ny visningsklasse fra Parse.View så den har alle forhåndsdefinerte verdier og funksjoner fra Parse.

Her, den mal variabel får malen vi forberedte før. Og så render () funksjonen få dataene i this.collection, konvertere det til JSON-format, gjør det med håndtaksmalen, og tilordne det til dette. $ el.

Neste, la oss endre suksess tilbakeringing av blogs.fetch () å opprette en ny forekomst av BlogsView, gjeng den nye forekomsten og sett den i $ ( 'Main-container') på siden.

suksess: funksjon (blogger) var blogsView = new BlogsView (samling: blogger); blogsView.render (); $ ( 'Hoved-beholder.') Html (blogsView.el.); 

Legg merke til når du oppretter en ny forekomst av BlogsView, passerer du inn blogger, bloggen dataene du får fra Parse server, blir verdien this.collection for render () funksjon. Og når du legger inn HTML-en $ ( 'Main-container'), du bruker verdien av blogsView.el, som var innholdet av dette. $ el, laget av render () funksjon. (Her blogsView. $ el = $ (blogsView.el)) Slik fungerer Vis-klassen og visningseksemplet.


La oss nå oppdatere siden: http: // localhost / blog /

Og det virker! Nå kan du bare trykke den på GitHub-siden din og ha et fungerende dynamisk innholdsside! Hvis du tar litt tid til å endre bloggmalen og endre koden litt, kan du enkelt lage porteføljer og andre innholdswebsteder.

Konklusjon

I dag har du opprettet din første klasse på Parse.com. Du lærte også hvordan du legger til innhold i denne klassen på Parse.com og hvordan du gjør det på nettstedet ditt. Det kan være ganske mange nye konsepter for deg, men jeg er sikker på at du vil bli kjent med dem veldig snart.

I neste sesjon vil vi begynne å bygge admin siden for blogg systemet. Du vil opprette din andre klasse - brukerklassen. Du vil også lære å håndtere brukerinnlogging, og opprette to nye visninger: innloggingsvisning og velkomstvisning. Så hold deg innstilt, mange gode ferdigheter kommer deg.

Jeg tror dere kunne ha det gøy med det du har lært i denne økten. Gi meg beskjed om denne opplæringen hjalp deg med å lage noe. Og som alltid, sjekk kildefilen hvis du sitter fast og la en kommentar hvis du møter eventuelle problemer som følger med.

Kode