Opprette en Blogging App ved hjelp av React, Del 6 Tags

I den forrige delen av denne opplæringsserien så du hvordan du implementerer profilsidefunksjonen for React blog-programmet. I denne veiledningen ser du hvordan du implementerer koder for blogginnleggene.

Starter

La oss begynne med å klone kildekoden fra den siste delen av serien.

https://github.com/royagasthyan/ReactBlog-Profile

Når katalogen er blitt klonet, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.

cd ReactBlogApp-Profile npm installere

Start Node.js-serveren, og du vil få programmet å kjøre på http: // localhost: 7777 / index.html # /.

Opprette taggsiden

La oss begynne med å opprette en kobling for brukeren å legge til en tag i MongoDB-databasen. I index.html side, legg til en ekstra li for Legg til tag side.

stikkord

Når brukeren klikker på Legg til tag link, det burde vise Legg til tag Reagekomponent. Så la oss legge til en rute for Legg til tag komponent i home.jsx fil.

Her er den komplette ruten liste:

ReactDOM.render (      , document.getElementById ( 'app'));

La oss lage Legg til tag komponent som vil bli gjengitt når brukeren klikker på Legg til tag-lenken. 

klasse AddTag strekker React.Component konstruktør (rekvisitter) super (rekvisitter);  componentDidMount () document.getElementById ('addHyperLink'). className = ""; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = ""; document.getElementById ('tagHyperlink'). className = "aktiv";  gjengivelse () retur ( 
 
 
 
 
  
 
 Legg til tag 
 
 
 
 )

Som vist i koden ovenfor, inne i Legg til tag reagere komponent klasse du har gjengitt den grunnleggende HTML-malen for siden. Inne i componentDidMount Metode du har klassenavn for å lage Legg til tag hyperkobling aktiv.

Lagre endringene ovenfor og start serveren på nytt. Logg inn på søknaden og klikk på Legg til tag lenke, og du vil kunne se Legg til tag side.

Implementere funksjonaliteten for Add Tag

Definer en tilstandsvariabel for å holde oversikt over tagendringen.

konstruktør (rekvisitter) super (rekvisitter); this.state = tag: ";

Fest merkestatusvariabelen til inngangselementet i gjengemetoden.

Som vist i koden ovenfor har du også vedlagt en onChange hendelsen til inngangen for å holde oversikt over verdiendringen. Bind inn onChange metode handleTagChange inne i konstruktøren.

konstruktør (rekvisitter) super (rekvisitter); this.handleTagChange = this.handleTagChange.bind (dette); this.state = tag: ";

La oss nå definere handleTagChange metode inne i Legg til tag Reagekomponent.

handleTagChange (e) this.setState (tag: e.target.value)

Når brukeren klikker på Legg til-knappen for å legge til taggen, må du lagre dataene. Så la oss feste en ved trykk hendelsen til inngangsknappen.

Legg til tag

Bind inn Legg til tag metoden i React-komponentkonstruatoren og definer metoden for å lage et API-anrop til Node.js-serverens endepunkt.

konstruktør (rekvisitter) super (rekvisitter); this.addTag = this.addTag.bind (dette); this.handleTagChange = this.handleTagChange.bind (dette); this.state = tag: ";

Neste, la oss definere Legg til tag metode for å gjøre API-anropet til /Legg til tag sluttpunkt.

tak (funksjon (feil) console.log (feil);); 

La oss opprette endringspunktet for Node.js API for /Legg til tag. Inne i app.js fil, opprett /Legg til tag rute, som vil analysere dataene og sette dataene inn i MongoDB-databasen.

app.post ('/ addtag', funksjon (req, res) var tag = req.body.tag; post.addTag (tag, funksjon (resultat) res.send (result););)

Inne i /Legg til tag Endpoint, du har ringt til en metode som kalles Legg til tag fra post.js fil. La oss lage Legg til tag metode inne i post.js fil. Slik ser det ut:

addTag: funksjon (tagnavn, tilbakeringing) MongoClient.connect (url, funksjon (err, db) db.collection ('tag'). insertOne ("navn": tagName, funksjon (feil, resultat) assert. lik (feil, null); console.log ("Lagret merketaljer."); hvis (err == null) tilbakeringing (sann) annet tilbakeringing (falsk);;); 

Som vist i koden ovenfor har du brukt MongoClient å koble til MongoDB-databasen. Du har satt inn tagdataene i en samling som heter tag inne i databasen. Når dataene er satt inn uten feil, sendes Boolean True til tilbakeringingsfunksjonen. Hvis det oppdages en feil, returneres en boolsk falsk til tilbakeringingsfunksjonen.

Lagre endringene ovenfor og start serveren på nytt. Logg på appen og klikk på Legg til tag link. Skriv inn et navn og klikk på Legg til knapp. Kontroller nettleserkonsollen, og du bør kunne se suksessmeldingen som er logget inn i nettleserkonsollen. 

Populere merkene på siden Legg til innlegg

Når du har lagt til kodene fra Legg til tag side, merker må fylles i Legg til innlegg side. La oss begynne med å opprette en metode som kalles getTags inne i post.js fil som ville koble til MongoDB-databasen og hente taggene. Slik ser det ut:

getTag: funksjon (tilbakering) MongoClient.connect (url, funksjon (err, db) db.collection ('tag', funksjon (feil, samling) collection.find (). toAray tilbakeringing (liste);););)

