使用 Node.js 和 Express 创建一个简单的 Todo 应用程序
在前端开发中，我们经常需要创建一些简单的应用程序来测试新的技术或概念。今天，我们将介绍如何使用 Node.js 和 Express 来创建一个简单的 Todo 应用程序。这个应用程序将允许用户添加和删除待办事项，并以列表的形式显示它们。
安装和设置 Node.js 和 Express
在开始之前，您需要确保您已经安装了 Node.js 和 Express。如果您还没有安装这些工具，请首先安装它们。
完成安装后，您需要创建一个名为 todo 的新项目，并进入该项目的目录。在命令行中，输入以下命令：
----- ---- -- ----
接下来，您需要使用 npm 初始化项目。您可以通过运行以下命令来完成此操作：
--- ----
按照提示输入项目信息并按 Enter 键确认即可。在完成 init 后，您需要安装 Express。请运行以下命令：
--- ------- ------- ------
这将为您的项目安装最新版本的 Express。
创建我们的服务器
接下来，我们将创建一个简单的服务器，该服务器将侦听来自 Web 浏览器的请求，并根据请求的 URL 发送响应。我们将使用 Express 框架来完成此操作。
在项目根目录中，创建一个名为 index.js 的新文件。在此文件中，添加以下代码：
----- ------- - ------------------- ----- --- - ---------- ---------------- -- -- - ----------------- --- --------- -- ---- -------- ---
这段代码引入了 Express 模块并创建了一个新的 Express 应用程序实例。然后，它调用 app.listen() 方法并在参数中指定服务器应监听的端口号（在这种情况下，是 3000）。最后，我们在控制台中记录一条消息来指示服务器正在侦听请求。
测试我们的服务器
在命令行中，运行以下命令来启动我们的服务器：
---- --------
在浏览器中打开 http://localhost:3000。您应该会看到一条消息，指示 Todo 应用程序正在侦听端口 3000。
创建我们的 Todo 路由
现在我们已经有了一个工作服务器，我们需要添加一些路由来处理我们的 Todo 应用程序的请求。我们将创建两个路由 - 一个路由用于显示所有待办事项，并另一个路由用于添加新的待办事项。
首先，添加以下代码来获取指向 Todo app 的根 URL 的路由：
------------ ----- ---- -- - ---------------- ---- ------- ---
这个路由处理的请求是指向我们应用程序的根 URL。它发送一条消息来欢迎用户。
接下来，我们将添加路由以显示所有待办事项。在 index.js 文件中，添加以下代码：
---------------- ----- ---- -- - -------------- --- -------- ---
这个路由处理的请求是指向 http://localhost:3000/todo 的 URL。它将显示一个消息来表明它正在列出所有待办事项。
接下来，我们将添加路由以添加新的待办事项。在 index.js 文件中，添加以下代码：
-------------------- ----- ---- -- - ------------- - --- ------- ---
这个路由处理的请求是指向 http://localhost:3000/todo/add 的 URL。它将显示一个消息来表明它正在添加一个新的待办事项。
测试我们的路由
在命令行中，运行以下命令来重新启动我们的服务器：
---- --------
创建我们的 Todo 模型
现在我们已经有了一个能够处理路由的服务器，我们需要创建一个数据结构来存储所有待办事项。我们将使用一个简单的数组来存储这些项。
在 index.js 文件的顶部添加以下代码：
----- ----- - - - --- -- ----- ---- ----- -- - --- -- ----- ----- --- ------ -- - --- -- ----- --- -------- - --
这些数据将是我们 Todo 应用程序的“数据库”。
创建我们的 Todo 控制器
现在我们需要添加一些逻辑来处理我们的路由。我们将使用一个称为控制器（controller）的东西来完成此操作。控制器是一种模式，用于将应用程序的逻辑与表示分离开来。
在项目根目录中，创建一个名为 controllers 的新目录。在该目录中，创建一个名为 todo.js 的新文件。在这个文件中，添加以下代码：
----- ----- - - - --- -- ----- ---- ----- -- - --- -- ----- ----- --- ------ -- - --- -- ----- --- -------- - -- ------------ - ----- ---- -- - ---------------- -- ----------- - ----- ---- -- - ----- - ---- - - ---------- ----- -- - ------------ - -- ------------ --- ---- --- -------------- ------- --- ---- --------- --
这个文件定义了一个名为 todo 的控制器。它包含两个方法 - 一个用于显示所有待办事项，另一个用于添加新的待办事项。
在控制器中，我们使用 todos 数组来存储所有待办事项。在 list 方法中，我们使用 res.send() 方法来将 todos 数组发送回到客户端。
在 add 方法中，我们首先从查询字符串中拉取要添加的事项的名称。我们然后计算新的 ID，通过将 todos 数组的长度加1来完成。最后，我们使用 push() 方法将新的待办事项添加到 todos 数组中，并使用 res.send() 方法来向客户端发送一条成功消息。
连接我们的 Todo 路由和控制器
现在我们需要更新我们的路由，以便它们使用控制器来处理请求。在 index.js 文件中，添加以下代码：
----- -------------- - ------------------------------ ---------------- --------------------- -------------------- --------------------
这些路由将通过 todo 控制器调用其相应的方法来处理请求。
测试我们的应用程序
在命令行中，运行以下命令来重新启动我们的服务器：
---- --------
在浏览器中打开 http://localhost:3000/todo。您应该会看到一个 JSON 对象，其中包含所有待办事项。在浏览器中打开 http://localhost:3000/todo/add?name=Test。您应该会看到一个消息，指示您已成功添加了名为 Test 的新 Todo。
结论
在本文中，我们介绍了使用 Node.js 和 Express 框架创建简单的 Todo 应用程序。我们了解了如何创建一个服务器，如何使用路由和控制器来处理请求，以及如何使用一个简单的数组来存储我们的数据。我们希望这篇文章为您提供了有关如何使用 Node.js 和 Express 开发应用程序的深入指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6711c0b1ad1e889fe200994d