使用 Express.js 构建一个在线任务流管理系统

随着互联网的快速发展，越来越多的用户需要在线管理任务流。在这个过程中，前端技术起到了关键作用。本文将介绍如何使用 Express.js 构建一个在线任务流管理系统。通过本文的学习，你将可以掌握以下技能：

  • 如何运用 Express.js 框架进行开发
  • 如何创建和管理任务流
  • 如何实现用户的注册、登录及权限控制

Express.js 简介

Express.js 是一款流行的 Node.js Web 应用程序框架。它提供了一组强大的功能，包括路由、中间件、模板引擎等。通过使用 Express.js，开发者可以快速编写可靠的 Web 应用程序。

项目部署流程

在开始之前，我们需要确认环境已经具备 Node.js 和 MongoDB 的运行环境。

第一步：创建项目

使用命令行或者编辑器创建一个新的项目，命名为 taskflow：

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

在该项目的根目录下，在命令行中运行 npm init 命令，创建 package.json 文件。

第二步：安装 Express.js 和其他依赖

使用 npm 安装 Express.js 和其他必要的库和模块：

--- ------- ------- -------- -------- -------------- --------------- ----------- --------
  • express：Express.js 框架
  • mongoose：MongoDB 驱动程序
  • passport：身份验证中间件
  • passport-local：LocalStrategy 安全策略
  • express-session：会话中间件
  • body-parser：解析请求体的中间件
  • bcryptjs：加密算法实现库

第三步：创建服务器

在根目录下创建一个名为 app.js 的文件。这将是我们的应用程序的入口。

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

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

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

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

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

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

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

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

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

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

我们首先导入了所需的模块，创建了一个 Express 实例并将中间件添加到应用程序中。接下来我们连接到 MongoDB 数据库，并配置自定义路由，最后启动 Express 程序并监听端口。

第四步：创建 MongoDB 数据库模型

在创建任务和用户模型之前，我们必须使用 npm 安装 mongoose：

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

接下来，在根目录下创建一个名为 models 的文件夹，并在该文件夹中创建两个文件：task.js 和 user.js。

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

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

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

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

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

第五步：创建路由

我们为任务和用户创建了两个数据库模型。现在我们需要创建对 API 路由的支持。在根目录下创建一个名为 routes 的文件夹，并在该文件夹中创建三个文件：

  • index.js - 首页路由
  • tasks.js - 任务路由
  • users.js - 用户路由
-- --------
----- ------- - ------------------
----- ------ - ----------------

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

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

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

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

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

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

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

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

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

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

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

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

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

在这些文件中，我们分别定义了对应的 RESTful API 接口，提供了任务的基本操作。其中，用户模型被添加到 user.js 文件中，任务模型被添加到 task.js 文件中。想要查找任务，用户必须先登录。因此，任务路由的每个请求都需要进行身份验证。

第六步：实现安全控制

为了提高系统的安全性，我们需要实现以下几点：

  • 用户必须进行身份验证才能登陆系统
  • 用户必须要进行角色认证才能进行操作

我们可以通过使用 Passport.js、bcrypt.js 和 JSON Web Token (JWT) 来实现身份验证和权限控制。

在路由文件夹中创建 passport.js 文件：

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

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

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

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

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

在这里，我们使用 LocalStrategy 进行身份验证。该方法检查用户输入的邮箱和密码是否正确。通过 bcrypt.compare() 方法判断密码是否匹配。serializeUser 和 deserializeUser 方法将用户信息保存在会话中。

我们还需要创建一个名为 passport.js 的文件，使用 jsonwebtoken 来为用户签名：

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

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

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

该文件实现了 JWT 签名过程。在此示例中，我们使用了 secret 作为密钥，把用户ID 和姓名加密输出。

接下来，将上述三个文件引入到 app.js 文件中。

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

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

第七步：建立前端交互

接下来我们开始构建前端。在我的项目中，我使用了 React.js 和 Ant Design 来建立前端交互。因为这部分代码比较庞大，就不在这里赘述了。

总结

在本文中，我们演示了如何使用 Express.js 、MongoDB 和 Passport.js 构建一个在线的任务流管理系统。我们实现了用户注册、用户登录、任务创建、任务查看、任务编辑和任务删除等功能。本文提供的代码可以让开发人员更快的了解和掌握基于 Express.js 构建应用程序的过程。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6528e8ad7d4982a6ebb76299

阅读全文

