Share
Ce veți creaÎn cele șase sesiuni anterioare, ați construit un sistem de bloguri de la bază. Totul funcționează și asta e minunat! Cu toate acestea, codul în sine este destul de dezordonat - am făcut bootstrapping lucrurile împreună și am lăsat în urmă o mulțime de cod repetat și soluții temporare în urmă. Această sesiune se va concentra pe modul în care puteți să curățați lucrurile și să remediați câteva probleme pe care le-am avut.
În primul rând, deoarece avem un router acum (dacă ați pierdut sesiunea, consultați Partea 5: Router), nu mai avem nevoie de două .html și .js fișiere. Să le îmbinăm împreună.
În acest moment, aș sugera o fuziune admin.html și admin.js și redenumirea lor ca fiind index.html și blog.js pentru că au mai multă logică și cod, dar o poți face oricum. Acest lucru ar trebui să fie destul de simplu.
Dacă redenumiți fișierele, asigurați-vă că vă conectați blog.js în noul index.html (anterior admin.html). De asemenea, nu uitați să copiați # bloguri-TPL de la vechi index.html fișierul noului și copiați-l BlogsView de la vechi blog.js fișierul celui nou.
Vizitați acum http: // localhost / directorul dvs. / și ar trebui să vedeți ecranul de conectare în mod implicit (sau ecranul de administrare dacă sunteți deja conectat).
Apoi, putem adăuga un nou model de adresă URL în router pentru a se potrivi cu adresa URL rădăcină la o nouă funcție; o putem numi index():
rute: ": 'index', ...,
Acest index() funcția ar trebui să facă ceea ce a fost anterior pe pagina de pornire.
index: function () this.blogs.fetch (succes: function (blogs) var blogsView = blogsView noi collection: blogs; (blogsView.el);, eroare: funcție (bloguri, eroare) console.log (eroare););
Și pentru a vedea că funcționează, să redirecționăm implicit la acea adresă URL când routerul pornește:
Accentsconagua
start: funcția () Parse.history.start (pushState: true); this.navigate (", declanșator: adevărat); Următorul lucru este să actualizați bara de navigare din partea de sus. Să schimbăm acele fișiere HTML în adrese URL aici:
Și pentru ca aceștia să lucreze, trebuie să adăugăm un eveniment .Blogul-nav-item a folosi blogRouter.navigate () mai degrabă decât evenimentul de legătură implicit:
$ (document) .on ('click', '.blog-nav-item', functie (e) e.preventDefault (); var href = $ (e.target) .attr ('href' navigați (href, trigger: true);); Și să adăugăm logică pentru a comuta .activ și clasa:
$ (document) .on ('click', '.blog-nav-item', functie (e) e.preventDefault (); var href = $ (e.target) .attr ('href' navigați (href, trigger: true); $ (acest) .addClass ('activ'). siblings () removeClass ('activ'); Acum, dacă faceți clic în jur, totul ar trebui să funcționeze!
Mergând mai departe, vedem AddBlogView și EditBlogView sunt destul de similare. Deci sunt Actualizați() și crea() funcția în Blog clasă. Hai să fuzăm și acelea.
Mai întâi, să fuzăm cele două șabloane în index.html a fi # Scrie-TPL.
Puteți vedea că este în principiu # Edit-TPL cu schimbări de nume de clasă și titlu de formular dinamic. Vom trece doar „“ în titlu și conţinut atunci când adăugați un nou blog.
Apoi, hai să fuzionăm Actualizați() și crea() funcții în clasa Blog. Putem lanțuri this.set (). save () funcții pentru ambele Actualizați() și crea(). Pentru câmpurile care nu trebuie să fie atinse de către Actualizați() funcția, putem umple cu valoarea curentă:
actualizare: funcție (titlu, conținut) this.set ('title': title, 'content': content, // Setați autorul pentru autorul blogului existent, dacă editați. următoarele trei câmpuri "author": this.get ('author') || Parse.User.current (), 'autorName': this.get ('authorName') || Parse.User.current 'username'), 'time': this.get ('time') || new Data () .toDateString ()) : '+ blog.get (' title ')); eroare: funcție (blog, eroare) console.log (blog); console.log (eroare);); Acum, este momentul să îmbinați cele două viziuni:
WriteBlogView = Parse.View.extend (template: Handlebars.compile ($ 'write-tpl'). Html ()), evenimente: 'submit -form' e) e.preventDefault (); var data = $ (e.target) .serializeArray (); // Dacă nu există date de blog, creați un nou blog this.model = this.model || new Blog (); acest lucru se va face cu ajutorul funcției () [data [0] .value, data [1] .value);, render: function () var atribute; ca acest.model // folosim această logică pentru a reda diferite titluri și a trece în șiruri goale dacă (this.model) attributes = this.model.toJSON (); attributes.form_title = 'Editare blog'; altceva atributele = form_title: "Adăugați un blog", titlul: ", conținut:" acest. $ el.html (this.template (atributele)
Observați cum puteți utiliza if (this.model) să pivotați între funcțiile de adăugare și editare.
În cele din urmă, să ne conectăm la acest nou WriteBlogView în router. Schimbați ambele vederi la WriteBlogView și ar trebui să funcționeze ca de obicei.
adăugați: funcția () // Verificați login-ul dacă (! Parse.User.current ()) this.navigate ('login', trigger: true); altceva var writeBlogView = new WriteBlogView (); writeBlogView.render (); $ Container.html (writeBlogView.el); , editați: funcția (id) // Verificați datele de conectare dacă (! Parse.User.current ()) this.navigate ('login', trigger: true); altfel var query = new Parse.Query (Blog); query_get (id, succes: function (blog) var writeBlogView = nou WriteBlogView (model: blog); , eroare) console.log (eroare);); Rețineți că trebuie să trimiteți și vizitatorii înapoi la pagina de conectare dacă nu sunt conectați.
Acum, că am eliminat tot codul repetitiv, putem trece acum la unele dintre caracteristicile pe care le putem îmbunătăți.
Mulți dintre dvs. v-ați întrebat cum putem păstra datele în siguranță dacă API-ul este în cod. Parse.js oferă atât liste de control al accesului la nivel de clasă, cât și la nivel de element (ACL) pentru a ajuta la gestionarea accesului utilizatorilor. Am discutat despre ACL la nivel de clasă în Partea 3: Conectarea utilizatorilor. Astăzi, vă voi arăta cum să adăugați un ACL la nivel de element.
De exemplu, să presupunem că vrem ca fiecare blog să fie editat doar de autorul său original.
Pentru a face acest lucru, trebuie să setăm ACL domeniu în Actualizați() funcţie:
actualizare: functie (titlu, continut) // setati ACL numai daca blogul nu are aceasta daca (! this.get ('ACL')) // creaza un obiect ACL pentru a acorda accesul utilizatorului curent // (de asemenea, autorul blogului nou creat) var blogACL = Parse.ACL nou (Parse.User.current ()); // Grant citiți-citiți numai accesul la public, astfel încât toată lumea să-l poată vedea blogACL.setPublicReadAccess (true); // Setați acest obiect ACL în câmpul ACL this.setACL (blogACL); this.set (...); O altă problemă pe care mulți dintre dvs. o pot simți este că este destul de greu să testați sistemul de blog pe care îl creați. De fiecare dată când testezi, trebuie să te întorci la http: // localhost / directorul tău / pentru a declanșa ruterul.
Să rezolvăm mai întâi această problemă.
Parse.js face destul de ușor să facă asta, așa că hai să schimbăm doar BlogRouter.start () pentru a seta o rădăcină de fișier.
start: function () Parse.history.start (// introduceti directorul sub root: '/ tutorial_blog /');
Observați că putem scoate this.navigate () funcționează acum.
O altă problemă cu adresele URL pe care le avem acum este că nu pot fi marcate sau revizuite. Tot ce doriți să faceți, trebuie să începeți de la adresa URL principală. De exemplu, dacă vizitați http: // localhost / blog / admin, routerul este setat să accepte acest model de adresă URL, dar serverul returnează în continuare 404. Asta pentru că atunci când vizitați / admin, serverul dvs. nu știe că ar trebui să meargă index.html pentru a porni router-ul în primul rând.
O modalitate de a rezolva această problemă este să vă configurați serverul astfel încât acesta să redirecționeze toate URL-urile către index.html. Dar asta nu este chiar în sfera acestei clase. Vom încerca cealaltă metodă: adăugați a # / înainte de toate adresele URL.
Adresa URL a panoului admin va arăta astfel: http: // localhost / blog / # / admin. Nu este chiar ideal, dar este o cale simplă în jur. Când se întâlnește browserul / #, nu va trata restul adresei URL ca cale de fișier; în schimb, acesta va direcționa utilizatorul la index.html, astfel încât Router-ul nostru poate prelua restul.
Acum, hai să mergem și să schimbăm href atributul tuturor etichetele din index.html din ceva de genul:
Editați | ×
la ceva de genul:
Editați | ×
În mod similar, hai să schimbăm toate BlogApp.navigate () în blog.js din ceva de genul:
BlogApp.navigate ("admin", trigger: true); la ceva de genul:
BlogApp.navigate ("# / admin", declanșator: adevărat); Puteți să eliminați câteva evenimente pentru a le utiliza și eticheta.
De exemplu,Adăugați un blog nou"Pentru a utiliza un eveniment:
evenimente: 'faceți clic pe .add-blog': 'add', adăugați: function () blogRouter.navigate ('# / add', trigger: true); Putem să le scoatem și să le schimbăm într - un link în index.html:
Adăugați un blog nou
De asemenea, puteți scoate această funcție, deoarece adresele URL vor funcționa singure:
$ (document) .on ('click', '.blog-nav-item', functie (e) e.preventDefault (); var href = $ (e.target) .attr ('href' navigați (href, trigger: true); $ (acest) .addClass ('activ'). siblings () removeClass ('activ'); Să mai luăm de asemenea activ pentru moment, dar o vom adăuga înapoi și o va face să funcționeze în sesiuni ulterioare într-un alt mod.
Bine, treceți prin blog, testați-vă și asigurați-vă că toate linkurile sunt acum la http: // localhost / # / ... cu excepția paginii principale.
Acum aveți adrese URL pe care le puteți reîmprospăta și revizui. Sper că acest lucru vă face viața mult mai ușoară!
Dacă nu vă deranjează tutorialul de lungă durată și doriți să faceți mai multe îmbunătățiri, iată câteva corecții și îmbunătățiri pe care le puteți face.
Un lucru pe care îl puteți observa este că blogurile sunt sortate de la cea mai veche la cea mai recentă. De obicei ne-am aștepta să vedem mai întâi cele mai recente bloguri. Deci, să schimbăm Blog-uri pentru a le sorta în ordinea:
Blogs = Parse.Collection.extend (model: Blog, interogare: (Parse.Query (Blog)) descendent ('createdAt')) Iată un alt lucru pe care ne putem îmbunătăți. În loc să deschidem o fereastră de alertă după actualizarea unui blog, hai să facem o redirecționare către / admin pagină:
( , );
Dacă intrați în curățenie, puteți, de asemenea, să îmbinați AdminView și WelcomeView într-una - nu este necesar să aveți două vizionări separate.
Din nou, șablonul HTML:
Atunci să ne schimbăm BlogRouter.admin () a trece nume de utilizator la AdminView:
admin: funcția () var currentUser = Parse.User.current (); // Verificați login dacă (! CurrentUser) BlogApp.navigate ('# / login', trigger: true); acest blog.blogs.fetch (succes: function (blogs) var blogsAdminView = noi BlogsAdminView (// Transmite numele de utilizator curent pentru a fi redat in # admin-tpl username: currentUser.get ('username' ); blogsAdminView.render (); $ ('. main-container'); html (blogsAdminView.el);, eroare: funcția (bloguri, eroare) console.log (error); Apoi treceți în jos nume de utilizator să fie redat în # Admin-TPL:
BlogsAdminView = Parse.View.extend (template: Handlebars.compile ($ ('admin-tpl'). Html ()), render: function în nume de utilizator al șablonului: this.options.username, blog: this.collection.toJSON (); acest $. el.html (this.template (collection));) În cele din urmă, putem stoca $ ( 'Principal-container') ca variabilă pentru a evita interogările multiple.
var $ container = $ ('. container principal'); Și înlocuiți toate $ ( 'Principal-container') cu $ container.
Mai întâi de toate, felicitări pentru că ați reușit până la capăt! A fost o sesiune lungă, dar ați curățat întregul proiect. În plus, ați adăugat, de asemenea, ACL la bloguri, implementați URL-uri statice și ați făcut o mulțime de alte remedii. Acum este un proiect foarte solid.
În următoarea sesiune, vom accelera lucrurile și vom adăuga trei noi funcții: afișarea unui singur blog, ștergerea unui blog și deconectarea, deoarece acum aveți o bună înțelegere a Parse.js și puteți avansa mult mai repede. Aș recomanda să vă gândiți cum să scrieți aceste funcții înainte de timp, pentru a vă putea testa cunoștințele puțin. În afară de asta, stați bine!
