Ga aan de slag met het bouwen van je blog met Parse.js Werken met gegevens

De laatste keer hebt u een lokale server (XAMPP), een webserver (GitHub-pagina) en een databaseserver (Parse.com) opgezet. Je hebt ook de HTML van een blogpagina en ingesloten standaardparse.js-code opgestart om te linken naar de database. In deze sessie leer ik je hoe je je eerste object kunt maken, terughalen en renderen.

Als je Parse.com kunt gebruiken als je admin-paneel, kun je gemakkelijk portefeuilles, blogs, landingspagina's, etc. maken nadat je deze sessie hebt geleerd.

Het concept van een klasse en een instantie

Voordat we in de codebasis duiken en het voor elkaar krijgen, moet ik ervoor zorgen dat u bekend bent met klassen en instanties. Nogmaals, voel je vrij om dit deel over te slaan als je bekend bent met die concepten.

Volgens Wikipedia:

Een klasse is "een uitbreidbaar programmacodemodel voor het maken van objecten, het leveren van beginwaarden voor status (lidvariabelen) en implementaties van gedrag (lidfuncties, methoden);" en "wanneer een object wordt gemaakt door een constructeur van de klasse, het resulterende object wordt een instantie van de klasse genoemd. "  

Als die definities te abstract voor je zijn, laten we ze dan in de context van een blog plaatsen. 

Een blogklasse

Denk aan de gemeenschappelijke componenten van alle blogs. Ze hebben waarschijnlijk elk een titel, een auteur, een pagina met inhoud, een tijdstip waarop ze worden gemaakt, enzovoort. Deze gedeelde kenmerken vormen een algemene sjabloon voor alle blogs die we hebben, dus de blogklasse:

Een blog-exemplaar

En wanneer we de hebben blog klasse, elke specifieke blog die bij deze sjabloon past, zou een instantie van de blog klasse:

Om te helpen identificeren wanneer we naar de blog Als we naar een specifieke blog verwijzen, zetten we altijd de eerste letter van een klasse in hoofdletters. Dus "Blog" voor de blogklasse en "blog" voor een bloginstantie. Deze regel is van toepassing op zowel dit zelfstudieartikel als op de JavaScript-code die u gaat schrijven.

Ook zul je merken dat je op Parse.com het woord "object" veel ziet. In deze context gebruiken we de hoofdrolregel en gebruiken we het woord 'object' bijvoorbeeld en 'Object' voor klasse. Je zult er snel aan wennen.

Een blogtabel

Omdat een klasse alle attributen definieert die zijn instanties hebben, is het eenvoudig om alle instanties van een bepaalde klasse op te slaan in één tabel: elk attribuut zou een kolom zijn en elke instantie zou een rij zijn:

En dit is precies hoe u gegevens gaat opslaan op Parse.com

Blogklasse maken

Laten we nu doorgaan en het maken op Parse.com.

Stap 1: een blogklasse toevoegen

Ga eerst naar je dashboard op Parse.com, zoek je project en ga naar "Core" - "Data" (voorheen Data Browser). Klik vervolgens op 'Klasse toevoegen'.

Zoals u kunt zien in de schermafbeelding, moet u een aangepaste klasse maken voor uw blogs. Laten we het een naam geven blog. Je wilt altijd dat je klasnamen glashelder zijn en zeggen wat ze opslaan.

En zoals je ziet, heb je nu een lege aangepaste les op Parse.com:

Elke aangepaste klasse heeft vier systeemattributen:

• objectId - een unieke ID die automatisch wordt gegenereerd door Ontleden wanneer een nieuw object wordt gemaakt. Op die manier weet het programma altijd naar welk object u verwijst. (Zoals u kunt zien, hier is het object slechts een gemiddelde instantie.)
• gemaakt bij - een tijdstempel die automatisch wordt gegenereerd door Ontleden wanneer u voor het eerst een object maakt.
• updatedAt - een tijdstempel die door Parse automatisch wordt gegenereerd en bijgewerkt telkens wanneer u dat object bijwerkt.
• ACL - een toegangscontrole op objectniveau Lijst die bepaalt wie kan lezen van en naar dat object kan schrijven. Als deze ongedefinieerd is, is deze standaard ingesteld op toegangsbeheer op klasseniveau. We zullen het in toekomstige sessies bespreken. Je kunt het nu gewoon leeg laten.

Stap 2: Kolommen aan de blogklasse toevoegen