猜你喜欢

  • PM2 部署 Node.js 项目，如何避免项目重启时未响应？

    当我们部署 Node.js 服务时，经常会遇到不可避免的问题：项目突然挂掉、响应变慢或者停止响应。这时候常常需要我们手动重启服务。而 PM2（Process Manager 2）是一个开源的 Node...

    1 年前
  • Redis 中的 LUA 脚本缓存机制详解

    前言 Redis 作为一个高性能的 NoSQL 数据库，在我们的开发项目中有着广泛的应用。在 Redis 中，使用 LUA 脚本可以使我们更加方便和灵活地处理数据。

    1 年前
  • Vue.js 中使用 Vue Router 实现路由拦截的方案

    在 Vue.js 的前端开发中，使用了 Vue Router 来进行路由控制是一种十分常见的做法。而对于一些需要在路由跳转前进行一些额外处理的场景，我们就需要使用 Vue Router 提供的路由拦截...

    1 年前
  • 使用 Server-Sent-Events 和 React Native 构建实时跨平台应用

    在现代的 Web 应用程序中，实时性变得越来越重要。有时候我们需要及时应对服务器或其他服务端程序的推送消息更新，通知用户页面可以进行某些操作。传统的 AJAX 调用无法满足这种实时性的需求，并且还需要...

    1 年前
  • 错误使用 Custom Elements 导致无法缩放：如何优化页面布局

    Web开发中，页面布局是一个非常重要的课题。而随着前端技术的不断更新，大量的新技术也被广泛地应用到页面布局中，例如 Custom Elements。在使用 Custom Elements 的过程中，很...

    1 年前
  • 在 Node.js 中实现简单的定时任务

    用 Node.js 实现简单的定时任务 在前端开发中，我们经常需要处理一些定时任务，例如定时刷新数据、定时发送邮件等。而 Node.js 作为一种流行的服务器端运行环境，可以提供很好的支持来处理这些任...

    1 年前
  • 如何在 Karma 和 Mocha 中正确使用 Chai 测试框架

    测试是前端开发中必不可少的一个环节，而 Chai 是一个常用的 JavaScript 测试工具库，它提供了多种断言方式和丰富的插件支持，可以方便地进行单元测试和集成测试。

    1 年前
  • Serverless 模式实践总结

    前言 Serverless 是一种新兴的云计算架构，它基于事件驱动和无服务器的概念，将应用程序部署到云服务提供商的平台上，无需购买、安装、配置和管理服务器硬件和软件，以按需支付的方式租用计算资源，实现...

    1 年前
  • SASS 中如何定义变量的默认值及其相应的应用场景

    在前端开发中，SASS 是一种非常常用的 CSS 预处理器，它提供了丰富的功能，其中之一就是变量的使用。在实际项目中，变量的使用可以带来极大的便利性，同时也为样式的重复使用提供了更好的支持。

    1 年前
  • Cypress 实战教程：使用 puppeteer 进行可视化截图比对与分析

    前言 前端测试是保证产品质量的重要手段。Cypress 是一款 JavaScript 编写的功能强大的端到端测试工具，其可以模拟用户行为操作网页，并且提供了一套完整的 API 来进行断言和验证。

    1 年前
  • Promise 异步逻辑中遇到错误如何回退到同步执行？

    在前端开发中，我们经常会遇到需要处理异步数据的情况。针对这种情况，ES6提供了Promise对象，使得异步逻辑变得更加可控和易于维护。但是，当我们在异步逻辑中遇到错误时，有些情况下我们可能需要回退到同...

    1 年前
  • 在使用 Jest 测试框架时，如何 mock 全局对象

    在进行前端开发时，我们经常需要用到全局对象，如 window、document 等。但是在进行测试时，我们希望能够控制全局对象的值，以确保测试的稳定性和正确性。而 Jest 框架提供了 mock 全局...

    1 年前
  • Web Components 开发指南：如何克服兼容性问题

    Web Components 是一种新兴的前端开发技术，它可以帮助我们将网页组件化，并将其封装成独立的模块，以便在不同的项目中共用。不过，Web Components 在不同浏览器间的兼容性问题一直是...

    1 年前
  • ECMAScript 2021 (ES12) 中新增的 String.prototype.replaceAll() 方法及其应用

    在 ECMAScript 2021 (ES12)，JavaScript 引入了新的字符串方法 - String.prototype.replaceAll()，该方法可以在字符串中全局替换指定的子字符串...

    1 年前
  • 解决 React 项目中移动端样式不兼容的问题

    随着移动互联网时代的到来，越来越多的用户开始使用移动设备浏览网页。然而，在 React 项目中编写移动端样式时，我们很容易遇到一些兼容性问题，导致样式在移动端表现出现异常。

    1 年前
  • ES9 的新特性：异步迭代器和生成器方法

    ES9（ECMAScript 2018）是 JavaScript 的最新版本，它新增了一些重要的特性和功能。其中，异步迭代器和生成器方法是本文要关注的两个新特性。这两个特性能够让开发者以更加简单和灵活...

    1 年前
  • 搞定 ECMAScript 2020: Generator 函数的理解和使用方法讲解

    随着 ECMAScript 的不断升级，语言的功能不断增强，在其中一个重要的新特性是 Generator 函数。Generator 函数能够让我们方便地创建迭代器，使得异步编程变得更加简单。

    1 年前
  • Tailwind 使用中样式覆盖不生效的解决方法

    Tailwind 是一款流行的 CSS 框架，可以帮助开发者快速构建出现代化的网站界面。它的原理是通过配置文件定义各种样式类，然后通过 HTML 中的 class 属性来应用相应的样式。

    1 年前
  • 在我使用 Mocha 测试套件时，“describe” 函数没有起作用？ - 解决方案

    在我使用 Mocha 测试套件时，“describe” 函数没有起作用？ - 解决方案 著名的 JavaScript 测试框架 Mocha 是前端开发过程中必不可少的工具之一。

    1 年前
  • 「教程」socket.io 与 express 框架的结合

    前言 随着 Web 应用程序的发展，实时通信的需求也越来越多。在传统的 Web 技术中，通过 AJAX 轮询或长轮询（long-polling）来模拟实时通信。但是，这些方案都有性能和实时性的问题。

    1 年前

相关推荐

    暂无文章