Accentsconagua

Începeți să construiți blogul dvs. cu Parse.js Adăugați un blog nou

Cod
Share
Ce veți crea

Ai fost vreodată încântat de ideea ta pentru un site web, dar te-ai găsit să devii mizerabil atunci când încerci să-l faci dinamic și de fapt să-l rulați pe un server? 

Cu Parse.js, toți cei care înțeleg elementele de bază ale codului HTML, CSS și JavaScript pot crea site-uri dinamice și aplicații web de lucru. Acest tutorial vă va duce prin procesul de creare a unui sistem de blog pas cu pas cu Parse.js. Și până la sfârșitul acestei serii, ar trebui să puteți crea cu ușurință propriul site CMS.

În ultimele trei sesiuni, ați construit baza sistemului de bloguri. Ați creat o clasă Blog și o clasă de utilizatori pe Parse.com, faceți bloguri în partea frontală și ați activat conectarea utilizatorilor. Din această sesiune, vom construi diferite funcții ale panoului de administrare, începând cu "Adăugați un blog nou".

1. Creați și Render AddBlogView

Pasul 1: Pregătiți un șablon HTML

În primul rând, să pregătim un șablon HTML pentru acea pagină, astfel încât să avem ceva de jucat. Din nou, puteți utiliza elementele existente ale Bootstrap pentru a accelera procesul:

Adăugați asta la admin.html.

Observați că facem un șablon, deși nu există valoare dinamică în acest moment. Fac asta pentru că:

  1. Aș dori să-mi păstrez foarte structurat codul HTML și totul este propriul bloc de șabloane.
  2. În sesiunile viitoare vom construi dropdownul de categorii, astfel încât pe această pagină ar putea exista conținut dinamic.
  3. Același șablon de pagină ar fi reutilizabil atunci când vom construi funcția "Editare" și, cu siguranță, trebuie să tragem conținutul existent în EditBlogView.

Pasul 2: Creați AddBlogView

Mergând, du-te la admin.js și creați un nou Vizualizați: AddBlogView. Putem să o păstrăm foarte puțin pentru moment, deoarece noi redăm șablonul:

