使用Node.js、Bootstrap和MongoDB构建简单的初级应用

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

项目结构：

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

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

npm init

您可以自定义在初始化过程中询问的问题和创建的字段，或者保留默认设置。处理完成后，您会在项目文件夹中找到 package.json 文件。

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

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

npm install express mongoose nodemon

使用Node.js、Bootstrap和MongoDB构建简单的初级应用

安装依赖项需要一些时间，等待安装完成后，在dependencies下的package.json文件中将创建一个名为 node_modules 的文件夹，您将找到所有已安装依赖项的名称和版本。

使用Node.js、Bootstrap和MongoDB构建简单的初级应用

步骤4: 我们接下来将打开 index.js文件，并使用以下代码创建一个简单的express app。

// Importing express module
const express = require("express");
 
// Importing mongoose module
const 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构建简单的初级应用

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

步骤7： 现在，我们需要添加两行代码，因为我们将需要 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,
});
let db = mongoose.connection;

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

这是index.js文件的主要部分，其中将处理post请求，并从客户端请求正确地将数据传输到主数据库服务器。

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

    const 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代码如下：

文件名：index.js

const express = require("express");
const mongoose = require("mongoose");
const port = 80;
const app = express();
 
mongoose.connect("mongodb://localhost/projectDG", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});
let 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) => {
    const name = req.body.name;
    const reason = req.body.reason;
    const email = req.body.email;
    const phone = req.body.phone;
    const city = req.body.city;
    const state = req.body.state;
    const addressline = req.body.addressline;
 
    const 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构建简单的初级应用

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构建简单的初级应用

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