Accentsconagua

Opprette en Blogging App ved hjelp av React, Del 5 Profil Side

Kode
Share

I den forrige delen av denne opplæringsserien så du hvordan du implementerer oppdateringen og slett postfunksjonen for vårt React-bloggprogram. I denne veiledningen vil du implementere profilsiden for bloggprogrammet.

Starter

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

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

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

cd ReactBlogApp-EditDelete npm installere

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

Opprette profiloversikten

Først må du legge til et nytt menyelement på startsiden menyen som heter Profil. På home.html side, legg til en ny ul element for profilsiden som vist:

     
  • Hjem
    •  
  • Legg til
    •  
  • Profil
    •  
  • Logg ut
    •

Lagre endringene ovenfor og start serveren på nytt. Pek nettleseren din til http: // localhost: 7777 / og logg inn på programmet. Når du er logget inn, vil du kunne se menylisten med profillenken.

For profilmeny lenken til arbeid, må du legge til en ny rute til eksisterende ruter i home.jsx fil.

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

I home.jsx fil, opprett en ny komponent ShowProfile. Legg til noen tilstandsvariabler for Navn, passord, e-post, og id. Inne i gjengivelsesmetoden til ShowProfile komponent, legg til HTML for å gjengi profildetaljer. Her er hvordan ShowProfile komponent ser ut:

klasse ShowProfile utvider React.Component konstruktør (rekvisitter) super (rekvisitter); this.state = name: ", email:", passord: ", id:";  componentDidMount () document.getElementById ('addHyperLink'). className = ""; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = "active"; this.getProfile ();  updateProfile ()  getProfile ()  render () return ( 
 
 
 
 
  
 
  
  
 
 
 )

Når profilsiden er lastet, må du hente detaljene fra databasen og fylle den i skjemaet. Legg til koden i getProfile metode inne i ShowProfile komponent for å gjøre AJAX-anropet for å få detaljer om brukeren.

axios.post ('/ getProfile', ) .then (funksjon (respons) ) .catch (funksjon (feil) console.log ('feil er', feil););

Når detaljene er mottatt i svaret, må du oppdatere tilstandsvariablene for det samme. Her er getProfile metode fra ShowProfile komponent:

getProfile () var selv = dette; axios.post ('/ getProfile', ) .then (funksjon (svar) if (response) self.setState (navn: response.data.name); self.setState (email: response.data .email); self.setState (passord: response.data.password);) .catch (funksjon (feil) console.log ('feil er', feil););

Inne i app.js fil, opprett en metode som kalles getProfile som vil håndtere POST-metallsamtalen fra ShowProfile's getProfile metode. De getProfile metode inne i app.js filen vil i stedet ringe til user.js for å få detaljer fra databasen. Slik ser det ut:

app.post ('/ getProfile', funksjon (req, res) user.getUserInfo (sessions.username, function (result) res.send (result)))

Inne i user.js fil, opprett en metode som kalles getUserInfo som vil spørre MongoDB-databasen ved hjelp av brukernavnet for å få de nødvendige detaljene. Her er hvordan getUserInfo metoden ser ut:

brukernavn, tilbakeringing) MongoClient.connect (url, funksjon (err, db) db.collection ('bruker'). findOne (email: brukernavn = null) callback (false) else callback (result);););

Som vist i koden ovenfor, ringer du til MongoDB ved hjelp av MongoClient å spørre brukerens samling basert på e-postadressen. Når resultatet er mottatt, returneres det tilbake til tilbakeringingsfunksjonen. 

Lagre endringene ovenfor og start om Node.js-serveren. Pek nettleseren din til http: // localhost: 7777 / # / og logg inn på programmet. Klikk på profillenken i menyen, og du vil kunne se profildetaljer som er fylt på siden.

Oppdaterer brukerprofilen

For å håndtere navn og passord endring, må du definere to metoder kalt handleNameChange og handlePasswordChange i ShowProfile komponent. Disse metodene vil angi tilstandsvariablene på tekstendring. Slik ser det ut:

handleNameChange (e) this.setState (navn: e.target.value) handlePasswordChange (e) this.setState (passord: e.target.value)

Bind metodene i ShowProfile konstruktør.

konstruktør (rekvisitter) super (rekvisitter); this.handleNameChange = this.handleNameChange.bind (dette); this.handlePasswordChange = this.handlePasswordChange.bind (dette); this.updateProfile = this.updateProfile.bind (dette); this.getProfile = this.getProfile.bind (this); this.state = name: ", email:", passord: ", id:";

Definer en metode som kalles Oppdater profil som vil bli kalt når brukeren klikker på Oppdater knappen for å oppdatere brukerens detaljer. Inne i Oppdater profil metode, gjør et POST-anrop til Oppdater profil metode i app.js filen sammen med den endrede Navn og passord. Her er hvordan Oppdater profil metode i ShowProfile komponent ser ut:

updateProfile () var self = this; axios.post ('/ updateProfile', navn: this.state.name, passord: this.state.password) .then (funksjon (svar) hvis (svar) hashHistory.push ('/') ) .catch (funksjon (feil) console.log ('feil er', feil););

Når et svar er mottatt fra POST-anropet, navigeres skjermen til bloggposten.

Inne i app.js fil, opprett en metode som kalles Oppdater profil som vil analysere innpassede parametere og ringe til MongoDB-databasen.

app.post ('/ updateProfile', funksjon (req, res) var navn = req.body.name; var passord = req.body.password; user.updateProfile (navn, passord, økter.brukernavn, funksjon res.send (resultat);))

Som vist i ovennevnte kode, når parametrene er analysert i Oppdater profil metode i app.js fil, den user.updateProfile Metoden kalles med endret Navn, passord, og brukernavn. 

La oss definere user.updateProfile metode inne i user.js fil, som vil ringe til MongoDB database og oppdatere Navn og passord basert på brukernavn. Her er hvordan Oppdater profil metode i user.js fil ser ut:

UpdateOne ("email": brukernavn, $ sett:  "navn": navn, "passord": passord, funksjon (feil, resultat) hvis (err == null) tilbakeringing (sann) annet tilbakeringing (falsk) ;;);

I ovennevnte kode oppdaterte du brukeropplysningene basert på e-postadressen ved hjelp av updateOne metode.

Lagre endringene ovenfor og start serveren på nytt. Logg inn på søknaden og klikk på Profil link. Endre navn og passord og klikk på Oppdater knapp. Prøv å logge på, og du vil kunne logge inn ved å bruke det nye passordet. 

Pakke det opp

I denne veiledningen implementerte du profilsiden for bloggprogrammet. Du lærte hvordan du henter detaljer fra en database og fyller den på siden ved å bruke React. Du har også implementert funksjonaliteten for å oppdatere profildetaljer.

Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi meg beskjed om dine tanker eller forslag i kommentarene nedenfor.

Kode
×