用Node.js Bootstrap和MongoDB建立一个简单的初级应用程序

Node.js是著名的开源环境之一，允许你在浏览器之外运行javascript脚本。MERN和MEAN堆栈是两个最流行的组合，可以帮助你创建一个惊人的应用程序。在这篇文章中，我们将用Node、Bootstrap和MongoDB创建一个简单的初学者友好的联系表单应用程序。在开始这个项目之前，我们必须确保Node.js和MongoDB已经安装在你的系统中。

项目结构:

第1步：创建一个项目文件夹，并在IDE中打开该文件夹。

首先用你提供的值创建一个package.json文件，在IDE的终端使用npm init命令。

npm init

你可以在启动过程中自定义所问的问题和创建的字段，或者将其保留为默认值。过程结束后，你会在你的项目文件夹中找到package.json文件。

第2步：接下来在项目文件夹中创建一个index.js文件，这将是应用程序的入口点。

第3步：现在使用npm命令安装依赖项express、mongoose 、和 nodemon。

npm install express mongoose nodemon

用Node.js Bootstrap和MongoDB建立一个简单的初级应用程序

安装Express、mongoose和nodemon

安装依赖项需要一些时间，完成后，将创建一个名为node_modules的文件夹，在依赖项下的package.json文件中，你会发现所有已安装的依赖项的名称及其版本。

用Node.js Bootstrap和MongoDB建立一个简单的初级应用程序

Dependencies

第四步：我们接下来将打开index.js文件，用以下代码创建一个简单的Express应用程序。

// Importing express module
var express = require("express");
 
// Importing mongoose module
var mongoose = require("mongoose");
const port = 80;
const app = express();
 
// Handling the get request
app.get("/", (req, res) => {
  res.send("Hello World");
});
 
// Starting the server on the 80 port
app.listen(port, () => {
  console.log(`The application started
  successfully on port ${port}`);
});

这段代码创建了一个简单的Express应用程序，它启动了一个服务器并在80端口监听连接。该应用程序对”/”的请求以 “Hello World “作为回应。

第5步：要运行代码，到终端输入

nodemon index.js

用Node.js Bootstrap和MongoDB建立一个简单的初级应用程序

应用程序成功启动

第6步：然后打开你的浏览器，http://localhost ，或者干脆用localhost从自身访问服务器。

用Node.js Bootstrap和MongoDB建立一个简单的初级应用程序

Localhost

页面显示 “Hello World”，这意味着我们的Express应用程序正在正常工作。

第7步：我们现在需要添加2行代码，因为我们将需要express.json()和express.urlencoded()用于POST和PUT请求。Express为我们提供了中间件，以处理请求正文中传入的数据对象。在POST和PUT请求中，我们正在向服务器发送数据对象，并要求服务器接受或存储该数据对象，该数据对象被包含在该请求的req.body中。

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

第8步：在项目文件夹内创建一个名为public的文件夹。我们将在项目的public目录下创建所有的静态HTML文件。

// For serving static html files
app.use(express.static('public'));

第9步：现在我们将通过使用以下代码连接到mongoose数据库。本项目的数据库名称为projectDG。

