Nodejs 如何创建待办事项清单

待办事项清单是很多编程学生制作的初学者应用程序。它是一份你需要在一天内完成的任务列表。你可以在其中添加任务，甚至在完成任务后删除它们。通常可以看到很多教程仅停留在前端部分的待办事项清单应用程序上。读者不知道如何将其与后端集成，以便使用适当的数据库，并且在刷新/重启时不会丢失数据。本文旨在教你如何制作完整的待办事项清单项目。

本文针对已掌握基本的Web开发知识但尚未构建任何项目的受众。许多学生了解语法，但无法制作应用程序。仅仅知道某种技术，如Nodejs是不够的，还需要能够将其与其他技术结合使用，并使用编程逻辑构建应用程序。本文旨在帮助这样的人通过构建项目来提高他们的知识水平。

应用程序的功能：

• 动态前端，通过EJS，它是一个NPM包。
• 使用Nodejs构建后端。
• 使用的数据库：MongoDB Atlas。

应用程序的工作原理：

• 渲染一个主页，用户可以在上面看到他的任务，并插入新任务。
• 单击添加按钮时，向服务器端发送一个新的请求。
• 任务完成后，选中该任务后发送一个删除项目的请求。

注意： 本文主要关注后端，因此不会给出前端部分即HTML和CSS的详细解释，尽管会提供代码。

让我们从逐步实施开始。

步骤1： 在VS Code中打开一个空文件夹。在该文件夹内创建一个名为index.js的文件。

步骤2： 在终端中写入以下命令，来初始化此文件夹以创建一个Nodejs项目。

npm init

步骤3： 在此之后，写入以下命令以安装我们将在应用程序中使用的一些包：

npm install –save express ejs body-parser mongodb mongoose 

解释： 上述命令安装了应用程序中所需的包。

• ejs：用于在前端渲染内容。
• express：用于帮助减少代码冗余的Nodejs框架。
• body-parser：用于读取传入请求的数据。
• mongodb：用于使用数据库，mongoose是其用于减少代码冗余和易于连接的框架。

现在在我们的app.js旁边创建两个文件夹，给它们命名为public（用于向用户显示的文件）和views（用于EJS文件）。

项目结构： 它将如下所示。

步骤4： 现在打开index.js文件。在这个文件中，我们将编写我们的服务器。我们处理来自浏览器的请求，在其中管理数据并做出相应的响应。我们将处理两种类型的请求，这是最常用的，即get和post。Get请求是用来从服务器读取数据的，而post请求是用来向服务器写入数据的。我们还将定义服务器应用程序在机器上的哪个端口访问该服务器。这个文件中包含我们应用程序的所有逻辑。甚至我们在这个文件中连接到云数据库。

解释： 我们在一些常量中包含了所安装的包，以便在我们的应用程序中使用。 app 是我们通过它来创建中间件和初始化用于我们应用程序中的包的常量。首先，初始化body-parser以告诉Nodejs使用body-parser来读取数据。通过声明public文件夹为静态文件夹，告诉Nodejs这里是我们存放静态文件（例如CSS和图片）的地方。最后， ejs 被设置为视图引擎，这样我们就可以在 ejs 文件中编写前端代码。

注意： 我们不需要导入 mongodb ，因为mongoose已经处理了它。

步骤5： 现在我们将连接我们的应用程序到云数据库MongoDB Atlas，并定义我们 集合 的基本结构。我们定义存储的数据类型以及与之相关的其他特性。

解释： 在这里，我们使用mongoose常量通过在常量对象mongoose上传递连接链接来连接到我们的数据库。然后我们描述了我们在 mongodb 中的项目的蓝图，在其中将其数据类型设置为String类型。model方法使用这个蓝图来创建一个名为items的集合。我们需要以标题大小写形式编写一个单数词，mongoose会自动将其转换为小写和复数形式。我们数据库URL末尾的单词 “todoDB” 是我给数据库起的名称。如果你愿意，可以使用其他单词。

我们的数据库URL通过以下步骤从我们的MongoDB Atlas账户中获取：

• 点击连接按钮。

• 选择第二个选项：连接你的应用程序。

• 复制URL格式。

步骤6： 现在我们开始处理请求，我们首先处理的请求是发送到URL为“/”的首页请求。在这里，我们编写代码，将我们的首页提供给我们的首页路由或路径，“/”对于任何网站都是首页。首页只是展示了所有的任务。在这个应用程序中，这是我们唯一的网页，因为没有必要有其他页面。

解释： get请求用于读取数据，当我们的应用程序的URL在浏览器中输入时，get请求被发送到“/”路由，即我们的首页，用于读取和查看首页的内容。 app.get() 表示当收到关于“/”的get请求时，将运行它内部的回调函数。find是mongoose在每个集合上定义的用于查找该集合中文档的方法。一个空对象被传递给这个find函数，用于告知找到的文档不需要满足任何条件，因此它表示需要获取所有文档。如果没有错误，这个函数返回的结果是一个对象数组。在response对象上，我们调用render函数，它接收要发送的ejs文件的名称和要发送到前端的值的对象。

