Node.js 和 Express CRUD

现在我们将学习如何使用 Node.js 和 Express 创建一个 CRUD 应用。CRUD 应用是我们可以创建的最简单的 Web 应用。CRUD 一词来源于“创建”（Create）、“读取”（Read）、“更新”（Update）和“删除”（Delete）。我们使用 HTTP 动词来创建 CRUD 应用。在本教程中，我们还将学习如何在 Node.js 应用中连接和使用 MongoDB 数据库。本教程假设您具备一定的JavaScript知识，并且已经阅读过一些关于MongoDB 的资料。您可以将本教程视为我们Node.js 和 Express教程的第二部分。现在，让我们开始学习吧。

我们要建造什么？

在本教程中，我们将构建一个最简单的 Node.js 和 Express 应用程序。这类应用程序通常是更复杂应用程序的一部分。该应用程序将是一个用户列表，我们可以读取列表、添加用户、更新用户信息和删除用户。类似于下面的示例。除了 Node.js 和 Express 之外，我们还使用了一些 Bootstrap 来进行样式设置。让我们开始构建这个新应用程序吧。

HTTP 动词

设置我们的应用程序

如您所知，我们所有的 Node.js 应用都是在终端中安装的。我们可以创建文件夹并随意命名。创建文件夹后，我们输入 `npm init` 命令来生成 package.json 文件。有了 package.json 文件后，我们就可以创建 app.js 或 index.js 文件了。接下来，我们安装所需的依赖项。本教程中使用的依赖项包括 express、ejs、mongoose，以及作为开发依赖项的 nodemon。

上图显示的是输入 `npm init` 命令后的终端界面。按照说明操作后，您可以使用自己喜欢的文本编辑器打开刚刚创建的文件夹。我们这里使用的是 Visual Studio Code。然后，您可以将依赖项添加到 package.json 文件中。添加依赖项后，接下来创建 app.js 文件。默认情况下，它名为 index.js，但我更喜欢称之为 app.js。正如我们之前提到的，我们将使用三个依赖项：express、mongoose 和 ejs。我们可以将它们添加到 package.json 文件中。最终，我们的 package.json 文件应该类似于下图所示。

安装依赖项

我们刚刚在 package.json 文件中添加了三个依赖项，但它们尚未安装。如果您还记得 Node.js 入门教程，就会知道有两种方法可以安装它们。我们可以单独安装每个依赖项，也可以使用 `npm install` 命令一次性安装所有依赖项。由于我们使用了星号 (*)，因此安装后它们将是最新版本。我们还要单独安装另一个依赖项：nodemon。之所以要单独安装，是因为我们要将其作为开发依赖项安装。下面的示例展示了如何安装普通依赖项和“开发”依赖项。

npm install

npm install -D nodemon

您可以看到我们可以用来安装依赖项和开发依赖项的命令。这里还有一张图片，向您展示实际操作步骤。现在，我们的 package.json 文件应该和下图所示的一样。您还可以看到 package.lock.json 文件也已创建。

创建我们的应用程序

我们在前面的章节中已经搭建好了应用程序的框架。现在我们要开始创建应用程序了。你们应该知道我们已经创建了 app.js 文件。为了创建应用程序，我们需要在其中添加一些代码。正如你们所知，我们首先要在 app.js 文件中启动之前安装的包。我们将以下代码添加到该文件中。

let express = require('express');
let mongoose = require('mongoose');

let app = express(); // The express application 

let PORT = process.env.PORT || 3000;

app.listen(PORT, ()=>{
    console.log(`Connected on ${PORT}`);
});

将我们的应用程序连接到数据库

之前您看到我们安装了三个依赖项，但实际上只需要两个。我们安装了 Express，因为它是我们应用程序的框架。此外，我们还安装了 Mongoose，因为我们将使用 Mongoose 作为 MongoDB 的 ODM（对象数据管理器）。要将应用程序连接到数据库，我们只需要使用 `mongoose.connect()` 函数。然后，我们使用 MongoDB 的默认端口 27017 以及本地主机作为连接字符串。我们还需要添加数据库名称。以下代码展示了如何将 MongoDB 数据库连接到您的 Express 应用程序。

mongoose.connect('mongodb://localhost:27017/crud');    //crud is the name of the database 

let db = mongoose.connection;

db.on('connected', ()=>{
    console.log('connected to Database');
});

db.on('error', ()=>{
    console.log('Database error');
});

上面的代码展示了如何将 MongoDB 数据库连接到本地安装的 MongoDB。您也可以使用任何 MongoDB Atlas 字符串作为连接字符串。我们的 MongoDB 教程中会介绍如何设置 MongoDB Atlas。本教程中的示例仅展示了本地安装的数据库。如果您设置了 MongoDB Atlas 环境，则可以使用它。现在，您的 app.js 文件应该类似于下面显示的内容。

在控制台中测试应用程序

您可以看到应用程序目前还是空的。从头开始测试应用程序是一个很好的做法。由于我们已经安装了 nodemon，只需在控制台中输入 nodemon 即可查看结果。请记住，我们目前还没有任何路由或视图；但如果您的结果与下图类似，则说明您的应用程序正在运行，并且可以连接到数据库。

将脚本添加到 package.json 文件中 ###

上图展示了如何使用 nodemon 命令测试应用程序。在入门教程中，我们介绍了如何使用脚本；因此，为了方便部署，最好创建一些脚本。我们将添加两个脚本：dev 和 start。添加这些脚本后，只需在终端中输入 `npm run` 和脚本名称即可。脚本随即运行。dev 脚本将通过 nodemon 启动应用程序；而 start 脚本将使用 `node app` 启动应用程序。添加脚本后，我们的 package.json 文件应该如下所示。

设置视图引擎

如您所知，我们添加的第三个依赖项是 ejs。从入门教程中我们可以看到，ejs 被用作视图引擎。现在我们可以在 app.js 文件中设置视图引擎了。我们只需要将以下代码添加到文件中即可。

app.set('view engine', 'ejs');
app.set('views', 'views');

你刚刚添加到 app.js 中的代码是为了设置视图引擎和视图文件夹。创建视图引擎之后，再创建视图文件夹。

创建公共文件夹

虽然我们使用视图引擎，但设置一个公共文件夹仍然是一个非常好的实践。它便于添加脚本和样式表。尽管本教程中我们只使用“Bootstrap CDN”，但拥有一个公共文件夹仍然是一个好习惯。如果您想为应用程序添加更多样式或功能，可以将其添加到公共文件夹中。正如您在入门教程中可能了解到的，在 app.js 文件中添加 express.json 以及 URL 编码设置是非常有益的。因此，我们需要将以下代码添加到 app.js 文件中。

// express.json() and url encoding
app.use(express.json());
app.use(express.urlencoded({extended: true}));


//static folder
app.use(express.static('public')); 

在将所有这些更改添加到 app.js 文件后，该文件应该看起来像下图所示。如果您使用的是 Visual Studio Code，您还可以在旁边看到我们最近创建的 views 和 public 文件夹。

创建路由

入门教程还演示了如何在 Express 中创建路由。现在我们将添加一些用于 CRUD 操作的路由。首先，我们需要在 app.js 文件中添加路由。我们将添加一个首页路由 (/) 和一个用户路由 (/users)。添加路由后，我们创建 routes 文件夹及其文件。本教程将主要使用 /users 路由，因为我们将创建一个“用户列表”。首先，我们需要将以下代码添加到 app.js 文件中。然后，我们创建 routes 文件夹及其文件。

app.use('/', require('./routes/index')); //index route

app.use('/users', require('./routes/users')); //users route

上面的代码展示了两个路由：`/`，它是首页路由；`/users`，它是用户路由。现在我们创建一个名为 `routes` 的文件夹。在这个文件夹中，我们创建两个文件：一个名为 `users.js`，另一个名为 `index.js`。你可以创建任意数量的路由文件，但本教程中我们只使用了两个。你还可以看到我们使用了 `require()` 函数作为回调函数，用于引入路由文件。

使用快速路由器

在创建好 app.js 的路由和文件之后，我们需要在文件中编写一些代码。首先从 index.js 开始。在这个文件中，我们只创建首页路由（/）。为了创建首页路由，我们首先调用 express 和 express.Router()，然后创建路由。路由创建完成后，我们导出路由，如下面的代码所示。

let express = require('express');
let router = express.Router();

router.get('/', (req, res)=>{
    res.render('index');

});

module.exports = router;

您可以看到我们已经创建了路由器并获取了首页路由。首页路由会将您重定向到名为 index.ejs 的视图。现在您可以创建该视图并添加您想要的欢迎信息；这就是您的主屏幕。接下来，我们将向 users.js 文件添加一些路由。我们将添加用户的 CRUD 路由。此外，我们还将为应用程序创建 CRUD 视图。以下代码展示了如何向 users.js 文件添加 CRUD 路由。

