在1分钟内，使用 Express 快速编写一个简单的登录功能。

已于 2024-01-21 16:56:27 修改
阅读量1.2k 收藏 22
点赞数 27
文章标签： express node.js
于 2024-01-16 19:13:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bjjgff/article/details/135631065
版权

目录

         阅读前必读 

一、前期准备

1.1 创建项目目录

1.2 初始化项目

1.3 安装 Express

二、编写代码

2.1 编写前端页面

 2.2 页面预览效果

2.3 后端代码

2.3.1 引入模块

2.3.2 创建express应用程序

2.3.3 注册“body-parser”中间件

2.3.3 登录页面接口

2.3.5 登录接口

2.3.6 配置项目监听端口

2.4 后端整体代码

2.5 运行项目

三、运行测试

3.1 打开网址

3.2 效果测试

阅读前必读 

1分钟学会使用Express+MySQL实现注册功能

Express EJS渲染技术详解

10分钟学习如何使用 Express+Mysql开发图书管理系统

在开始之前，请确保已在您的电脑上安装了 Node.js 和 npm，并且它们的版本分别为：

在开始之前，请确保已在您的电脑上安装了 Node.js 和 npm，并且它们的版本分别为：

  • node v16.14.2
  • npm 8.5.0

请按照以下步骤进行安装和确认版本：

  1. 打开终端或命令行界面。
  2. 输入以下命令以检查 Node.js 版本。
node -v

         确保输出的版本为 v16.14.2。

     3. 输入以下命令以检查 npm 版本：

npm -v

         确保输出的版本为 8.5.0。

如果您的版本与上述要求不符，请前往 Node.js 官方网站（https://nodejs.org）下载并安装相应版本的 Node.js。

一、前期准备

1.1 创建项目目录

首先，我们可以创建一个项目目录，命名为 "express-login"，这个目录将用于存放我们的项目文件。

1.2 初始化项目

我们在终端输入 "npm init -y" 命令对项目进行初始化。

npm init -y

成功初始化项目后，我们的项目目录中将会多出一个重要的文件“package.json”。

1.3 安装 Express

使用以下命令可以快速下载并安装 Express：

npm install express

下载成功后，你会发现在项目目录下出现了一个名为 node_modules 的文件夹和一个名为 package-lock.json 的文件。

  1. node_modules 文件夹是用于存放项目所需的第三方模块和库的地方。
  2. package-lock.json 文件是 npm 在安装包时自动生成的一个锁定文件。

二、编写代码

2.1 编写前端页面

我们在项目目录下创建一个名为 views 的文件夹，用来存放登录页面,并且在 views 文件夹中创建一个名为 login.html 的文件，作为我们的登录页面。

非常好，现在把下面的 HTML 代码复制到 login.html 文件中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <style>
      body {
        background-color: #f5f5f5;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .container {
        width: 300px;
        background-color: #fff;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      .form-group {
        margin-bottom: 20px;
      }

      label {
        font-size: 16px;
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"],
      input[type="password"] {
        width: 96%;
        height: 20px;
        font-size: 14px;
        border-radius: 3px;
        border: 1px solid #ccc;
        padding: 5px;
      }

      button[type="submit"] {
        background-color: #007bff;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 3px;
        width: 100%;
        height: 40px;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      button[type="submit"]:hover {
        background-color: #0062cc;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <form method="post" action="/login">
        <div class="form-group">
          <label for="username">用户名：</label>
          <input type="text" name="username" id="username" />
        </div>
        <div class="form-group">
          <label for="password">密码：</label>
          <input type="password" name="password" id="password" />
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  </body>
</html>

 2.2 页面预览效果

在浏览器中打开“login.html”文件来查看页面效果。

2.3 后端代码

在您的应用程序根目录下，创建一个名为app.js的文件，并编写相应的代码。

2.3.1 引入模块
  1. express: 帮助我们更方便地构建和管理Web应用程序。
  2. body-parser: 它是一个处理请求体数据的中间件。
  3. path: 它是Node.js内置的模块之一，用于处理文件路径。
const express = require("express"); // express web框架
const bodyParser = require("body-parser"); // 处理请求体数据的中间件
const path = require("path"); // 处理文件路径
2.3.2 创建express应用程序
 const app = express();
2.3.3 注册“body-parser”中间件
  1. app.use() 用于注册中间件。
  2. bodyParser.urlencoded() 用于解析 URL 编码的请求体数据，并将其转换为 JavaScript 对象。
app.use(bodyParser.urlencoded({ extended: false }));
2.3.3 登录页面接口
  1. app.get() 用于处理 HTTP GET 请求的方法。
  2. res.sendFile() 用于发送文件作为响应。
  3. path.join() 用于将多个路径拼接成一个规范化的路径字符串。
app.get("/", (req, res) => {  
    res.sendFile(path.join(__dirname, "views", "login.html")); 
});
2.3.5 登录接口
  1. req.body: 从 HTTP 请求的请求体中获取用户名和密码的代码。
  2. res.send() 用于发送HTTP响应，可以传入字符串数据。
app.post("/login", (req, res) => {  
    
    // 用户名和密码
    const username = req.body.username;  
    const password = req.body.password; ​

    // 进行登录验证  
    if (username === "admin" && password === "123456") {    
        res.send("登录成功！"); 
    } else {    
        res.send("用户名或密码错误！"); }
});
2.3.6 配置项目监听端口
  1. app.listen() 用于启动 HTTP 服务器的方法。
// 监听端口
app.listen(8081, () => {
  console.log("http://127.0.0.1:8081");
});
​

2.4 后端整体代码

如果您之前没有接触过 Express 框架，可以将以下代码复制到 app.js 文件中以进行测试。

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");

const app = express();

// app.use 注册中间件
app.use(bodyParser.urlencoded({ extended: false }));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "views", "login.html"));
});

