Share
Ce veți creaÎn ultima sesiune, ați învățat cum să adăugați date pe Parse.com și să le afișați pe site-ul dvs. web. Te-ai familiarizat cu conceptul de obiecte, colecții și opinii și ți-ai creat prima clasă. Din această sesiune și înainte, veți crea panoul de administrare al sistemului de bloguri.
Și totul începe cu crearea unei clase de utilizatori și activarea autentificării.
Parse.com a făcut extrem de ușor adăugarea unei noi clase de utilizatori. Doar click "Adăugați Clasă"și alegeți"Utilizator"pentru ao crea.
Adăugați un rând nou pentru dvs.:
Acum, că aveți un utilizator, putem face aplicația mai sigură prin setarea unor permisiuni de acces la nivel de clasă.
Du-te la masa ta pentru postări pe blog și dă click pe "Securitate„:
Modificați permisiunea "Adăugați câmpuri" de la public doar pentru dvs.:
Acest lucru va împiedica pe alții să adauge noi câmpuri la masă.
În mod similar, accesați tabelul Utilizator și limitați permisiunea "Adăugați câmpuri" și pentru dvs..
Puteți seta restul permiselor de nivel de clasă în funcție de nevoile dvs., dar le vom lăsa pentru moment.
Mai intai, haideti sa curatam putin bara de navigare a template-ului HTML pentru a face loc noii pagini admin. Schimba element pentru a avea doar două legături: Acasă și admin:
Apoi, duplicați index.html și redenumiți-o admin.html, și duplicat blog.js și redenumiți-o admin.js. (Pentru cei care sunt familiarizați cu conceptul de router și urasc codul duplicat, vă rugăm să purtați cu mine pentru o vreme. Vă promit că în cele din urmă veți învăța cum să utilizați un router și lucruri curate!)
În admin.html, aplicați .activ clasă la fila corectă:
Și link-ul către admin.js in loc de blog.js:
Asigurați-vă că totul funcționează bine și că acum putem trece rapid pentru a arunca împreună câteva coduri HTML pentru o pagină de conectare.
Același truc vechi, accesați http://getbootstrap.com/examples/signin și copiați codul HTML al .form-signin în .main-container.
Obțineți stilul în signin.css, și copiați-l în nostru blog.css, cu excepția stilului corp:
.form-signin max-lățime: 330px; padding: 15px; marja: 0 auto; formularul-formular de înscriere-formare-semnare, .form-signin .checkbox margin-bottom: 10px; .form-signin .checkbox font-greutate: normal; formular-semnal .formă-control poziție: relativă; înălțime: auto; -webkit-box-size: caseta de frontieră; -moz-box-size: caseta de margine; box-size: caseta de margine; padding: 10px; font-size: 16px; formularul-formular de control: focus z-index: 2; .formă-introduceți intrarea [type = "email"] margin-bottom: -1px; raza de jos-dreapta-dreapta: 0; raza de la extremitatea stanga-stanga: 0; .formă-introduceți intrarea [type = "password"] margin-bottom: 10px; raza de pe raza de sus-stanga: 0; raza de sus-dreapta-dreapta: 0;
În cele din urmă, scapă de tot admin.js de mai jos Parse.initialize ():
Accentsconagua
$ (functie () Parse. $ = jQuery; // Inlocuieste aceasta linie cu cea de pe pagina de pornire rapida Parse.initialize ("HC87tn6aA7c3sYx9X0vwwLVXeqHDRMYYmrUBK5zv", "3piNGGnRMhvWo8u9pKD9TDc1MJlWhlvK78Vr3fHo"););Acum reîmprospătați pagina:
Arata bine!
Unele modificări finale ale paginii: vom folosi numele de utilizator pentru a vă conecta, deci modificați câmpul de e-mail într-un câmp text și adăugați Nume atribuiți ambelor câmpuri de intrare:
Schimbați selectorul CSS de la e-mail la text în consecinţă:
.formular-introducere intrare [tip = "text"] margin-bottom: -1px; raza de jos-dreapta-dreapta: 0; raza de la extremitatea stanga-stanga: 0;
Și scapă de caseta de validare "Tine-mă minte", pentru că nu intenționăm să intrăm în acest tutorial.
Acum suntem gata să vă permitem să vă conectați. Să scriem o funcție JavaScript pentru oase goale pentru a vă conecta utilizatorii atunci când fac clic A depune în admin.js:
$ ('' form-signin ') pe (' submit ', funcția (e) // Prevent Default Submit Event e.preventDefault (); acest lucru) .serializeArray (), username = date [0] .value, password = date [1] .value; // Funcția Parse Login Parse cu acele variabile Parse.User.logIn (nume utilizator, parolă, // Dacă numele de utilizator și parola se potrivește succesului: funcția (user) alert ('Welcome!');, // Dacă există o eroare de eroare: funcția (utilizator, eroare) console.log (error););Hai sa incercam…
La fel de simplu: acum sunteți conectat (ă)!
După ce v-ați conectat, cu siguranță nu doriți să vedeți doar un mesaj de alertă și să rămâneți în pagina de conectare. Trebuie să facem un ecran de întâmpinare pentru utilizatorii conectați.
Pentru a face acest lucru cu grație, vom face atât o pagină de conectare, cât și o pagină de bun venit în Views și le vom servi cu Parse.js.
La fel cum am făcut și cu șabloanele blogului, să lăsăm totul înăuntru .main-container și să creați șabloane pentru pagina de conectare și pagina de întâmpinare:
Putem păstra viziunea de bun venit foarte simplă pentru moment. Acesta va lua doar obiectul utilizatorului și va afișa numele de utilizator.
Să definim acele vederi în admin.js. Observați că pentru că LoginView nu are nevoie să facă niciun obiect, funcția de redare doar pune HTML-ul șablonului în DOM.
var LoginView = Parse.View.extend (template: Handlebars.compile ($ ('login-tpl'). html ()), render: function () this. $ el.html (this.template ;), WelcomeView = Parse.View.extend (template: Handlebars.compile ($ ('welcome-tpl'). Html ); acest $. el.html (acest.template (atribute)););Țineți minte funcția de conectare simplă pe care o avem? Acum puteți face acest eveniment sub LoginView:
var LoginView = Parse.View.extend (template: Handlebars.compile ($ ('login-tpl'). html ()), evenimente: 'submit -form-login' (e) // Preveniți implicit Trimiteți evenimentul e.preventDefault (); // Obțineți date din formular și puneți-le în variabilele var data = $ (e.target) .serializeArray (), username = data [0] .value , parola = date [1] .value; // Call Parse Login function cu acele variabile Parse.User.logIn (username, password, // Daca numele de utilizator si parola se potrivesc cu succes: function (user) alert ('Welcome! '); // Dacă există o eroare de eroare: funcția (utilizator, eroare) console.log (error););, render: function () this. $ el.html (this.template ());)Observați că ne-am schimbat $ (Aceasta) .serializeArray () la $ (E.target) .serializeArray (). Asta pentru că în acest context, acest va indica LoginView.
Înainte de a trece mai departe pentru a afișa vizualizarea de întâmpinare, să oferim mai întâi o vizualizare de autentificare pe pagina reală și să vedem dacă funcționează:
var loginView = nou LoginView (); loginView.render (); $ ( 'Main-container.') Html (loginView.el).;
Rulați din nou, și funcționează la fel ca înainte.
Acum, hai să schimbăm funcția de apel invers Logare() pentru a face o vizualizare binevenită folosind metoda returnată utilizator obiect.
succes: funcția (utilizator) var welcomeView = new WelcomeView (model: user); welcomeView.render (); $ ( 'Main-container.') Html (welcomeView.el).;
Testați din nou:
Și yay, cu siguranță funcționează!
În această sesiune, ați creat clasa a doua: clasa de utilizatori. De asemenea, ați creat două vizualizări importante: LoginView și WelcomeView. De asemenea, ați activat conectarea utilizatorilor pe site-ul dvs. Web, iar acum puteți să trimiteți un mesaj personal de întâmpinare utilizatorilor dvs..
Acesta este doar punctul de plecare pentru construirea unui panou de admin blog. Rămâneți atenți, iar în următorul tutorial vom crea o nouă vizualizare și vom activa funcția "Adăugați un nou blog".