Laten we vervolgens verder gaan en kolommen maken voor de kenmerken die een blog definiëren. Om het zo eenvoudig mogelijk te houden, laten we er maar twee doen: titel en inhoud.

Klik op de knop "+ Kol" om een ​​nieuwe kolom te maken. Stel het type in op "String" en geef het een naam titel.

Herhaal hetzelfde proces en maak een inhoud kolom, stel ook het type in op "Draad".

Stap 3: voeg een aantal blogs toe

Tijd om wat blogs toe te voegen! Klik op de "+ Rij"knop en dubbelklik op de titel en inhoudscellen om wat inhoud toe te voegen:

U kunt ook HTML-syntaxis in de inhoudskolom plaatsen. In feite kunnen alle tekenreekskolommen de HTML-syntax correct opslaan. Vergeet echter niet om het te veel te gebruiken. In dit geval mag de titelkolom waarschijnlijk geen HTML-syntaxis bevatten.

Zoals ik al eerder zei, omdat Parse.com je in staat stelt om je database op deze manier te manipuleren, kun je deze volledig gebruiken als je admin panel als je niet je eigen wilt schrijven. En als u eenmaal weet hoe u die gegevens op uw website kunt weergeven, kunt u eenvoudig een dynamische blog of een eigen portfolio maken. Ga door naar het volgende deel, ik zal je laten zien hoe je dat moet doen.

Ophalen van bloggegevens

Ga terug naar jouw blog.js het dossier. Het is tijd om de testcode af te sluiten en die bloggegevens van Parse.com naar uw website te halen!

Breid eerst een JavaScript-klasse uit van de blogklasse op Parse.com:

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

Als u aan een startpagina van een blog denkt, wilt u waarschijnlijk een lijst met blogs tegelijk bekijken. Die lijst met objecten van dezelfde klasse wordt door Parse een verzameling genoemd. Laten we ook definiëren dat:

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

Merk op dat beide blog en blogs zijn klassen. Het zijn de abstracte sjablonen voor blogs en collaties van blogs. U kunt verschillende, specifieke blogs en verzamelingen blogs hebben. Dat zijn hun instanties.

Dus nu, om een ​​echte verzameling van alle blogs die je op Parse.com hebt toegevoegd, te hebben, moet je een nieuw exemplaar van de Blogs-collectie maken (merk op dat de eerste letter hier niet met een hoofdletter moet worden geplaatst):

var blogs = nieuwe blogs ();

Als we niets opgeven en alleen die nieuwe verzameling met gegevens ophalen, krijgt het alle rijen in de blog tafel standaard.

Laten we het ophalen en aanmelden bij de console:

blogs.fetch (succes: functie (blogs) console.log (blogs);, fout: functie (blogs, fout) console.log (error););

Laad de website opnieuw op uw lokale server en controleer uw console in uw ontwikkelaarstools. Dit zou u moeten kunnen zien:

Nu heb je de gegevens!

Gegevens op de pagina weergeven

Voordat we de bloggegevens op de pagina weergeven, moeten we daarvoor een HTML-sjabloon maken.

Stap 1: maak HTML op

Ruim alles op .blog-main en vervang dat door een eenvoudige container:

Als u vervolgens de oorspronkelijke blogsjabloon bekijkt, ziet u dat de HTML-structuur van één bericht zo kan worden vereenvoudigd:

 
Een titel
 
Op tijd door een auteur
 
Sommige inhoud
 

We willen alleen die tijdelijke tekst vervangen door de gegevens van elke blog die we op Parse.com hebben.

Stap 2: maak blogsjabloon klaar

Om dat te doen, moeten we eerst de HTML-code in een sjabloon wijzigen, waarbij een gegevensobject wordt opgehaald en een reeks HTML-code wordt gewijzigd.

We willen dat de sjabloon een reeks blogs bevat:

