node.js+Koa框架+MySQL实现注册登录
完整视频展示：https://item.taobao.com/item.htm?ft=t&id=831092436619&spm=a21dvs.23580594.0.0.52de2c1bg9gTfM
效果展示：
一、项目介绍
本项目是基于node.js+Koa+mysql的注册登录的项目,主要是给才学习node.js和Koa框架的萌新才写的。
二、项目目录
```
server.js
public
index.html
CSS
JS
img
node_modules
```
三、实现逻辑
<1>登录和注册页面
登录和注册前端界面代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录注册</title><link rel="stylesheet" href="css/login and sign.css"><link rel="stylesheet" href="../component/loading/loading.css">
</head>
<body><div class="container"><!-- loading --><div class="loader"></div><!-- Registration form --><div class="form registration-form" style="display: none;"><h2>注册</h2><input type="text" placeholder="😎 昵称" class="input" id="nickname" /><input type="password" placeholder="🔒 密码" class="input" id="password" /><input type="email" placeholder="📮 邮箱" class="input" id="email" /><button class="btn" id="register">注册</button><a class="link" id="loginLink">已有账号，去登录</a></div><!-- Login form --><div class="form login-form"><h2>登录</h2><input type="text" placeholder="😎 账号" class="input" id="loginUsername" /><input type="password" placeholder="🔒 密码" class="input" id="loginPassword" /><button class="btn" id="login">登录</button><a class="link" id="registerLink">没有账号，去注册</a></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="js/login and sign.js"></script><script src="../component/loading/loading.js"></script>
</body>
</html>CSS如下：
body {background: linear-gradient(135deg, rgba(179, 217, 230, 0.8), rgba(0, 153, 204, 0.8));display: grid;height: 100vh;place-items: center;margin: 0;font-family: 'Arial', sans-serif;overflow: hidden; /* 防止滚动条出现 */
}.container {border-radius: 1rem;width: 90%;max-width: 400px;height: auto;overflow: hidden;padding: 2rem;transition: all 0.3s ease, transform 0.3s ease; /* 添加变换效果 */backdrop-filter: blur(10px); /* 添加模糊背景效果 */
}.container:hover {transform: scale(1.02); /* 鼠标悬停时轻微放大效果 */
}.form {align-items: stretch;background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */border-radius: 1rem;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);display: flex;flex-direction: column;padding: 2rem;animation: fadeIn 0.5s ease; /* 添加淡入动画 */
}@keyframes fadeIn {from {opacity: 0;transform: translateY(10px);}to {opacity: 1;transform: translateY(0);}
}input {border: 1px solid #c4c4c4;border-radius: 0.25rem;font-size: 1rem;margin: 0.5rem 0;padding: 0.6rem;width: 95%;transition: border-color 0.3s ease, box-shadow 0.3s ease;
}input::placeholder {color: #999; /* 更加明显的占位符颜色 */
}input:focus {border-color: #00bfff;outline: none;box-shadow: 0 0 5px rgba(0, 191, 255, 0.5); /* 添加聚焦阴影效果 */
}.btn {background: linear-gradient(135deg, #00bfff, #0099cc);border: none;color: #fff;cursor: pointer;font-size: 1.1rem;margin-top: 1.5rem;padding: 0.6rem;width: 100%;border-radius: 0.25rem;transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease; /* 添加阴影效果 */
}.btn:hover {background: linear-gradient(135deg, #0099cc, #00bfff);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时添加阴影 */
}.btn:active {transform: scale(0.95); /* 改变按下时的缩放比例 */
}.link {color: #00bfff;cursor: pointer;font-size: 0.9rem;text-align: center;text-decoration: none;transition: color 0.3s ease; /* 添加颜色过渡效果 */
}.link:hover {text-decoration: underline;color: #0099cc; /* 悬停时颜色变化 */
}h2 {color: #0099cc;margin-bottom: 2rem;text-align: center; /* 中心对齐标题 */
}.form .link {display: block;text-align: center;margin-top: 10px; /* Adjust the margin as needed for spacing */
}JS逻辑如下：
document.addEventListener('DOMContentLoaded', function() {// 获取页面上的元素const loginLink = document.getElementById('loginLink'); // 登录链接const registerLink = document.getElementById('registerLink'); // 注册链接const registrationForm = document.querySelector('.registration-form'); // 注册表单const loginForm = document.querySelector('.login-form'); // 登录表单// 设置点击登录链接时的事件处理函数loginLink.addEventListener('click', () => {registrationForm.style.display = 'none'; // 隐藏注册表单loginForm.style.display = 'block'; // 显示登录表单});// 设置点击注册链接时的事件处理函数registerLink.addEventListener('click', () => {registrationForm.style.display = 'block'; // 显示注册表单loginForm.style.display = 'none'; // 隐藏登录表单});// 获取注册按钮元素const registerBtn = document.getElementById('register');// 设置点击注册按钮时的事件处理函数registerBtn.addEventListener('click', async () => {// 获取注册表单中的值const nickname = document.getElementById('nickname').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;// 检查所有字段是否都已填写if (!nickname || !email || !password) {alert('所有字段均不能为空！'); // 提示用户所有字段必须填写return;}// 密码强度验证：至少8个字符，包括字母和数字const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;if (!passwordPattern.test(password)) {alert('密码必须至少包含8个字符，包括字母和数字！'); // 提示用户密码要求return;}try {// 向服务器发送注册请求const response = await axios.post('/register', { nickname, email, password });alert(response.data); // 显示服务器返回的消息// 切换到登录表单registrationForm.style.display = 'none';loginForm.style.display = 'block';} catch (error) {alert(error.response.data); // 显示服务器返回的错误信息}});// 获取登录按钮元素const loginBtn = document.getElementById('login');// 设置点击登录按钮时的事件处理函数loginBtn.addEventListener('click', async () => {// 获取登录表单中的值const username = document.getElementById('loginUsername').value;const password = document.getElementById('loginPassword').value;// 检查所有字段是否都已填写if (!username || !password) {alert('所有字段均不能为空！'); // 提示用户所有字段必须填写return;}try {// 向服务器发送登录请求const response = await axios.post('/login', { username, password });if (response.data === '登录成功!') {alert(response.data); // 显示登录成功的消息// 存储昵称到 sessionStoragesessionStorage.setItem('nickname', username); // 使用登录时的用户名作为昵称// 重定向到新页面setTimeout(() => {window.location.href = 'after.html';}, 900); // 延迟900毫秒后重定向} else {alert(response.data); // 显示登录失败的消息}} catch (error) {alert(error.response.data); // 显示服务器返回的错误信息}});
});
相关文章：
node.js+Koa框架+MySQL实现注册登录
完整视频展示：https://item.taobao.com/item.htm?ftt&id831092436619&spma21dvs.23580594.0.0.52de2c1bg9gTfM 效果展示： 一、项目介绍 本项目是基于node.jsKoamysql的注册登录的项目,主要是给才学习node.js和Koa框架的萌新才写的。 二、项目…...
矢量化操作
约定 本文中的”向量”均指一维数组/张量，”矩阵”均值二维数组/张量 前言 在ML当中，向量和矩阵非常常见。由于之前使用C语言的惯性，本人经常会从标量的角度考虑向量和矩阵的运算，也就是用for循环来完成向量或矩阵的运算。实际上，for循环的风格比python内置的操作或pytor…...
【LeetCode】每日一题 2024_9_16 公交站间的距离（模拟）
前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动！ 题目：公交站间的距离 代码与解题思路 func distanceBetweenBusStops(distance []int, start int, destination int) int {// 首先让 start > destination, 这两个谁大对结果没有影响&#…...
【Python笔记】PyCharm大模型项目环境配置
一、PyCharm创建新项目 二、更新pip版本 ...>python.exe -m pip install --upgrade pip 三、生成所需requirements配置文件 ...>pip freeze > requirements.txt 四、安装所需组件requirements.txt ...>pip install -r requirements.txt...
FPGA-Vivado-IP核-虚拟输入输出（VIO）
VIO IP核 背景介绍 Vivado中的VIO（Virtual Input/Output，虚拟输入/输出） IP核是一种用于调试和测试FPGA设计的IP核。当设计者通过JTAG接口与FPGA芯片连接时，在Vivado的Verilog代码中添加VIO IP核，就可以让设计者与FPG…...
使用knn算法对iris数据集进行分类
程序功能 使用 scikit-learn 库中的鸢尾花数据集（Iris dataset），并基于 KNN（K-Nearest Neighbors，K近邻）算法进行分类，最后评估模型的准确率。 代码 from sklearn import datasets# 加载鸢尾…...
GEE Shapefile 格式转换 GeoJSON
在地理信息系统（GIS）领域，数据格式之间的转换是一项常见的需求。例如，将 Shapefile 格式转换为 GeoJSON 格式，对于上传数据到 Google Earth Engine (GEE) 尤其有用。本文将通过一个 Python 脚本的示例，实现…...
从kaggle竞赛零基础上手CV实战（Deepfake检测）
关注B站可以观看更多实战教学视频：hallo128的个人空间 从kaggle竞赛零基础上手CV实战 从kaggle竞赛零基础上手CV实战（Deepfake检测） 目录 从kaggle竞赛零基础上手CV实战（Deepfake检测）背景介绍学习地址课程大纲课程特色…...
Linux cat命令详解使用：高效文本内容管理
cat是 Linux 中最常用的命令之一，主要用于查看文件内容、合并文件以及重定向输出。它可以一次性显示文件内容，也可以将多个文件的内容串联显示出来。 基本语法 cat [选项] [文件...]常用参数选项 -n：为输出的每一行添加行号。-b࿱…...
YOLOv9改进系列，YOLOv9颈部网络SPPELAN替换为FocalModulation
摘要 焦点调制网络（简称FocalNets），其中自注意力（SA）完全由焦点调制模块取代，用于在视觉中建模标记交互。焦点调制包括三个组件：（i）焦点情境化，通过一堆深度卷积层实现，从短到长范围编码视觉上下文，（ii）门控聚合，选择性地将上下文聚集到每个查询标记的调制器中…...
圆环加载效果
效果预览 代码实现 from PyQt5.QtCore import QSize, pyqtProperty, QTimer, Qt, QThread, pyqtSignal from PyQt5.QtGui import QColor, QPainter from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QPushButton, QVBoxLayout, QLabel, QGridLayoutclass Cir…...
leetcode - 分治思想
分治 - 快排 这里快排我们统一使用 数组分三块 和 随机产生基准值的方法实现排序 数组分三块: . - 力扣（LeetCode） 整个思想即将数组按照基准值分为三个区间 , 具体实现: 三指针实现. 遍历指针 , 左区间右边界指针 , 右区间左边界指针 class Solutio…...
Java面试题·解释题·单例模式、工厂模式、代理模式部分
系列文章目录 Java面试题解释题JavaSE部分 Java面试题解释题框架部分 Java面试题解释题单例模式、工厂模式、代理模式部分 文章目录 系列文章目录前言一、设计模式1. 单例模式1.1 单例模式的定义1.2 单例模式的实现方法 2. 工厂模式2.1 工厂模式的定义2.2 工厂模式的实现方法2…...
如何编写智能合约——基于长安链的Go语言的合约开发
场景设计：文件存证系统 在数字化时代，文件存证和版本追踪变得越来越重要。设想一个场景：在一个法律事务管理系统中，用户需要提交和管理各种文件的版本记录，以确保每个文件在不同时间点的状态可以被准确追踪。文件可能经…...
【PHP代码审计】PHP基础知识
🌝博客主页：菜鸟小羊 💖专栏：Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 php简介 php是什么？ php（全称：Hypertext Preprocessor，即超文本预处理器&…...
大模型笔记03--快速体验dify
大模型笔记03--快速体验dify 介绍部署&测试部署 dify测试dify对接本地ollama大模型对接阿里云千问大模型在个人网站中嵌入dify智能客服 注意事项说明 介绍 Dify 是一款开源的大语言模型(LLM) 应用开发平台。它融合了后端即服务（Backend as Service）…...
Linux常用命令以及操作技巧
🌏个人博客主页：意疏-CSDN博客 希望文章能够给到初学的你一些启发～ 如果觉得文章对你有帮助的话，点赞 关注 收藏支持一下笔者吧～ 阅读指南： 开篇说明帮助命令常见的七个linux操作终端实用的技巧跟文件目录…...
C语言 | Leetcode C语言题解之题409题最长回文串
题目： 题解： int longestPalindrome(char * s) {int c[128]{0},ret0;for(int i0;i<strlen(s);i){c[s[i]];}for(int i0;i<128;i){retc[i]-c[i]%2;}return ret(ret!strlen(s)); }...
FreeSql 全面指南：从基础到高级实战，深入解析读写分离与导航属性
FreeSql 使用详解：从入门到高级 FreeSql 是一个开源的、轻量级的 ORM 框架，它为 .NET 开发人员提供了丰富的功能，包括 CRUD 操作、读写分离、多租户、导航属性支持等。相比于 Entity Framework Core，FreeSql 在性能和特性上有一些…...
深度学习之微积分预备知识点
极限（Limit） 定义：表示某一点处函数趋近于某一特定值的过程，一般记为 极限是一种变化状态的描述，核心思想是无限靠近而永远不能到达 公式： 表示 x 趋向 a 时 f(x) 的极限。 知识点口诀解释极限的存在左…...
DS4Windows：突破手柄限制，打造跨平台游戏控制体验
DS4Windows：突破手柄限制，打造跨平台游戏控制体验 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 在PC游戏世界中，手柄兼容性一直是玩家面临的主要障碍…...
Vin象棋：基于Yolov5的中国象棋智能视觉辅助系统，重新定义数字化对弈体验
Vin象棋：基于Yolov5的中国象棋智能视觉辅助系统，重新定义数字化对弈体验 【免费下载链接】VinXiangQi Xiangqi syncing tool based on Yolov5 / 基于Yolov5的中国象棋连线工具 项目地址: https://gitcode.com/gh_mirrors/vi/VinXiangQi 在数字化对…...
告别卡顿！Windows播放器为何需要LAV Filters解码器加持？
告别卡顿！Windows播放器为何需要LAV Filters解码器加持？ 【免费下载链接】LAVFilters LAV Filters - Open-Source DirectShow Media Splitter and Decoders 项目地址: https://gitcode.com/gh_mirrors/la/LAVFilters 你是否曾经遇到过这样的尴尬时…...
疑似 GPT-6 曝光! OpenAI 联合创始人亲口爆料 Spud 新一代AI模型，并且拥有“大模型气味”！网友评论：它是第一个真正会“思考”的型号！
Spud ，中文直译过来是“土豆”，这个命名方式也让小编想到了OpenAI 当时的 Strawberry (草莓)后来被命名为o1系列，那么，Spud 会是下一个o1吗？昨天，OpenAI总裁Greg Brockman在Big Technology Podcast上&#…...
Unity资源提取实战指南：5步搞定游戏资源修改与处理
Unity资源提取实战指南：5步搞定游戏资源修改与处理 【免费下载链接】UABEA c# uabe for newer versions of unity 项目地址: https://gitcode.com/gh_mirrors/ua/UABEA 对于Unity游戏爱好者和开发者来说，资源提取和编辑一直是技术难题。当你想要修…...
关于初次学习的c语言心得
我是一名大一下的学生，双非二本，因为一些原因休学了两年，现在正在努力学习c语言目标成为公司里面所谓的精通编程，学习c语言的过程每天坚持三小时以上，希望能进入像京东，华为等公司，我也想挣钱买…...
COMSOL 6.1版本皮秒多脉冲激光烧蚀模型：双温变形几何烧蚀模拟系统——电子晶格温度清晰解...
COMSOL 6.1版本 皮秒多脉冲激光烧蚀模型 模型内容：涉及双温模型，变形几何，烧蚀，皮秒脉冲热源，电子、晶格温度 优势：模型注释清晰明了，各个情况都有涉及可参考性极强，可以修改&#x…...
数字人形象哪里找？lite-avatar形象库150+角色免费使用体验
数字人形象哪里找？lite-avatar形象库150角色免费使用体验 1. 数字人形象获取的痛点与解决方案 在开发数字人应用时，寻找合适的数字人形象往往是第一个拦路虎。传统方式需要自己收集数据、训练模型，这个过程既耗时又耗力，对很多开…...
GHelper完整指南：为华硕笔记本卸载臃肿控制软件的最佳替代方案
GHelper完整指南：为华硕笔记本卸载臃肿控制软件的最佳替代方案 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, S…...
Phi-4-mini-reasoning推理能力展示：多步分析题目的简洁结论生成效果
Phi-4-mini-reasoning推理能力展示：多步分析题目的简洁结论生成效果 1. 模型介绍 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型，特别擅长处理需要多步分析的题目。与通用聊天模型不同，它被设计用来解决数学题、逻辑题等需要严谨…...