Opprette en Blogging App ved hjelp av React, Del 3 Legg til og Vis innlegg

I den forrige delen av denne opplæringsserien så du hvordan du implementerer påloggings- og påloggingsfunksjonaliteten. I denne delen av opplæringen vil du implementere brukerens hjemmeside og funksjonaliteten for å legge til og vise blogginnleggene.

Starter

La oss begynne med å klone kildekoden fra første del av opplæringen.

https://github.com/royagasthyan/ReactBlogApp-SignUp

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

cd ReactBlogApp-SignUp npm installere

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

Opprette brukerens startside

Når brukeren prøver å logge på programmet, må du validere brukerens legitimasjon og, hvis det er gyldig, opprette en økt. Hvis du vil bruke økter i en Node.js-app, må du installere ekspress-session bruker Node Package Manager (npm).

 npm installere ekspress-sesjon - lagre

Krever ekspress-session i app.js fil.

var session = krever ('express-session');

For å bruke økten må du sette en økthemmelig.

app.use (økt (hemmelig: 'my-secret'));

Definer nå en variabel som heter økter i det globale omfanget.

var økter

Tilordne økter variabel i /Logg inn metode ved hjelp av forespørselsparameteren.

økter = req.session;

Bruker økter variabel, beholder du det påloggede brukernavnet i økten.

sessions.username = user_name;

Opprett en fil som heter home.html inne i html mappe i søknaden. Slik ser det ut:

             
 
  
Reag Blog App
 
 
 
  
Liste gruppepost overskrift
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
   
Liste gruppepost overskrift
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
   
Liste gruppepost overskrift
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
  
 
  
   

Opprett en ekspressrute kalt /hjem som vil gjøre hjemmesiden til en gyldig bruker.

 ');)

Som vist i koden ovenfor, når brukeren blir omdirigert til /hjem rute, hvis økter og sessions.username eksisterer, er hjemmesiden gjengitt.

Endre Logg inn Metode for å sende et suksessrespons på vellykket brukervalidering.

app.post ('/ signin', funksjon (req, res) sessions = req.session; var user_name = req.body.email; var passord = req.body.password; user.validateSignIn (brukernavn, passord, funksjon resultat) hvis (resultat) sessions.username = user_name; res.send ('suksess'););)

Ovennevnte suksessrespons blir analysert på React-siden, og hvis vellykket blir brukeren omdirigert til /hjem ekspressrute. I main.jsx fil, inne i Logg inn komponent inne i Logg inn metode, endre koden for å omdirigere til hjemmesiden.

signIn () axios.post ('/ signin', email: this.state.email, passord: this.state.password) .then (funksjon (svar) if (response.data == 'suksess') window.location.assign ('http: // localhost: 7777 / home') .catch (funksjon (feil) console.log (feil);); 

Lagre endringene ovenfor og start på nodeserveren. Logg inn med et gyldig brukernavn og passord, og du blir omdirigert til hjemmesiden.

Endre den overordnede blogginnlegget til en React-komponent. Opprett en fil som heter home.jsx. Inne i home.jsx fil, opprett en React-komponent som heter ShowPost som vil gjøre bloggen postliste. Flytt den statiske HTML-en i React-komponent gjengemetoden. Her er hvordan ShowPost Reakt komponent ser ut:

klasse ShowPost utvider React.Component konstruktør (rekvisitter) super (rekvisitter);  gjengivelse () retur ( 
  
Liste gruppepost overskrift
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
   
Liste gruppepost overskrift
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
   
Liste gruppepost overskrift
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
  
 )

Endre home.html side for å inkludere de nødvendige React-biblioteker. Her er den endrede home.html side:

                  
 
  
Reag Blog App
 
 
 
  
    

Som vist i HTML-koden ovenfor har container div blitt oppkalt app, innenfor hvilken React-komponentene vil bli vist.

Lagre endringene ovenfor og start nodeserveren på nytt. Logg inn på bloggprogrammet, og en gang på hjemmesiden vil du ha ShowPost Reag komponent gjengitt.

Nå må du dynamisk fylle verdiene i postlisten. Før du gjør det, la oss lage en side for å legge til et innlegg. Ved å klikke på ovenfor Legg til hyperkobling, du må vise siden for å legge til blogginnlegget. 

Legg til postreaktorkomponent

La oss opprette en legg til postreaktorkomponent for å legge til blogginnleggene. Den vil bestå av en tittel-innboks og et fagtekstområde. I home.jsx, opprett en AddPost Reag komponent for å legge til blogginnlegg. Her er hvordan AddPost Reakt komponent ser ut:

klasse AddPost strekker seg React.Component render () return ( 
 
 
 
 
  
 
  
 Legg til innlegg 
 
 
 )

Når brukeren går inn i tittelen og innlegget, må du håndtere tekstendringshendelsene i React-komponenten. Legg til følgende endringshendelseshåndterer til AddPost Reagekomponent.

handleTitleChange (e) this.setState (title: e.target.value) handleSubjectChange (e) this.setState (body: e.target.value)

Legg til endringshendelsen til AddPost gjengi HTML.

Bind tilstandsvariablene og hendelsene i React constructor-metoden.

konstruktør (rekvisitter) super (rekvisitter); this.handleTitleChange = this.handleTitleChange.bind (dette); this.handleSubjecChange = this.handleSubjectChange.bind (dette); this.state = title: ", emne:"; 

Når brukeren klikker på Legg til innlegg knappen, må du legge inn tittelen og emnet fra React brukergrensesnittet til backend Node.js for å lagre det i MongoDB-databasen. Opprett en metode som kalles addPost i AddPost Reag komponent for å legge inn tittelen og gjenstand for Node.js forespørselshåndterer. Her er hvordan addPost metode i AddPost Reakt komponent ser ut:

addPost () axios.post ('/ addPost', tittel: this.state.title, emne: this.state.subject) .then (funksjon (svar) console.log ('svar fra legg til innlegg er' , svar); hashHistory.push ('/')) .catch (funksjon (feil) console.log (feil);); 

Som vist i koden ovenfor har du brukt Axios å legge inn blogginnleggene til Node.js-serveren. 

Nå må du opprette en postmodul som vil håndtere å legge til og få postopplysningene. Opprett en fil som heter post.js i prosjektkatalogen. I post.js fil, eksporter en addPost metode som vil sette inn detaljer i MongoDB-databasen. Krever MongoClient og opprett addPost Metode for å sette inn postdetaljer i MongoDB-databasen. Her er hvordan post.js fil ser ut:

var MongoClient = krever ('mongodb'). MongoClient; var assert = krever ('assert'); var url = 'mongodb: // localhost: 27017 / Blog'; modul (port), (emne, tilbakering) MongoClient.connect (url, funksjon (err, db) db.collection (post) : emne, funksjon (feil, resultat) assert.equal (feil, null); console.log ("Lagret blogginnleggets detaljer."), hvis (err == null) tilbakeringing (falsk)  ); );  

