简介
登录注册界面是我认为最难写的界面之一。原因在于：
1、它不是很规律，自由发挥的空间很大，同时想绘制出比较雅观的界面是比较困难的。需要用到大量的CSS。
2、登录注册不止有界面，还有输入框规则的制定
3、获取到数据，发送给后端的编写。
界面绘制
首先展示一下最后的成果：
我觉得还是比较美观的。
总体结构
可以看到就是左边插图右半边输入框的结构，比例协调。
左侧插图
这个还是比较容易的，其实是两幅图，一副左下角的蓝色纯色图，另一幅是从插画网站找到的主题色接近的图。拼接好位置。这里要用到CSS。
<img :src="bg" class="wave"/>
<div class="login-container">
<div class="img">
<img :src="bgimage" alt=""/>
</div>
右侧输入框
这个用了elementplus的输入框，但是远没有这么简单，重点还是CSS的编写。包括了两个输入框，登录等按钮，标题，以及上方图片。
<div class="login-form">
<img :src="ava" alt="" class="avatar"/>
<Motion>
<h2>联邦学习可视化平台</h2>
</Motion>
<el-form ref="ruleFormRef" :model="ruleForm" size="large" >
<Motion :delay="100">
<el-form-item prop="username">
<el-input clearable :input-style="{ 'user-select': 'none' }" v-model="ruleForm.username" :placeholder="useTologin" prefix-icon="User" >
<!-- <template #prefix> <el-icon class="el-input__icon"><Key /></el-icon> </template> -->
</el-input>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item prop="password">
<el-input clearable :input-style="{ 'user-select': 'none' }" show-password v-model="ruleForm.password" placeholder="密码" prefix-icon="Lock" />
</el-form-item>
</Motion>
<Motion :delay="250">
<el-form-item>
<div class="w-full h-20px flex justify-between items-center">
<el-checkbox v-model="checked">记住密码</el-checkbox>
<el-button type="text"> 忘记密码?</el-button>
</div>
<el-button class="w-full mt-4" size="default" type="primary" round @click="goLogin()" >
登录
</el-button>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item>
<div class="w-full h-20px flex justify-between items-center">
<el-button class="w-full mt-4" size="default" :disabled="useID" @click="usezhanghao()" >
账号登录
</el-button>
<el-button class="w-full mt-4" size="default" :disabled="!useID" @click="useshoujihao()" >
手机号登录
</el-button>
<el-button class="w-full mt-4" size="default" @click="handleRegist()" >
注册
</el-button>
</div>
</el-form-item>
</Motion>
CSS的编写
这个我觉得还是很难的。主要就是靠CSS实现了界面的绘制以及美化工作。
摘一些：
.wave {
position: fixed;
height: 100%;
left: 0;
bottom: 0;
z-index: -1;
}
.login-container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 18rem;
padding: 0 2rem;
}
.img {
display: flex;
justify-content: flex-end;
align-items: center;
}
.img img {
width: 500px;
}
.login-box {
display: flex;
align-items: center;
text-align: center;
}
.login-form {
width: 360px;
}
.avatar {
width: 350px;
height: 80px;
}
.login-form h2 {
text-transform: uppercase;
margin: 15px 0;
color: rgb(126, 118, 118);
font: bold 200% Consolas, Monaco, monospace;
}
@media screen and (max-width: 1180px) {
.login-container {
grid-gap: 9rem;
}
.login-form {
width: 290px;
}
.login-form h2 {
font-size: 2.4rem;
margin: 8px 0;
}
.img img {
width: 360px;
}
.avatar {
width: 280px;
height: 80px;
}
}
@media screen and (max-width: 968px) {
.wave {
display: none;
}
.img {
display: none;
}
.login-container {
grid-template-columns: 1fr;
}
.login-box {
justify-content: center;
}
}
</style> <style lang="scss" scoped> :deep(.el-input-group__append, .el-input-group__prepend) {
padding: 0;
}
</style>
保存密码时的钩子函数
如果有了已经登陆保存账号密码的session，那么无需输入:
mounted() {
this.ruleForm.username = window.localStorage.getItem("userId");
let pwdAccess = window.localStorage.getItem("pwdAccess");
if (pwdAccess) {
const data = JSON.parse(pwdAccess);
this.checked = data.remember;
this.ruleForm.password = data.password;
}
},
点击登录按钮后执行的函数
逻辑上就是先检查是否符合规则，然后用axios发给后端，判断是否登陆成功，根据结果执行相应的跳转操作。
goLogin() {
let label;
if (this.ruleForm.username === '' || this.ruleForm.password === '') {
ElMessage({
showClose: true,
message: '账号或密码为空',
type: 'warning',
})
} else {
if (this.$data.useID) {
label = 0
} else {
label = 1
}
}
axios({
url: '/api/core/login',
method: 'POST',
data: {
label: label,
account: this.ruleForm.username,
password: this.ruleForm.password,
}
}).then(resp => {
if (resp.data.label) {
// 登录成功
window.sessionStorage.setItem('token', 'true');
window.sessionStorage.setItem('userId', resp.data.account);
// 保存这次登录的用户账号
window.localStorage.setItem("userId", resp.data.account);
// 根据checked判断是否记住密码
if (this.checked) {
const pwdAccess = {
remember: this.checked,
password: this.ruleForm.password,
};
window.localStorage.setItem("pwdAccess", JSON.stringify(pwdAccess));
}
else {
const pwdAccess = {
remember: this.checked,
password: '',
};
window.localStorage.setItem("pwdAccess", JSON.stringify(pwdAccess));
}
// 跳转到主页
this.$router.push("/MainPage");
ElMessage({
showClose: true,
message: resp.data.result,
type: 'success',
})
} else {
// 登录失败
ElMessage({
showClose: true,
message: resp.data.result,
type: 'error',
})
}
})
},
总结
这个花了我好长时间，总的来说难点主要是界面的绘制。我对于界面还是比较满意的。收获满满。
文章评论