Share
En la primera parte de esta serie de tutoriales, vio cómo implementar la funcionalidad de inicio de sesión. En esta parte, aprenderá cómo implementar la funcionalidad de registro y modificar la funcionalidad de inicio de sesión para verificar si hay usuarios válidos de MongoDB..
Comencemos clonando el código fuente de la primera parte del tutorial..
git clone https://github.com/royagasthyan/ReactBlogApp-SignIn
Una vez que se haya clonado el directorio, vaya al directorio del proyecto e instale las dependencias necesarias.
cd ReactBlogApp-SignIn npm install
Inicie el servidor Node.js y tendrá la aplicación ejecutándose en http: // localhost: 7777 / index.html # /.
Para esta aplicación, usarás MongoDB como el back-end. Siga las instrucciones en la documentación oficial de MongoDB para instalar MongoDB en Ubuntu. Una vez que haya instalado MongoDB, necesitará un conector para conectar MongoDB y Node.js. Instale el controlador Node.js de MongoDB utilizando el Administrador de paquetes de nodos (o npm):
npm instalar mongodb
Una vez que haya instalado el controlador, debería poder solicitar el controlador en la aplicación.
Crear un archivo llamado usuario.js donde mantendrás las cosas relacionadas con el usuario. Dentro de usuario.js archivo, requiere las dependencias relacionadas con el cliente MongoDB.
Accentsconagua
var MongoClient = require ('mongodb'). MongoClient;Estarás usando una biblioteca llamada afirmar para comprobar la respuesta devuelta. Incluir afirmar en el usuario.js expediente.
var assert = require ('assert');Vamos a nombrar nuestra base de datos Blog en MongoDB, por lo que nuestra URL de base de datos es como se muestra:
var url = 'mongodb: // localhost: 27017 / Blog';
Dentro de usuario.js archivo, crear y exportar una función llamada Regístrate.
module.exports = signup: function () // El código estará aquí
Usando el cliente MongoDB, intente conectarse a la base de datos. Una vez conectado, registrarás el mensaje conectado en el terminal..
module.exports = signup: function (nombre, correo electrónico, contraseña) MongoClient.connect (url, function (err, db) console.log ('connected')); Una vez que haya configurado el back-end de MongoDB, implementemos el evento de registro. Dentro de main.jsx página, incluya el evento de cambio para los cuadros de texto de entrada de nombre, correo electrónico y contraseña en el Regístrate clase.
handleNameChange (e) this.setState (name: e.target.value) handleEmailChange (e) this.setState (email: e.target.value) handlePasswordChange (e) this.setState ( contraseña: e.target.value)
Enlazar los cambios de eventos anteriores en el constructor de la clase..
constructor (props) super (props); this.handleNameChange = this.handleNameChange.bind (this); this.handleEmailChange = this.handleEmailChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this);
Definir las variables de estado dentro de la Regístrate constructor de clase.
this.state = name: ", email:", password: ";
Define el método de registro dentro del Regístrate clase. Dentro del método de registro, usando el axios biblioteca, hacer una llamada de método posterior a la Regístrate método en el usuario.js expediente.
signUp () axios.post ('/ signup', name: this.state.name, correo electrónico: this.state.email, contraseña: this.state.password) .then (function (response) console.log (respuesta);) .catch (función (error) console.log (error);); Dentro de Regístrate función en el usuario.js archivo, se implementará la inserción de base de datos.
Añade el /Regístrate solicitud de manejador en el app.js Archivo como se muestra para manejar el evento de clic de registro. Dentro de /Regístrate solicitar la función de manejador, hacer una llamada al usuario.signup método.
app.post ('/ signup', function (req, res) user.signup (",", "console.log (res);)Requerir el usuario.js archivo dentro de la app.js expediente.
var user = require ('./ user')Guarde los cambios anteriores y reinicie el servidor. Dirija su navegador a http: // localhost: 7777 / index.html # / signup y debería tener la página de registro. Haga clic en el Regístrate botón y tendrás el conectado mensaje en la terminal.
Para guardar los detalles del usuario en el Blog base de datos, creará una colección llamada usuario. Dentro de la colección de usuarios, conservará todos los detalles del usuario, como el nombre, la dirección de correo electrónico y la contraseña. los MongoClient.connect devuelve un parámetro db con el que puede insertar una entrada en el usuario colección.
Harás uso de la insertOne Método para insertar un único registro en la colección de usuarios. Modificar el código en el método de registro en usuario.js Como se muestra abajo:
db.collection ('usuario'). insertOne ("nombre": nombre, "correo electrónico": correo electrónico, "contraseña": contraseña, función (err, resultado) assert.equal (err, null); console.log ("Se guardaron los detalles de registro del usuario."););Aquí está el completo usuario.js código:
var MongoClient = require ('mongodb'). MongoClient; var assert = require ('assert'); var url = 'mongodb: // localhost: 27017 / Blog'; module.exports = signup: function (nombre, correo electrónico, contraseña) MongoClient.connect (url, function (err, db) db.collection ('usuario'). insertOne ("name": name, "email" : correo electrónico, "contraseña": contraseña, función (err, resultado) assert.equal (err, null); console.log ("Guardó los datos de registro del usuario."););); Modificar el /Regístrate solicitud de manejador en el app.js archivo para pasar el nombre, correo electrónico y contraseña a la usuario.js Regístrate método.
app.post ('/ signup', function (req, res) var name = req.body.name; var email = req.body.email; var contraseña = req.body.password; if (nombre && correo electrónico && contraseña ) user.signup (nombre, correo electrónico, contraseña) else res.send ('Failure');)Guarde los cambios anteriores y reinicie el servidor. Dirija su navegador a http: // localhost: 7777 / index.html # / signup. Rellene los detalles de registro del usuario y haga clic en el botón de registro. Tendras el Guardó los datos de registro del usuario. Mensaje en el terminal del servidor. Inicie sesión en el shell de MongoDB y compruebe el usuario colección en el Blog base de datos. Para encontrar los detalles del usuario, ingrese el siguiente comando en el shell MongoDB:
db.user.find ()
El comando anterior mostrará los detalles del usuario en formato JSON.
"name": "roy", "email": "[email protected]", "password": "test", "_id": ObjectId ("58f622f50cb9b32905f1cb4b")
En la primera parte del tutorial, usted codificó la verificación de inicio de sesión del usuario ya que no se ha implementado el registro de usuario. Modifiquemos la comprobación de inicio de sesión codificada e inspeccionemos la base de datos de MongoDB para obtener inicios de sesión válidos..
Crear una función llamada validateSignIn en el usuario.js expediente.
validateSignIn: función (nombre de usuario, contraseña, devolución de llamada)
Dentro de validateSignIn función, utilizando el cliente MongoDB se conectará a la Blog base de datos y consulte la tabla de usuario para un usuario con el nombre de usuario y la contraseña especificados. Harás uso de la Encuentra uno Método para consultar la colección de usuarios..
db.collection ('usuario'). findOne (email: nombre de usuario, contraseña: contraseña, función (error, resultado) );Compruebe el resultado devuelto para nulo en caso de que no se encuentre la entrada.
if (result == null) callback (false) else callback (true)
Como se ve en el código anterior, si no se encuentra una entrada, se devuelve falso en la devolución de llamada. Si se encuentra una entrada, se devuelve true en la devolución de llamada.
Aquí está el completo validateSignIn método:
validateSignIn: función (nombre de usuario, contraseña, devolución de llamada) MongoClient.connect (url, función (err, db) db.collection ('usuario'). findOne (email: username, password: password, función (err, resultado ) if (result == null) callback (false) else callback (true));); En el /registrarse método en el app.js archivo, harás una llamada al validateSignIn método. En la función de devolución de llamada, verificará la respuesta. Si es verdadero, indicará un inicio de sesión válido, de lo contrario un inicio de sesión no válido. Aquí está cómo se ve:
app.post ('/ signin', function (req, res) var user_name = req.body.email; var password = req.body.password; user.validateSignIn (user_name, password, function (resultado) si (resultado ) res.send ('Success') else res.send ('Password de usuario incorrecto'));Guarde los cambios anteriores y reinicie el servidor. Dirija su navegador a http: // localhost: 7777 / index.html # /. Ingrese un nombre de usuario y contraseña válidos y tendrá un mensaje de éxito registrado en la consola del navegador. Al ingresar un nombre de usuario y contraseña no válidos, se mostrará un mensaje de error.
En esta parte del tutorial, vio cómo implementar el proceso de registro de usuarios. Ya vio cómo crear la vista de registro y pasar los datos de la interfaz de usuario de React a Node.js y luego guardarlos en MongoDB. También modificó la funcionalidad de inicio de sesión del usuario para verificar si el inicio de sesión del usuario es válido desde la base de datos MongoDB.
En la siguiente parte del tutorial, implementará la funcionalidad de agregar publicación y mostrar la página de publicación.
El código fuente de este tutorial está disponible en GitHub.
Háganos saber sus pensamientos o sugerencias en los comentarios a continuación.
