简介
任务管理系统是一种常见的应用程序，它可以帮助我们记录和管理待办事项。在本文中，我们将使用 Node.js 构建一个简单的 To Do List 任务管理系统。本文适合初学者学习 Node.js，并希望构建基本 Web 应用程序。
技术栈
- Node.js：用于构建后端应用程序。
- Express.js：用于构建 Web 应用程序。
- MongoDB：用于存储数据。
- ejs：模板引擎。
环境搭建
为了开始构建我们的 To Do List 任务管理系统，我们需要确定环境。首先，我们需要安装 Node.js。在安装 Node.js 之后，我们可以使用 npm 包管理器来安装其他必要的软件包。
npm install express mongodb ejs
接下来，我们需要启动 MongoDB 实例。安装 MongoDB 并按照 MongoDB 官方文档 中的说明进行操作。然后，使用以下命令启动 MongoDB：
mongod --dbpath=/path/to/database
注意：/path/to/database 应该根据您的实际需要更改。
代码实现
应用程序配置
首先，让我们创建一个名为 app.js 的文件。在此文件中，设置应用程序配置。
-- -------------------- ---- -------
-- -------
----- ------- - -------------------
----- ---- - ----------------
----- -------- - --------------------
-- -- ------- ----
----- --- - ----------
-- ------
---------------- -------------------- ----------
------------- -------- -------
-- --------
------------------------------------------- ------------
-- -----
---------------------------- --------- ---- ----
-- -----
--------
------------------------------------------ -
---------------- -----
------------------- -----
--
-------- -- -
----------------------- ---------- -- -----------
--
------------ -- -
-----------------
---
-- ------
---------------- -- -- -
------------------- ------- -- ---- --------
---在上面的代码中，我们创建了一个 Express 应用程序并设置了应用程序配置。其中，我们用了 ejs 作为模板引擎。
创建模型
接下来，我们需要创建一个模型来描述数据库中的数据。在本例中，我们将创建一个名为 Task 的模型。
-- -------------------- ---- -------
----- -------- - --------------------
----- ---------- - --- ----------------
-
----- -
----- -------
--------- -----
--
------------ -------
------- -
----- -------
----- -------- -------- --------
-------- -------
--
--
-
----------- -----
-
--
----- ---- - ---------------------- ------------
-------------- - -----在上面的代码中，我们使用 Mongoose 创建了 Task 模型，并将其导出以供后续使用。该模型包含任务的名称、描述和状态。其中，status 字段是一个枚举值，转换为 'todo'、'doing' 或者 'done' 的其中一个值。另外，我们使用了一个名为 timestamps 的选项，用于自动添加 createdAt 和 updatedAt 字段。
实现路由
现在我们将实现一些路由，用户将通过这些路由与应用程序进行交互。
渲染列表视图
首先，我们将创建视图，用于列出所有任务。在视图中，我们将能够查看任务的名称、描述和状态。然后，我们将创建一个路由来渲染列表视图。
首先，我们需要在应用程序根目录下的 views 文件夹中创建名为 index.ejs 的文件。代码如下：
-- -------------------- ---- -------
--------- -----
------
------
--------- -- ------------
-------
------
------ -- ---------
-------
-------
----
-------------
--------------------
---------------
-----
--------
-------
-- ----------------------------- --
----
------- --------- -------
------- ---------------- -------
------- ----------- -------
-----
-- --- --
--------
--------
-------
-------然后，我们将创建一个路由，用于渲染列表视图。代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - -------------------------
----- ------ - -----------------
--------------- ----- ----- ---- -- -
--- -
----- ----- - ----- --------------
------------------- - ----- ---
- ----- ----- -
-----------------
------------------- - ------ -- ---
-
---
-------------- - -------在上面的代码中，我们创建一个名为 '/' 的路由，并通过 Task.find({}) 从数据库中获取所有任务。然后，我们将任务列表和视图名称作为参数传递给 res.render()。
渲染新建任务表单
接下来，我们将创建一个表单，用于添加新的任务。在视图中，我们将看到一个表单，该表单允许我们输入任务的名称、描述和状态。然后，我们将创建一个路由，用于渲染新表单。
在应用程序根目录下的 views 文件夹中，创建一个名为 new_task.ejs 的文件。代码如下：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
-------
------
------- ---------
----- ------------- ----------------
------ -----------------------
------ ----------- --------- ----------- ---------
----
------ -------------------------------------
--------- ---------------- ------------------ --------------------
----
------ ---------------------------
------- ----------- --------------
------- --------------- -----------
------- ----------------------------
------- --------------------------
---------
----
------- -------------------- -------------
-------
-------
-------然后，我们将创建一个路由，用于渲染新表单。代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ----------------- ------------------------ ----- ---- -- - ----------------------- --- -------------- - -------
在上面的代码中，我们创建了一个名为 /tasks/new 的路由，并渲染了一个名为 new_task 的视图。
处理创建任务表单
接下来，我们将处理上一个步骤中的表单。我们将创建一个路由，用于为提交的表单创建新任务。当我们提交表单时，将发送 POST 请求，此路由将获取请求并将其保存在数据库中。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - -------------------------
----- ------ - -----------------
--------------------- ----- ----- ---- -- -
----- ---- - --- ------
----- --------------
------------ ---------------------
------- ----------------
---
--- -
----- ------------
------------------
- ----- ----- -
-----------------
---------------------- - ---- ---
-
---
-------------- - -------在上面的代码中，我们创建了一个名为 /tasks 的路由，并使用 Task.save() 将任务保存在数据库中。如果保存成功，我们将重定向到根路由。否则，将重新呈现表单。
渲染编辑任务表单
现在，我们将创建一个表单，用于编辑任务。这个表单将允许我们更改任务的名称、描述和状态。然后，我们将创建一个路由，用于渲染编辑表单。
在应用程序根目录下的 views 文件夹中，创建一个名为 edit_task.ejs 的文件。代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----------- ------------
-------
------
-------- ---------
----- ------------- ------------------ -------- ----------------
------ -----------------------
------ ----------- --------- ----------- ---------- --------- --- ---------
----
------ -------------------------------------
--------- ---------------- ------------------ ------------ ---------------- -------------
----
------ ---------------------------
------- ----------- --------------
-- --- -------- - -------- -------- -------- --
-- ------- ---- ------------------ ---- - --
-- -- ------------ --- ------------ - --
------- ---------- ----------- --- ------------ ------------------------- -----------
-- - ---- - --
------- ---------- ----------- ------- ------------------------- -----------
-- - --
-- - --
---------
----
------- -------------------- -------------
-------
-------
-------然后，我们将创建一个路由，用于渲染编辑表单。代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - -------------------------
----- ------ - -----------------
----------------------------- ----- ----- ---- -- -
--- -
----- ---- - ----- -----------------------------
----------------------- - ---- ---
- ----- ----- -
-----------------
------------------
-
---
-------------- - -------在上面的代码中，我们创建了一个名为 /tasks/:id/edit 的路由，并使用 Task.findById() 查找要编辑的任务。如果成功查找到任务，我们将渲染名为 edit_task 的视图并将任务作为变量传递。
处理编辑任务表单
现在，我们将处理上一个步骤中的表单。我们将创建一个路由，用于更新任务。当我们提交表单时，将发送 PUT 请求，此路由将获取请求并将其更新到数据库中。
在应用程序根目录下的 views 文件夹中，创建一个名为 edit_task.ejs 的文件。代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - -------------------------
----- ------ - -----------------
------------------------ ----- ----- ---- -- -
--- -----
--- -
---- - ----- -----------------------------
--------- - --------------
---------------- - ---------------------
----------- - ----------------
----- ------------
------------------
- ----- ----- -
-----------------
-- ------ -
----------------------- - ---- ---
- ---- -
------------------
-
-
---
-------------- - -------在上面的代码中，我们创建了一个名为 /tasks/:id 的路由，并使用 Task.findById() 查找要更新的任务。然后，我们将使用 Task.save() 更新任务，并重定向到根路由。
删除任务
最后，我们将创建一个路由，用于删除任务。当我们想要删除一个任务时，我们将使用 DELETE 请求发送到该路由。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - -------------------------
----- ------ - -----------------
--------------------------- ----- ----- ---- -- -
--- -
----- --------------------------------------
------------------
- ----- ----- -
-----------------
------------------
-
---
-------------- - -------在上面的代码中，我们创建了一个名为 /tasks/:id 的路由，并使用 Task.findByIdAndDelete() 删除任务。然后，我们将重定向到根路由。
应用程序集成
现在，我们已经创建了所有必要的路由，现在将集成到应用程序中。
-- -------------------- ---- -------
-- ----
----- ------- - -------------------
----- ---- - ----------------
----- -------- - --------------------
----- -------------- - ---------------------------
----- ----------- - --------------------------
----- ---------- - --------------------------
-- -- ------- ----
----- --- - ----------
-- ------
---------------- -------------------- ----------
------------- -------- -------
-- --------
------------------------------------------- ------------
-- -----
---------------------------- --------- ---- ----
-- ----
-----------------------------------
-- -----
--------
------------------------------------------ -
---------------- -----
------------------- -----
--
-------- -- -
----------------------- ---------- -- -----------
--
------------ -- -
-----------------
---
-- ----
------------ -------------
------------ ------------
-- ------
---------------- -- -- -
------------------- ------- -- ---- --------
---在上面的代码中，我们将所有路由加载到应用程序中，并使用 methodOverride 中间件来解析 DELETE 和 PUT 请求。
完成以上工作后，我们现在可以使用 To Do List 任务管理系统。访问 http://localhost:3000/tasks 即可查看所有任务。使用表单添加新任务或编辑现有任务。
总结
在本文中，我们通过使用 Node.js、Express.js 和 MongoDB 构建 To Do List 任务管理系统，了解了如何使用 Node.js 进行 Web 应用程序开发。通过学习本文，您应该增强对以下方面的理解：
- 如何使用 Node.js 创建服务器端应用程序。
- 如何使用 Express.js 创建 Web 应用程序。
- 如何使用 MongoDB 存储和检索数据。
我们希望，借助本文，您能够更好的了解 Node.js 技术的应用，掌握构建实际应用的基本思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6531d91f7d4982a6eb3d39be