今天我要和咱们共享的是一个动手小demo，制造一个简易版的网易云邮箱登录页面，一起来从零完成页面布局，并进行数据接口恳求。话不多说，咱们先来看看代码作用，小伙伴们能够先运转玩一玩喔~
前语
由于小米露我没有服务器去部署项目接口，所以上面为了让咱们看到作用，暂且写的是静态的数据。假如是平常自己写小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喔 ~