mongoose.connect("mongodb://localhost/projectDG", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
var db = mongoose.connection;

第10步：接下来，我们要定义一个post方法，将联系人表单的数据保存到我们的数据库。我们在这里定义我们的数据对象并创建名为users的集合。在成功插入数据后，我们将重定向到formSubmitted.html。

这是index.js文件的主要部分，在这里将处理发布请求，并将数据从客户端请求适当转移到主数据库服务器。

app.post("/formFillUp", (req, res) => {
  var name = req.body.name;
  var reason = req.body.reason;
  var email = req.body.email;
  var phone = req.body.phone;
  var city = req.body.city;
  var state = req.body.state;
  var addressline = req.body.addressline;

  var data = {
    name: name,
    reason: reason,
    email: email,
    phone: phone,
    city: city,
    state: state,
    addressline: addressline,
  };

  db.collection("users").insertOne(data, 
  (err, collection) => {
    if (err) {
      throw err;
    }
    console.log("Data inserted successfully!");
  });

  return res.redirect("formSubmitted.html");
});

最终的index.js将如下图所示。

Filename: index.js

var express = require("express");
var mongoose = require("mongoose");
const port = 80;
const app = express();
   
mongoose.connect("mongodb://localhost/projectDG", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
var db = mongoose.connection;
   
app.use(express.json());
   
// For serving static HTML files
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
   
app.get("/", (req, res) => {
  res.set({
    "Allow-access-Allow-Origin": "*",
  });
     
  // res.send("Hello World");
  return res.redirect("index.html");
});
   
app.post("/formFillUp", (req, res) => {
  var name = req.body.name;
  var reason = req.body.reason;
  var email = req.body.email;
  var phone = req.body.phone;
  var city = req.body.city;
  var state = req.body.state;
  var addressline = req.body.addressline;
   
  var data = {
    name: name,
    reason: reason,
    email: email,
    phone: phone,
    city: city,
    state: state,
    addressline: addressline,
  };
   
  db.collection("users").insertOne(
  data, (err, collection) => {
    if (err) {
      throw err;
    }
    console.log("Data inserted successfully!");
  });
   
  return res.redirect("formSubmitted.html");
});
   
app.listen(port, () => {
  console.log(`The application started 
  successfully on port ${port}`);
});

第11步：现在我们将在public文件夹内创建index.html, formSubmittedhtml, 和 style.css文件。

index.html:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,
        initial-scale=1, shrink-to-fit=no" />
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous" />
    <link rel="stylesheet" href="./style.css" />
    <link href=
"https://fonts.googleapis.com/css2?family=Poppins&display=swap"
        rel="stylesheet" />
</head>
 
<body>
    <div class="container mt-3">
        <br />
        <h1>Contact Us</h1>
        <br />
        <form action="/formFillUp" method="POST">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="inputName"
                        style="font-size: 23px">
                        Name
                    </label>
                    <input type="text" class="form-control"
                        id="name" name="name" />
                </div>
 
                <div class="form-group col-md-6">
                    <label for="inputReason"
                        style="font-size: 23px">
                        Reason for contacting
                    </label>
                     
                    <input type="text" class="form-control"
                        id="reason" name="reason" />
                </div>
            </div>
 
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="inputEmail"
                        style="font-size: 23px">
                        Email
                    </label>
                    <input type="email" class="form-control"
                        id="inputEmail" name="email" />
                </div>
                <div class="form-group col-md-6">
                    <label for="inputPhone"
                        style="font-size: 23px">Phone
                    </label>
                    <input type="text" class="form-control"
                        id="inputPhone" name="phone" />
                </div>
            </div>
 
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="inputCity"
                        style="font-size: 23px">City
                    </label>
                    <input type="text" class="form-control"
                        id="inputCity" name="city" />
                </div>
                <div class="form-group col-md-6">
                    <label for="inputState"
                        style="font-size: 23px">State
                    </label>
                    <input type="text" class="form-control"
                        id="inputState" name="state" />
                </div>
            </div>
            <div class="form-group">
                <label for="inputAddress"
                    style="font-size: 23px">Address</label>
                <input type="text" class="form-control"
                    id="inputAddress" name="addressline" />
            </div>
            <button type="submit" class="btn btn-primary">
                Submit
            </button>
        </form>
    </div>
</body>
 
</html>

输出:

用Node.js Bootstrap和MongoDB建立一个简单的初级应用程序

index.html

formSubmitted.html

<!DOCTYPE html>
<html>
 
<head>
    <title>Form Submitted Successfully</title>
    <link rel="stylesheet" href="./style.css" />
    <link href=
"https://fonts.googleapis.com/css2?family=Poppins&display=swap"
        rel="stylesheet" />
</head>
 
<body>
    <div class="containerFormSubmittedMessage">
        <h1>Form Submitted Successfully!</h1>
         

            Thank you for contacting us! Our
            team will mail you shortly.
        
 
    </div>
</body>
 
</html>

输出:

用Node.js Bootstrap和MongoDB建立一个简单的初级应用程序

formSubmitted.html

style.css

body {
  background-image: linear-gradient(120deg,
                 #9de7fa 0%, #f89fba 100%);
  color: white;
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
}
 
.btn-primary {
  color: #fff;
  background-color: #f89fba;
  border-color: #f89fba;
}
.containerFormSubmittedMessage {
  display: flex;
  flex-direction: column;
  margin: auto;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid whitesmoke;
}