前言
在学习前端开发时，你可能已经了解了 HTML、CSS 和 JavaScript，但是如何构建一个完整的 Web 应用程序呢？这就需要学习后端开发了。在后端开发中，一个非常流行的框架是 Express.js。它是一个基于 Node.js 平台的 Web 开发框架，可以帮助我们快速构建 Web 应用程序。在本文中，我们将使用 Express.js 构建一个简单的 Todo 应用程序。
准备工作
在开始之前，我们需要安装 Node.js 和 Express.js。请按照以下步骤进行安装：
在官网（https://nodejs.org/）下载 Node.js 并安装。
打开命令行工具，输入以下命令安装 Express.js：
npm install express --save
这将在项目中安装 Express.js 并将其添加到 package.json 文件中。
创建应用程序
创建一个新的文件夹，并在其中创建一个名为 app.js 的文件。
在 app.js 文件中输入以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ------------- ---- - --------------- --------- --- ---------------- ---------- - ----------------- --- --------- -- ---- -------- ---
展开代码这是一个非常简单的 Express.js 应用程序，它会监听 3000 端口并在浏览器中显示“Hello World!”。
在命令行工具中运行以下命令启动应用程序：
node app.js
然后在浏览器中输入 http://localhost:3000，你应该能够看到“Hello World!”。
添加路由
现在我们将添加一些路由来构建我们的 Todo 应用程序。
在 app.js 文件中添加以下代码：
app.get('/todos', function(req, res) { res.send('Todo list'); }); app.get('/todos/:id', function(req, res) { res.send('Todo ' + req.params.id); });
这将添加两个路由：/todos 和 /todos/:id。/todos 路由将显示 Todo 列表，而 /todos/:id 路由将显示特定 ID 的 Todo。
在命令行工具中重新启动应用程序。
在浏览器中输入 http://localhost:3000/todos，你应该能够看到“Todo list”。
在浏览器中输入 http://localhost:3000/todos/1，你应该能够看到“Todo 1”。
添加数据
现在我们将使用一个数组来存储我们的 Todo 数据。在 app.js 文件中添加以下代码：
const todos = [ { id: 1, title: 'Todo 1', completed: false }, { id: 2, title: 'Todo 2', completed: true }, { id: 3, title: 'Todo 3', completed: false } ];
这将创建一个名为 todos 的数组，其中包含三个 Todo 对象。
显示 Todo 列表
现在我们将修改 /todos 路由以显示 Todo 列表。在 app.js 文件中添加以下代码：
app.get('/todos', function(req, res) { let todoList = '<ul>'; todos.forEach(function(todo) { todoList += '<li>' + todo.title + '</li>'; }); todoList += '</ul>'; res.send(todoList); });
这将循环遍历 todos 数组，并将每个 Todo 的标题添加到一个 HTML 列表项中。然后，它将返回一个包含所有 Todo 的 HTML 列表。
在浏览器中输入 http://localhost:3000/todos，你应该能够看到一个包含所有 Todo 的 HTML 列表。
显示特定 Todo
现在我们将修改 /todos/:id 路由以显示特定 ID 的 Todo。在 app.js 文件中添加以下代码：
-- -------------------- ---- ------- --------------------- ------------- ---- - --- ---- - ------------------------- - ------ ------- --- ------------------------ --- -- ------- - -------------------------- --- -------- - ---- - --------------------- - ---展开代码
这将使用 find 方法查找具有与请求的 ID 相同的 ID 的 Todo。如果找不到 Todo，则将返回 404 错误。否则，它将返回 Todo 的标题。
在浏览器中输入 http://localhost:3000/todos/1，你应该能够看到“Todo 1”的标题。
结论
在本文中，我们使用 Express.js 构建了一个简单的 Todo 应用程序。我们学习了如何添加路由、如何添加数据以及如何显示 Todo 列表和特定 Todo。这是一个很好的起点，你可以在此基础上继续构建更复杂的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67405d465ade33eb72338c47