var AddBlogView = Parse.View.extend (template: Handlebars.compile ($ ('add-tpl'). html ()), render: function () this. $ el.html (this.template ;);

Pasul 3: Legătura către AddBlogView

Acum ce am făcut AddBlogView, vrem să ne conectăm la acesta din panoul de administrare. Mergeți mai departe și adăugați un buton la WelcomeView:

Apoi, trebuie să legați un eveniment la acel clic pe buton. De obicei, ai putea face ceva de genul ăsta în tine admin.js:

$ ('. add-blog') la ('click', functie () // function);

Totuși, acest lucru nu este necesar atunci când utilizați Parse.js. Puteți adăuga un eveniment la un obiect Vizualizare și puteți lega o funcție ca aceasta:

WelcomeView = Parse.View.extend (template: Handlebars.compile ($ ('welcome-tpl'). Html ) alert ("Apăsat!");, ...),

Puteți încerca înainte de a merge mai departe:

Și acum putem schimba funcția pentru a face o nouă instanță de AddBlogView.

adăugați: funcția () var addBlogView = new AddBlogView (); addBlogView.render (); $ ( 'Main-container.') Html (addBlogView.el).;

Se simte minunat.

2. Scrieți la baza de date

Acum, tot ce aveți nevoie este să legați o funcție de butonul de trimitere de pe această pagină și să scrieți blogul în baza de date pe Parse.com.

Pasul 1: Adăugați un eveniment de trimitere

Adăugați un eveniment de trimitere la dvs. AddBlogView-nu este foarte diferit de evenimentul pe care tocmai l-am adăugat.

AdăugațiBlogView = Parse.View.extend (template: Handlebars.compile ($ ('add-tpl'). Html ()), evenimente: e) // trimite funcția merge aici., ...);

Pasul 2: Includeți Blog Clasă

Apoi, pentru că încercăm să scriem în tabelul Blog pe Parse.com, trebuie să includem clasa Blog:

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

Pasul 3: Adăugați a crea() Funcție la Blog Clasă

După aceea, să adăugăm a crea() funcția la clasa Blog, astfel încât să putem apela din orice obiect de vizualizare. Ar trebui să ia doi parametri, titlu și conţinut, și salvați-o în baza de date.

Parse.js a făcut-o foarte simplă. Odată ce a fost creată o nouă instanță a clasei Blog, putem să setăm valorile pe care le dorește să le aibă și să apeleze Salvați() pentru ao salva în baza de date.

var Blog = Parse.Object.extend ('Blog', create: function (titlu, continut) this.set ('title': title, content: content, author: Parse.User.current ), salvați (null, succes: function (blog) alert ('Ați adăugat un nou blog:' + blog.get ('title')); log (blog); console.log (eroare);););

Sau puteți scrie și datele în Salvați() funcţie:

var Blog = Parse.Object.extend ('Blog', create: function (titlu, continut) this.save ('title': title, content: content, author: Parse.User.current ), succes: function (blog) alert ('Ați adăugat un nou blog:' + blog.get ('title')); console.log (eroare);););

Ambele ar funcționa.

Observați că includ și eu autor în baza de date cu Parse.User.current (). Aceasta este metoda pe care ar trebui să o utilizați pentru a vă conecta utilizatorul curent.

Pasul 4: Apelați blog.create () din AddBlogView

Acum, ca ultim pas pentru a face să funcționeze, trebuie să sunați blog.create () de la AddBlogView tocmai am creat.

Să o adăugăm la a depune() funcţie:

trimiteți: funcția (e) // Preveniți implicit Trimiteți evenimentul e.preventDefault (); // Luați formularul și puneți-l într-un obiect de date var data = $ (e.target) .serializeArray (), // Creați o nouă instanță a Blog blog = new Blog (); // apelați .create () blog.create (date [0] .value, date [1] .value);

Dați-i un test. Se pare că funcționează!

Și dacă o verificați pe Parse.com, veți vedea că este stocat în tabelul Blog.

Felicitări! Înscrieți în baza de date.

3. Păstrați numele autorului și ora postării

Acum, să aruncăm o privire la lista de bloguri din nou:

Veți observa că în locul numelui de utilizator afișăm ID-ul utilizatorului. Și nu arată momentul în care blogul este creat. Avem creat la și updatedAt valorile din spate, dar nu sunt foarte ușor de citit de către utilizator.

Dacă vrem să rezolvăm acest lucru, există două abordări generale:

  • Când citim din baza de date, obținem numele de utilizator după ID și schimbăm formatul timpului de postare.
  • Când scriem în baza de date, adăugăm încă două câmpuri pentru a stoca numele de utilizator și ora.

Dacă luăm prima abordare, facem același lucru de mai multe ori, iar asta folosește timpul și resursele vizitatorului. Prin urmare, dorim să o facem în timp ce scriem în baza de date. Nu vă faceți griji despre lucruri precum "Ce se întâmplă dacă utilizatorul și-a schimbat numele?" totuși - putem întotdeauna să facem o actualizare de grup atunci când se întâmplă acest lucru.

Pasul 1: Adăugați două mai multe coloane în tabelul de bloguri

Ar trebui să fiți foarte familiarizați cu acest proces acum. Să setăm numele și tipul celor două câmpuri după cum urmează:

  • numele autorului (Şir)
  • timp (Şir)

Pasul 2: Adăugați câmpuri de date la crea() funcţie

Apoi trebuie să modificați crea() pentru a înregistra aceste valori:

acest nume ('title': title, 'content': content, 'autor': Parse.User.current (), 'authorName': Parse.User.current ': noua dată (). toDateString (), ...);

Observați că folosesc doar .toDateString () funcționează aici; puteți utiliza alte funcții de dată pentru a obține formatul de timp dorit.

Pasul 3: Actualizați șablonul blogurilor pentru a utiliza aceste valori

În cele din urmă, să actualizăm # bloguri-TPL în index.html pentru a trage noile valori:

Acum puteți să ștergeți aceste postări existente și să adăugați ceva mai mult din noua pagină "Adăugarea unui blog nou".

Acum toate câmpurile ar trebui să funcționeze.

4. Bonus: Editorul WYSIWYG

Pentru că noi folosim conţinut în șablon, veți găsi că puteți pune deja etichete HTML în conținutul dvs.