简单的登录系统—MySQL+Node.js服务端+HTML+JS

需求描述

一个基本的用户登录功能，包括前端页面开发、后端接口实现、数据库设计及相应的交互逻辑。实现时需满足以下要求：

登录页面功能需求：
- 提供两个输入框：
- 用户名输入框。
- 密码输入框。
- 提供两个按钮：
  - “清空”按钮：用于清空输入框的内容。
  - “登录”按钮：提交用户名和密码，向后端发送验证请求。
    - 点击“登录”按钮前需进行输入数据验证，要求如下：
      1.用户名和密码均不能为空。
      2.用户名和密码长度不得超过 20 个字符。
      3.数据验证错误时，需弹窗提示（alert 方式），显示具体错误信息。
后端处理需求：
- 后端接收前端提交的用户名和密码。
- 查询数据库中的用户名和密码（密码明文存储）。
- 验证用户名和密码是否匹配：
  - 匹配成功，返回登录成功响应。
  - 匹配失败，返回错误提示“用户名或者密码不正确”。
登录结果处理：
- 登录成功后，跳转到登录成功页面（success.html），并显示以下内容：
  - 文本内容：“登录成功”。
  - 当前时间戳。
数据库需求：
- 设计用户表，包含字段 username 和 password，并预置两组用户名和密码供测试。
提交要求：
- 前端代码（HTML、CSS、JavaScript）。
- 后端代码（可选择任意后端语言，推荐 Node.js、Python 或 Java）。
- 数据库设计（包含表结构和测试数据）。
- 说明代码部署和运行方法。

数据库MySQL

使用mysql进行数据存储。

create_table.sql

DROP DATABASE IF EXISTS login_exam;
CREATE DATABASE login_exam;
USE login_exam;
CREATE TABLE users (
	id INT AUTO_INCREMENT PRIMARY KEY,
	username VARCHAR(20) NOT NULL UNIQUE,
	password VARCHAR(20) NOT NULL
);
-- 插入测试数据
INSERT INTO users (username, password) VALUES
('zhangsan', 123456),
('lisi', '123456');

在sql所在文件夹地址栏输入cmd打开命令行：

mysql -u root -p

之后输入数据库密码进入mysql。
最后执行sql脚本文件：

source ./create_table.sql

关闭命令行即可。

服务端Node.Js

新建文件夹server，进入目录中，地址栏输入cmd打开命令行：

npm init -y
npm install express body-parser mysql2

新建文件index.js。

注意：需要修改其中的数据库密码。

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql2');
const app = express();
// 添加响应头处理跨域
app.all("*",function(req,res,next){
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
    next();
});
app.use(bodyParser.json());
const db = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: '123456',
	database: 'login_exam'
});
app.post('/login', (req, res) => {
	const { username, password } = req.body;
	db.query('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (err, results) => {
		if (err) {
			return res.status(500).json({ success: false, message: '服务器错误' });
		}
		if (results.length > 0) {
			res.json({ success: true });
		} else {
			res.json({ success: false, message: '用户名或者密码不正确' });
		}
	});
});

app.listen(3000, () => {
	console.log('Server running on http://localhost:3000');
});

命令行中输入命令：

node index.js

出现Server running on http://localhost:3000即服务端启动成功。
注意不要关闭该命令行窗口！！！

前端页面HTML+JS

login.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登录页面</title>
	</head>
	<body>
		<h2>用户登录</h2>
		<form id="loginForm">
			<label for="username">用户名：</label>
			<input type="text" id="username" maxlength="20">
			<br><br>
			<label for="password">密码：</label>
			<input type="password" id="password" maxlength="20">
			<br><br>
			<button type="button" id="clearButton">清空</button>
			<button type="submit" id="loginButton">登录</button>
		</form>
		<script>
			document.getElementById('clearButton').addEventListener('click', () => {
				document.getElementById('username').value = '';
				document.getElementById('password').value = '';
				alert('内容已清空');
			});
			document.getElementById('loginForm').addEventListener('submit', async (e) => {
				e.preventDefault();
				const username = document.getElementById('username').value.trim();
				const password = document.getElementById('password').value.trim();
				if (!username || !password) {
					alert('用户名和密码不能为空！');
					return;
				}
				if (username.length > 20 || password.length > 20) {
					alert('用户名和密码长度不能超过 20 个字符！');
					return;
				}
				const xhr = new XMLHttpRequest();
				xhr.open("POST","http://localhost:3000/login",false);
				xhr.setRequestHeader('Content-type', 'application/json');
				xhr.send(JSON.stringify({username,password}));
				if (JSON.parse(xhr.responseText).success) {
					window.location.href = './success.html?timestamp=' + Date.now();
				} else {
					alert('用户名或者密码不正确');
				}
				});
		</script>
	</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登录成功</title>
	</head>
	<body>
		<h2>登录成功</h2>
		<p>当前时间戳：<span id="timestamp"></span></p>
		<script>
			const urlParams = new URLSearchParams(window.location.search);
			const timestamp = urlParams.get('timestamp');
			document.getElementById('timestamp').textContent = timestamp ? new
			Date(parseInt(timestamp)).toString(): '未知';
		</script>
	</body>
</html>

打开login.html输入账号名：zhangsan，密码：123456，完成跳转即登录系统实现成功。

附：源代码

posted @ 2024-12-26 16:56 乖巧的花瓶阅读(520) 评论(0) 收藏举报

刷新页面返回顶部

简单的登录系统—MySQL+Node.js服务端+HTML+JS

需求描述

数据库MySQL

服务端Node.Js

前端页面HTML+JS

公告