Share
In het vorige deel van deze tutorialserie zag je hoe je de update- en verwijderpostfunctie voor onze React-blogtoepassing implementeerde. In deze zelfstudie implementeert u de profielpagina voor de blogtoepassing.
Laten we beginnen door de broncode uit het laatste deel van de serie te klonen.
https://github.com/royagasthyan/ReactBlogApp-EditDelete
Nadat de map is gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd ReactBlogApp-EditDelete npm install
Start de Node.js-server en de toepassing wordt uitgevoerd op http: // localhost: 7777 / index.html # /.
Eerst moet u een nieuw menu-item toevoegen in het opgeroepen menu van de startpagina Profiel. Op de home.html pagina, voeg een nieuw toe ul element voor de profielpagina zoals getoond:
Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 7777 / en log in op de applicatie. Nadat u bent ingelogd, kunt u de menulijst bekijken met de profielkoppeling.
Om de link naar het profielmenu te laten werken, moet je een nieuwe route toevoegen aan de bestaande routes in de home.jsx het dossier.
ReactDOM.render (, document.getElementById ( 'app'));
In de home.jsx bestand, maak een nieuwe component aan Toon profiel. Voeg een aantal toestandsvariabelen toe voor naam, wachtwoord, e-mail, en ID kaart. Binnen de rendermethode van de Toon profiel component, voeg de HTML toe om de profieldetails weer te geven. Hier is hoe het Toon profiel component ziet eruit:
Accentsconagua
class ShowProfile breidt React.Component constructor (props) super (rekwisieten); this.state = name: ", email:", password: ", id:"; componentDidMount () document.getElementById ('addHyperLink'). className = ""; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = "active"; this.getProfile (); updateProfile () getProfile () render () retourneren ( )Wanneer de profielpagina is geladen, moet u de details uit de database ophalen en deze in het formulier invullen. Voeg de code toe in de getProfile methode binnen de Toon profiel component om de AJAX-oproep te doen om details over de gebruiker te krijgen.
axios.post ('/ getProfile', ) .then (functie (antwoord) ). catch (functie (fout) console.log ('error is', error););Nadat de details in het antwoord zijn ontvangen, moet u de toestandsvariabelen voor hetzelfde bijwerken. Hier is de getProfile methode van de Toon profiel component:
getProfile () var self = this; axios.post ('/ getProfile', ) .then (functie (antwoord) if (reactie) self.setState (name: response.data.name); self.setState (email: response.data .email); self.setState (password: response.data.password);) .catch (function (error) console.log ('error is', error);); Binnen in de app.js bestand, maakt u een methode genaamd getProfile die de POST-methode aanroep van de Toon profiel's getProfile methode. De getProfile methode binnen de app.js bestand zal in plaats daarvan een oproep doen naar user.js om details uit de database te krijgen. Hier is hoe het eruit ziet:
app.post ('/ getProfile', functie (req, res) user.getUserInfo (sessions.username, function (result) res.send (result)))Binnen in de user.js bestand, maakt u een methode genaamd getUserInfo die de MongoDB-database doorzoekt met behulp van de gebruikersnaam om de vereiste gegevens te krijgen. Hier is hoe het getUserInfo methode lijkt:
getUserInfo: function (gebruikersnaam, callback) MongoClient.connect (url, functie (err, db) db.collection ('user'). findOne (email: username, function (err, result) if (result = = null) callback (false) else callback (result););); Zoals te zien is in de bovenstaande code, bel je de MongoDB via de MongoClient om de gebruikersverzameling te vragen op basis van het e-mailadres. Nadat het resultaat is ontvangen, keert het terug naar de callback-functie.
Sla de bovenstaande wijzigingen op en start de Node.js-server opnieuw. Richt uw browser op http: // localhost: 7777 / # / en log in op de applicatie. Klik op de profielkoppeling in het menu en u kunt de profielgegevens bekijken die op de pagina zijn ingevuld.
Om de wijziging van de naam en het wachtwoord af te handelen, moet u twee methoden definiëren handleNameChange en handlePasswordChange in de Toon profiel component. Met deze methoden worden de statusvariabelen voor tekstwijziging ingesteld. Hier is hoe het eruit ziet:
handleNameChange (e) this.setState (name: e.target.value) handlePasswordChange (e) this.setState (password: e.target.value)
Bind de methoden in de Toon profiel bouwer.
constructor (rekwisieten) super (rekwisieten); this.handleNameChange = this.handleNameChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this); this.updateProfile = this.updateProfile.bind (this); this.getProfile = this.getProfile.bind (this); this.state = name: ", email:", password: ", id:";
Definieer een methode genaamd profiel bijwerken die wordt aangeroepen wanneer de gebruiker op de knop klikt Bijwerken om de gebruikersgegevens bij te werken. Binnen in de profiel bijwerken methode, maak een POST-oproep naar de profiel bijwerken methode in de app.js bestand samen met de gewijzigde naam en wachtwoord. Hier is hoe het profiel bijwerken methode in de Toon profiel component ziet eruit:
updateProfile () var self = this; axios.post ('/ updateProfile', name: this.state.name, password: this.state.password) .then (function (response) if (response) hashHistory.push ('/') ). catch (functie (fout) console.log ('error is', error);); Zodra een antwoord is ontvangen van de POST-oproep, wordt het scherm genavigeerd naar de blogberichtenlijst.
Binnen in de app.js bestand, maakt u een methode genaamd profiel bijwerken die de doorgegeven parameters analyseren en een oproep doen naar de MongoDB-database.
app.post ('/ updateProfile', functie (req, res) var name = req.body.name; var wachtwoord = req.body.password; user.updateProfile (naam, wachtwoord, sessies.username, functie (resultaat) res.send (result);))Zoals te zien in de bovenstaande code, zodra de parameters zijn geparseerd in de profiel bijwerken methode in de app.js bestand, de user.updateProfile methode wordt aangeroepen met gewijzigd naam, wachtwoord, en gebruikersnaam.
Laten we het definiëren user.updateProfile methode binnen de user.js bestand, dat een oproep naar de MongoDB database en werk het naam en wachtwoord gebaseerd op de gebruikersnaam. Hier is hoe het profiel bijwerken methode in de user.js bestand ziet er:
updateProfile: functie (naam, wachtwoord, gebruikersnaam, callback) MongoClient.connect (url, functie (err, db) db.collection ('user'). updateOne ("email": gebruikersnaam, $ set: "naam": naam, "wachtwoord": wachtwoord, functie (err, resultaat) if (err == null) callback (true) else callback (false));); In de bovenstaande code heeft u de gebruikersgegevens bijgewerkt op basis van het e-mailadres met behulp van de updateOne methode.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Log in op de applicatie en klik op de Profiel link. Wijzig de naam en het wachtwoord en klik op de Bijwerken knop. Probeer in te loggen en u kunt inloggen met het nieuwe wachtwoord.
In deze zelfstudie hebt u de profielpagina voor de blogtoepassing geïmplementeerd. U hebt geleerd hoe u details uit een database kunt ophalen en deze op de pagina kunt vullen met React. U hebt ook de functionaliteit geïmplementeerd om profielgegevens bij te werken.
Broncode van deze tutorial is beschikbaar op GitHub. Laat me je gedachten of suggesties in onderstaande opmerkingen weten.
