Share
I den forrige delen av denne opplæringsserien så du hvordan du implementerer tilleggs- og displaypostfunksjonaliteten. I denne delen av opplæringsserien om å lage en blogging-app i React, implementerer du funksjonaliteten for å oppdatere og slette blogginnleggene..
La oss begynne med å klone kildekoden fra den siste delen av serien.
https://github.com/royagasthyan/ReactBlogApp-AddPost
Når katalogen er blitt klonet, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
cd ReactBlogApp-AddPost npm installere
Start Node.js-serveren, og du vil få programmet å kjøre på http: // localhost: 7777 / index.html # /.
La oss endre bloggoppføringen for å vise dataene i en tabellform med oppdateringen og slette ikoner. Inne i gjengivelsesmetoden til ShowPost komponent, erstatt eksisterende div med et bord som vist i koden:
| # | Tittel | Emne | ||
|---|---|---|---|---|
| Index + 1 | Post.title | Post.subject |
Som vist i koden ovenfor har du endret den eksisterende koden for å vise innleggene i en tabellform. Du har kartlagt innlegg variabel for å iterere over innleggets samling og dynamisk opprette det nødvendige tr og td.
Lagre endringene ovenfor og start serveren på nytt. Pek nettleseren din til http: // localhost: 7777 / home # / og du bør kunne se blogginnlegget i tabellformat.
For å implementere oppdateringspostfunksjonaliteten må du legge ved klikk-hendelsen til redigeringsikonet. Endre redigeringsikonet span som vist:
Som vist i ovennevnte kode, har du passert post-ID som en parameter til updatePost metode.
Lag en metode updatePost inne i ShowPost komponent.
Accentsconagua
updatePost (id) hashHistory.push ('/ addPost /' + id); Som vist i den ovennevnte koden, har du utløst omadresseringen til siden for legge til post med iden til det redigerte elementet. På siden Legg til innlegg får du detaljene i blogginnlegget med passordet og fyller ut detaljene.
Endre ruteren for å inkludere en valgfri id-parameter på siden for legge til innlegg.
Inne i AddPost komponent, opprett en metode som kalles getPostWithId for å hente detaljene i blogginnlegget med id. Inne i getPostWithId metode, gjør et AJAX-anrop til getPostWithId API inne app.js.
getPostWithId () var id = this.props.params.id; var selv = dette; axios.post ('/ getPostWithId', id: id) .then (funksjon (svar) hvis (svar) self.setState (title: response.data.title); self.setState (subject: response.data.subject);) .catch (funksjon (feil) console.log ('feil er', feil);); Med svaret mottatt fra getPostWithId API-metoden, har du oppdatert tilstandsvariablene tittel og Emne.
Endre tittel og Emne tekstbokser for å vise verdien fra tilstandsvariablene.
La oss nå lage getPostWithId API inne app.js for å lage en databaseanrop til MongoDB-databasen for å få postdetaljer med en bestemt ID. Her er getPostWithId API-metoden:
app.post ('/ getPostWithId', funksjon (req, res) var id = req.body.id; post.getPostWithId (id, funksjon (resultat) res.send (resultat)))Inne i post.js fil, opprett en metode getPostWithId å spørre databasen for å hente detaljene. Slik ser det ut:
getPostWithId: funksjon (id, tilbakeringing) MongoClient.connect (url, funksjon (feil, db) db.collection ('post'). findOne (_id: ny mongodb.ObjectID (id), funksjon ) assert.equal (feil, null); hvis (err == null) callback (resultat) else callback (false));)Som vist i ovennevnte kode har du gjort bruk av Finn én API for å få detaljene i blogginnlegget med et bestemt ID.
Lagre endringene ovenfor og prøv å kjøre programmet. Klikk på redigeringsikonet på hjemmesiden, og det vil omdirigere til siden for legge til innlegg og fylle ut tittelen og emnet.
Nå, for å oppdatere blogginnleggets detaljer, må du sjekke for id inne i addPost API-metoden i app.js. Hvis det er et nytt innlegg, vil id vil være udefinert.
Endre addPost metode inne i AddPost komponent for å inkludere id tilstandsvariabel.
axios.post ('/ addPost', tittel: this.state.title, emne: this.state.subject, id: this.state.id)Inne i addPost API-metoden, må du sjekke om id parameteren er udefinert eller ikke. Hvis udefinert, det betyr at det er et nytt innlegg, ellers må du ringe oppdateringsmetoden. Her er hva addPost API-metoden ser ut som:
app.post ('/ addpost', funksjon (req, res) varittel = req.body.title; var subject = req.body.subject; var id = req.body.id; hvis (id == "| | id == undefined) post.addPost (tittel, emne, funksjon (resultat) res.send (result);); else post.updatePost (id, tittel, emne, funksjon (resultat) res.send (resultat); ); )Inne i post.js fil, opprett en metode som kalles updatePost å oppdatere blogginnleggets detaljer. Du vil gjøre bruk av updateOne API for å oppdatere detaljene i blogginnlegget med det aktuelle id. Her er hvordan updatePost metoden ser ut:
oppdateringPost: funksjon (id, tittel, emne, tilbakeringing) MongoClient.connect (url, funksjon (feil, db) db.collection ('post'). updateOne ("_id": nytt mongodb.ObjectID , $ sett: "tittel": tittel, "emne": emne, funksjon (feil, resultat) assert.equal (feil, null); hvis (err == null) tilbakeringing (falsk));); Lagre endringene ovenfor og start serveren på nytt. Logg inn på programmet og klikk på redigeringsikonet. Endre eksisterende verdier og klikk på knappen for å oppdatere detaljene.
For å implementere funksjonen for å slette innlegg, må du legge ved hendelsen på klikk til slettikonet. Endre slettikonet som vist:
Som vist i ovennevnte kode, har du passert post-ID som en parameter til deletePost metode.
Opprett en metode som kalles deletePost inne i ShowPost komponent.
deletePost (id)
Bind metoden i ShowPost komponent konstruktør.
this.deletePost = this.deletePost.bind (dette);
For bruk dette inne i kart funksjon tilbakeringing, du må binde dette til kart funksjon. Endre kart funksjon tilbakeringing som vist:
this.state.posts.map (funksjon (post, indeks) return.bind (dette)) Index + 1 Post.title Post.subject
Inne i deletePost metode, legg til en bekreftelsespåmelding før du ringer slettingsgrensesnittet.
deletePost (id) if (confirm ('Er du sikker?')) // Slett post API-anrop vil være her! La oss nå legge til deletePost API inne i app.js fil. API-en vil lese post-ID fra AJAX-anropet og slette oppføringen fra MongoDB. Her er hvordan deletePost API ser ut:
app.post ('/ deletePost', funksjon (req, res) var id = req.body.id; post.deletePost (id, funksjon (resultat) res.send (resultat)))Som vist i ovennevnte kode, vil du ringe til deletePost metode i post.js fil og returnere resultatet. La oss lage deletePost metode inne i post.js fil.
deletePost: funksjon (id, tilbakeringing) MongoClient.connect (url, funksjon (feil, db) db.collection ('post'). deleteOne (_id: new mongodb.ObjectID (id), funksjon ) assert.equal (feil, null); console.log ("Slettet post."); hvis (err == null) tilbakeringing (sann) annet tilbakeringing (falsk);;)Som vist i ovennevnte kode, er deletePost metode i post.js filen vil gjøre bruk av MongoClient å koble til bloggdatabasen i MongoDB. Bruker id passert fra AJAX-anropet, vil det slette innlegget fra databasen.
Oppdater koden inne i deletePost metode i home.jsx fil for å inkludere AJAX-anropet til deletePost API i app.js fil.
deletePost (id) if (confirm ('Er du sikker?')) var self = this; axios.post ('/ deletePost', id: id) .then (funksjon (respons) ) .catch (funksjon (feil) ); Når blogginnlegget er slettet, må du oppdatere blogginnlegget for å gjenspeile dette. Så opprett en ny metode som heter getPost og flytte componentDidMount kode inne i den funksjonen. Her er getPost metode:
getPost () var selv = dette; axios.post ('/ getPost', ) .then (funksjon (svar) console.log ('res er', respons); self.setState (innlegg: response.data)) .catch (feil) console.log ('feil er', feil);); Endre componentDidMount kode som vist:
componentDidMount () this.getPost (); document.getElementById ('homeHyperlink'). className = "active"; document.getElementById ('addHyperLink'). className = ""; Inne i deletePost AJAX ringe suksess tilbakeringing, ringe til getPost Metode for å oppdatere blogginnlegget.
deletePost (id) if (confirm ('Er du sikker?')) var self = this; axios.post ('/ deletePost', id: id) .then (funksjon (respons) self.getPost ();) .catch (funksjon (feil) console.log ('Feil er', feil) ;); Lagre endringene ovenfor og start serveren på nytt. Prøv å legge til et nytt blogginnlegg, og klikk deretter slett fra rutenettlisten. Du blir bedt om å slette bekreftelsesmeldingen. Når du klikker på OK knappen, blir oppføringen slettet og blogginnlegget blir oppdatert.
I denne veiledningen så du hvordan du implementerer funksjonen for å slette og oppdatere blogginnlegg i React-bloggprogrammet. I neste del av opplæringsserien lærer du hvordan du implementerer profilsiden for en innlogget bruker.
Gi oss beskjed om dine tanker og forslag i kommentarene nedenfor. Kildekode fra denne opplæringen er tilgjengelig på GitHub.
