使用 Node.js 和 Express 创建一个基本的用户注册和登录系统

在现代 Web 开发中,用户注册和登录是必备功能之一。如果您正在构建一个基于 Node.js 和 Express 的应用程序,那么本文将指导您创建一个基本的用户注册和登录系统。

前置要求

在继续之前,您需要安装以下软件:

  • Node.js(版本必须大于 8.0.0)
  • NPM 或 Yarn
  • IDE 或文本编辑器

导入依赖

首先,我们需要创建一个新的 Node.js 项目并导入 Express 和其他必需的模块。在终端中运行以下命令:

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

这将创建一个新的 Node.js 项目并从 NPM 导入依赖项:

  • express - Node.js Web 框架
  • body-parser - 解析 HTTP 请求体
  • mongoose - MongoDB 数据库的对象建模工具
  • bcryptjs - 帮助我们加密密码
  • jsonwebtoken - 用于创建和解析 JSON Web Tokens (JWT)
  • passport - 用于身份验证的 Node.js 库
  • passport-jwt - Passport 的 JWT 身份验证策略
  • cors - Cross-Origin Resource Sharing(跨域资源共享)中间件

配置数据库

在继续之前,我们需要配置 MongoDB 数据库。我们将使用 mongoose 来连接 MongoDB。

打开 index.js 文件,连接到你的 MongoDB 数据库:

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

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

YOUR_DATABASE_URI 替换为您的 MongoDB 数据库 URI。

创建模型

接下来,我们将定义用户数据模型。在新的 models 目录中创建 User.js 文件:

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

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

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

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

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

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

这将定义一个名为 User 的模型,并使用 Joi 模块对输入进行验证。我们需要确保用户在注册过程中输入了有效的电子邮件地址和密码。

创建控制器

在我们的应用程序中,控制器是处理用户请求的地方。在新的 controllers 目录中创建 auth.js 文件。它将包含创建用户、登录、注销等功能:

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

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

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

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

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

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

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

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

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

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

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

此控制器将在请求中获取表单数据,创建或验证用户数据,并处理响应。

创建路由

现在我们已经定义了控制器,我们可以使用路由将请求映射到该控制器。在新的 routes 目录中创建 auth.js 文件:

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

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

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

这将定义路由并将其连接到控制器。

使用路由

最后,我们需要将我们的路由加载到我们的 Express 应用程序中。在 index.js 文件中添加以下代码:

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

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

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

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

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

我们已经定义了应用程序并加载了路由。现在,我们可以运行应用程序并测试用户注册和登录功能。

测试

在终端中运行以下命令启动应用程序:

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

这将启动我们的应用程序。

现在,我们可以使用 Postman 或类似的工具进行测试。我们可以使用以下命令创建新用户:

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

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

如果用户创建成功,您应该会收到下面的响应:

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

接下来,我们可以使用以下命令登录用户:

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

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

如果用户登录成功,您应该会收到下面的响应:

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

此返回的 JWT 令牌应存储在客户端,并在每个请求中发送到服务器以验证用户身份。此处未包括发送 JWT 令牌的代码,但您可以搜索“使用 JWT 的 Node.js 身份验证”来了解如何实现它。

结论

使用 Node.js 和 Express 创建用户注册和登录系统需要一些基础知识,但它可以让您在 Web 开发中的拥有更多的灵活性和控制性。如果您需要更多的功能,例如电子邮件验证,OAuth 登录等等,这篇文章也为您提供了一个良好的起点。

示例代码请见 https://github.com/Luna-0925/my-register-login-system

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6711ee5ead1e889fe2019cde