let express = require('express');
let router = express.Router();

//CRUD Routes

router.get('/create', (req, res)=>{
    res.render('users/create');   
});



router.get('/list', (req, res)=>{
    res.render('users/list');
});

router.get('/update', (req, res)=>{
    res.render('/users/update');
});



module.exports = router;

现在您已经创建了一些 CRUD 路由及其视图。接下来，您可以为视图添加基本的 HTML 代码。我们稍后会详细介绍视图。我们将 CRUD 视图创建在名为 users 的文件夹中，该文件夹位于 views 文件夹内。因此，我们以 ('/users/views') 的形式进行渲染。如果您想跳过该文件夹，也可以直接在 views 文件夹中创建视图。在这种情况下，您只需要渲染视图本身：res.render('view')。现在，您的文件顺序应该如下图所示。请注意，我们在 Visual Studio Code 中安装了一个图标主题；使用此主题可以更轻松地查看项目中的每个文件夹和文件。

创建数据库模式

如您所知，我们正在使用 MongoDB。Mongoose 是一个非常实用的 MongoDB 对象模型 (ODM)。我们已经通过 npm 安装了 Mongoose。现在是时候开始使用 Mongoose 了。接下来，我们将创建一个名为“models”的文件夹。在该文件夹内，我们将创建一个名为“User.js”的文件。请注意，文件名中的首字母是大写。这是因为我们将使用它作为 User 模型。现在，我们需要在新文件中创建 Mongoose schema。创建完成后，我们将把它导出为 Mongoose 模型。为此，我们需要将以下代码添加到文件中。

let mongoose = require('mongoose');
let Schema = mongoose.Schema;

let userSchema = new Schema({

    firstName: String,
    lastName: String,
    age: Number,
    gender: String

});

let User = mongoose.model('User', userSchema);

module.exports = User;

上面的代码展示了如何创建一个简单的模式。可以看到，我们在模式中创建了许多字段。这些字段将存储在 MongoDB 数据库中名为“users”的集合中。我们将模型命名为“User”，因为 MongoDB 会创建一个复数形式的集合来表示该模型。

在我们的路线中导入模型

现在是时候将我们刚刚创建的模型导入到路由中了。正如您可能已经猜到的，我们将把模型导入到 users 路由中。我们只需要一行代码就可以将模型导入到任何路由中。对于我们的模型，这行代码如下。

let User = require('../models/User');

启动 CRUD 操作

将模型导入路由后，就可以开始执行 CRUD 操作了。现在我们将使用路由在数据库中创建用户。系统会自动创建数据库和集合。我们只需要在应用程序中创建用户即可。现在需要使用之前创建的视图。如果您还没有创建这些视图，现在可以创建它们。我们将在 users/create 视图中创建一个表单，该表单将用于创建用户。因此，我们需要在 create.ejs 文件中编写以下代码。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create User</title>
</head>

<body>
    <h2> Add Users</h2>

    <form method="POST" action="/users/create">
        <input type="text" name="firstname" placeholder=" Enter First Name">
        <input type="text" name="lastname" placeholder=" Enter Last Name">
        <input type="text" name="gender" placeholder="Gender">
        <input type="number" name="age" placeholder="Your Age">
        <input type="submit" value ="submit">

    </form>
</body>
</html> 

现在，如果您打开浏览器并输入 localhost:3000/users/create，您将看到以下表单。我们将使用此表单向数据库添加用户。请确保每个输入框都设置了 name 属性，并且表单也设置了 action 属性。action 属性会将用户重定向到我们将在服务器端实现的函数。在本例中，我们将创建一个用户。

创建用户

目前这个表单不会创建任何内容。这是因为我们需要在服务器端创建用户。所以我们需要回到路由设置，添加一个创建用户的方法。我们将添加一个 `router.post` 方法来创建用户。我们现有的 `router.get` 方法只会将我们重定向到表单。现在我们可以回到 `users.js` 文件并添加以下代码。

router.post('/create', (req, res)=>{

    let newUser = new User({

        firstName: req.body.firstname,
        lastName: req.body.lastname,
        age: req.body.age,
        gender: req.body.gender

    });

    newUser.save();
    res.redirect('/users/list');

});