Som vist i koden ovenfor har du brukt MongoClient til å koble til MongoDB-databasen. Når samlingen er hentet, er den konvertert til array ved hjelp av toArray metode og deretter videreført til tilbakeringingsfunksjonen. 

Deretter oppretter du endringspunktet for Node.js API som vil kalle det ovenfor getTag metode i app.js. 

app.post ('/ gettag', funksjon (req, res) post.getTag (funksjon (resultat) res.send (result););)

I home.jsx fil inne i AddPost komponent, opprett en metode som kalles getTags som vil gjøre / getTag API-anrop og hente taglisten. 

getTags () var selv = dette; axios.post ('/ getTag', ) .then (funksjon (svar) if (response) self.setState (tags: response.data);) .catch (funksjon (feil) konsoll .log ('feil er', feil);); 

Når dataene er hentet fra API, må du stille inn dataene i tags tilstandsvariabel.

Inne i gjengivelsesmetoden til ShowPost Reag komponent, legg til det valgte HTML-elementet for å binde tags tilstandsvariabel. Slik ser det ut:

 Velg Tag:  this.state.tags.map (funksjon (tag, i) retur ( Tag.name) .bind (dette))  

Som vist i koden ovenfor har du brukt kart metode for å kartlegge tags Angi variabel til utvalgselementet.

Inne i componentDidMount metode, ring til getTags Metode for å legge inn koder når komponenten har montert.

componentDidMount () document.getElementById ('addHyperLink'). className = "active"; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = ""; document.getElementById ('tagHyperlink'). className = ""; this.getPostWithId (); this.getTags (); 

Lagre endringene ovenfor og start serveren på nytt. Når du har lastet inn Legg til innlegg siden, bør du ha taggene lastet i et valgt HTML-element.

La oss legge til et standardalternativ i rullegardinmenyen med verdi 0.

  Velg Merk this.state.tags.map (funksjon (tag, i) retur ( Tag.name) .bind (dette))  

Du har lagt til en onChange hendelse til det valgte HTML-elementet. Her er hva handleTagChange hendelsen ser ut som:

handleTagChange (e) this.setState (tag: e.target.value)

Når brukeren velger taggen, vil verdien bli tilgjengelig i tilstandsvariabelen stikkord. 

Inkluder stikkord variabel i addPost metode i AddPost Reagekomponent. 

addPost () axios.post ('/ addPost', tittel: this.state.title, emne: this.state.subject, tag: this.state.tag, id: this.props.params.id). da (funksjon (svar) console.log ('svar fra legge til innlegg er', svar); hashHistory.push ('/')) .catch (funksjon (feil) console.log (feil);); 

Endre / addpost API-endepunkt for å inkludere stikkord parameter.

app.post ('/ addpost', funksjon (req, res) var title = req.body.title; var subject = req.body.subject; var tag = req.body.tag; var id = req.body. id; console.log ('id er', id); hvis (id == "|| id == undefined) console.log ('add'); post.addPost (tittel, emne, tag, funksjon ) res.send (resultat);); else console.log ('update', tittel, emne); post.updatePost (id, tittel, emne, tag, funksjon (resultat) res.send ););) 

Endre addPost metode i post.js fil for å inkludere stikkord parameter.

add-post: funksjon (tittel, emne, tag, tilbakeringing) MongoClient.connect (url, funksjon (err, db) db.collection "tag": tag, funksjon (feil, resultat) assert.equal (feil, null); console.log ("Lagret blogginnleggets detaljer."); hvis (err == null) tilbakeringing (sann) ellers tilbakeringing (falsk));); 

Endre getPostWithId Metode for å angi rullegardinmenyen når postdetaljene hentes.

getPostWithId () var id = this.props.params.id; var selv = dette; axios.post ('/ getPostWithId', id: id) .then (funksjon (svar) hvis (svar) self.setState (title: response.data.title); self.setState (subject: response.data.subject); self.setState (tag: response.data.tag)) .catch (funksjon (feil) console.log ('feil er', feil);); 

Lagre endringene ovenfor og start serveren på nytt. Logg inn og naviger til Legg til innlegg side og legg til et innlegg med en valgt tagg. Du vil få det nye innlegget lagret og oppført. Klikk på redigeringsknappen for å redigere postdetaljer og tagg. 

Pakke det opp

I denne opplæringen så du hvordan du implementerer tilleggs-siden. Du har lagt til taggfeltet på siden Legg til innlegg sammen med tittel og fagfelt. 

Håper du likte denne opplæringsserien. Gi oss beskjed om dine tanker, forslag eller eventuelle rettelser i kommentarene nedenfor.

Kildekode fra denne opplæringen er tilgjengelig på GitHub.