当前位置：首页 > article >正文

node.js+Koa框架+MySQL实现注册登录

article 2024/9/26 3:32:04

完整视频展示：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); // 显示登录成功的消息
                
                // 存储昵称到 sessionStorage
                sessionStorage.setItem('nickname', username); // 使用登录时的用户名作为昵称
                
                // 重定向到新页面
                setTimeout(() => {
                    window.location.href = 'after.html';
                }, 900); // 延迟900毫秒后重定向
            } else {
                alert(response.data); // 显示登录失败的消息
            }
        } catch (error) {
            alert(error.response.data); // 显示服务器返回的错误信息
        }
    });
});

查看全文

http://www.kler.cn/news/307491.html