Biểu mẫu SignUp sử dụng Node và MongoDB

Trong bài viết này, chúng tôi sẽ tạo một biểu mẫu đăng ký người dùng đơn giản có một số tham số. Khi nhấp vào LƯU, tất cả chi tiết người dùng sẽ được lưu trong cơ sở dữ liệu MongoDB.

Cài đặt

Trước khi tiếp tục tạo biểu mẫu đăng ký, các phần phụ thuộc sau phải được cài đặt thành công trên hệ thống của bạn.

Kiểm tra và cài đặt express bằng cách sử dụng lệnh sau. Express được sử dụng để đặt phần mềm trung gian phản hồi các yêu cầu HTTP

npm install express --save

Thiết lập mô-đun nút "body-parser" để đọc dữ liệu HTTP POST.

npm install body-parser --save

Thiết lập "mongoose", vì nó nằm trên trình điều khiển MongoDB của Node.

npm install mongoose --save

Ví dụ 1

Tạo các tệp sau và sao chép, dán đoạn mã liên quan đến mỗi tệp được cung cấp bên dưới -
- app.js
- public (Tạo một thư mục mới và dán các tệp bên dưới vào bên trong thư mục này.)
  - index.html
  - thành công.html
  - style.css
Bây giờ, hãy chạy lệnh sau để chạy ứng dụng.

node app.js

Đoạn mã

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

Đầu ra

Bây giờ, hãy thử liên kết này trên trình duyệt web của bạn. Bạn sẽ thấy một trang đăng ký.

https://127.0.0.1:3000/index.html HOẶC 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

Trang đăng ký

Trang thành công

Đã chèn thành công bản ghi trong mongoDB