Een blogging-app maken met React, deel 3 bericht toevoegen en weergeven

In het vorige deel van deze tutorials zag u hoe u de aanmeldings- en inlogfunctionaliteit implementeerde. In dit deel van de zelfstudie implementeert u de gebruikershomepage en de functionaliteit om blogposts toe te voegen en weer te geven.

Ermee beginnen

Laten we beginnen door de broncode uit het eerste deel van de zelfstudie te klonen.

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

Nadat de map is gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.

cd ReactBlogApp-SignUp npm installeren

Start de Node.js-server en de toepassing wordt uitgevoerd op http: // localhost: 7777 / index.html # /.

De startpagina van de gebruiker maken

Zodra de gebruiker probeert in te loggen bij de toepassing, moet u de gebruikersreferenties valideren en, indien geldig, een sessie maken. Als u sessies in een Node.js-app wilt gebruiken, moet u deze installeren express-sessie met Node Package Manager (npm).

 npm installeer express-sessie - opslaan

Vereist de express-sessie in de app.js het dossier.

var session = require ('express-sessie');

Als u de sessie wilt gebruiken, moet u een sessiegeheim instellen.

app.use (sessie (secret: 'my-secret'));

Definieer nu een variabele genaamd sessies in de mondiale reikwijdte.

var sessies

Wijs toe sessies variabele in de /aanmelden methode met behulp van de parameter request.

sessies = req.session;

De ... gebruiken sessies variabele, je houdt de gebruikersnaam ingelogd in de sessie.

sessions.username = gebruikersnaam;

Maak een bestand met de naam home.html binnen in de html map in de toepassing. Hier is hoe het eruit ziet:

             
 
  
Reageer Blog-app
 
 
 
  
Lijst van groepsitems weergeven
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
   
Lijst van groepsitems weergeven
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
   
Lijst van groepsitems weergeven
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
  
 
  
   

Maak een uitdrukkelijke route genaamd /huis die de startpagina voor een geldige gebruiker zal weergeven.

app.get ('/ home', functie (req, res) if (sessions && sessions.username) res.sendFile (__ dirname + '/html/home.html'); else res.send ('ongeautoriseerd ');)

Zoals te zien in de bovenstaande code, wanneer de gebruiker wordt omgeleid naar de /huis route, als sessies en sessions.username bestaat, wordt de startpagina weergegeven.

Wijzig de aanmelden methode om een ​​succesantwoord te verzenden bij succesvolle gebruikersvalidatie.

app.post ('/ signin', functie (req, res) sessions = req.session; var user_name = req.body.email; var password = req.body.password; user.validateSignIn (gebruikersnaam, wachtwoord, functie ( resultaat) if (resultaat) sessions.username = user_name; res.send ('success'););)

Het bovenstaande succesantwoord wordt geparseerd aan de kant Reageren en, indien succesvol, wordt de gebruiker doorgestuurd naar de /huis uitdrukkelijke route. In de main.jsx bestand, binnen de Aanmelden component in de aanmelden methode, wijzig de code om naar de startpagina om te leiden.

signIn () axios.post ('/ signin', email: this.state.email, password: this.state.password) .then (function (response) if (response.data == 'success') window.location.assign ('http: // localhost: 7777 / home')) .catch (function (error) console.log (error);); 

Sla de bovenstaande wijzigingen op en start de Node-server opnieuw op. Log in met een geldige gebruikersnaam en wachtwoord en u wordt doorgestuurd naar de startpagina.

Wijzig de bovenstaande blogpostweergave in een React-component. Maak een bestand met de naam home.jsx. Binnen in de home.jsx bestand, maak een geroepen onderdeel aan showpost waarmee de blogberichtenlijst wordt weergegeven. Verplaats de statische HTML binnen de component React-component renderen. Hier is hoe het showpost Reageer component ziet eruit:

class ShowPost breidt React.Component constructor (props) super (rekwisieten);  render () retourneren ( 
  
Lijst van groepsitems weergeven
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
   
Lijst van groepsitems weergeven
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
   
Lijst van groepsitems weergeven
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
  
 )

Wijzig de home.html pagina om de vereiste React-bibliotheken op te nemen. Dit is het aangepaste home.html pagina:

                  
 
  
Reageer Blog-app
 
 
 
  
    

Zoals te zien is in de bovenstaande HTML-code, heeft de container div de naam gekregen app, waarbinnen de React-componenten worden weergegeven.

Sla de bovenstaande wijzigingen op en start de knooppuntserver opnieuw op. Meld u aan bij de blogtoepassing en eenmaal op de startpagina heeft u de showpost Reageer component gerenderd.

Nu moet u de waarden in de lijst met posts dynamisch invullen. Voordat we dit doen, laten we een pagina maken om een ​​bericht toe te voegen. Door op het bovenstaande te klikken Toevoegen hyperlink, moet u de pagina weergeven om het blogbericht toe te voegen. 

Add Post React Component

Laten we een add post React component maken om de blog posts toe te voegen. Het zal bestaan ​​uit een titelinvoervak ​​en een onderwerptekstgebied. In de home.jsx, Creëer een AddPost Reageer component om blogposts toe te voegen. Hier is hoe het AddPost Reageer component ziet eruit:

class AddPost breidt React.Component uit render () retourneren ( 
 
 
 
 
  
 
  
 Voeg bericht toe 
 
 
 )

Wanneer de gebruiker de titel en het berichtonderwerp invoert, moet u de tekstwijzigingsgebeurtenissen in het React-onderdeel afhandelen. Voeg de volgende change event-handler toe aan de AddPost Reageer component.

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

