Share
En la parte anterior de esta serie de tutoriales, vio cómo implementar la función de actualización y eliminación de publicaciones para nuestra aplicación React blog. En este tutorial, implementará la página de perfil para la aplicación de blog.
Comencemos clonando el código fuente de la última parte de la serie..
https://github.com/royagasthyan/ReactBlogApp-EditDelete
Una vez que se haya clonado el directorio, vaya al directorio del proyecto e instale las dependencias necesarias.
cd ReactBlogApp-EditDelete npm install
Inicie el servidor Node.js y tendrá la aplicación ejecutándose en http: // localhost: 7777 / index.html # /.
Primero debe agregar un nuevo elemento de menú en el menú de la página de inicio llamado Perfil. Sobre el home.html página, añadir una nueva ul Elemento para la página de perfil como se muestra:
Guarde los cambios anteriores y reinicie el servidor. Dirija su navegador a http: // localhost: 7777 / e inicie sesión en la aplicación. Una vez que haya iniciado sesión, podrá ver la lista del menú con el enlace del perfil.
Para que el enlace del menú de perfil funcione, debe agregar una nueva ruta a las rutas existentes en el home.jsx expediente.
ReactDOM.render (, document.getElementById ('app'));
En el home.jsx archivo, crear un nuevo componente Mostrar perfil. Añadir algunas variables de estado para nombre, contraseña, correo electrónico, y Carné de identidad. Dentro del metodo de render del Mostrar perfil componente, agregue el HTML para representar los detalles del perfil. Aquí es cómo el Mostrar perfil aspecto del componente:
Accentsconagua
la clase ShowProfile extiende React.Component constructor (props) super (props); this.state = name: ", email:", password: ", id:"; componentDidMount () document.getElementById ('addHyperLink'). className = ""; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = "active"; this.getProfile (); updateProfile () getProfile () render () return ( )Cuando se carga la página de perfil, debe obtener los detalles de la base de datos y rellenarla en el formulario. Agregue el código en el obtener perfil metodo dentro del Mostrar perfil Componente para realizar la llamada AJAX para obtener detalles del usuario..
axios.post ('/ getProfile', ) .then (function (response) ) .catch (function (error) console.log ('error is', error););Una vez que se reciben los detalles en la respuesta, debe actualizar las variables de estado para la misma. Aquí está el obtener perfil método de la Mostrar perfil componente:
getProfile () var self = this; axios.post ('/ getProfile', ) .then (function (response) if (response) self.setState (name: response.data.name); self.setState (email: response.data .email); self.setState (password: response.data.password);) .catch (function (error) console.log ('error is', error);); Dentro de app.js archivo, crea un método llamado obtener perfil que se encargará de la llamada del método POST desde el Mostrar perfiles obtener perfil método. los obtener perfil metodo dentro del app.js archivo en su lugar hará una llamada a usuario.js para obtener detalles de la base de datos. Aquí está cómo se ve:
app.post ('/ getProfile', function (req, res) user.getUserInfo (session.username, function (resultado) res.send (resultado)))Dentro de usuario.js archivo, crea un método llamado getUserInfo que consultará la base de datos de MongoDB usando el nombre de usuario para obtener los detalles requeridos. Aquí es cómo el getUserInfo método se ve:
getUserInfo: función (nombre de usuario, devolución de llamada) MongoClient.connect (url, función (err, db) db.collection ('usuario'). findOne (email: username, función (err, resultado) if (resultado = = nulo) devolución de llamada (falso) else devolución de llamada (resultado););); Como se ve en el código anterior, realiza una llamada a MongoDB utilizando el MongoClient para consultar la colección de usuarios basada en la dirección de correo electrónico. Una vez que se recibe el resultado, se devuelve a la función de devolución de llamada.
Guarde los cambios anteriores y reinicie el servidor Node.js. Dirija su navegador a http: // localhost: 7777 / # / e inicie sesión en la aplicación. Haga clic en el enlace del perfil en el menú y podrá ver los detalles del perfil que se encuentran en la página..
Para manejar el cambio de nombre y contraseña, necesita definir dos métodos llamados manejarNombreCambiar y handlePasswordChange en el Mostrar perfil componente. Estos métodos establecerán las variables de estado en el cambio de texto. Aquí está cómo se ve:
handleNameChange (e) this.setState (name: e.target.value) handlePasswordChange (e) this.setState (password: e.target.value)
Unir los métodos en el Mostrar perfil constructor.
constructor (props) super (props); this.handleNameChange = this.handleNameChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this); this.updateProfile = this.updateProfile.bind (this); this.getProfile = this.getProfile.bind (this); this.state = name: ", email:", password: ", id:";
Definir un método llamado actualización del perfil que se llamará cuando el usuario haga clic en el Actualizar Botón para actualizar los detalles del usuario. Dentro de actualización del perfil método, hacer una llamada POST a la actualización del perfil método en el app.js archivo junto con el cambiado nombre y contraseña. Aquí es cómo el actualización del perfil método en el Mostrar perfil aspecto del componente:
updateProfile () var self = this; axios.post ('/ updateProfile', name: this.state.name, contraseña: this.state.password) .then (function (response) if (response) hashHistory.push ('/') ) .catch (función (error) console.log ('error is', error);); Una vez que se recibe una respuesta de la llamada POST, la pantalla se desplaza a la lista de publicaciones del blog.
Dentro de app.js archivo, crea un método llamado actualización del perfil que analizará los parámetros pasados y realizará una llamada a la base de datos MongoDB.
app.post ('/ updateProfile', function (req, res) var name = req.body.name; var password = req.body.password; user.updateProfile (nombre, contraseña, session.username, función (resultado) res.send (resultado);))Como se ve en el código anterior, una vez que los parámetros se analizan en el actualización del perfil método en el app.js archivo, el user.updateProfile método se llama con cambiado nombre, contraseña, y nombre de usuario.
Vamos a definir el user.updateProfile metodo dentro del usuario.js archivo, que hará una llamada a la MongoDB base de datos y actualizar la nombre y contraseña basado en el nombre de usuario. Aquí es cómo el actualización del perfil método en el usuario.js aspecto del archivo:
updateProfile: función (nombre, contraseña, nombre de usuario, devolución de llamada) MongoClient.connect (url, función (err, db) db.collection ('usuario'). updateOne ("email": nombre de usuario, $ set: "nombre": nombre, "contraseña": contraseña, función (err, resultado) if (err == null) callback (true) else callback (false));); En el código anterior, actualizó los detalles del usuario en función de la dirección de correo electrónico utilizando la updateOne método.
Guarde los cambios anteriores y reinicie el servidor. Inicie sesión en la aplicación y haga clic en Perfil enlazar. Cambie el nombre y la contraseña y haga clic en el Actualizar botón. Intente iniciar sesión y podrá iniciar sesión con la nueva contraseña.
En este tutorial, implementó la página de perfil para la aplicación de blog. Aprendió cómo obtener detalles de una base de datos y rellenarla en la página usando React. También implementaste la funcionalidad para actualizar los detalles del perfil..
El código fuente de este tutorial está disponible en GitHub. Déjame saber tus pensamientos o sugerencias en los comentarios a continuación.
