如何使用Nodejs和MongoDB实现注册表单（） _HTTP

本文概述

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 = https://www.lsbin.com/{"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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/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; }

【如何使用Nodejs和MongoDB实现注册表单（）】启动MongoDB。
运行app.js文件