目录
阅读前必读
一、前期准备
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 -v
确保输出的版本为 v16.14.2。
3. 输入以下命令以检查 npm 版本:
npm -v
确保输出的版本为 8.5.0。
如果您的版本与上述要求不符,请前往 Node.js 官方网站(https://nodejs.org)下载并安装相应版本的 Node.js。
首先,我们可以创建一个项目目录,命名为 "express-login",这个目录将用于存放我们的项目文件。
我们在终端输入 "npm init -y" 命令对项目进行初始化。
npm init -y
成功初始化项目后,我们的项目目录中将会多出一个重要的文件“package.json”。
使用以下命令可以快速下载并安装 Express:
npm install express
下载成功后,你会发现在项目目录下出现了一个名为 node_modules
的文件夹和一个名为 package-lock.json
的文件。
node_modules
文件夹是用于存放项目所需的第三方模块和库的地方。package-lock.json
文件是 npm 在安装包时自动生成的一个锁定文件。我们在项目目录下创建一个名为 views
的文件夹,用来存放登录页面,并且在 views
文件夹中创建一个名为 login.html
的文件,作为我们的登录页面。
非常好,现在把下面的 HTML 代码复制到 login.html
文件中。
登录
在浏览器中打开“login.html”文件来查看页面效果。
在您的应用程序根目录下,创建一个名为app.js的文件,并编写相应的代码。
const express = require("express"); // express web框架
const bodyParser = require("body-parser"); // 处理请求体数据的中间件
const path = require("path"); // 处理文件路径
const app = express();
app.use()
用于注册中间件。bodyParser.urlencoded()
用于解析 URL 编码的请求体数据,并将其转换为 JavaScript 对象。app.use(bodyParser.urlencoded({ extended: false }));
app.get()
用于处理 HTTP GET 请求的方法。res.sendFile()
用于发送文件作为响应。path.join()
用于将多个路径拼接成一个规范化的路径字符串。app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "views", "login.html"));
});
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");
});
如果您之前没有接触过 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");
});
在终端中输入以下命令来启动您的项目
node app.js
恭喜!您的项目已成功启动!终端显示以下消息:
请打开您的浏览器,并在地址栏中输入以下网址:
http://127.0.0.1:8081
然后按下回车键进行访问。
如果一切正常,您将在浏览器中看到的效果如 3.1图所示:
3.1 运行效果图
在页面表当中书册测试数据进行测试,数据如3.2表所示:
测试编号 | 用户名 | 密码 | 测试结果 |
001 | admin | 123456 | 登录成功 |
002 | admin | 123 | 登录失败 |
3.2 测试数据表
如果本篇文章对您有所帮助,请关注我,我会为编写更多优质的文章。
1分钟学会使用Express+MySQL实现注册功能
Express EJS渲染技术详解
10分钟学习如何使用 Express+Mysql开发图书管理系统