使用 Node.js 实现 To Do List 任务管理系统

简介

任务管理系统是一种常见的应用程序，它可以帮助我们记录和管理待办事项。在本文中，我们将使用 Node.js 构建一个简单的 To Do List 任务管理系统。本文适合初学者学习 Node.js，并希望构建基本 Web 应用程序。

技术栈

  • Node.js：用于构建后端应用程序。
  • Express.js：用于构建 Web 应用程序。
  • MongoDB：用于存储数据。
  • ejs：模板引擎。

环境搭建

为了开始构建我们的 To Do List 任务管理系统，我们需要确定环境。首先，我们需要安装 Node.js。在安装 Node.js 之后，我们可以使用 npm 包管理器来安装其他必要的软件包。

--- ------- ------- ------- ---

接下来，我们需要启动 MongoDB 实例。安装 MongoDB 并按照 MongoDB 官方文档 中的说明进行操作。然后，使用以下命令启动 MongoDB：

------ --------------------------

注意：/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

阅读全文

猜你喜欢

  • Angular 表单验证的基本使用教程

    Angular 是一个流行的前端框架，它提供了很多强大的工具，其中包括表单验证。表单验证是一个前端开发中非常重要的功能，因为它能够确保用户输入的数据是有效和正确的。

    1 年前
  • MongoDB 性能基准测试与优化全面解析！

    前言 随着互联网数据量的不断增大，NoSQL数据库作为一种新型的非关系型数据库，被越来越多的人所关注。而其中最为流行的MongoDB，拥有高性能、高可用性、易部署和易扩展等优点，因此备受关注。

    1 年前
  • ES6 中 let 和 const 关键字的使用注意事项

    随着前端技术的不断发展，ES6 的普及也越来越广泛。在 ES6 中，let 和 const 关键字成为了两个比较重要的新特性。本篇文章将会介绍 let 和 const 关键字的使用方法以及注意事项，帮...

    1 年前
  • 使用 Socket.io 和 Electron 创建桌面应用的实时通信模块

    随着现代应用程序对于实时通信的需求不断增加，越来越多的开发者开始尝试使用 Socket.io 和 Electron 创建桌面应用的实时通信模块。在本文中，我们将介绍如何利用这两个技术创建高效的实时通信...

    1 年前
  • 利用 Mongoose 自定义 ID 解析：如何生成自定义主键

    在某些应用程序中，MongoDB 的自动生成 _id 可能不能满足需求，可能需要开发人员自己生成主键。Mongoose 提供了一种方法来使用自定义 ID，这里将介绍如何利用 Mongoose 自定义 ...

    1 年前
  • SASS 中 “@if” 使用的问题及解决方法

    介绍 SASS（Syntactically Awesome Style Sheets）是 CSS 的一种预处理器语言。它扩展了 CSS 的功能，使开发者能够更加方便、高效地编写样式。

    1 年前
  • Deno 的代码更新和热更新机制

    前言 Deno 是一个由 Node.js 的创始人 Ryan Dahl 所开发的运行时。Deno 与 Node.js 相比有以下特点： 使用 TypeScript 作为默认编程语言。

    1 年前
  • Vue.js 的 filters、mixins、plugins 的定义与使用

    1. 什么是 filters、mixins 和 plugins？ Vue.js 提供了一些有用的工具来帮助我们更方便地管理我们的应用程序。在本文中，我们将介绍三种常用的技术：filters、mixin...

    1 年前
  • RESTful API 如何对各种 HTTP 请求编码

    在现代Web应用开发中，RESTful API已无处不在，是前端开发者需要掌握的重要技能之一。尽管RESTful API看似简单，但是其中对于各种HTTP请求的编码方法都有所不同，我们需要对这些编码方...

    1 年前
  • 使用 ECMAScript 2021 (ES12) 的 BigInt 类型解决超大数值运算问题

    引言 在前端开发中，我们经常需要进行数值运算，从简单的加减乘除到复杂的算法计算。然而，当我们遇到超大数值的时候就会发现，JavaScript 的 Number 类型会出现精度问题，导致计算结果不准确。

    1 年前
  • 使用 Koa 和 Egg.js 构建大型应用程序的最佳实践

    随着移动设备和 Web 技术的发展，Web 应用程序的规模和复杂度越来越高，同时也带来了更多的挑战和需求，因此如何构建大型应用程序成为一个重要问题。Koa 和 Egg.js 就是两个非常好的选择，本文...

    1 年前
  • 使用 Jest 和 Immutable.js 测试 Redux 应用

    在开发前端应用的过程中，我们经常需要编写测试代码来保证程序的正确性。Redux 是一个流行的状态管理库，而 Jest 和 Immutable.js 则是基于 JavaScript 的开源测试框架和持久...

    1 年前
  • Serverless 的日志记录以及效率问题

    前言 为了满足云计算时代对于高效、安全的需求，Serverless架构应运而生。它将应用程序的构建、运行和维护交由云供应商管理，使得开发人员可以更加专注与应用程序的开发上。

    1 年前
  • 在 GraphQL 中实现分页查询

    在前端开发中，常常需要实现分页查询，在 GraphQL 中也不例外。GraphQL 是一种用于 API 的查询语言，它允许客户端指定需要返回的数据，从而避免了过度获取数据的情况。

    1 年前
  • webpack.config.js 详解

    简介 webpack 是一个现代化的前端静态资源打包工具，它可以将 JavaScript 模块化代码打包成静态资源，同时可以对静态资源进行优化、压缩等操作。在实际项目中，我们通常需要自定义 webpa...

    1 年前
  • Android 开发中使用 Material Design 实现 CardView 列表

    前言 Material Design 是 Google 在2014年推出的一种视觉风格，被广泛应用于 Android、Web 和 iOS 等平台。它的设计哲学是基于现实世界中的物质和光影效果，旨在提供...

    1 年前
  • 科普：CSS Reset 是什么？为什么要用？

    作为前端开发人员，我们都知道 CSS 是用来控制网页样式的语言。然而，在编写 CSS 代码的时候，我们经常会遇到各种浏览器的兼容性问题。一些浏览器会默认对某些 HTML 元素进行一些样式设置，这样就会...

    1 年前
  • Chai 断言库之 expect 详解，为你的测试代码带来更高的可读性

    Chai 断言库之 expect 详解 在前端开发中，我们常常需要进行测试以确保代码的质量和正确性，而断言库则是我们常用的工具之一。Chai 是一个流行的 JavaScript 断言库，它提供了多个风...

    1 年前
  • 如何使用 ECMAScript 2017 的 Object.values() 方法处理 JavaScript 对象中的属性问题

    如何使用 ECMAScript 2017 的 Object.values() 方法处理 JavaScript 对象中的属性问题 在 JavaScript 中，对象是一种非常重要和常见的数据类型。

    1 年前
  • 遇到的 Express.js 问题：404 错误的解决方法

    如果你是一名前端开发者，可能会遇到 Express.js 404 错误，这是最常见的 Web 开发错误之一。在这篇文章中，我们将深入探讨这个问题，了解它的原因，并提供可行的解决方案。

    1 年前

相关推荐

    暂无文章