// 处理 POST 请求，处理登录逻辑
app.post("/login", (req, res) => {

  // 用户名和密码
  const username = req.body.username;
  const password = req.body.password;

  // 进行登录验证
  if (username === "admin" && password === "123456") {
    res.send("登录成功！");
  } else {
    res.send("用户名或密码错误！");
  }
});

// 监听端口
app.listen(8081, () => {
  console.log("http://127.0.0.1:8081");
});

2.5 运行项目

在终端中输入以下命令来启动您的项目

node app.js

恭喜！您的项目已成功启动！终端显示以下消息：

三、运行测试

3.1 打开网址

请打开您的浏览器，并在地址栏中输入以下网址：

http://127.0.0.1:8081

然后按下回车键进行访问。 

如果一切正常，您将在浏览器中看到的效果如 3.1图所示:

3.1 运行效果图 

3.2 效果测试

在页面表当中书册测试数据进行测试，数据如3.2表所示：

测试编号用户名密码测试结果
001admin123456登录成功
002admin123登录失败

                                                                3.2 测试数据表

如果本篇文章对您有所帮助，请关注我，我会为编写更多优质的文章。

其他文章推荐：

1分钟学会使用Express+MySQL实现注册功能

Express EJS渲染技术详解

10分钟学习如何使用 Express+Mysql开发图书管理系统

