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

目录

         阅读前必读 

一、前期准备

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分钟内,使用 Express 快速编写一个简单的登录功能。_第1张图片

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

  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分钟内,使用 Express 快速编写一个简单的登录功能。_第2张图片

1.3 安装 Express

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

npm install express

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

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

在1分钟内,使用 Express 快速编写一个简单的登录功能。_第3张图片

二、编写代码

2.1 编写前端页面

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

在1分钟内,使用 Express 快速编写一个简单的登录功能。_第4张图片

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



  
    
    
    
    登录
    
  
  
    

 2.2 页面预览效果

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

在1分钟内,使用 Express 快速编写一个简单的登录功能。_第5张图片

2.3 后端代码

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

在1分钟内,使用 Express 快速编写一个简单的登录功能。_第6张图片

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图所示:

在1分钟内,使用 Express 快速编写一个简单的登录功能。_第7张图片

3.1 运行效果图 

3.2 效果测试

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

测试编号 用户名 密码 测试结果
001 admin 123456 登录成功
002 admin 123 登录失败

                                                                3.2 测试数据表

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

其他文章推荐:

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

Express EJS渲染技术详解

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

你可能感兴趣的:(express,node.js)