Creación de una aplicación de blogs usando React, Parte 3 Agregar y mostrar publicaciones

En la parte anterior de esta serie de tutoriales, vio cómo implementar la funcionalidad de registro e inicio de sesión. En esta parte del tutorial, implementará la página de inicio del usuario y la funcionalidad para agregar y mostrar las publicaciones del blog..

Empezando

Comencemos clonando el código fuente de la primera parte del tutorial..

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

Una vez que se haya clonado el directorio, vaya al directorio del proyecto e instale las dependencias necesarias.

cd ReactBlogApp-SignUp npm install

Inicie el servidor Node.js y tendrá la aplicación ejecutándose en http: // localhost: 7777 / index.html # /.

Creación de la página de inicio del usuario

Una vez que el usuario intenta iniciar sesión en la aplicación, debe validar las credenciales del usuario y, si es válido, crear una sesión. Para usar las sesiones en una aplicación Node.js, necesita instalar sesión expresa utilizando Node Package Manager (npm).

 npm instalar sesión rápida --save

Requerir el sesión expresa en el app.js expediente.

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

Para utilizar la sesión, necesita establecer un secreto de sesión.

app.use (sesión (secreto: 'mi-secreto'));

Ahora define una variable llamada sesiones en el ámbito global.

sesiones de var

Asignar el sesiones variable en el /registrarse Método usando el parámetro de solicitud.

sesiones = req.session;

Utilizando la sesiones variable, usted mantiene el nombre de usuario registrado en la sesión.

session.username = nombre_usuario;

Crear un archivo llamado home.html dentro de html Carpeta en la aplicación. Aquí está cómo se ve:

             
 
  
React Blog App
 
 
 
  
Lista del encabezado del elemento del grupo
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
   
Lista del encabezado
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
   
Lista del encabezado del elemento del grupo
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
  
 
  
   

Crear una ruta expresa llamada /casa Lo que hará que la página de inicio para un usuario válido..

app.get ('/ home', function (req, res) if (session && session.username) res.sendFile (__ dirname + '/html/home.html'); else res.send ('no autorizado ');)

Como se ve en el código anterior, cuando el usuario es redirigido al /casa ruta, si sesiones y session.username existe, la página de inicio se muestra.

Modificar el registrarse Método para enviar una respuesta exitosa en la validación exitosa del usuario.

app.post ('/ signin', function (req, res) sessions = req.session; var user_name = req.body.email; var password = req.body.password; user.validateSignIn (user_name, password, function ( resultado) si (resultado) session.username = nombre_usuario; res.send ('éxito'););)

La respuesta de éxito anterior se analiza en el lado de Reacción y, si tiene éxito, el usuario se redirige a /casa ruta expreso En el main.jsx archivo, dentro de la Registrarse componente dentro del registrarse Método, modifique el código para redirigir a la página de inicio..

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);); 

Guarde los cambios anteriores y reinicie el servidor Node. Inicie sesión con un nombre de usuario y contraseña válidos, y será redirigido a la página de inicio.

Modifique la publicación de blog anterior en un componente React. Crear un archivo llamado home.jsx. Dentro de home.jsx archivo, crear un componente React llamado ShowPost lo que hará que la lista de entradas del blog. Mueva el HTML estático dentro del método de procesamiento del componente React. Aquí es cómo el ShowPost Reacciona el aspecto del componente:

la clase ShowPost extiende React.Component constructor (props) super (props);  render () return ( 
  
Lista del encabezado del elemento del grupo
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
   
Lista del encabezado del elemento del grupo
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
   
Lista del encabezado del elemento del grupo
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
  
 )

Modificar el home.html página para incluir las bibliotecas React requeridas. Aquí está la modificada home.html página:

                  
 
  
React Blog App
 
 
 
  
    

Como se ve en el código HTML anterior, el div contenedor ha sido nombrado aplicación, Dentro de la cual se mostrarán los componentes React..

Guarde los cambios anteriores y reinicie el servidor de nodo. Inicie sesión en la aplicación de blog y, una vez en la página de inicio, tendrá la ShowPost Reaccionar componente renderizado.

Ahora necesita rellenar dinámicamente los valores en la lista de entradas. Antes de hacer eso, vamos a crear una página para agregar una publicación. Al hacer clic en el anterior Añadir hipervínculo, debe mostrar la página para agregar la publicación del blog. 

Añadir componente de reacción posterior

Vamos a crear un componente React agregar entrada para agregar las publicaciones de blog. Constará de un cuadro de entrada de título y un área de texto de asunto. En el home.jsx, crear un AddPost Reactivar componente para agregar publicaciones de blog. Aquí es cómo el AddPost Reacciona el aspecto del componente:

la clase AddPost extiende React.Component render () return ( 
 
 
 
 
  
 
  
 Añadir publicación 
 
 
 )

Cuando el usuario ingresa el título y el tema de la publicación, debe manejar los eventos de cambio de texto en el componente React. Agregue el siguiente controlador de eventos de cambio al AddPost Reaccionar componente.

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