步骤7： 现在让我们转到“views”文件夹并创建一个ejs文件， index.ejs ，在这里我们使用HTML代码定义我们网页的结构。我们还编写一些JavaScript逻辑，以确保应用程序的动态渲染。动态渲染是指在无需用户重新加载页面的情况下显示新添加的任务。

解释： ejs的语法类似于HTML。Javascript语句写在<% %>之间，变量写在<%= %>之间。这种能够在HTML中使用Javascript的能力使得ejs具有动态渲染的特性。在ejs文件中，我们首先检查接收到的数组是否为空，如果不为空，则循环遍历这个对象数组，并在每个对象上使用点运算符显示其名称。我们还在表单内的项目名称旁边放置一个复选框，该复选框在“/delete”路由上发送一个post请求，并将其值设置为对象的id，该id由MongoDB提供。MongoDB中的id写为_id。我们希望在选中复选框时发送请求，因此通过submit函数来提交表单。

注意： 确保变量的名称与从Nodejs发送到前端的对象的键名相匹配，以便在渲染ejs时正常工作。

步骤8： 在styles.css文件中，我们编写CSS代码，给我们的首页提供好看的外观。它使得页面的主要容器和标题居中显示，我们定义了要使用的颜色主题，并为页面上的字体、按钮和其他元素设置样式。

步骤9： 现在我们开始处理添加项目的路由。我们回到index.js文件中。现在我们将编写代码，从前端读取传入的数据，将其作为新任务保存在数据库中，然后在任务成功添加后重定向回主页。我们还检查传入的数据（任务）是否为空。

解释： 就像我们从类中创建对象一样，我们使用new关键字从集合中创建文档。然后我们调用常量itemName的 save() 方法，将其保存到我们的数据库中。它通过request对象进行读取，然后访问其body，并通过点运算符访问输入的名称，就像访问嵌套对象一样。这个函数也是由mongoose提供的。我们还检查项目的名称是否为空。如果为空，我们重定向到主页；如果不为空，我们保存它，然后重定向到主页。然后Nodejs接收到主页的请求，即“/”，并运行其中间件。这次找到了一个新项目，因此它发送给前端的数组被更新，这导致了我们页面的更新。这就是我们的应用程序如何实现动态渲染的方法。

步骤10： 最后，我们处理用于删除的请求，每次我们点击复选框时发送该请求。当我们点击复选框时，页面将重新加载，因为它在前端写在一个表单内，当复选框被提交时，表单会自动提交，原因是传递给它的函数，并且会发送与其相邻任务的id。以下代码读取id，并将找到具有该id的任务从数据库中删除，并在任务完成后重定向回主页。

解释： 在我们的表单的action属性中，我们将地址设置为“/delete”，请求将发送到该地址，并将方法属性的值设置为“POST”。在这个表单内的复选框在我们点击时提交表单。现在，这个带有POST方法的请求在app.post()中接收到。我们存储从前端发送的对象的id，在items集合上调用mongoose提供的一个方法，该方法查找具有与接收到的id相同的id的文档并删除它。它接受一个id和一个回调函数作为参数。当删除该项时，回调函数将运行。

步骤11： 最后，我们编写一段代码，使我们的应用程序可以从机器的某个端口访问。它被称为 listening.

解释： 这是我们最后编写的代码。在我们的app对象上调用listen方法，以侦听计算机上的一个端口。这里我们使用了3000，您也可以使用其他端口。 process.env.PORT 是服务使用的端口，即我们的应用程序托管的端口。他们将使用的端口不需要与我们在开发中使用的端口相同。

现在让我们看完整的代码。

运行应用程序的步骤： 要运行应用程序，请打开终端并输入命令。

node index.js

输出： 打开浏览器，在其URL地址栏中输入：localhost:3000。

现在让我们了解如何部署上面创建的应用程序。

步骤1： 前往 Heroku 的网站。

http://www.heroku.com/

步骤2： 如果您还没有帐户，请注册。

步骤3： 填写注册表单

注册完成后，您将看到如下的页面：

步骤4： 根据您的操作系统安装Heroku CLI：

步骤5： 打开您系统的CLI，或者在当前项目目录中打开VS Code终端。使用终端命令登录Heroku：

heroku login

步骤6： 打开一个浏览器窗口，点击登录按钮，完成。

注意： 我们刚刚创建了一个帐户，并且在浏览器中打开了Heroku，它识别到我们，并且不需要请求凭据进行登录。如果我们也从浏览器中注销，那么它会要求我们输入电子邮件和密码，然后登录。

步骤7： 然后在我们的项目中初始化git（确保您的计算机系统上已安装git： https://git-scm.com/downloads ）：写入命令。

git init 

步骤8： 使用以下命令添加.gitignore文件和Procfile：

touch .gitignore 

.gitignore文件是用来列出不应包含在我们的仓库中的所有文件和文件夹的。这些主要包括 node_modules 文件夹，因为可以通过执行 npm install 命令在任何地方创建它。 ****这个命令会读取packages.json文件和packages-lock.json文件，这些文件保存有安装的包的信息，并自动在目录中进行安装。

步骤9： 现在在终端中写入以下命令。

heroku create 

git add . 

git commit -m “初始提交”

git push heroku master 

步骤10： 会出现一个URL，即您托管应用程序的URL。

部署的应用链接： https://thawing-ravine-87998.herokuapp.com/