Accentsconagua

Kom i gang med å bygge bloggen din med Parse.js Legg til en ny blogg

Kode
Share
Hva du skal skape

Har du noen gang blitt begeistret av ideen din for et nettsted, men fant deg selv å bli elendig når du prøver å gjøre den dynamisk og faktisk kjøre den på en server? 

Med Parse.js kan alle som forstår grunnleggende om HTML, CSS og JavaScript, lage dynamiske nettsteder og arbeide med webapps. Denne opplæringen skal ta deg gjennom prosessen med å lage et bloggsystem trinnvis med Parse.js. Og i slutten av denne serien, bør du være i stand til å lage ditt eget CMS-nettsted med letthet.

I de siste tre øktene har du bygget grunnlaget for bloggsystemet. Du har opprettet en Blog-klasse og en brukerklasse på Parse.com, du gjør blogger i frontenden, og du aktiverte brukerinnlogging. Fra denne sesongen på, skal vi bygge ut forskjellige funksjoner i administrasjonspanelet, og begynne med "Legg til en ny blogg."

1. Lag og legg til AddBlogView

Trinn 1: Klargjør en HTML-mal

Første ting først, la oss lage en HTML-mal for den siden, slik at vi har noe å leke med. Igjen kan du bruke eksisterende elementer av Bootstrap for å øke hastigheten på prosessen:

Legg til det til admin.html.

Legg merke til at vi gjør det til en mal, selv om det ikke er noen dynamisk verdi på dette punktet. Jeg gjør det fordi:

  1. Jeg vil gjerne holde HTML veldig strukturert og alt er sin egen malblokk.
  2. I fremtidige sesjoner skal vi bygge kategorien dropdown, så potensielt kan det være dynamisk innhold på denne siden.
  3. Den samme sidemalen er gjenbrukbar når vi bygger "Rediger" -funksjonen, og vi må definitivt trekke det eksisterende innholdet i EditBlogView.

Trinn 2: Lag AddBlogView

Fortsett, gå til admin.js og opprett en ny visning: AddBlogView. Vi kan holde det veldig minimalt for nå, siden vi bare gjengir malen:

var AddBlogView = Parse.View.extend (mal: Handlebars.compile ($ ('# add-tpl'). html ()), gjengi: funksjon () this. $ el.html (this.template ;);

Trinn 3: Link til AddBlogView

Nå som vi har AddBlogView, Vi vil koble til den fra administrasjonspanelet. Gå videre og legg til en knapp til WelcomeView:

Og så må du binde en hendelse på den knappen klikker. Vanligvis kan du gjøre noe slikt i din admin.js:

$ ('. add-blog'). på ('klikk', funksjon () // funksjon);

Det er imidlertid ikke nødvendig når du bruker Parse.js. Du kan bare legge til en hendelse i et visningsobjekt og binde en funksjon som denne:

WelcomeView = Parse.View.extend (mal: Handlebars.compile ($ ('# welcome-tpl'). Html ()), hendelser: 'klikk .add-blog': 'add', legg til: funksjon ) alert ('Clicked!');, ...),

Du kan prøve det før vi går videre:

Og nå kan vi endre funksjonen for å gjengi en ny forekomst av AddBlogView.

legg til: funksjon () var addBlogView = new AddBlogView (); addBlogView.render (); $ ( 'Hoved-beholder.') Html (addBlogView.el.);

Føles fantastisk.

2. Skriv til databasen

Nå er alt du trenger, å binde en funksjon til sende-knappen på denne siden og skrive bloggen til databasen din på Parse.com.

Trinn 1: Legg til en sendingshendelse

Legg til en sendehendelse til din AddBlogView-Det er ikke veldig forskjellig fra klikkhendelsen vi nettopp har lagt til.

AddBlogView = Parse.View.extend (mal: Handlebars.compile ($ ('# add-tpl'). Html ()), hendelser: 'send .form-add': 'send', send: funksjon e) // sende funksjonen går her., ...);

Trinn 2: Inkluder bloggen Klasse

Da, fordi vi prøver å skrive til Blog-tabellen på Parse.com, må vi inkludere Blog-klassen:

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

Trinn 3: Legg til en skape() Funksjon til bloggen Klasse

Deretter la vi legge til en skape() Fungerer til Blog-klassen, så vi kan ringe det fra et hvilket som helst visningsobjekt. Det bør ta to parametere, tittel og innhold, og lagre den i databasen.

Parse.js gjorde det veldig enkelt. Når en ny forekomst av Blog-klassen er opprettet, kan vi bare angi verdiene vi vil ha og ringe til lagre() funksjon for å lagre den i databasen.

var Blog = Parse.Object.extend ('Blogg', opprett: funksjon (tittel, innhold) this.set ('title': title, 'content': innhold, 'author': Parse.User.current )). Lagre (null, suksess: funksjon (blogg) alert ('Du la til en ny blogg:' + blog.get ('title'));, feil: funksjon (blogg, feil) konsoll. logg (blogg); console.log (feil);););

