Share
Hva du skal skapeI de foregående seks øktene har du bygget et bloggingssystem fra grunnen opp. Alt fungerer, og det er flott! Men selve koden er ganske rotete - vi har startet opp ting sammen og forlot mye repeterende kode og midlertidige løsninger bak. Denne sesjonen skal fokusere på hvordan du kan rydde opp ting og fikse noen få problemer vi har hatt.
Først av alt, siden vi har en ruter nå (hvis du savnet den økten, sjekk ut del 5: router), trenger vi ikke lenger to separate .html og .js filer. La oss fusjonere dem sammen.
På dette punktet vil jeg foreslå sammenslåing admin.html og admin.js og omdøpe dem som index.html og blog.js fordi de har mer logikk og kode, men du kan gjøre det på en eller annen måte. Dette bør være ganske enkelt.
Hvis du omdøper filene, må du bare sørge for at du kobler til blog.js i den nye index.html (tidligere admin.html). Husk også å kopiere over # blogger-tpl fra den gamle index.html filen til den nye og kopier over BlogsView fra den gamle blog.js filen til den nye.
Nå går du til http: // localhost / your-directory / og du bør se påloggingsskjermen som standard (eller admin skjermbildet hvis du allerede er logget på).
Deretter kan vi legge til et nytt nettadressemønster i ruteren for å matche rotwebadressen til en ny funksjon; vi kan kalle det indeks ():
ruter: ": 'indeks', ...,
Dette indeks () funksjonen bør gjengi det som tidligere var på hjemmesiden.
Accentsconagua
indeks: funksjon () this.blogs.fetch (suksess: funksjon (blogger) var blogsView = new BlogsView (samling: blogger); blogsView.render (); $ ('main-container'). html (blogsView.el);, feil: funksjon (blogger, feil) console.log (error);); Og for å se det fungerer, la oss standard omdirigere til den nettadressen når ruteren starter:
start: funksjon () Parse.history.start (pushState: true); this.navigate (", trigger: true); Den neste tingen er å oppdatere navigasjonsfeltet øverst. La oss endre disse HTML-filene til URL-adresser her:
Og for de som skal jobbe, må vi legge til en hendelse til .blogg-nav-element å bruke blogRouter.navigate () i stedet for standard lenkehendelse:
$ (dokument) .on ('klikk', '.blog-nav-element', funksjon (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter. naviger (href, trigger: true);); Og la oss legge til logikk for å veksle .aktiv klassen også:
$ (dokument) .on ('klikk', '.blog-nav-element', funksjon (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter. navigere (href, trigger: true); $ (dette) .addClass ('aktiv'). søsken (). removeClass ('aktiv');); Nå, hvis du klikker rundt, bør alt fungere!
Fortsett, vi kan se AddBlogView og EditBlogView er ganske like. Det er også Oppdater() og skape() fungere i bloggen klasse. La oss også slå sammen dem.
La oss først fusjonere de to malene i index.html å være # Write-tpl.
Du kan se at det er i utgangspunktet # Redigerings tpl med endringer i klassenavn og en dynamisk formittel. Vi vil bare passere "" inn i tittel og innhold når du legger til en ny blogg.
Deretter la oss slå sammen Oppdater() og skape() Funksjoner i Blog-klassen. Vi kan kjede this.set (). lagre () funksjoner for begge deler Oppdater() og skape(). For feltene som ikke trenger å bli rørt av Oppdater() funksjon, kan vi fylle med gjeldende verdi:
oppdatering: funksjon (tittel, innhold) this.set ('title': title, 'content': innhold, // Sett forfatter til eksisterende bloggforfatter hvis du redigerer, bruk nåværende bruker hvis du oppretter // Den samme logikken går inn Følgende tre felt 'forfatter': this.get ('author') || Parse.User.current (), 'authorName': this.get ('authorName') || Parse.User.current (). get () 'brukernavn'), 'tid': this.get ('time') || ny dato () .dateString ()) lagre (null, suksess: funksjon (blogg) alert ('du oppdaterte en ny blogg : '+ blog.get (' title '));, feil: funksjon (blogg, feil) console.log (blogg); console.log (error);); Nå er det på tide å slå sammen de to visningene:
WriteBlogView = Parse.View.extend (mal: Handlebars.compile ($ ('# write-tpl'). Html ()), hendelser: 'send .form-write': 'submit', send: funksjon e) e.preventDefault (); var data = $ (e.target) .serializeArray (); // Hvis det ikke er noen bloggdata, så opprett en ny blogg this.model = this.model || ny blogg (); this.model.update (data [0] .value, data [1] .value);, render: function () var attributes; // Hvis brukeren redigerer en blogg, betyr det at det vil være et bloggsett som this.model // derfor bruker vi denne logikken for å gjengi forskjellige titler og sendes i tomme strenger hvis (this.model) attributes = this.model.toJSON (); attributes.form_title = 'Rediger blogg'; else attributter = form_title: 'Legg til en blogg', tittel: ", innhold:" dette. $ el.html (dette.templat (attributter)). finn ('textarea'). wysihtml5 ();) Legg merke til hvordan du kan bruke if (this.model) å pivot mellom legge til og redigere funksjoner.
Til slutt, la oss lenke til dette nye WriteBlogView i ruteren. Bare endre begge visningene til WriteBlogView og det skal fortsatt fungere som vanlig.
legg til: funksjon () // Sjekk innlogging hvis (! Parse.User.current ()) this.navigate ('login', trigger: true); else var writeBlogView = ny WriteBlogView (); writeBlogView.render (); $ Container.html (writeBlogView.el); , rediger: funksjon (id) // Sjekk innlogging hvis (! Parse.User.current ()) this.navigate ('login', trigger: true); else var query = new Parse.Query (Blog); query.get (id, suksess: funksjon (blogg) var writeBlogView = ny WriteBlogView (modell: blogg); writeBlogView.render (); $ container.html (writeBlogView.el);, feil: funksjon , feil) console.log (feil);); Legg merke til at du også skal sende besøkende tilbake til påloggingssiden hvis de ikke er logget inn.
Nå som vi har tatt ut all den repeterende koden, kan vi nå gå videre til noen av funksjonene vi kan forbedre.
Mange av dere har spurt hvordan vi kan holde dataene trygge hvis API er i koden. Parse.js gir både tilgangskontrolllister på aksessnivåer på aksjenivå (ACL) for å administrere brukertilgang. Vi har snakket om ACLer på klassenivå i del 3: Brukerinnlogging. I dag vil jeg vise deg hvordan du legger til et ACL på item level.
Som et eksempel, la oss anta at vi vil at hver blogg bare skal kunne redigeres av sin opprinnelige forfatter.
For å få det til å skje, må vi sette ACL felt i Oppdater() funksjon:
oppdatering: funksjon (tittel, innhold) // Bare sett inn ACL hvis bloggen ikke har den hvis (! this.get ('ACL')) // Opprett et ACL-objekt for å gi tilgang til gjeldende bruker // (også forfatteren til den nylig opprettede bloggen) var blogACL = ny Parse.ACL (Parse.User.current ()); // Gi tilgang til leser bare tilgang til allmennheten slik at alle kan se det blogACL.setPublicReadAccess (true); // Sett dette ACL-objektet til ACL-feltet this.setACL (blogACL); this.set (...); Et annet problem som mange av dere kanskje føler er at det er ganske vanskelig å teste bloggsystemet du lager. Hver gang du tester, må du gå tilbake til http: // localhost / your-directory / for å utløse ruteren.
La oss løse dette problemet først.
Parse.js gjør det ganske enkelt å gjøre det, så la oss bare endre BlogRouter.start () funksjon for å sette en filrot.
start: funksjon () Parse.history.start (// sett i katalogen din under rot: '/ tutorial_blog /');
Legg merke til at vi kan ta ut this.navigate () fungere nå.
Et annet problem med nettadressene vi har akkurat nå, er at de ikke kan bokmerkes eller revideres. Alt du vil gjøre, må du starte fra hovedadressen. Hvis du for eksempel besøker http: // localhost / blog / admin, er ruteren satt til å akseptere dette nettadressemønsteret, men serveren returnerer fortsatt 404. Det er fordi når du besøker / admin, serveren din vet ikke det burde faktisk gå til index.html å starte ruteren i utgangspunktet.
En måte å løse dette problemet på er å konfigurere serveren din slik at den omdirigerer alle nettadressene til index.html. Men det er egentlig ikke i denne klassens omfang. Vi skal prøve den andre metoden: Legg til en # / før alle nettadressene våre.
Nettadressen til administrasjonspanelet vil se slik ut: http: // localhost / blog / # / admin. Det er egentlig ikke ideelt, men det er en enkel vei rundt. Når nettleseren møtes / #, det kommer ikke til å behandle resten av nettadressen som en filbane; I stedet vil den lede brukeren til index.html, så ruteren vår kan hente resten.
Nå, la oss gå videre og endre href Attributt av alle koder i index.html fra noe som dette:
Redigere
til noe slikt:
Redigere
Tilsvarende, la oss endre alle BlogApp.navigate () i blog.js fra noe som dette:
BlogApp.navigate ('admin', trigger: true); til noe slikt:
BlogApp.navigate ('# / admin', trigger: true); Du kan ta ut noen av hendelsene for å bruke tag også.
For eksempel er "Legg til en ny blogg"Knappen brukes til å bruke en hendelse:
hendelser: 'klikk .add-blog': 'legg til', legg til: funksjon () blogRouter.navigate ('# / add', trigger: true); Vi kan ta ut disse og bytte den til en link i index.html:
Legg til en ny blogg
Du kan også ta ut denne funksjonen fordi nettadressene vil fungere av seg selv:
$ (dokument) .on ('klikk', '.blog-nav-element', funksjon (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter. navigere (href, trigger: true); $ (dette) .addClass ('aktiv'). søsken (). removeClass ('aktiv');); La oss også ta ut aktiv klasse for nå, men vi vil legge den tilbake og få den til å fungere i senere økter på en annen måte.
OK, gå gjennom bloggen din, test, og kontroller at alle koblingene nå er til http: // localhost / # / ... unntatt hjemmesiden.
Nå har du nettadresser som du kan oppdatere og besøke. Håper dette gjør livet ditt lettere!
Hvis du ikke har noe imot den superlange opplæringen og ønsker å gjøre noen flere forbedringer, er det noen få andre rettelser og forbedringer du kan gjøre.
En ting du kanskje også legger merke til er at bloggene sorteres fra tidligst til siste. Vanligvis vil vi forvente å se de nyeste bloggene først. Så la oss endre blogger samling for å sortere dem i den rekkefølgen:
Blogger = Parse.Collection.extend (modell: Blog, spørring: (ny Parse.Query (Blog)). Descending ('createdAt')) Her er en annen ting vi kan forbedre på. I stedet for å peke ut et varselvindu etter oppdatering av en blogg, la oss bare omdirigere til / admin side:
this.set (...). lagre (null, suksess: funksjon (blogg) blogRouter.navigate ('# / admin', trigger: true);, feil: funksjon (blogg, feil) ); Hvis du kommer inn i rengjøring, kan du også slå sammen AdminView og WelcomeView i en. Det er ikke noe reelt behov for å ha to separate visninger.
Igjen, HTML-malen først:
La oss da endre BlogRouter.admin () å passere brukernavn til AdminView:
admin: funksjon () var currentUser = Parse.User.current (); // Sjekk innloggingen hvis (! CurrentUser) BlogApp.navigate ('# / login', trigger: true); this.blogs.fetch (suksess: funksjon (blogger) var blogsAdminView = ny BlogsAdminView (// Pass inn nåværende brukernavn som skal gjengis i # admin-tpl brukernavn: currentUser.get ('brukernavn'), samling: blogger ); bloggerAdminView.render (); $ ('. hovedbeholder'). html (bloggerAdminView.el);, feil: funksjon (blogger, feil) console.log (error);); Og så gå nedover brukernavn å bli gjengitt i # Admin-tpl:
BlogsAdminView = Parse.View.extend (mal: Handlebars.compile ($ ('# admin-tpl'). Html ()), gjengi: funksjon () var collection = // Pass på brukernavn som variabel som skal brukes i malen brukernavn: this.options.username, blog: this.collection.toJSON (); dette. $ el.html (this.template (samling));) Til slutt kan vi lagre $ ( 'Main-container') som en variabel for å unngå å gjøre flere spørringer.
var $ container = $ ('. hovedbeholder'); Og bare erstatte alle $ ( 'Main-container') med $ container.
Først av alt, gratulerer med å gjøre det til slutten! Det har vært en lang økt, men du har ryddet opp hele prosjektet. I tillegg har du også lagt til ACL på blogger, implementert statiske nettadresser, og gjort massevis av andre rettelser. Nå er det et veldig solid prosjekt.
I neste sesjon vil vi få fart på ting og legge til tre nye funksjoner: Enkelt bloggvisning, slett en blogg og logg ut, for nå har du en god forståelse av Parse.js og kan bevege seg fremover mye raskere. Jeg vil anbefale å tenke på hvordan du skriver disse funksjonene på forhånd, slik at du kan teste kunnskapen litt. Annet enn det, hold deg innstilt!
