Share
In het vorige deel van deze zelfstudieserie zag je hoe je de functionaliteit voor het toevoegen en weergeven van berichten implementeerde. In dit deel van de zelfstudiereeks over het maken van een blogapp in React, implementeert u de functionaliteit om de blogberichten bij te werken en te verwijderen.
Laten we beginnen door de broncode uit het laatste deel van de serie te klonen.
https://github.com/royagasthyan/ReactBlogApp-AddPost
Nadat de map is gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd ReactBlogApp-AddPost npm install
Start de Node.js-server en de toepassing wordt uitgevoerd op http: // localhost: 7777 / index.html # /.
Laten we de lijst met blogposts aanpassen om de gegevens in een tabelvorm weer te geven met de pictogrammen voor bijwerken en verwijderen. Binnen de rendermethode van de showpost component, vervang de bestaande div met een tabel zoals weergegeven in de code:
| # | Titel | Onderwerpen | ||
|---|---|---|---|---|
| Index + 1 | Post.title | Post.subject |
Zoals te zien is in de bovenstaande code, hebt u de bestaande code aangepast om de berichten in een tabelvorm weer te geven. U hebt de posts variabele om te itereren over de berichtenverzameling en dynamisch de vereiste te maken tr en td.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 7777 / home # / en u zou de vermelding van de blogpost in tabelvorm kunnen bekijken.
Om de update-postfunctionaliteit te implementeren, moet u de on-click-gebeurtenis koppelen aan het bewerkingspictogram. Pas het pictogram Bewerken aan span zoals getoond:
Zoals te zien is in de bovenstaande code, hebt u de post-id doorgegeven als een parameter voor de updatePost methode.
Maak een methode updatePost binnen in de showpost bestanddeel.
Accentsconagua
updatePost (id) hashHistory.push ('/ addPost /' + id); Zoals te zien is in de bovenstaande code, hebt u de omleiding naar de postpagina toevoegen geactiveerd met de id van het bewerkte item. Op de pagina voor het toevoegen van berichten krijgt u de details van het blogbericht met het doorgegeven id en vult u de details in.
Wijzig de router zodat deze een optionele id-parameter bevat voor de postpagina toevoegen.
Binnen in de AddPost component, maak een methode genaamd getPostWithId om de details van de blogpost op te halen ID kaart. Binnen in de getPostWithId methode, voer een AJAX-oproep naar de getPostWithId API binnen app.js.
getPostWithId () var id = this.props.params.id; var self = this; axios.post ('/ getPostWithId', id: id) .then (function (response) if (response) self.setState (title: response.data.title); self.setState (subject: response.data.subject);). catch (functie (fout) console.log ('error is', error);); Met het antwoord ontvangen van de getPostWithId API-methode, u hebt de statusvariabelen bijgewerkt titel en onderwerpen.
Wijzig de titel en onderwerpen tekstvakken om de waarde van de toestandsvariabelen weer te geven.
Laten we nu de getPostWithId API binnen app.js om een databaseaanroep naar de MongoDB-database te maken om de postdetails met een bepaalde ID te krijgen. Hier is de getPostWithId API-methode:
app.post ('/ getPostWithId', functie (req, res) var id = req.body.id; post.getPostWithId (id, function (result) res.send (result)))Binnen in de post.js bestand, maak een methode aan getPostWithId om de database te doorzoeken om de details op te halen. Hier is hoe het eruit ziet:
getPostWithId: function (id, callback) MongoClient.connect (url, functie (err, db) db.collection ('post'). findOne (_id: new mongodb.ObjectID (id), function (err, result ) assert.equal (err, null); if (err == null) callback (result) else callback (false));)Zoals te zien in de bovenstaande code, hebt u gebruik gemaakt van de vind een API om de details van het blogbericht met een bepaald ID te krijgen.
Sla de bovenstaande wijzigingen op en probeer het programma uit te voeren. Klik op het pictogram Bewerken op de startpagina en het zal doorverwijzen naar de postpagina toevoegen en de titel en het onderwerp vullen.
Om de details van de blogpost bij te werken, moet u nu controleren op ID kaart binnen in de addPost API-methode in de app.js. Als het een nieuw bericht is, de ID kaart zal zijn onbepaald.
Wijzig de addPost methode binnen de AddPost component om de ID kaart toestandsvariabele.
axios.post ('/ addPost', title: this.state.title, subject: this.state.subject, id: this.state.id)Binnen in de addPost API-methode, je moet controleren of de ID kaart parameter is onbepaald of niet. Als onbepaald, het betekent dat het een nieuw bericht is, anders moet je de update-methode bellen. Hier is wat de addPost API-methode ziet eruit als:
app.post ('/ addpost', functie (req, res) var title = req.body.title; var subject = req.body.subject; var id = req.body.id; if (id == "| | id == undefined) post.addPost (titel, onderwerp, functie (resultaat) res.send (result);); else post.updatePost (id, titel, onderwerp, functie (resultaat) res.send (resultaat); ); )Binnen in de post.js bestand, maakt u een methode genaamd updatePost om de details van het blogbericht bij te werken. U zult gebruik maken van de updateOne API om de details van het blogbericht bij te werken met het betreffende ID kaart. Hier is hoe het updatePost methode lijkt:
updatePost: functie (id, titel, onderwerp, callback) MongoClient.connect (url, functie (err, db) db.collection ('post'). updateOne ("_id": new mongodb.ObjectID (id) , $ set: "title": title, "subject": subject, function (err, result) assert.equal (err, null); if (err == null) callback (true) else callback (false));); Sla de bovenstaande wijzigingen op en start de server opnieuw. Meld u aan bij de toepassing en klik op het pictogram Bewerken. Wijzig de bestaande waarden en klik op de knop om de details bij te werken.
Om de verwijderingspostfunctionaliteit te implementeren, moet u de on-click-gebeurtenis koppelen aan het verwijderpictogram. Pas de pictogrambreedte voor verwijderen aan zoals getoond:
Zoals te zien is in de bovenstaande code, hebt u de post-id doorgegeven als een parameter voor de Verwijder gepost bericht methode.
Maak een methode genaamd Verwijder gepost bericht binnen in de showpost bestanddeel.
deletePost (id)
Bind de methode in de showpost component constructor.
this.deletePost = this.deletePost.bind (this);
Voor gebruik deze binnen in de kaart functie callback, je moet binden deze naar de kaart functie. Wijzig de kaart functie callback zoals getoond:
this.state.posts.map (functie (post, index) ga terug.bind (this)) Index + 1 Post.title Post.subject
Binnen in de Verwijder gepost bericht methode, voeg een bevestigingsprompt toe voordat u de verwijder-API aanroept.
deletePost (id) if (bevestigen ('Weet je het zeker?')) // Post API-oproep verwijderen is hier !! Laten we nu het Verwijder gepost bericht API in de app.js het dossier. De API leest het bericht-ID van het AJAX-gesprek en verwijdert het bericht uit MongoDB. Hier is hoe het Verwijder gepost bericht API ziet eruit:
app.post ('/ deletePost', functie (req, res) var id = req.body.id; post.deletePost (id, function (result) res.send (result)))Zoals te zien is in de bovenstaande code, belt u naar de Verwijder gepost bericht methode in de post.js bestand en retourneer het resultaat. Laten we het maken Verwijder gepost bericht methode binnen de post.js het dossier.
deletePost: function (id, callback) MongoClient.connect (url, functie (err, db) db.collection ('post'). deleteOne (_id: new mongodb.ObjectID (id), function (err, result ) assert.equal (err, null); console.log ("Het bericht is verwijderd."); if (err == null) callback (true) else callback (false));)Zoals te zien in de bovenstaande code, de Verwijder gepost bericht methode in de post.js bestand zal gebruik maken van de MongoClient om verbinding te maken met de blog-database in MongoDB. De ... gebruiken ID kaart doorgegeven via de AJAX-aanroep, wordt het bericht uit de database verwijderd.
Werk de code in de Verwijder gepost bericht methode in de home.jsx bestand om de AJAX-oproep op te nemen in de Verwijder gepost bericht API in de app.js het dossier.
deletePost (id) if (bevestigen ('Weet u het zeker?')) var self = this; axios.post ('/ deletePost', id: id) .then (functie (antwoord) ). catch (functie (fout) ); Zodra het blogbericht is verwijderd, moet u de vermelding van het blogbericht vernieuwen om dit weer te geven. Dus maak een nieuwe methode genaamd getPost en verplaats de componentDidMount code binnen die functie. Hier is de getPost methode:
getPost () var self = this; axios.post ('/ getPost', ) .then (functie (antwoord) console.log ('res is', antwoord); self.setState (posts: response.data)) .catch (function (fout) console.log ('error is', error);); Wijzig de componentDidMount code zoals getoond:
componentDidMount () this.getPost (); document.getElementById ('homeHyperlink'). className = "actief"; document.getElementById ('addHyperLink'). className = ""; Binnen in de Verwijder gepost bericht AJAX call succes callback, bel naar de getPost methode om de blogpostlijst bij te werken.
deletePost (id) if (bevestigen ('Weet u het zeker?')) var self = this; axios.post ('/ deletePost', id: id) .then (function (response) self.getPost ();) .catch (function (error) console.log ('Fout is', fout) ;); Sla de bovenstaande wijzigingen op en start de server opnieuw. Probeer een nieuw blogbericht toe te voegen en klik vervolgens op Verwijderen in de rasterlijst. U wordt gevraagd om een bevestigingsbericht voor verwijderen. Als u eenmaal op de OK knop, het item zal worden verwijderd en de blogpostlijst zal worden bijgewerkt.
In deze zelfstudie zag u hoe u de functie voor het verwijderen en bijwerken van blogberichten implementeerde in de React-blogtoepassing. In het volgende deel van de zelfstudiereeks leert u hoe u de profielpagina voor een ingelogde gebruiker implementeert.
Laat ons uw mening en suggesties weten in de opmerkingen hieronder. Broncode van deze tutorial is beschikbaar op GitHub.
