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) 的极限。 知识点口诀解释极限的存在左…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1
每日一言 生活的美好，总是藏在那些你咬牙坚持的日子里。 硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...