使用 Node.js Bootstrap 和 MongoDB 构建一个简单的初学者应用程序

如果你是初学者，想要学习如何通过 Node.js、Bootstrap 和 MongoDB 构建一个简单的应用程序，那么你来到了正确的地方。在这篇文章中，我们将会探讨如何建立一个具有基本 CRUD 操作（创建、读取、更新、删除）功能的应用程序。

技术栈

在开始构建应用程序之前，我们需要了解我们将使用的技术栈。以下是用来建立我们的应用程序所需的技术：

• Node.js：一个 JavaScript 运行时环境，我们将使用它来编写服务器端代码。
• Express.js：一个流行的 Node.js 框架，用于构建我们的服务器端应用程序。
• Bootstrap：一个流行的前端框架，用于构建我们的用户界面。
• MongoDB：一种 NoSQL 数据库，我们将在其中存储我们的数据。

设置环境

在开始之前，请确保你已经安装了 Node.js 和 MongoDB。你可以从官方网站下载并安装它们，具体步骤请参照官方文档。

我们将使用命令行设置我们的应用程序，因此打开终端并输入以下命令：

mkdir myapp
cd myapp
npm init

这些命令将会在你的计算机上创建一个名为 myapp 的文件夹，并初始化一个名为 package.json 的文件。这个文件将会用来描述你的应用程序，包含你的依赖和配置信息。

接下来，我们将会安装我们的依赖。在终端中输入以下命令：

npm install express mongodb bootstrap

这些命令将会安装 Express、MongoDB 和 Bootstrap 依赖，并将它们添加到我们的 package.json 文件。

创建服务器

我们现在已经有了我们的环境和依赖项，让我们开始创建我们的服务器吧！

在 myapp 目录下，创建一个名为 app.js 的文件。这个文件将是我们的应用程序的入口点。

在 app.js 中输入以下代码：

const express = require('express');
const app = express();

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

这段代码使用了 Express 创建了一个 Web 服务器，并监听了端口 3000。当服务器被启动时，它会在终端上输出一条信息。

现在，在你的终端中输入以下命令启动服务器：

node app.js

现在打开你的浏览器，访问 http://localhost:3000。你应该能看到一个网页，上面显示着 “Cannot GET /” 的信息。这是因为我们尚未创建任何路由！

创建路由

路由是一个用于响应客户端请求的模块。让我们为我们的应用程序添加一些路由吧。

在 app.js 中输入以下代码：

app.get('/', (req, res) => {
    res.send('Hello World!');
});

我们定义了一个简单的路由，当客户端访问网站根目录时，它将返回一个字符串 “Hello World!”。现在，再次访问 http://localhost:3000，你应该能看到这个字符串。

好啦！我们已经定义了我们的第一个路由。现在，我们将会建立 MongoDB 数据库连接，以便存储一些数据。

创建数据库连接

在 app.js 中添加以下代码：

const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017/myapp';

MongoClient.connect(url, { useUnifiedTopology: true }, (err, db) => {
    if (err) {
        console.log('Database connection failed!');
        console.log(err);
    } else {
        console.log('Database connected successfully!');

        app.listen(3000, () => {
            console.log('Server is running on port 3000');
        });
    }
});

这段代码将连接到本地 MongoDB 数据库，并输出一条信息，指示数据库连接成功或失败。

创建数据模型

一个数据模型是一个用于描述数据库存储的数据的结构。我们将为我们的应用程序创建一个数据模型。

在 myapp 目录下，创建一个名为 models 的文件夹。在其中创建一个名为 task.js 的文件，输入以下代码：

class Task {
    constructor(title, description) {
        this.title = title;
        this.description = description;
    }
}

module.exports = Task;

这个模型定义了一个 Task 类，它包含一个 title 字段和一个 description 字段。我们将使用它来创建一个新任务。

创建 CRUD 操作

接下来，我们将创建路由和控制器来实现 CRUD 操作。

在 myapp 目录下，创建一个名为 controllers 的文件夹。在其中创建一个名为 taskController.js 的文件，输入以下代码：

const Task = require('../models/task');

const getAllTasks = (req, res) => {
    db.collection('tasks').find().toArray((err, tasks) => {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        } else {
            res.render('index', { tasks });
        }
    })
}

const createTask = (req, res) => {
    const task = new Task(req.body.title, req.body.description);
    db.collection('tasks').insertOne(task, (err, result) => {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        } else {
            res.redirect('/');
        }
    });
};

const deleteTask = (req, res) => {
    const taskId = req.params.id;
    db.collection('tasks').deleteOne({ _id: ObjectId(taskId) }, (err, result) => {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        } else {
            res.redirect('/');
        }
    });
};

module.exports = {
    getAllTasks,
    createTask,
    deleteTask
}

这个控制器使用我们之前定义的模型，并使用 MongoDB 的驱动程序执行操作。我们定义了以下方法：

• getAllTasks：获取所有任务，并将它们显示在页面上。
• createTask：创建一个新任务，将其添加到数据库中，并在成功后重定向回首页。
• deleteTask：删除一个任务，并将其从数据库中删除，并在成功后重定向回首页。

我们还需要创建对应的路由。

在 app.js 文件中添加以下代码：

const taskController = require('./controllers/taskController');

app.get('/', taskController.getAllTasks);

app.post('/', taskController.createTask);

app.get('/delete/:id', taskController.deleteTask);

我们为所有任务创建了一个 GET 路径、一个 POST 路径来创建新任务，并在 /delete/:id 路径中创建了一个 DELETE 路径，用于删除任务。

最后，我们还需要为我们的应用程序创建一个视图。

在 myapp 目录下，创建一个名为 views 的文件夹。在其中创建一个名为 index.ejs 的文件，输入以下代码：

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container mt-5">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <h1 class="mb-5">My Tasks</h1>
                    <form action="/" method="POST" class="mb-5">
                        <div class="form-group">
                            <input type="text" id="title" name="title" class="form-control" placeholder="Title" required>
                        </div>
                        <div class="form-group">
                            <textarea id="description" name="description" class="form-control" placeholder="Description"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Add Task</button>
                    </form>
                    <ul class="list-group">
                        <% tasks.forEach(function(task){ %>
                            <li class="list-group-item">
                                <h5><%= task.title %></h5>
                                <p><%= task.description %></p>
                                <a href="/delete/<%= task._id %>" class="btn btn-danger btn-sm float-right"><i class="fas fa-trash-alt"></i> Delete</a>
                            </li>
                        <% }); %>
                    </ul>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/js/all.min.js"></script>
    </body>
</html>

这个文件为我们的应用程序创建了一个基本的用户界面，并使用 Bootstrap 创建了样式。我们使用了 EJS 模板引擎来渲染我们的视图。

你现在拥有了一个可以存储和管理你的任务列表的应用程序。

总结

在本文中，我们探讨了如何使用 Node.js、Bootstrap 和 MongoDB 构建一个简单的初学者应用程序。我们了解了如何设置我们的环境和依赖项，如何创建服务器和路由，如何连接数据库，如何创建数据模型和 CRUD 操作，以及如何渲染视图。我希望这个教程能够帮助你开始构建你自己的应用程序！