--- theme: smartblue --- 今天我要和大家分享的是一个动手小demo，制作一个简易版的网易云邮箱登录页面，一起来从零实现页面布局，并进行数据接口请求。话不多说，我们先来看看代码效果，小伙伴们可以先运行玩一玩喔😘~
> 还有一个好玩的实现B站视频弹幕demo，小伙伴们也可以试试喔😘~
> [实现各视频平台好玩的🔥弹幕🔥发送效果 - 掘金 (juejin.cn)](https://juejin.cn/post/7301910888943452171) [jcode](https://code.juejin.cn/pen/7303487544727961639) ## 前言由于小米露我没有服务器去部署项目接口，所以上面为了让大家看到效果，暂且写的是静态的数据。如果是平时自己写小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`，启动服务器项目接口 ```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和文字；页面中间还有两个输入框，下面一个登录按钮和文字，以及头部位置的弹框和文字信息。 ```html

重设密码

//弹框 //登录提示词

``` ## CSS代码为了尽可能还原网易云邮箱登录页，还是写了不少css代码。通过引入css代码，完成静态页面的布局美化。同时为后续的JS代码操作做铺垫作用。 ```css *{ 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后，将其消失隐藏，并且将登录按钮更改回可点击状态。 ```js 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仓库地址：https://gitee.com/xiaomi-dew/coding-dream.git 。写的各项目代码源码，学习代码和各种资源都在里面啦~如果觉得还不错的话，可以给我的小仓库也点点Star喔😍😍😍 ~