이 기사에서는 몇 가지 매개변수가 있는 간단한 사용자 가입 양식을 만듭니다. 저장을 클릭하면 모든 사용자 세부 정보가 MongoDB 데이터베이스에 저장됩니다.
설치
가입 양식을 만들기 전에 다음 종속 항목이 시스템에 성공적으로 설치되어 있어야 합니다.
-
다음 명령어를 사용하여 express를 확인하고 설치합니다. Express는 HTTP 요청에 응답하도록 미들웨어를 설정하는 데 사용됩니다.
npm install express --save
-
HTTP POST 데이터를 읽기 위한 "body-parser" 노드 모듈을 설정합니다.
npm install body-parser --save
-
Node의 MongoDB 드라이버 위에 있는 "mongoose"를 설정합니다.
npm install mongoose --save
예시 1
-
다음 파일을 만들고 아래에 주어진 각 파일에 대해 코드 스니펫을 복사하여 붙여넣습니다. -
-
app.js
-
public (새 폴더를 만들고 이 폴더 안에 아래 파일을 붙여넣습니다.)
-
index.html
-
성공.html
-
style.css
-
-
-
이제 다음 명령어를 실행하여 애플리케이션을 실행합니다.
node app.js
코드 조각
app.js
var express=require("express");
var bodyParser=require("body-parser");
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/tutorialsPoint');
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('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> <div class="main"> <form action="/sign_up" method="post"> <h1>Welcome to Tutorials Point - SignUp</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" class="registerbtn" value="Submit" /> <br> </form> </div> <div class=""> </div> </div> </div> </body> </html>
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 #4CAF50;
}
input[type=submit] {
font-family: 'Helvetica', serif;
width: 100%;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
margin: 4px 2px;
border-radius: 10px;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
} 출력
이제 웹 브라우저에서 이 링크를 시도하십시오. 등록 페이지가 표시됩니다.
https://127.0.0.1:3000/index.html 또는 https://localhost:3000/index.html
C:\Users\tutorialsPoint\> node app.js
server listening at port 3000
(node:73542) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
(node:73542) [MONGODB DRIVER] Warning: Current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
connection succeeded
가입 페이지
<강한> 
성공 페이지
<강한> 
mongoDB에 성공적으로 레코드 삽입
<강한> 