Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Vytvárame blogovaciu aplikáciu pomocou Reactu, 6. časť: Značky

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 5: Profile Page

Slovak (Slovenčina) translation by Ryan (you can also view the original English article)

V predošlej časti tejto série sme sa pozreli na to, ako implementovať funkciu profilovej stránky vo vašej aplikácii. V tomto návode sa pozrieme, ako implementovať značky na jednotlivé príspevky.

Začíname

Začneme klonovaním zdrojového kódu z poslednej časti tejto série.

Keď je priečinok vyklonovaný, vstúpte do priečinka projektu a nainštalujte vyžadované závislosti.

Spustite Node.js server a vaša aplikácia sa zobrazí na adrese http://localhost:7777/index.html#/.

Vytvárame stránku pre značky

Začnime vytváraním odkazu pre používateľa pre pridanie značky do MongoDB databázy. V stránke index.html pridáme ďalší li odkaz.

Keď používateľ klikne na tento odkaz, mal by sa zobraziť komponent AddTag. Takže v súbore home.jsx pridáme smerovač na tento komponent.

Tu je celý kód smerovača:

Vytvoríme komponent AddTag, ktorý bude vykreslený, keď používateľ klikne na ten odkaz.

Ako vidíte v tomto kóde vyššie, vo vnútri komponentu AddTag sme vykreslili jednoduchú šablónu stránky. Vo vnútri metódy componentDidMount pridávame triedy pre označenie aktívnosti odkazu pre komponent AddTag.

Uložte zmeny a reštartujte server. Prihláste sa do aplikácie a kliknite na odkaz Add Tag. Uvidíte túto stránku:

React Blog - Add Tag View

Implementujeme funkcionalitu pre pridanie značiek

Určte stav aplikácie pre sledovanie zmien v značke.

V metóde render prepojte premennú do textového políčka.

Ako vidíte v kóde vyššie, prepojili sme udalosť onChange do políčka pre zistenie zmien v hodnote. Prepojte metódu onChange s metódou handleTagChange.

Teraz vo vnútri komponentu určte metódu handleTagChange.

Keď používateľ pridá značku, musíte tie dáta uložiť. Teraz pridáme udalosť onClick do tlačidla.

Prepojte metódu addTag vo vnútri komponentu a určte metódu pre vytvorenie požiadavky na server.

Teraz určme metódu addTag, aby sme vytvorili požiadavku na adresu /addtag.

Teraz vo vnútri súbora app.js vytvoríme smerovač na adresu /addtag, ktorý rozoberie dáta a pridá ich do databázy.

Vo vnútri /addtag sme si zavolali metódu addTag zo súbora post.js. Teraz vytvoríme metódu addTag vo vnútri súbora post.js:

Ako je možné vidieť v kóde vyššie, použili sme MongoClient pre pripojenie do databázy MongoDB. Vložili sme dáta značky do kolekcie zvanej tag. Keď boli dáta vložené bez akejkoľvek chyby, funkcia vráti boolean true, inak funkcia vráti boolean false.

Uložte všetky zmeny a reštartujte server. Prihláste sa do aplikácie a kliknite na odkaz Add Tag. Zadajte názov značky a kliknite na tlačidlo Add. Pozrite sa na konzolu prehliadača a uvidíte, že v konzole je vypísaná hláška, že dáta boli úspešne uložené.

Zobrazenie značiek na stránke

Keď ste pridali značky zo stránky pre pridanie značiek, značky sa musia zobraziť na stránke pre pridanie príspevku. Začnime vytváraním metódy getTags vo vnútri súbora post.js, ktorý sa pripojí na databázu pre získanie značiek:

Ako je možné vidieť v kóde vyššie, použili ste MongoClient pre pripojenie sa na databázu. Keď bola kolekcia načítaná, bola prevedená do poľa pomocou metódy toArray a potom posunutá do funkcie spätného volania.

Ďalej v súbore app.js vytvorte smerovač na volanie metódy getTag.

V súbore home.jsx vo vnútri komponentu AddPost vytvorte metódu zvanú getTags, ktorý zavolá /gettag a získa zoznam značiek.

Keď sa získajú dáta z API, nastavte ich ako hodnotu premennej stavu tags.

Vo vnútri metódy render komponentu ShowPost pridajte rozbaľovací prvok a prepojte ho so premennou stavu tags:

Ako vidíte vyššie, použili sme metódu map pre prepojenie premennej stavu tags s rozbaľovacím prvkom.

Vo vnútri metódy componentDidMount zavolajte metódu getTags pre načítanie značiek po nasadení komponentu.

Uložte všetky zmeny a reštartujte server. Keď otvoríte stránku pre pridanie príspevku, mali by ste uvidieť všetky značky načítané v rozbaľovacom políčku.

React Blog App - Category Loaded in Add Post Page

Do rozbaľovacieho políčka pridajme predvolenú možnosť s hodnotou 0.

Do rozbaľovacieho políčka sme pridali udalosť onChange, takto vyzerá udalosť handleTagChange:

Keď používateľ si vyberie značku, jej hodnota bude dostupná v premennej stavu tag.

Zahrnime premennú tag v metóde addPost komponentu AddPost.

V API zmeňme nastavenie odosielania do /addpost tak, aby sa pri odosielaní zahrnul parameter tag.

Upravme metódu addPost v súbore post.js, aby bol zahrnutý parameter tag.

Upravme metódu getPostWithId tak, aby nastavil hodnotu rozbaľovacieho políčka na hodnotu značky príspekvu.

Uložte zmeny a reštartujte server. Prihláste sa a choďte na stránku na pridanie príspevku a pridajte príspevok s vybranou značku. Váš nový príspevok bude uložený a zobrazený. Kliknite na tlačidlo pre úpravu príspevku a uvidíte detaily a značku príspevku.

Záver

V tomto návode sme si vytvorili stránku na pridanie značky. Pridali sme políčko na vybratie značky, ktoré sa zobrazí popri políčok názvu a obsahu.

Dúfame, že ste si túto sériu užili. Dajte nám vedieť o vašej spätnej väzbe v komentároch nižšie.

Zdrojový kód je dostupný na GitHub.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.