Eller du kan også bare skrive dataene i lagre() funksjon:

var Blog = Parse.Object.extend ('Blogg', opprett: funksjon (tittel, innhold) this.save ('title': title, 'content': innhold, 'author': Parse.User.current ), suksess: funksjon (blogg) alert ('Du la til en ny blogg:' + blog.get ('title'));, feil: funksjon (blogg, feil) console.log (blogg); console.log (feil);););

Begge ville fungere.

Legg merke til at jeg også inkluderer forfatter i databasen med Parse.User.current (). Det er metoden du bør bruke for å få den nåværende brukeren logget inn.

Trinn 4: Ring blog.create () fra AddBlogView

Nå, som det siste skrittet for å få det til å fungere, må du ringe blog.create () fra AddBlogView vi nettopp opprettet.

La oss legge den til i sende inn() funksjon:

send inn: funksjon (e) // Forhindre Standard Send Event e.preventDefault (); // Ta skjemaet og sett det inn i et dataobjekt var data = $ (e.target) .serializeArray (), // Opprett en ny forekomst av Blog blog = ny blogg (); // Call .create () blog.create (data [0] .value, data [1] .value);

Gi det en prøvekjøring. Ser ut som det virker!

Og hvis du sjekker det på Parse.com, vil du se det er lagret i Blog-tabellen.

Gratulerer! Du skriver til databasen.

3. Lagre forfatterens navn og tidspunkt for innlegget

La oss nå se på blogglisten igjen:

Du vil merke at i stedet for brukernavnet viser vi bruker-IDen. Og vi viser ikke tiden da bloggen ble opprettet. Vi har createdAt og updatedAt verdier i bakenden, men de er ikke veldig lesbare for brukeren.

Hvis vi vil fikse det, er det to generelle tilnærminger:

  • Når vi leser fra databasen, får vi brukernavnet etter ID, og ​​vi endrer formatet på tidspunktet for innlegget.
  • Når vi skriver til databasen, legger vi til to felt for å lagre brukernavnet og tiden.

Hvis vi tar den første tilnærmingen, gjør vi det samme igjen og igjen, og det bruker brukerens tid og ressurser. Derfor ønsker vi å gjøre det mens du skriver til databasen. Ikke bekymre deg om ting som "hva om brukeren endret navnet hans?" ennå - vi kan alltid gjøre en gruppeoppdatering når det skjer.

Trinn 1: Legg til to flere kolonner i bloggbordet

Du burde være veldig kjent med denne prosessen nå. La oss angi navnet og typen av de to feltene som følger:

  • author (String)
  • tid (String)

Trinn 2: Legg til datafelter i skape() funksjon

Da må du endre skape() fungere for å registrere disse verdiene:

this.save (title]: title, 'content': innhold, 'author': Parse.User.current (), 'authorName': Parse.User.current (). get ('brukernavn'), 'tid ': ny dato (). toDateString (), ...);

Legg merke til at jeg bare bruker .toDateString () fungere her; Du kan bruke andre datoperasjoner for å få det tidsformatet du vil ha.

Trinn 3: Oppdater Blogger-malen for å bruke disse verdiene

Til slutt, la oss oppdatere # blogger-tpl i index.html å trekke de nye verdiene:

Nå kan du slette de eksisterende innleggene, og legge til noe mer fra den nye siden "Legge til en ny blogg".

Nå skal alle feltene jobbe.

4. Bonus: WYSIWYG Editor

Fordi vi bruker innhold I malen finner du at du allerede kan legge inn HTML-koder i innholdet ditt