程序是我的命
关注
  • 27
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
express的简单登录操作
fengya1112的博客
08-11 506
文件夹目录 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
express实现登录注册
weixin_65426307的博客
08-30 199
express自己写接口 实现前后端注册登录
express登录流程
weixin_43756315的博客
08-17 619
node使用express进行账号简易登录流程的实现，包含账号验证、密码加密、token生成等
前后端分离实践：使用 React 和 Express 搭建完整登录注册流程
最新发布
Huahua_1223的博客
04-27 3237
Express是一个基于Node.js的Web应用开发框架，它提供了一系列的功能和工具，使得构建高性能、可扩展的Web应用变得更加容易。React是一个用于构建用户界面的JavaScript库，它提供了组件化开发的思想和一系列工具，使得构建复杂用户界面更加简单和可维护。React Router是React的官方路由库，用于管理应用的路由和页面导航，使得构建单页面应用更加简单和灵活。一套基于React的企业级UI组件库，提供了丰富的UI组件和设计模式，帮助开发者快速构建美观的用户界面。实现路由功能，然后在。
Express实现登录验证
越陌度阡
04-30 4828
Express实现的路由登录，这套代码适用于很多场景，特此记录，以备后用。 首先是主文件：server.js const express = require('express'); const static = require('express-static'); const bodyParser = require('body-parser'); const multer = requir......
express实现用户登录和注册接口
低代码布道师的博客
03-30 821
本篇我们讲解了一下用户登录和注册接口的开发，涉及到环境变量的初始化，Orm库的搭建以及路由的配置，熟悉了整套流程，后续的功能开发就可以按照自己的需求完成了。
NodeJS学习笔记（一）——搭建开发框架Express，实现Web网站登录验证
weixin_30340745的博客
08-17 90
　　JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了document之类的内置对象。而运行在NodeJ...
timeServer:一个基本的计时器服务器，使用 Node JS 和 Express 编写
06-29
Express 则是基于 Node.js 的一个快速、开放、极简的 web 开发框架，简化了构建 web 应用和服务的过程。 **Node.js 和 Express 知识点** 1. **Node.js**: Node.js 使用 V8 引擎作为其 JavaScript 解释器，提供了非...
test-express:一个使用 express + MongoDb 的简单应用
06-04
在本文中，我们将深入探讨如何使用Express框架与MongoDB数据库构建一个简单的Web应用程序。Express是基于Node.js平台的，用于快速、简洁地构建可扩展的网络应用。MongoDB则是一种流行的NoSQL数据库，以其灵活性、高...
quantum-test:此仓库包含一个使用express创建的简单API
04-19
它提到这个仓库包含了一个使用Express创建的简单API。API（Application Programming Interface）是让不同的软件系统之间进行交互的一种接口。Express是Node.js中非常流行的一个Web应用框架，用于快速构建服务器端...
CMPE273_LinkedInServer:一个使用 Node Express 后端的简单 API 提供者
06-20
总结，"CMPE273_LinkedInServer"是一个使用Node.js和Express的实战项目，涵盖了服务器端开发、数据库操作、API设计等多个方面，对于想要提升JavaScript后端开发能力的人来说，是一个宝贵的资源。
Nodejs Express 用户登录注册示例
09-01
上传Nodejs Express 用户登录注册示例，数据库使用mysql，实现用户注册、登录及登录成功跳转到系统界面简单功能
本文主要介绍NodeJS+Express+Mysql实现用户登录和注册。此登录注册的方式为ge
09-12
>本文主要介绍NodeJS+Express+Mysql实现用户登录和注册。此登录注册的方式为get
react-express:另一个最小的React快速入门应用程序
07-16
**React-Express：一个简洁的React快速启动模板** 在现代Web开发中，React.js和Express.js是两个非常流行且强大的工具。React是一个用于构建用户界面的JavaScript库，尤其适合构建单页应用程序（SPA）。而Express....
node.js学习笔记(4)--使用Express完成简单的登陆
minixu的博客
03-29 4330
1.设计路由 主页：home.ejs  用户登陆后进入的页面  访问路径：/home 登陆页面：login.ejs   用户输入用户名密码页面 访问路径：/login 退出页面：无    用户点击后回到登陆页面 访问路径：/logout 2.新增页面 我们上一节中已经知道了如何利用Express创建一个简单的项目 。Express创建项目 项目创建好之后，打开views文件夹
express简单实现登录及在线聊天室
田二黑的博客
04-22 2129
安装express express 是 Node.js 上最流行的 Web 开发框架，正如他的名字一样，使用它我们可以快速的开发一个 Web 应用。我们用 express 来搭建我们的博客，打开命令行，输入： npm install -g express-generator 用express创建项目 express -e login
express登录例子
马优晨
06-18 559
本实例主要涉及红框圈出的文件： 文件描述： www 里面存放静态文件 a.html是我们的表单文件 ajax.js是封装的一个ajax server2.js是建立的服务端文件 代码简述： server2.js const express = require('express') const expressStatic = require('express-static') //用于改变静态资源路径 var server = express() server.listen(8087) //监听到808.
用 node.js 搭建简单的 web 服务器
经验之外
06-21 469
const express = require("express"); const app = express(); const bodyParser = require("body-parser"); const port = 3000; app.all("*", function(_, res, next) { res.header("Access-Control-Allow-Origi...
nodejs express摸爬滚打篇：注册登录
weixin_44042409的博客
02-16 534
注：本文做了一个简单的注册登录接口 那么问题来了express要怎么样的写一个注册与登录接口 this is a question（这是一个问题） 我们先创建一个文件users.js 放在route文件夹中 在app.js中写入这两行代码，引入users.js var usersRouter = require('./routes/users'); app.use('/users', usersRouter); 然后我们启动 yarn dev或者你自己使用的启动命令 接下去开始编写我们的代码 先进行初始化
编写一个后端开发示例
09-10
### 回答1： 好的，这是一个后端开发示例： 假设我们要开发一个网站，该网站允许用户注册和登录，并具有以下功能： 1. 用户注册：当用户访问注册页面时，后端应该提供一个表单，允许用户输入用户名、密码、电子邮件地址等信息。当用户提交表单时，后端应该验证输入的信息是否有效，并在数据库中创建一条新记录，记录该用户的信息。 2. 用户登录：当用户访问登录页面时，后端应该提供一个表单，允许用户输入用户名和密码。当用户提交表单时，后端应该验证输入的用户名和密码是否有效，如果有效则允许用户登录，并创建一个会话。 3. 查看用户信息：当已登录的用户访问“个人信息”页面时，后端应该返回该用户的个人信息，包括用户名、电子邮件地址等。 4. 修改用户信息：当已登录的用户访问“修改信息”页面时，后端应该提供一个表单，允许用户修改自己的个人信息 ### 回答2： 在后端开发中，一个常见的示例是创建一个简单的用户管理系统。以下是一个使用Node.js和Express框架来编写的简单示例： 首先，我们需要创建一个Express应用并设置路由。在app.js文件中引入必要的模块和依赖： ```javascript const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); // 路由示例 app.get('/', (req, res) => { res.send('欢迎访问用户管理系统'); }); app.get('/users', (req, res) => { // 返回所有用户 res.json({ message: '获取用户列表' }); }); app.post('/users', (req, res) => { // 创建新用户 const { name, email } = req.body; res.json({ message: `创建新用户 ${name} (${email})` }); }); app.put('/users/:id', (req, res) => { // 更新特定用户 const userId = req.params.id; const { name, email } = req.body; res.json({ message: `更新用户 ${userId}: ${name} (${email})` }); }); app.delete('/users/:id', (req, res) => { // 删除特定用户 const userId = req.params.id; res.json({ message: `删除用户 ${userId}` }); }); app.listen(3000, () => { console.log('应用已启动，监听端口3000'); }); ``` 以上示例代码创建了四个路由：获取用户列表的GET请求、创建新用户的POST请求、更新特定用户的PUT请求和删除特定用户的DELETE请求。请求参数通过req.body获取，并根据请求的不同返回相应的响应。 最后，通过运行该应用，它将在本地主机上的端口3000上启动并监听来自客户端的请求。您可以使用Postman等工具来测试该应用的各个路由。 这只是一个简单的后端开发示例，实际的开发中往往涉及更多功能和复杂的业务逻辑。通过这个示例，您可以熟悉后端开发的基本概念和流程，并在实际项目中进行更复杂的开发和调试。 ### 回答3： 后端开发是指在软件开发过程中负责处理服务器端逻辑和数据存储的部分。下面是一个简单的后端开发示例： 假设我们正在开发一个简单的博客应用，需要实现用户登录、文章创建和查询等功能。 首先，我们需要搭建一个服务器环境，可以使用Node.js平台和Express框架来快速构建。在服务器端，我们可以创建一个名为server.js的文件，并在其中编写后端逻辑。 首先，我们需要引入所需的模块和中间件。使用npm安装所需的模块，例如body-parser用于解析请求体、jsonwebtoken用于生成和验证身份验证令牌等。 然后，我们可以创建一个Express应用，并设置一些全局中间件，例如body-parser中间件。 接下来，我们可以定义一些路由来处理不同的请求。例如，我们可以创建一个用户登录的路由，当接收到POST请求时，我们可以从请求体中获取用户名和密码，并验证其有效性。如果验证通过，我们可以生成一个JWT令牌并将其返回给客户端。 另外，我们还可以创建一个文章创建的路由，当接收到POST请求时，我们可以从请求体中获取文章标题和内容，并将其存储到数据库中。 最后，我们还可以创建一个文章查询的路由，当接收到GET请求时，我们可以从数据库中获取存储的文章，并将其返回给客户端。 在处理请求的过程中，我们可以使用数据库工具来连接和操作数据库，例如使用Mongoose连接MongoDB数据库。 以上仅为一个简单的后端开发示例，实际的后端开发可能涉及更复杂的逻辑和组件。编写一个高质量的后端应用需要考虑安全性、性能、可扩展性等方面的问题，并遵循行业的最佳实践。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序是我的命

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值