我们刚刚添加的代码会根据 User 模型创建一个新用户 newUser。如您所见，我们使用 POST 方法创建用户。之前创建的表单也使用了 POST 方法，其 action 属性会将您重定向到此函数。您可以看到我们使用 req.body 方法从表单获取数据。req.body 方法之前的部分是 Mongoose Schema 中的字段。从表单获取数据后，您还可以看到我们使用 save() 方法保存了 newUser。然后，我们使用 res.redirect() 方法将您重定向到用户列表。如果您之前已经创建过用户列表，那么现在它将是空的。如果您尚未创建用户列表，系统会将您重定向到“无法获取”页面。

如果您需要在创建用户后确认 MongoDB 中的用户创建，可以登录 MongoDB shell（mongosh）进行确认。在本例中，我们使用表单创建了一个名为 John Smith 的用户。如果您的系统上已安装 MongoDB，则结果将与下图类似。如果您使用的是 MongoDB Atlas 集群，则可以登录集群进行确认。

阅读用户列表

上一节介绍了如何在 MongoDB 数据库中创建用户；但它会将您重定向到一个空列表。您可以通过访问数据库 shell 来确认用户已创建。问题在于，在实际应用中，用户并没有数据库访问权限。因此，我们需要对用户列表进行一些修改。为了修改用户列表，我们需要返回到路由配置，并修改 `/list` 路由。我们需要按如下方式进行修改。

router.get('/list', async (req, res)=>{

    let users =  await User.find();

    res.render('users/list', {
        users: users

    });

});

您可以看到我们修改了 /list 路由。我们刚刚添加的代码声明了一个名为 users 的变量，该变量是一个对象，我们使用 MongoDB 的 find() 函数获取它。创建该变量后，我们将其作为对象传递给了 render 方法。这将返回一个对象数组。这是因为我们可以使用表单创建所有需要的用户，所有这些用户都会通过这个对象传递。您还可以看到我们使用了 JavaScript 的 Promise，其中 async 用于创建异步函数，await 用于等待结果。现在是时候创建或修改我们的视图了。

修改我们的观点

修改完用户列表的路由后，我们就可以修改视图了。您可能已经知道，我们的视图引擎是 EJS。它类似于 HTML，区别在于我们可以在其中嵌入 JavaScript。我们将使用 HTML 表格语法创建一个表格。表格创建完成后，我们将把每个用户嵌入到表格的一行中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Users List</title>
</head>
<body>


  <h2>List of Users</h2>

    <table>
       <tr>
           <th>First Name</th>
           <th> Last Name</th>
           <th> Gender</th>
           <th>Age</th>

       </tr>

       <% users.forEach(function(user){ %>

        <tr>
            <td><%= user.firstName %></td>
            <td><%= user.lastName %></td>
            <td><%= user.gender %></td>
            <td><%= user.age %></td>
        </tr>

       <% });%>

    </table>

</body>
</html>

结果列表

修改视图后，您可以在浏览器中输入地址 localhost:3000/users/list，即可看到结果。请注意，我们使用的是 3000 端口和本地安装的 MongoDB。使用 MongoDB Atlas 集群也会得到相同的结果，结果类似于下图。

更新用户

到目前为止，您已经了解了如何在数据库中创建用户并在浏览器中读取它们。接下来，我们将学习如何使用 MongoDB 的 `updateOne()` 函数更新用户。这很简单。您可能已经知道，我们需要创建一个 POST 路由才能更新任何用户。虽然 Express 也支持创建 PUT 路由，但使用 POST 路由更新用户更方便，因为视图的方法形式是 POST 方法。现在，我们可以创建一个 `router.post('/update')` 路由，并修改现有的 `router.get('/update')` 路由。

router.get('/update/:id', async (req, res)=>{

    let user = await User.findById(req.params.id); 
    res.render('users/update', {
        user: user
    });


});



router.post('/update/:id', async (req, res)=>{

    let user = await User.findById(req.params.id); 
    await user.updateOne({
        firstName: req.body.firstname,
        lastName: req.body.lastname,
        gender: req.body.gender,
        age: req.body.age,
    });
    res.redirect('/users/list');


});

创建更新表单