Voeg de on change-gebeurtenis toe aan de AddPost render HTML.

Bind de toestandsvariabelen en de gebeurtenissen in de constructormethode React.

constructor (rekwisieten) super (rekwisieten); this.handleTitleChange = this.handleTitleChange.bind (this); this.handleSubjecChange = this.handleSubjectChange.bind (this); this.state = title: ", subject:"; 

Wanneer de gebruiker op klikt Voeg bericht toe knop, moet je de titel en het onderwerp posten vanuit de React-gebruikersinterface naar de back-end van Node.js om het op te slaan in de MongoDB-database. Maak een methode genaamd addPost in de AddPost Reageer component om de titel te plaatsen en onderhevig aan de Node.js-aanvraagbehandelaar. Hier is hoe het addPost methode in de AddPost Reageer component ziet eruit:

addPost () axios.post ('/ addPost', title: this.state.title, subject: this.state.subject) .then (function (response) console.log ('response from add post is' , antwoord); hashHistory.push ('/')). catch (functie (fout) console.log (error);); 

Zoals te zien is in de bovenstaande code, die je hebt gebruikt Axios om de details van het blogbericht naar de Node.js-server te posten. 

Nu moet je een postmodule maken die zich bezighoudt met het toevoegen en ontvangen van de postdetails. Maak een bestand met de naam post.js in de projectdirectory. In de post.js bestand, exporteer een addPost methode die postdetails invoegt in de MongoDB-database. Vereist de MongoClient en maak de addPost methode om postdetails in de MongoDB-database in te voegen. Hier is hoe het post.js bestand ziet er:

var MongoClient = vereisen ('mongodb'). MongoClient; var assert = require ('assert'); var url = 'mongodb: // localhost: 27017 / Blog'; module.exports = addPost: functie (titel, onderwerp, callback) MongoClient.connect (url, functie (err, db) db.collection ('post'). insertOne ("title": title, "subject" : subject, function (err, result) assert.equal (err, null); console.log ("Saved the blog post details."); if (err == null) callback (true) else callback (false)););  

Zoals te zien is in de bovenstaande code, hebt u via de connector verbinding gemaakt met de MongoDB-database en een record ingevoegd. Nadat de bewerking is uitgevoerd, hebt u de eventuele fout gecontroleerd en de status teruggestuurd naar de callback-functie.

Binnen in de app.js bestand, maak een aanvraag handler genaamd addPost welke de addPost methode van post.js. Hier is hoe het eruit ziet:

app.post ('/ addpost', functie (req, res) var title = req.body.title; var subject = req.body.subject; post.addPost (titel, onderwerp, functie (resultaat) res.send (resultaat); ); )

Sla de bovenstaande wijzigingen op en start de Node.js-server opnieuw. Log in op de applicatie, klik op de Toevoegen link en voer de details in om een ​​bericht toe te voegen. Als u klaar bent, klikt u op de Voeg bericht toe knop en de details moeten worden opgeslagen in de MongoDB-database.

Displaypostcomponent weergeven

Eerst moet je de opgeslagen postdetails van MongoDB ophalen. Binnen in de post.js bestand, maakt u een methode genaamd GetPost die postdetails zal ophalen. Hier is hoe het eruit ziet:

getPost: function (callback) MongoClient.connect (url, functie (err, db) db.collection ('post', function (err, collection) collection.find (). toArray (function (err, list)  callback (lijst);););)

De bovenstaande code haalt gegevens uit de MongoDB-verzameling op, converteert deze naar een lijst en stuurt deze terug naar de callback-functie. In de home.jsx bestand, binnen de showpost component, haal de postdetails op in de componentDidMount  methode. Hier is hoe het eruit ziet:

componentDidMount () var self = this; axios.post ('/ getPost', ) .then (functie (antwoord) ). catch (functie (fout) console.log ('error is', error);); 

De bovenstaande code maakt een postverzoek naar de Node.js-servermethode / getPost welke de getPost methode in de post.js het dossier. Hier is de / getPost methode in de app.js het dossier.

app.post ('/ getpost', functie (req, res) post.getPost (function (result) res.send (result););)

Zodra de postdetails zijn opgehaald in de Axios succes callback, houd de details binnen een state array-variabele. Geef een variabele op genaamd posts binnen in de showpost bouwer.

constructor (rekwisieten) super (rekwisieten); this.state = posts: []; 

In het succes callback van de Axios ajax-aanroep, stel de statusvariabele in zoals getoond:

self.setState (berichten: response.data)

Zodra u de postdetails hebt, moet u de vereiste HTML dynamisch maken in de weergavemethode van de component React. Hier is hoe het eruit ziet: 

render () retour ( 
 this.state.posts.map (functie (post, index) ga terug  
 Post.title
 
 Post.subject
  ) 
 )

De bovenstaande code itereert de posts statusvariabele en maakt de HTML dynamisch. Sla de bovenstaande wijzigingen op en start de Node.js-server opnieuw. Meld u aan bij de blogtoepassing en maak een paar blogberichten met behulp van de Toevoegen knop op de startpagina. Zodra de berichten zijn toegevoegd, worden ze weergegeven op de startpagina.

Inpakken

In deze zelfstudie zag je hoe React-componenten kunnen worden gemaakt voor het toevoegen en weergeven van blogposts. In het volgende deel van deze tutorialserie leert u hoe u de functionaliteit toevoegt om blogposts te verwijderen en bij te werken. 

Laat me je gedachten over deze tutorial weten in het gedeelte 'Opmerkingen' hieronder. Broncode van deze tutorial is beschikbaar op GitHub.