Agregue el evento on change a la AddPost render HTML.

Enlazar las variables de estado y los eventos en el método constructor React..

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

Cuando el usuario hace clic en el Añadir publicación botón, debe publicar el título y el asunto desde la interfaz de usuario de React al extremo posterior de Node.js para guardarlo en la base de datos de MongoDB. Crea un método llamado addPost en el AddPost Reaccione el componente para publicar el título y sujeto al controlador de solicitudes Node.js. Aquí es cómo el addPost método en el AddPost Reacciona el aspecto del componente:

addPost () axios.post ('/ addPost', title: this.state.title, subject: this.state.subject) .then (function (response) console.log ('la respuesta de add post es' , respuesta); hashHistory.push ('/')) .catch (function (error) console.log (error);); 

Como se ve en el código anterior, ha utilizado axios publicar los detalles de la publicación del blog en el servidor Node.js. 

Ahora necesita crear un módulo de publicación que se ocupará de agregar y obtener los detalles de la publicación. Crear un archivo llamado post.js en el directorio del proyecto. En el post.js archivo, exportar un addPost Método que insertará los detalles de la publicación en la base de datos MongoDB. Requerir el MongoClient y crea el addPost Método para insertar detalles de la publicación en la base de datos MongoDB. Aquí es cómo el post.js aspecto del archivo:

var MongoClient = require ('mongodb'). MongoClient; var assert = require ('assert'); var url = 'mongodb: // localhost: 27017 / Blog'; module.exports = addPost: function (title, subject, callback) MongoClient.connect (url, function (err, db) db.collection ('post'). insertOne ("title": title, "subject" : subject, function (err, result) assert.equal (err, null); console.log ("Guardó los detalles de la publicación del blog."); if (err == null) callback (true) else callback (falso)););  

Como se ve en el código anterior, se conectó a la base de datos MongoDB utilizando el conector e insertó un registro. Una vez que se ejecuta la operación, verificó el error, si lo hubiera, y devolvió el estado a la función de devolución de llamada.

Dentro de app.js archivo, crea un controlador de solicitudes llamado addPost que llamará el addPost método de post.js. Aquí está cómo se ve:

app.post ('/ addpost', function (req, res) var title = req.body.title; var subject = req.body.subject; post.addPost (title, subject, function (result) res.send (resultado););)

Guarde los cambios anteriores y reinicie el servidor Node.js. Inicie sesión en la aplicación, haga clic en Añadir enlace, e ingrese los detalles para agregar una publicación. Una vez hecho esto, haga clic en el Añadir publicación botón y los detalles deben guardarse en la base de datos MongoDB.

Mostrar el componente reaccionar después

Primero necesitas obtener los detalles de la publicación guardada en MongoDB. Dentro de post.js archivo, crea un método llamado GetPost que buscará detalles de la publicación. Aquí está cómo se ve:

getPost: function (callback) MongoClient.connect (url, function (err, db) db.collection ('post', function (err, collection) collection.find (). toArray (function (err, list)  devolución de llamada (lista);););)

El código anterior recupera los detalles de la colección MongoDB, lo convierte en una lista y lo devuelve a la función de devolución de llamada. En el home.jsx archivo, dentro de la ShowPost componente, obtener los detalles de la publicación en el componentDidMount  método. Aquí está cómo se ve:

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

El código anterior realiza una solicitud posterior al método del servidor Node.js / getPost que llamará el getPost método en el post.js expediente. Aquí está el / getPost método en el app.js expediente.

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

Una vez que los detalles de la publicación han sido recuperados en el axios devolución de llamada exitosa, mantenga los detalles dentro de una variable de matriz de estado. Declara una variable llamada puestos dentro de ShowPost constructor.

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

En la exitosa devolución de llamada de la axios llamada ajax, establece la variable de estado como se muestra:

self.setState (posts: response.data)

Una vez que tenga los detalles de la publicación, debe crear dinámicamente el HTML requerido en el método de procesamiento del componente React. Aquí está cómo se ve: 

render () return ( 
 this.state.posts.map (function (post, index) return  
título de la entrada
 
post.subject
  ) 
 )

El código anterior itera el puestos variable de estado y crea el HTML dinámicamente. Guarde los cambios anteriores y reinicie el servidor Node.js. Inicie sesión en la aplicación de blog y cree algunas publicaciones de blog usando el Añadir botón en la página de inicio. Una vez que se hayan agregado las publicaciones, se mostrarán en la página de inicio.

Envolviendolo

En este tutorial, vio cómo crear componentes React para agregar y mostrar publicaciones de blog. En la siguiente parte de esta serie de tutoriales, aprenderá cómo agregar la funcionalidad para eliminar y actualizar las publicaciones del blog.. 

Déjame saber tus pensamientos acerca de este tutorial en la sección de comentarios a continuación. El código fuente de este tutorial está disponible en GitHub.