在上面的代码中，您可以看到我们修改了 GET 方法并添加了用户 ID。我们还使用了 MongoDB 的 findByID() 函数创建了一个用户变量。然后，我们将该变量添加到了 render 方法中。之后，我们创建了一个 POST 路由来更新用户。如您所见，我们也添加了用户的 ID，然后使用 req.body 方法从 EJS 表单中获取值。现在我们可以修改视图以更新用户。首先，我们将通过创建一个更新表单来修改更新视图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Update User</title>
</head>
<body>
    <h2>Update User</h2>

<form method="POST" action="/users/update/<%=user.id %>">

<input type="text" placeholder="Update First Name" name="firstname" value="<%=user.firstName %>">
<input type="text" placeholder="Update Last Name" name="lastname" value="<%=user.lastName %>">
<input type="text" placeholder="Update Gender" name="gender" value="<%=user.gender %>">
<input type="text" placeholder="Update Age" name="age" value="<%=user.age %>">
<input type="submit" value="Update User" >


    </form>

</body>
</html>

您可以看到，在更新表单中，我们有一个 value 属性。它表示我们要更新的用户字段的值。创建更新表单后，我们可以返回列表视图，为每个添加的用户添加两个链接。这两个链接分别是“更新”和“删除”。我们将添加这两个链接；但现在我们只处理更新链接。以下代码详细说明了如何添加这两个链接。

<tr>
            <td><%= user.firstName %></td>
            <td><%= user.lastName %></td>
            <td><%= user.gender %></td>
            <td><%= user.age %></td>
            <td> <a href="/users/update/<%=user.id%>">Update</a></td>
            <td> <a href="">Delete</a></td>
 </tr>

现在，如果您在浏览器中再次输入 localhost:3000/list，结果将与下图所示类似。如果您点击更新链接，该链接会将您重定向到更新表单，您可以在那里更新用户信息。

点击链接后，您会看到类似下图的更新表单。之后，您可以修改数据，然后再次检查您的 MongoDB 数据库，即可看到用户信息已更新。在本例中，我们将年龄更新为 35 岁。

删除用户

现在您已经了解了如何创建、读取和更新用户。为了完成 CRUD 操作，接下来我们将学习如何从数据库中删除用户。删除方法不会将您重定向到任何其他视图，只会将您重新重定向到列表视图。再次查看列表视图后，您会发现该用户已从列表中移除。您也可以检查数据库，确认该用户已从数据库中删除。我们只需要在用户路由中添加一条路由，即一个 POST 请求。您可以使用删除方法，但使用 POST 方法更方便，因为我们将使用表单来删除用户。

router.post('/delete/:id', async (req, res)=>{

    await User.deleteOne({ _id: req.params.id });


    res.redirect('/users/list');

});

添加上述代码后，我们可以返回用户列表视图，并将刚刚创建的删除链接替换为以下表单。该表单为空表单，仅包含提交按钮。我们将提交按钮的值更改为删除。表格中将仅显示删除按钮。我们还提供了一个注释掉的“delete”方法，以防您需要使用删除路由而不是 POST 请求。您可以根据需要选择使用哪种方法。

<form method="POST" action="/users/delete/<%= user.id %>" id="delete-form">

 <!--<input type="hidden" name="_method" value="DELETE"> -->

 <input type="submit" class="btn btn-danger btn-sm" value="Delete">
</form>

随着我们向用户列表中添加更多用户，最终列表如下所示。如果您创建了此列表，现在即可创建、读取、更新和删除用户。现在我们拥有一个完整的 CRUD 应用程序，如下所示。

添加路线链接和样式

现在你已经完成了一个用户列表的 CRUD 应用。另外，你可以添加一些链接来指向路由，这样就不用每次都输入路由了。你可以添加一些链接，将你重定向到用户列表和首页。你还可以根据自己的喜好为应用添加样式。在一个类似的应用中，我们使用了 Bootstrap 来美化应用。你可以在下方看到一个应用样式的截图。至于样式和链接，就看你自己的选择了。

结论

我们刚刚使用 Node.js 和 Express 创建了一个简单的 CRUD 应用。这个应用只是一个简单的用户列表。目前，您可以把它看作一个简单的列表；但它是未来创建更复杂应用的基础。这只是使用 Node.js、Express 和 MongoDB 构建强大应用的一小部分。我们希望您能从本教程中学到很多。您可以在 Express 的官方网站上找到更多信息。Express的 MDN文档也包含大量有用的信息。您也可以在Mongoose和EJS的官方网站上找到相关信息。如果您需要获取此应用的源代码，请随时从其GitHub 仓库下载。

更多信息请访问Moe 的链接