Share
En la parte anterior de esta serie de tutoriales, vio cómo implementar la funcionalidad de agregar y mostrar publicaciones. En esta parte de la serie de tutoriales sobre cómo crear una aplicación de blogging en React, implementará la funcionalidad para actualizar y eliminar las publicaciones del blog..
Comencemos clonando el código fuente de la última parte de la serie..
https://github.com/royagasthyan/ReactBlogApp-AddPost
Una vez que se haya clonado el directorio, vaya al directorio del proyecto e instale las dependencias necesarias.
cd ReactBlogApp-AddPost npm install
Inicie el servidor Node.js y tendrá la aplicación ejecutándose en http: // localhost: 7777 / index.html # /.
Modifiquemos la lista de publicaciones del blog para mostrar los datos en forma tabular con los iconos de actualización y eliminación. Dentro del metodo de render del ShowPost componente, reemplazar el existente div con una tabla como se muestra en el código:
| # | Título | Tema | ||
|---|---|---|---|---|
| index + 1 | título de la entrada | post.subject |
Como se ve en el código anterior, ha modificado el código existente para mostrar las publicaciones en forma de tabla. Has mapeado el puestos variable para iterar sobre la colección de publicaciones y crear dinámicamente el requerido tr y td.
Guarde los cambios anteriores y reinicie el servidor. Dirija su navegador a http: // localhost: 7777 / home # / y debería poder ver la lista de publicaciones del blog en formato tabular.
Para implementar la funcionalidad de actualización de publicación, debe adjuntar el evento de clic al icono de edición. Modificar el icono de edición lapso como se muestra:
Como se ve en el código anterior, ha pasado el ID de la publicación como un parámetro a la updatePost método.
Crear un método updatePost dentro de ShowPost componente.
Accentsconagua
updatePost (id) hashHistory.push ('/ addPost /' + id); Como se ve en el código anterior, ha desencadenado la redirección a la página de agregar publicación con el ID del elemento editado. En la página Agregar publicación, obtendrá los detalles de la publicación del blog con la ID aprobada y completará los detalles..
Modifique el enrutador para que incluya un parámetro de ID opcional en la página de publicación posterior.
Dentro de AddPost componente, crea un método llamado getPostWithId para obtener los detalles de la entrada del blog con carné de identidad. Dentro de getPostWithId método, hacer una llamada AJAX a la getPostWithId API dentro app.js.
getPostWithId () var id = this.props.params.id; var self = esto; axios.post ('/ getPostWithId', id: id) .then (función (respuesta) if (response) self.setState (title: response.data.title); self.setState (subject: response.data.subject);) .catch (function (error) console.log ('error is', error);); Con la respuesta recibida del getPostWithId Método API, has actualizado las variables de estado. título y tema.
Modificar el título y tema cuadros de texto para mostrar el valor de las variables de estado.
Ahora vamos a crear el getPostWithId API dentro app.js para realizar una llamada a la base de datos de MongoDB para obtener los detalles de la publicación con un Id. particular. Aquí está el getPostWithId Método API:
app.post ('/ getPostWithId', function (req, res) var id = req.body.id; post.getPostWithId (id, function (result) res.send (result)))Dentro de post.js archivo, crea un método getPostWithId para consultar la base de datos para obtener los detalles. Aquí está cómo se ve:
getPostWithId: function (id, callback) MongoClient.connect (url, function (err, db) db.collection ('post'). findOne (_id: new mongodb.ObjectID (id), function (err, resultado ) assert.equal (err, null); if (err == null) callback (result) else callback (false));)Como se ve en el código anterior, ha hecho uso de la Encuentra uno API para obtener los detalles de la publicación del blog con un ID en particular.
Guarde los cambios anteriores e intente ejecutar el programa. Haga clic en el ícono de edición en la página de inicio y se redirigirá a la página de agregar publicación y llenará el título y el tema.
Ahora, para actualizar los detalles de la publicación del blog, deberás verificar el carné de identidad dentro de addPost Método API en el app.js. Si es un nuevo post, el carné de identidad estarán indefinido.
Modificar el addPost metodo dentro del AddPost componente para incluir el carné de identidad variable de estado.
axios.post ('/ addPost', title: this.state.title, subject: this.state.subject, id: this.state.id)Dentro de addPost Método API, debe comprobar si el carné de identidad parámetro es indefinido o no. Si indefinido, significa que es una nueva publicación, de lo contrario, debes llamar al método de actualización. Aquí es lo que el addPost El método API se ve así:
app.post ('/ addpost', function (req, res) var title = req.body.title; var subject = req.body.subject; var id = req.body.id; if (id == "| | id == no definido) post.addPost (título, tema, función (resultado) res.send (resultado);); else post.updatePost (id, título, tema, función (resultado) res.send (resultado););)Dentro de post.js archivo, crea un método llamado updatePost para actualizar los detalles de la publicación del blog. Harás uso de la updateOne API para actualizar los detalles de la publicación del blog con el particular carné de identidad. Aquí es cómo el updatePost método se ve:
updatePost: function (id, title, subject, callback) MongoClient.connect (url, function (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 devolución de llamada (falso));); Guarde los cambios anteriores y reinicie el servidor. Inicie sesión en la aplicación y haga clic en el icono de edición. Modifique los valores existentes y haga clic en el botón para actualizar los detalles..
Para implementar la funcionalidad de eliminar publicaciones, debe adjuntar el evento de clic al icono de eliminar. Modifique el intervalo del icono de eliminar como se muestra:
Como se ve en el código anterior, ha pasado el ID de la publicación como un parámetro a la Eliminar mensaje método.
Crea un método llamado Eliminar mensaje dentro de ShowPost componente.
deletePost (id)
Unir el método en el ShowPost constructor de componentes.
this.deletePost = this.deletePost.bind (this);
Para usar esta dentro de mapa Función de devolución de llamada, es necesario vincular esta al mapa función. Modificar el mapa función de devolución de llamada como se muestra:
this.state.posts.map (function (post, index) return.bind (esto)) index + 1 título de la entrada post.subject
Dentro de Eliminar mensaje Método, agregue un mensaje de confirmación antes de llamar a la API de eliminación.
deletePost (id) if (confirm ('¿Estás seguro?')) // Delete Post API call estará aquí! Ahora vamos a añadir el Eliminar mensaje API dentro de la app.js expediente. La API leerá el ID de la publicación de la llamada AJAX y eliminará la entrada de MongoDB. Aquí es cómo el Eliminar mensaje API se ve:
app.post ('/ deletePost', function (req, res) var id = req.body.id; post.deletePost (id, function (result) res.send (result)))Como se ve en el código anterior, hará una llamada al Eliminar mensaje método en el post.js Archivo y devolver el resultado. Vamos a crear el Eliminar mensaje metodo dentro del post.js expediente.
deletePost: function (id, callback) MongoClient.connect (url, function (err, db) db.collection ('post'). deleteOne (_id: new mongodb.ObjectID (id), function (err, resultado ) assert.equal (err, null); console.log ("Se eliminó la publicación."); if (err == null) callback (true) else callback (false));)Como se ve en el código anterior, el Eliminar mensaje método en el post.js archivo hará uso de la MongoClient para conectarse a la base de datos del blog en MongoDB. Utilizando la Carné de identidad Pasado de la llamada AJAX, eliminará la publicación de la base de datos.
Actualice el código dentro del Eliminar mensaje método en el home.jsx archivo para incluir la llamada AJAX a la Eliminar mensaje API en el app.js expediente.
deletePost (id) if (confirm ('¿Estás seguro?')) var self = this; axios.post ('/ deletePost', id: id) .then (function (response) ) .catch (function (error) ); Una vez que se haya eliminado la publicación del blog, debe actualizar la lista de publicaciones del blog para reflejar esto. Así que crea un nuevo método llamado getPost y mover el componentDidMount Código dentro de esa función. Aquí está el getPost método:
getPost () var self = this; axios.post ('/ getPost', ) .then (function (response) console.log ('res is', response); self.setState (posts: response.data)) .catch (function (error) console.log ('error is', error);); Modificar el componentDidMount código como se muestra:
componentDidMount () this.getPost (); document.getElementById ('homeHyperlink'). className = "active"; document.getElementById ('addHyperLink'). className = ""; Dentro de Eliminar mensaje Devolución de llamada AJAX llamada exitosa, hacer una llamada a la getPost Método para actualizar la lista de entradas del blog..
deletePost (id) if (confirm ('¿Estás seguro?')) var self = this; axios.post ('/ deletePost', id: id) .then (function (response) self.getPost ();) .catch (function (error) console.log ('Error is', error) ;); Guarde los cambios anteriores y reinicie el servidor. Intente agregar una nueva entrada de blog y luego haga clic en eliminar de la lista de cuadrículas. Se le pedirá un mensaje de confirmación de eliminación. Una vez que haga clic en el DE ACUERDO botón, la entrada se eliminará y la lista de publicaciones del blog se actualizará.
En este tutorial, vio cómo implementar la funcionalidad de eliminar y actualizar publicaciones de blog en la aplicación React blog. En la siguiente parte de la serie de tutoriales, aprenderá cómo implementar la página de perfil para un usuario que ha iniciado sesión.
Háganos saber sus opiniones y sugerencias en los comentarios a continuación. El código fuente de este tutorial está disponible en GitHub.
