如何使用Nodejs和MongoDB实现注册表单？

2021年3月18日16:23:57 发表评论 958 次浏览

本文概述

app.js
index.html
signup_success.html
style.css

装置

首先, 我们需要为Nodejs应用程序包含一些软件包。

npm install express --save

Express允许我们设置中间件来响应HTTP请求。

npm install body-parser --save

如果要读取HTTP POST数据, 则必须使用" body-parser"节点模块。

npm install mongoose --save

Mongoose是一个对象文档建模(ODM)层, 位于Node的MongoDB驱动程序的顶部。

app.js这是主要的可执行应用程序文件

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

启动MongoDB。

运行app.js文件