目录
阅读前必读
在1分钟内，使用 Express 快速编写一个简单的登录功能
10分钟学习如何使用 Express+Mysql开发图书管理系统
在开始之前，请确保已在您的电脑上安装了 Node.js 和 npm，并且它们的版本分别为：
- node v16.14.2
- npm 8.5.0
请按照以下步骤进行安装和确认版本：
- 打开终端或命令行界面。
- 输入以下命令以检查 Node.js 版本。
node -v3. 输入以下命令以检查 npm 版本：
npm -v如果您的没有Nodejs和npm，请前往 Node.js 官方网站（https://nodejs.org）下载并安装相应版本的 Node.js。
一、前期准备
1.1 创建项目目录
首先，我们可以创建一个项目目录，命名为 "express-register"，这个目录将用于存放我们的项目文件。
1.2 初始化项目
我们在终端输入 "npm init -y" 命令对项目进行初始化。
npm init -y成功初始化项目后，我们的项目目录中将会多出一个重要的文件“package.json”。
1.3 安装项目包
1.3.1 安装Express
使用以下命令可以快速下载并安装 Express：
npm install express1.3.2 安装MySQL
npm install mysql下载成功后，你会发现在项目目录下出现了一个名为 node_modules 的文件夹和一个名为 package-lock.json 的文件。
二、创建数据表
2.1 创建数据库
首先我们需要创建一个数据库 “express_data”:
CREATE DATABASE express_data;2.2 打开数据库
打开“express_data”数据库:
USE express_data;2.3 创建用户表
创建用户user 表
CREATE TABLE user (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(255) NOT NULL,
password VARCHAR(255) NOT NULL
);
三、编写代码
3.1 编写前端页面
我们在项目目录下创建一个名为 views 的文件夹，用来存放登录页面,并且在 views 文件夹中创建一个名为 register.html 的文件，作为我们的登录页面。
现在将以下代码复制到 register.html 文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<style>
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 150px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
}
input[type="text"],
input[type="password"] {
width: 96%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>用户注册</h2>
<form method="post" action="/register">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
</div>
<div class="form-group">
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm_password" placeholder="请输入确认密码" required>
</div>
<button type="submit">注册</button>
</form>
</div>
</body>
</html>3.2 页面预览效果
在浏览器中打开“register.html”文件来查看页面效果。
3.3 后端代码
在您的应用程序根目录下，创建一个名为app.js的文件，并编写相应的代码。
3.3.1 引入模块
- express: 帮助我们更方便地构建和管理Web应用程序。
- body-parser: 它是一个处理请求体数据的中间件。
- mysql: 它是mysql驱动包。
- path: 它是Node.js内置的模块之一，用于处理文件路径。
const express = require("express");
const bodyParser = require("body-parser");
const mysql = require('mysql');
const path = require("path");3.3.2 创建express应用程序
const app = express();3.3.3 注册“body-parser”中间件
app.use()用于注册中间件。bodyParser.urlencoded()用于解析 URL 编码的请求体数据，并将其转换为 JavaScript 对象。
app.use(bodyParser.urlencoded({ extended: false }));3.3.4 创建与数据库的连接
需要将数据库的用户名和密码填在对应的位置
// 创建与数据库的连接
const connection = mysql.createConnection({
host: 'localhost',
user: '你的用户名',
password: '你的密码',
database: 'express_data'
});
// 连接到数据库
connection.connect((err) => {
if (err) throw err;
console.log('连接数据库成功');
});3.3.5 注册页面接口
app.get()用于处理 HTTP GET 请求的方法。res.sendFile()用于发送文件作为响应。path.join()用于将多个路径拼接成一个规范化的路径字符串。
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "views", "register.html"));
});3.3.6 注册接口
- req.body: 从 HTTP 请求的请求体中获取用户名和密码的代码。
- res.send() 用于发送HTTP响应，可以传入字符串数据。
app.post("/register", (req, res) => {
// 用户名和密码
const username = req.body.username;
const password = req.body.password;
const confirm_password = req.body.confirm_password;
// 用户名密码都不能为空
if (!username && !password && !confirm_password) {
res.send('用户名或密码不能为空！');
} else {
// 密码和确认密码相同
if (password === confirm_password) {
// 创建一个新用户
const user = {username, password};
// 将新用户插入到数据库中
connection.query('INSERT INTO user SET ?', user, (err, result) => {
if (err) throw err;
res.send('注册成功！');
});
} else {
res.send("两次输入密码不相同");
}
}
});3.3.7 配置项目监听端口
app.listen() 用于启动 HTTP 服务器的方法。
app.listen(8081, ()=> {
console.log("http://127.0.0.1:8081");
})
3.4 后端整体代码
如果3.3章节中的代码没弄清楚，或没有接触过 Express 框架，可以将以下代码复制到 app.js 文件中以进行测试。
const express = require("express");
const bodyParser = require("body-parser");
const mysql = require("mysql");
const path = require("path");
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
// 创建与数据库的连接
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root123',
database: 'express_data'
});
// 连接到数据库
connection.connect((err) => {
if (err) throw err;
console.log('连接数据库成功');
});
/**
* 注册页面
*/
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "views", "register.html"));
});
/**
* 注册接口
*/
app.post("/register", (req, res) => {
// 用户名和密码
const username = req.body.username;
const password = req.body.password;
const confirm_password = req.body.confirm_password;
// 用户名密码都不能为空
if (!username && !password && !confirm_password) {
res.send('用户名或密码不能为空！');
} else {
// 密码和确认密码相同
if (password === confirm_password) {
// 创建一个新用户
const user = {username, password};
// 将新用户插入到数据库中
connection.query('INSERT INTO user SET ?', user, (err, result) => {
if (err) throw err;
res.send('注册成功！');
});
} else {
res.send("两次输入密码不相同");
}
}
});
app.listen(8081, ()=> {
console.log("http://127.0.0.1:8081");
})3.5 运行项目
在终端中输入以下命令来启动您的项目
node app.js恭喜！您的项目已成功启动！终端显示以下消息：
四、运行测试
4.1 打开网址
请打开您的浏览器，并在地址栏中输入以下网址：
http://127.0.0.1:8081然后按下回车键进行访问。
4.2 运行效果图
如果一切正常，显示效果如下:
4.3 效果测试
在页面表当中书册测试数据进行测试，数据如3.2表所示：
| 测试编号 | 用户名 | 密码 | 确认密码 | 测试结果 |
| 001 | user1 | 123 | 123 | 注册成功 |
| 002 | user2 | 1234 | 123 | 两次密码不同 |
编号001测试结果：
编号002测试结果：
4.4 查看数据库数据:
我们可以通过执行查询sql来查询数据库的数据:
SELECT * FROM user;
如果本篇文章对您有所帮助，请关注我，我会为编写更多优质的文章。
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
