陈随易

接上文，我们主要分享了搭建本地 Mysql 环境，使用数据库工具创建了我们需要的数据库和表结构，字段定义。

那么下一步，我们通过前后端联调功能，实现一个基本的登录注册。

html

<!-- /public/index.html 文件 -->
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>用户登录和注册</title>
        <link rel="stylesheet" type="text/css" href="./index.css" />
    </head>
    <body>
        <!-- 用于防止浏览器自动填充密码 -->
        <input type="password" clearable hidden autocomplete="new-password" style="display: none" />
        <div class="form">
            <div class="group">
                <div class="label">账号</div>
                <div class="value">
                    <input class="input username" type="input" placeholder="请输入用户名" />
                </div>
            </div>
            <div class="group">
                <div class="label">密码</div>
                <div class="value">
                    <input class="input password" type="input" placeholder="请输入密码" />
                </div>
            </div>
            <div class="submit">
                <div class="button login">登录</div>
                <div class="button register">注册</div>
            </div>
        </div>
    </body>
</html>

这是我们的登录注册页面的 HTML部分，值得一提的是，图中注释处，用于防止浏览器自动填充密码，是笔者试过多个方案，才得出的可以有效防止烦人的浏览器密码自动填充写法。

css

/* /public/index.css 文件 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}
body {
    font-size: 14px;
    .form {
        width: 300px;
        padding: 10px;
    }
    .group {
        margin-bottom: 15px;
    }
    .label {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .value {
        .input {
            height: 30px;
            border: 1px solid #ddd;
            padding: 0 10px;
            width: 100%;
        }
    }
    .submit {
        display: flex;
        justify-content: space-between;
    }
    .button {
        width: calc((100% - 10px) / 2);
        height: 34px;
        line-height: 34px;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #165dff;
        color: #fff;
        cursor: pointer;
        &:hover {
            background-color: #4080ff;
        }
    }
}

接下来页面的 CSS部分，新版浏览器已经支持 CSS 原生语法嵌套，所以，笔者也就直接用上了。

登录页效果

在控制台启动服务，访问对应的地址，页面展示效果就是这样的。

// 点击注册按钮
document.querySelector('.register').addEventListener('click', () => {
    const username = document.querySelector('.username').value;
    const password = document.querySelector('.password').value;
    const result = fetch('/api/userRegister', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify({
            username: username,
            password: password
        })
    });
});

// 点击登录按钮
document.querySelector('.login').addEventListener('click', () => {
    const username = document.querySelector('.username').value;
    const password = document.querySelector('.password').value;
    const result = fetch('/api/userLogin', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify({
            username: username,
            password: password
        })
    });
});

接着，写 JS 部份代码，功能就是点击注册按钮，向 /api/userRegister 接口发起请求，把我们的用户名和密码提交到接口端。

其中，我们用到了浏览器原生的 fetch 方法，这是传统的 ajax 的升级版，在较新版本的浏览器可以直接使用。

如果对于什么是 ajax？什么是 fetch？不了解的话，请查阅相关资料，或到问答群艾特笔者，本小册不再赘述。

还有个问题，就是代码案例，使用的是原生 JS 语法，关于为什么不用 Vue？为什么不用 React？

这个无所谓，笔者的这个教程，主要给大家讲清楚，说明白，Node.js 全栈开发的基本方法。

你要学习的，是全栈开发的思路，具体用什么技术，什么框架，到时候自己可以举一反三，水到渠成。

为了对 fetch 有一个整体的认识，以下是 fetch 所有属性值一览。

let promise = fetch(url, {
    method: 'GET', // 请求方法 POST, PUT, DELETE 等等。
    headers: {
        // 请求头参数
        'Content-Type': 'text/plain;charset=UTF-8'
    },
    body: undefined, // string, FormData, Blob, BufferSource, or URLSearchParams
    referrer: 'about:client', // or "" to send no Referer header,
    // or an url from the current origin
    referrerPolicy: 'strict-origin-when-cross-origin', // no-referrer-when-downgrade, no-referrer, origin, same-origin...
    mode: 'cors', // same-origin, no-cors
    credentials: 'same-origin', // omit, include
    cache: 'default', // no-store, reload, no-cache, force-cache, or only-if-cached
    redirect: 'follow', // manual, error
    integrity: '', // a hash, like "sha256-abcdef1234567890"
    keepalive: false, // true
    signal: undefined, // AbortController to abort request
    window: window // null
});

到了这一步，我们登录注册功能的前端部分，就完成十之八九了。

下一步，就是实现登录注册功能的接口部分。

// /apis/userRegister.js 文件
export default () => {
    return {
        code: 0,
        msg: '注册成功',
        data: {
            id: 1,
            name: 'chensuiyi',
            score: 100
        }
    };
};

会员内容

会员隐藏内容，共 [3014] 字。全文阅读地址👉https://sourl.cn/NM5H5m