接上文,我们主要分享了搭建本地 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 原生语法嵌套,所以,笔者也就直接用上了。
在控制台启动服务,访问对应的地址,页面展示效果就是这样的。
js
// 点击注册按钮
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 所有属性值一览。
js
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
});
到了这一步,我们登录注册功能的前端部分,就完成十之八九了。
下一步,就是实现登录注册功能的接口部分。
js
// /apis/userRegister.js 文件
export default () => {
return {
code: 0,
msg: '注册成功',
data: {
id: 1,
name: 'chensuiyi',
score: 100
}
};
};
会员内容
会员隐藏内容,共 [3014] 字。全文阅读地址👉https://sourl.cn/NM5H5m