[title: 'Hello World', inhoud: 'De eerste blogpost!' , title: 'Tweede blog', inhoud: '
Je kunt HTML ook in de inhoud plaatsen.
', ...]

En render het als HTML, zoals dit:

 
Hallo Wereld
 
Op tijd door een auteur
 
De eerste blogpost!
 
 
 
Tweede blog
 
Op tijd door een auteur
 
Je kunt HTML ook in de inhoud plaatsen.
 

Ik zal je laten zien hoe je handlebars.js kunt gebruiken om dat te doen in deze tutorial, maar je kunt ook underscore.js, snor of andere sjablonen gebruiken waar je de voorkeur aan geeft..

Om handlebars.js te gebruiken, laten we het eerst toevoegen aan de index.html onder parse.js:

Laten we vervolgens de opgeruimde HTML van een enkele blogpost nemen en deze in een special plaatsen

Om vervolgens het stuur te laten weten waar de titel en de inhoudswaarde moeten worden geplaatst, moet u "Een titel" wijzigen in titel en "Some content" to inhoud. Handlebars.js identificeert de inhoud binnen "double-stash"  als variabelen. 


Merk op dat we voor inhoud gebruiken  in plaats van gewoon . Dat komt omdat handlebars.js standaard HTML-waarden verwijdert. "Triple-stash" gebruiken  houdt alle HTML-syntaxis in de inhoud.


De laatste wijziging die u moet aanbrengen in de # Blogs-tpl is om de blogsjabloon in te pakken #each blog / each, dus het neemt een reeks objecten in beslag en geeft ze een voor een weer:


Stap 3: geef blogs weer

Nu we een sjabloon hebben, laten we teruggaan naar blog.js en render die blogs op de pagina. 

Hiertoe maakt u een weergave voor de blogverzameling. Het concept van een weergave is van het MVC (model-view-controller) architecturale patroon en Parse volgt dat patroon. Ik zal hier niet in MVC duiken. Weet gewoon dat een view-instantie voor een blogcollectie er HTML voor genereert en al haar events afhandelt. En een klasse View is de abstracte sjabloon voor die instantie.

Het kan nu verwarrend zijn, maar het zou duidelijker zijn als we de code schrijven. Laten we een schrijven BlogsView klasse:

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

Zoals hoe we ons hebben uitgebreid blog klas van Parse.Object en blogs klas van Parse.Collection, je kunt eenvoudig een nieuwe View-klasse uitbreiden van Parse.View dus het heeft alle vooraf gedefinieerde waarden en functies van Parse.

Hier de sjabloon variabele krijgt de sjabloon die we eerder hebben voorbereid. Dan de render () functie om de gegevens in te voeren this.collection, converteer het naar JSON-formaat, geef het weer met de stuursjabloon en wijs het toe aan dit. $ el.

Laten we vervolgens de succes terugbellen van blogs.fetch () om een ​​nieuw exemplaar van BlogsView te maken, dat nieuwe exemplaar te renderen en het in de $ ( 'Main-container') op de pagina.

succes: functie (blogs) var blogsView = nieuwe BlogsView (collectie: blogs); blogsView.render (); $ ( 'Main-container.') Html (blogsView.el).; 

Merk op dat wanneer u een nieuw exemplaar van BlogsView maakt, u binnenkomt blogs, de bloggegevens die u van Parse-server krijgt, wordt die waarde this.collection voor de render () functie. En wanneer u de HTML invoert $ ( 'Main-container'), je gebruikt de waarde van blogsView.el, wat de inhoud was van dit. $ el, gemaakt door de render () functie. (Hier blogsView. $ el = $ (blogsView.el)) Zo werkt de klasse View en view View.


Laten we nu de pagina vernieuwen: http: // localhost / blog /

En het werkt! Nu kun je het gewoon naar je GitHub-pagina duwen en een werkende dynamische inhoudssite hebben! Als u enige tijd nodig heeft om de blogsjabloon te wijzigen en de code een beetje te wijzigen, kunt u gemakkelijk portefeuilles en andere inhoudswebsites maken.

Conclusie

Vandaag heb je je eerste les op Parse.com gemaakt. U hebt ook geleerd hoe u inhoud in die klasse op Parse.com kunt toevoegen en hoe u deze op uw website kunt weergeven. Er kunnen nogal wat nieuwe concepten voor je zijn, maar ik ben er zeker van dat je daar snel mee bekend zult worden.

In de volgende sessie zullen we beginnen met het bouwen van de beheerpagina voor het blogsysteem. U maakt uw tweede klasse - de klasse Gebruiker. U leert ook hoe u gebruikersaanmelding kunt verwerken en twee nieuwe weergaven kunt maken: inlogweergave en welkomstweergave. Dus houd het in de gaten, er komen veel goede vaardigheden op je af.

Ik denk dat jullie veel plezier kunnen hebben met wat je in deze sessie hebt geleerd. Laat me weten of deze tutorial je heeft geholpen om iets te maken. En zoals altijd, controleer het bronbestand als je vastloopt en laat een reactie achter als je problemen tegenkomt die volgen.

Code