Instalaciones
Primero, necesitamos incluir algunos paquetes para nuestra aplicación Nodejs.
npm install express --saveExpress nos permite configurar middlewares para responder a requests HTTP.
npm install body-parser --saveSi desea leer datos HTTP POST, debe usar el módulo de Node «body-parser».
npm install mongoose --saveMongoose es una capa de modelado de documentos de objetos (ODM) que se encuentra en la parte superior del controlador MongoDB de Node.
app.js Este es el principal archivo ejecutable de la aplicación.
app.js
var express=require("express");
var bodyParser=require("body-parser");
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/gfg');
var db=mongoose.connection;
db.on('error', console.log.bind(console, "connection error"));
db.once('open', function(callback){
console.log("connection succeeded");
})
var app=express()
app.use(bodyParser.json());
app.use(express.static('public'));
app.use(bodyParser.urlencoded({
extended: true
}));
app.post('/sign_up', function(req,res){
var name = req.body.name;
var email =req.body.email;
var pass = req.body.password;
var phone =req.body.phone;
var data = {
"name": name,
"email":email,
"password":pass,
"phone":phone
}
db.collection('details').insertOne(data,function(err, collection){
if (err) throw err;
console.log("Record inserted Successfully");
});
return res.redirect('signup_success.html');
})
app.get('/',function(req,res){
res.set({
'Access-control-Allow-Origin': '*'
});
return res.redirect('index.html');
}).listen(3000)
console.log("server listening at port 3000");
index.html
<!DOCTYPE html> <html> <head> <title> Signup Form</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <br> <br> <br> <div class="container" > <div class="row"> <div class="col-md-3"> </div> <div class="col-md-6 main"> <form action="/sign_up" method="post"> <h1> Signup form </h1> <input class="box" type="text" name="name" id="name" placeholder="Name" required /><br> <input class="box" type="email" name="email" id="email" placeholder="E-Mail " required /><br> <input class="box" type="password" name="password" id="password" placeholder="Password " required/><br> <input class="box" type="text" name="phone" id="phone" placeholder="Phone Number " required/><br> <br> <input type="submit" id="submitDetails" name="submitDetails" value="Submit" /><br> </form> </div> <div class="col-md-3"> </div> </div> </div> </body> </html>
signup_success.html
<!DOCTYPE html> <html> <head> <title> Signup Form</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <br> <br> <br> <div class="container" > <div class="row"> <div class="col-md-3"> </div> <div class="col-md-6 main"> <h1> Signup Successful</h1> </div> <div class="col-md-3"> </div> </div> </div> </body> </html>
style.css
.main{
padding:20px;
font-family: 'Helvetica', serif;
box-shadow: 5px 5px 7px 5px #888888;
}
.main h1{
font-size: 40px;
text-align:center;
font-family: 'Helvetica', serif;
}
input{
font-family: 'Helvetica', serif;
width: 100%;
font-size: 20px;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-bottom: 2px solid #767474;
}
input[type=submit] {
font-family: 'Helvetica', serif;
width: 100%;
background-color: #767474;
border: none;
color: white;
padding: 16px 32px;
margin: 4px 2px;
border-radius: 10px;
}
Inicie MongoDB.
Ejecute el archivo app.js
node app.jsVaya al navegador y abra http://127.0.0.1:3000/
Rellene el formulario de arriba
Esto agregará un registro llamado «David Smith» en MongoDB.
Hagamos una verificación en MongoDB para el mismo registro.
El registro ahora se guarda en la base de datos «gfg» en la colección «detalles».
Publicación traducida automáticamente
Artículo escrito por latikesh2121 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA