今天我要和大家分享的是一个动手小demo，制作一个简易版的网易云邮箱登录页面，一起来从零实现页面布局，并进行数据接口请求。话不多说，我们先来看看代码效果，小伙伴们可以先运行玩一玩喔😘~
还有一个好玩的实现B站视频弹幕demo，小伙伴们也可以试试喔😘~
实现各视频平台好玩的🔥弹幕🔥发送效果 - 掘金 (juejin.cn)
前言
由于小米露我没有服务器去部署项目接口，所以上面为了让大家看到效果，暂且写的是静态的数据。如果是平时自己写小demo的话，我们可以把自己的电脑当作一台服务器来运行接口。所以下面向大家演示的话，我也是通过向服务器发起接口请求，获取到数据，从而来完成页面的展示。
服务器接口代码
下面先和大家分享接口文件代码，以及如何将它在我们自己的电脑上运行起来，需要完成以下步骤：
1、创建一个文件夹，在里面创建一个
app.js文件，文件里面为下面代码。
2、在文件夹目录下，打开终端，执行项目初始化命令npm init -y
3、再执行npm i命令
4、执行命令npm i express@4.17.1，安装特定版本的express
5、执行命令npm i cors@2.8.5，安装特定版本的cors，解决跨域问题
6、最后执行node app.js，启动服务器项目接口
// 导入express
const express = require('express');
const app = express();
const router = express.Router();
//解决跨域问题
const cors = require('cors');
app.use(cors())
//登录接口
const userRouter = router.get('/login', (req, res) => {
const { username, password } = req.query
//定义邮箱校验规则
const rules = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (rules.test(username)) {
res.send ({
status: 200,
message: '登录成功'
})
} else {
res.send({
status: 0,
message: '邮箱或密码错误'
})
}
})
app.use(userRouter)
//在端口号520运行接口
app.listen(520,()=>{
console.log('服务器在http://127.0.0.1:520启动成功！');
})
当看到以下结果时，我们的服务器接口就启动成功啦~让它在后台运行，我们新建一个项目继续coding叭～
html代码
页面较为简单，所以整体的html代码还是比较简短的，头部左边有一个返回的键，中间logo和文字；页面中间还有两个输入框，下面一个登录按钮和文字，以及头部位置的弹框和文字信息。
<body>
<div class="header">
<img src="./返回.png" class="iconfont1">
<div class="logo">
<img src="./图标.png" class="iconfont2">
<span class="tittle">网易云音乐</span>
</div>
</div>
<div class="content">
<input type="text" class="inp" placeholder="登录邮箱" id="email">
<input type="password" class="inp" placeholder="密码" id="password">
</div>
<div class="end">
<button class="btn" disabled>登录</button>
<p>重设密码</p>
</div>
<div class="dialog"> //弹框
<span class="message"></span> //登录提示词
</div>
</body>
CSS代码
为了尽可能还原网易云邮箱登录页，还是写了不少css代码。通过引入css代码，完成静态页面的布局美化。同时为后续的JS代码操作做铺垫作用。
*{
margin: 0;
padding: 0;
}
.header{
height: 80px;
position: relative;
}
.logo{
position: absolute;
top:0;
left:50%;
transform: translate(-50%);
}
.iconfont1{
height: 30px;
width: 30px;
margin: 25px 10px;
}
.iconfont2{
border-radius: 50%;
height: 20px;
width: 20px;
/* 让头部logo和文字居中对齐 */
vertical-align:middle;
}
.tittle{
font-family: 'Times New Roman', Times, serif;
font-size: 10px;
line-height: 80px;
}
.content{
margin-top: 50px;
text-align: center;
}
.content .inp{
width: 210px;
height: 50px;
margin: 10px 0;
border-radius: 8px;
border: none;
background-color: rgb(241, 241, 241);
padding-left: 25px;
}
/* 改变input框中placeholder属性的文字颜色 */
.content input::placeholder {
color: rgb(172, 172, 172);
}
/* input框聚焦的样式 */
.content input:focus {
border: 0;
outline: 1px solid rgb(236, 236, 236);
box-shadow: 1px 1px 10px 1px rgb(225, 225, 225);
}
.end{
margin-top: 5px;
text-align: center;
}
.end .btn{
border-radius: 30px;
margin: 15px 0;
width: 230px;
height: 50px;
border: none;
background-color: #ffcdcd;
color: rgb(228, 228, 228);
transition: all .3s;
}
.end p{
color: rgb(56, 125, 254);
font-size: 13px;
font-family: 'Times New Roman', Times, serif;
}
/* 用来控制登录按钮变红的样式 */
.end .active{
background-color: #f60000;
}
.dialog{
/* 固定定位 */
position: fixed;
height: 40px;
background-color: rgb(255, 255, 255);
top: 20px;
/* 平移居中 */
left: 50%;
transform: translate(-50%);
border-radius: 20px;
display: flex;
align-items: center;
outline: 1px solid rgb(236, 236, 236);
box-shadow: 1px 1px 10px 1px rgb(225, 225, 225);
opacity: 0;
transition: all 0.7s;
/* 开始将弹窗隐藏 */
visibility: hidden;
}
/* 弹窗信息样式 */
.message{
background-size: contain;
background-repeat: no-repeat;
background-position: 18px 0;
padding: 0 18px 0 38px;
font-size: 13px;
font-family: 'Times New Roman', Times, serif;
}
/* 登录失败的样式 */
.error{
background-image: url(./错误.png);
color: #ff0303;
}
/*
登录成功的样式 */
.right{
background-image: url(./正确.png);
color: rgb(0, 162, 0);
}
主要的核心操作代码还是在js代码里面，我们继续看。
JS代码
通过JS，要实现动态监听两个input输入框的值，只有当两个输入框都不为空的时候，更改登录按钮样式，将其变红，并且从开始的不可点击状态变为可点击状态。在成功点击登录按钮后，向服务器接口发送GET数据请求获取返回数据，根据返回数据，前端页面作出相应的提示，若登入失败，给弹窗添加error类样式，登录成功则添加right类样式，并将服务器返回的文本信息写在页面弹窗文本里展现出来。同时，点击登录按钮后，应立马禁用登录按钮，实现节流效果，避免用户多次点击向服务器多次请求，在弹窗显示2s后，将其消失隐藏，并且将登录按钮更改回可点击状态。
const email = document.getElementById("email");
const password = document.getElementById("password");
const btn = document.querySelector('.btn')
const dialog = document.querySelector('.dialog')
const message = document.querySelector('.message')
let Isemail = false;
let Ispassword = false;
let addclass = null;
//实现动态监听两个input输入框的值
//当邮箱有值时，Isemail为true，同时调用show方法
//当密码有值时，Ispassword为true，同时调用show方法
email.addEventListener('input', (e) => {
Isemail = e.target.value ? true : false
show()
})
password.addEventListener('input', (e) => {
Ispassword = e.target.value ? true : false
show()
})
//登录按钮点击事件
btn.addEventListener('click', () => {
const $username = email.value
const $password = password.value
//通过fetch方法向我们刚刚后台运行的服务器接口地址发送请求
//并将登录的数据通过url地址传给服务器
fetch(`http://127.0.0.1:520/login?username=${$username}&&password=${$password}`).then(data =>
data.json()).then(res => {
//服务器通过我们发送过去的请求数据作出数据回应
//res就是服务器返回的数据
//用户点击登录后，立马禁用点击，防止多次点击多次请求
btn.disabled = "true"
//通过透明度过渡，实现缓缓出现的效果
dialog.style.opacity = 1
//显示弹窗
dialog.style.visibility = 'visible'
//根据服务器返回的数据，将其message信息写入弹窗文本
message.innerHTML = res.message
// 移除弹窗文本上次的类名属性
if(message.classList.contains(addclass))
//根据返回的状态码，给弹窗文本添加不同的类名
message.classList.remove(addclass)
addclass = res.status === 200 ? 'right' : 'error'
//登录成功添加right类，否则添加error类
message.classList.add (addclass)
//2s后，控制弹窗消失
setTimeout(()=>{
//实现弹窗缓缓消失的效果
dialog.style.opacity = 0
//2s后将按钮改回可点击状态
btn.disabled = ""
//将弹窗隐藏
dialog.style.visibility = 'hidden'
},2000)
})
})
function show(){
//邮箱和密码都不为空，给登录按钮添加active类
//按钮变红，并且变为可点击状态
if(Isemail && Ispassword) {
btn.classList.add('active')
btn.disabled = ""
}
else{
//否则移除变红状态，禁用登录按钮
if(btn.classList.contains('active'))
btn.classList.remove('active');
btn.disabled = "true"
}
}
总结
到这里，所有代码就全部都写完啦～通过使用html,css和js代码便实现了一个简易版的网易云邮箱登录页面。如果小伙伴们有什么问题或者更好的方法，欢迎评论喔😊😘~
如果觉得文章对您有所帮助的话，麻烦给小米露点点关注，点点赞咯😘，有问题欢迎各位小伙伴评论喔😊~
这是本人的gitee仓库地址：gitee.com/xiaomi-dew/… 。写的各项目代码源码，学习代码和各种资源都在里面啦~如果觉得还不错的话，可以给我的小仓库也点点Star喔😍😍😍 ~