猜你喜欢

  • Redis 在分布式缓存中的应用场景分析

    Redis 是一个广泛应用的分布式内存缓存系统,它的出色性能和可靠性使它成为了解决高并发、大数据量、高并发场景下的首选。在分布式缓存中,Redis 除了作为普通的缓存使用,还可以应用于一些特殊场景,本...

    5 天前
  • Android Material Design 中使用圆角图片时的适配问题解决方案

    随着 Material Design 的流行,用户界面变得更加美观且直观。其中一个设计元素是使用圆角图片来增强视觉效果。然而,在 Android 应用程序中使用圆角图片时,可能会遇到适配问题,如变形、...

    5 天前
  • 解决 LESS 字体显示问题

    在开发网页时,我们经常会使用 LESS 来帮助我们编写 CSS 风格的代码。然而,在使用 LESS 时,你可能会遇到字体显示问题,导致你的网页无法正常加载字体。本文将介绍如何解决这个问题,并提供示例代...

    6 天前
  • 在 Socket.io 应用中如何启用 WebSocket 大负载支持

    在现代 Web 应用程序中,实时通信已经成为了一种必不可少的需求。Socket.io 是一个流行的实时通信引擎,基于 WebSocket、AJAX 长轮询以及其他传输方式,为 Web 应用程序提供了一...

    6 天前
  • 解决 Deno 在启动时出现的超时问题

    Deno 是最近推出的一个新型 JavaScript 运行时环境,由于它的强大性能和安全性,越来越多的前端开发者开始将其应用于开发工作。但是,在启动 Deno 时,我们有时会遇到超时问题,本文将详细探...

    6 天前
  • MongoDB 副本集的创建与管理详解

    前言 在现代的 Web 应用程序中,前端开发越来越复杂和具有挑战性,数据存储成为应用程序的一个关键部分。MongoDB 是一个流行的 NoSQL 数据库,它使用 JSON 格式存储数据,提供开放式的数...

    6 天前
  • 如何使用 CSS Grid 实现背景图像的重复

    在 Web 开发中,背景图像经常被用来优化页面的设计效果,增强视觉效果和用户体验。然而,当需要将背景图像进行重复显示时,通常需要使用 HTML 代码来实现,这样会导致 HTML 代码冗长、难以维护。

    6 天前
  • 避免缓存过期对性能的影响

    避免缓存过期对性能的影响 在现代 Web 应用程序中,缓存是提高性能的关键。通过缓存页面和 assets 可以减少请求次数,并在客户端上加载资源,以减轻服务器负载。

    6 天前
  • Webpack 中如何实现 Vue 单页面应用打包

    Webpack 中如何实现 Vue 单页面应用打包 概述 在前端开发过程中,使用 Vue 作为框架来开发单页面应用是非常常见的。而在打包部署阶段,我们通常会使用 Webpack 来将我们的 Vue 单...

    6 天前
  • 利用 Serverless 框架创建自适应 Web 应用的步骤以及相关要点

    在如今 Web 应用快速发展的环境下,开发者需要解决许多问题,其中最常见的问题就是如何快速部署、管理和运维应用。Serverless 框架提供了一种新的解决方案,使用其可以快速创建自适应的 Web 应...

    6 天前
  • Tailwind 中的背景图处理技巧:实现背景图片的兼容性与平铺

    在 Web 开发中,背景图作为网站视觉效果的重要元素经常被使用,但使用背景图时存在一些问题,例如背景图在不同设备上的兼容性、平铺方式等问题。本文将介绍如何使用 Tailwind CSS 中的类来实现背...

    6 天前
  • 基于 Next.js 的应用如何优化 SEO

    在构建现代 Web 应用时,搜索引擎优化(SEO)已经成为了一个越来越重要的话题。对于使用 React 的开发者来说,Next.js 是一种流行的框架,可以帮助他们在构建 SEO 友好的应用时省去许多...

    6 天前
  • 在 React Native 中使用 Enzyme 测试组件 Props

    React Native 是现今最流行的移动端开发框架之一。随着应用程序的复杂性越来越高,测试也变得越来越重要。其中,测试组件 Props 是其中一个重要的测试方面。

    6 天前
  • LESS 实现 CSS 继承的最佳实践

    在前端开发中,我们常常需要重复使用已经定义好的样式规则,在 CSS 中可以通过类继承的方式来实现代码的复用。然而,CSS 的实现方式十分繁琐,代码可读性不高,还容易出错。

    6 天前
  • 如何在 Express.js 中验证 API 请求

    简介 在开发 Web 应用程序时,验证 API 请求是非常重要的一步。验证 API 请求有助于保护应用程序免受不受欢迎的客户端以及防止恶意攻击。在本文中,我们将介绍如何使用 Express.js 中间...

    6 天前
  • 使用 CSS Flexbox 实现侧边栏和主要内容布局

    在现代前端页面设计中,侧边栏和主要内容布局是非常常见的设计模式。使用 CSS Flexbox 可以轻松实现这种布局,无需使用传统的 float 和 position 定位技术。

    6 天前
  • 如何使用 Headless CMS 系统实现电商功能?

    在现代化的网站开发中,使用 Headless CMS 系统越来越受欢迎。Headless CMS 是一种内容管理系统,其中 CMS 被分离成后端的仅仅提供 APIs 和一系列的服务,UI 呈现层则通过...

    6 天前
  • 学习 ES7 的 Array.prototype.fill 方法

    在前端开发中,我们经常需要填充数组。如果要填充大量的数据,使用循环填充会很慢,而且代码可能会显得冗长。ES7 的 Array.prototype.fill 方法可以帮助我们简化这个过程,并且提高性能。

    6 天前
  • 解决 CSS Grid 布局中的父子元素层级关系问题

    在进行网页布局设计的过程中,CSS Grid 布局的出现为开发者们提供了更加灵活、直观的布局方式,同时也避免了传统布局方式中的一些问题。然而在使用 CSS Grid 布局时,开发者也会遇到一些问题,如...

    6 天前
  • Hapi 框架中的认证与授权技术详解

    前言 Hapi 是一种用于构建应用程序的现代框架,它提供了一种模块化方式来组织应用程序,并允许您轻松地编写可测试的代码。在本文中,我们将详细了解 Hapi 框架中的认证和授权技术,并提供一些相关示例代...

    6 天前

相关推荐

    暂无文章