Som vist i koden ovenfor koblet du til MongoDB-databasen ved hjelp av kontakten og satt inn en plate. Når operasjonen er utført, sjekket du eventuelt feilen, og returnerte statusen til tilbakeringingsfunksjonen.

Inne i app.js fil, opprett en forespørsel handler kalt addPost som vil ringe til addPost metode fra post.js. Slik ser det ut:

app.post ('/ addpost', funksjon (req, res) varittel = req.body.title; var subject = req.body.subject; post.addPost (tittel, emne, funksjon (resultat) res.send (resultat); ); )

Lagre endringene ovenfor og start om Node.js-serveren. Logg inn på programmet, klikk på Legg til lenke, og skriv inn detaljene for å legge til et innlegg. Når du er ferdig, klikker du på Legg til innlegg knappen og detaljene skal lagres i MongoDB-databasen.

Vis postreaktorkomponent

Først må du hente de lagrede innleggene fra MongoDB. Inne i post.js fil, opprett en metode som kalles GetPost som vil hente postdetaljer. Slik ser det ut:

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

Koden ovenfor hentes fra MongoDB-samlingen, konverterer den til en liste, og sender den tilbake til tilbakeringingsfunksjonen. I home.jsx fil, inne i ShowPost komponent, hent postdetaljer i componentDidMount  metode. Slik ser det ut:

componentDidMount () var self = this; axios.post ('/ getPost', ) .then (funksjon (respons) ) .catch (funksjon (feil) console.log ('feil er', feil);); 

Ovennevnte kode gjør en innleggsforespørsel til Node.js server-metoden / getPost som vil ringe til getPost metode i post.js fil. Her er / getPost metode i app.js fil.

app.post ('/ getpost', funksjon (req, res) post.getPost (funksjon (resultat) res.send (result););)

Når postdetaljer er hentet i Axios suksess tilbakeringing, hold detaljene inne i en state array variabel. Erklære en variabel som heter innlegg inne i ShowPost konstruktør.

konstruktør (rekvisitter) super (rekvisitter); this.state = innlegg: []; 

I suksess tilbakeringing av Axios ajax-anrop, sett tilstandsvariabelen som vist:

self.setState (innlegg: response.data)

Når du har postopplysningene, må du dynamisk opprette den nødvendige HTML-filen i React-komponentens gjengivelsesmetode. Slik ser det ut: 

gjengivelse () retur ( 
 this.state.posts.map (funksjon (post, indeks) return  
 Post.title
 
 Post.subject
  ) 
 )

Ovenstående kode iterates the innlegg stat variabel og skaper HTML dynamisk. Lagre endringene ovenfor og start om Node.js-serveren. Logg inn på bloggprogrammet og opprett et par blogginnlegg ved hjelp av Legg til knappen på hjemmesiden. Når innleggene er lagt til, vil de bli vist på hjemmesiden.

Pakke det opp

I denne veiledningen så du hvordan du lager React-komponenter for å legge til og vise blogginnlegg. I neste del av denne opplæringsserien lærer du hvordan du legger til funksjonaliteten for å slette og oppdatere blogginnleggene. 

Gi meg beskjed om tankene dine om denne opplæringen i kommentarseksjonen nedenfor. Kildekode fra denne opplæringen er tilgjengelig på GitHub.