效果图（完整代码在后面）：
目录
- 步骤
- 一、新建一个 HTML 项目
- 二、创建基本结构
- 三、使用 CSS 美化页面
- 四、添加交互功能
在 Web 开发中，登录页面是最基础也是最常见的页面之一。对于想要成为前端开发工程师的朋友来说，掌握如何制作一个简洁美观的登录页面是必不可少的技能。本篇教程将手把手教你如何使用 HTML、CSS 和 JavaScript（以及 Vue.js）构建一个具有登录、注册、找回密码和验证码登录功能的页面。
一、新建一个 HTML 项目
首先，我们需要创建一个新的 HTML 文件。你可以使用任何你喜欢的代码编辑器，如 VSCode、Sublime Text 或 WebStorm。在你的项目文件夹中创建一个名为 index.html 的文件，并输入以下基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
</body>
</html>
这段代码是一个标准的 HTML 页面结构，包含了 DOCTYPE 声明、语言属性、字符编码和标题。
二、创建基本结构
接下来，我们将在 <body> 标签中添加页面的基本结构，包括登录、注册和找回密码的表单。
<body>
<div id="app" class="container">
<!-- 登录表单 -->
<form v-if="currentForm === 'login'" @submit.prevent="login">
<!-- 表单内容 -->
</form>
<!-- 注册表单 -->
<form v-else-if="currentForm === 'register'" @submit.prevent="register">
<!-- 表单内容 -->
</form>
<!-- 找回密码表单 -->
<form v-else-if="currentForm === 'forgotPassword'" @submit.prevent="resetPassword">
<!-- 表单内容 -->
</form>
<!-- 切换表单链接 -->
<div class="switch-form">
<!-- 链接内容 -->
</div>
</div>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 编写 Vue 实例 -->
<script>
new Vue({
el: '#app',
data: {
currentForm: 'login', // 当前显示的表单
// 其他数据
},
methods: {
// 方法
}
});
</script>
</body>
在这里，我们使用了 Vue.js 来管理页面的状态和交互。通过 v-if 指令，我们可以根据 currentForm 的值来显示不同的表单。
三、使用 CSS 美化页面
为了使页面更加美观，我们需要添加一些 CSS 样式。在 <head> 标签中添加 <style> 标签，编写我们的样式：
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 750px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #333;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #dfe3e8;
border-radius: 4px;
font-size: 14px;
}
input[type="submit"] {
width: 100%;
padding: 12px;
background-color: #66a6ff;
border: none;
border-radius: 4px;
color: #fff;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #559af0;
}
.switch-form, .forgot-password {
text-align: center;
margin-top: 15px;
}
.switch-form a, .forgot-password a {
color: #66a6ff;
text-decoration: none;
}
.switch-form a:hover, .forgot-password a:hover {
text-decoration: underline;
}
.verification-code {
position: relative;
}
.verification-code button {
position: absolute;
right: 10px;
top: 32px;
padding: 6px 10px;
background-color: #66a6ff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
}
.verification-code button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
这些样式使得我们的表单看起来更加专业和友好。
四、添加交互功能
现在，我们来完善 Vue.js 的部分，添加交互功能和数据绑定。在 <script> 标签中，更新 Vue 实例：
<script>
new Vue({
el: '#app',
data: {
currentForm: 'login', // 当前显示的表单：login, register, forgotPassword
loginMethod: 'password', // 登录方式：password, code
loginData: {
username: '',
password: '',
code: '',
rememberMe: false
},
registerData: {
username: '',
email: '',
password: ''
},
forgotData: {
email: '',
code: '',
password: ''
},
countdown: 0, // 登录验证码倒计时
forgotCountdown: 0 // 找回密码验证码倒计时
},
methods: {
switchForm(form) {
this.currentForm = form;
this.clearData();
},
toggleLoginMethod() {
this.loginMethod = this.loginMethod === 'password' ? 'code' : 'password';
this.loginData.password = '';
this.loginData.code = '';
},
login() {
// 登录逻辑
if (this.loginMethod === 'password') {
alert(`用户名：${this.loginData.username}\n密码：${this.loginData.password}`);
} else {
alert(`用户名：${this.loginData.username}\n验证码：${this.loginData.code}`);
}
},
register() {
// 注册逻辑
alert(`用户名：${this.registerData.username}\n邮箱：${this.registerData.email}\n密码：${this.registerData.password}`);
},
resetPassword() {
// 重置密码逻辑
alert(`邮箱：${this.forgotData.email}\n验证码：${this.forgotData.code}\n新密码：${this.forgotData.password}`);
},
sendLoginCode() {
if (this.countdown === 0) {
alert('验证码已发送到您的手机！');
this.countdown = 60;
const interval = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(interval);
}
}, 1000);
}
},
sendForgotCode() {
if (this.forgotCountdown === 0) {
alert('验证码已发送到您的邮箱！');
this.forgotCountdown = 60;
const interval = setInterval(() => {
if (this.forgotCountdown > 0) {
this.forgotCountdown--;
} else {
clearInterval(interval);
}
}, 1000);
}
},
clearData() {
// 清空所有表单数据
this.loginData = { username: '', password: '', code: '', rememberMe: false };
this.registerData = { username: '', email: '', password: '' };
this.forgotData = { email: '', code: '', password: '' };
this.countdown = 0;
this.forgotCountdown = 0;
}
}
});
</script>
通过这些代码，我们实现了以下功能：
- 表单切换：可以在登录、注册、找回密码之间切换。
- 登录方式切换：在密码登录和验证码登录之间切换。
- 倒计时功能：发送验证码后，按钮进入倒计时，防止重复发送。
- 数据绑定：输入框的数据与 Vue 实例的数据同步。
完整代码
将以上部分组合在一起，得到完整的代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<!-- 样式部分 -->
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 750px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #333;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #dfe3e8;
border-radius: 4px;
font-size: 14px;
}
input[type="submit"] {
width: 100%;
padding: 12px;
background-color: #66a6ff;
border: none;
border-radius: 4px;
color: #fff;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #559af0;
}
.switch-form, .forgot-password {
text-align: center;
margin-top: 15px;
}
.switch-form a, .forgot-password a {
color: #66a6ff;
text-decoration: none;
}
.switch-form a:hover, .forgot-password a:hover {
text-decoration: underline;
}
.verification-code {
position: relative;
}
.verification-code button {
position: absolute;
right: 10px;
top: 32px;
padding: 6px 10px;
background-color: #66a6ff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
}
.verification-code button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<div id="app" class="container">
<!-- 登录表单 -->
<form v-if="currentForm === 'login'" @submit.prevent="login">
<h1>登录</h1>
<div class="input-group">
<label for="login-username">用户名/邮箱：</label>
<input type="text" id="login-username" v-model="loginData.username" placeholder="请输入用户名/邮箱">
</div>
<!-- 根据登录方式切换密码输入或验证码输入 -->
<div class="input-group" v-if="loginMethod === 'password'">
<label for="login-password">密码：</label>
<input type="password" id="login-password" v-model="loginData.password" placeholder="请输入密码">
</div>
<div class="input-group verification-code" v-else>
<label for="login-code">验证码：</label>
<input type="text" id="login-code" v-model="loginData.code" placeholder="请输入验证码">
<button type="button" @click="sendLoginCode" :disabled="countdown > 0">
{{ countdown > 0 ? countdown + '秒后重发' : '获取验证码' }}
</button>
</div>
<div class="input-group">
<label>
<input type="checkbox" v-model="loginData.rememberMe"> 记住我
</label>
</div>
<input type="submit" value="登录">
<div class="forgot-password">
<a href="#" @click.prevent="switchForm('forgotPassword')">忘记密码?</a>
</div>
<div class="switch-form">
没有账号？<a href="#" @click.prevent="switchForm('register')">立即注册</a>
</div>
<!-- 登录方式切换 -->
<div class="switch-form">
<a href="#" @click.prevent="toggleLoginMethod">
使用{{ loginMethod === 'password' ? '验证码' : '密码' }}登录
</a>
</div>
</form>
<!-- 注册表单 -->
<form v-else-if="currentForm === 'register'" @submit.prevent="register">
<h1>注册</h1>
<div class="input-group">
<label for="register-username">用户名：</label>
<input type="text" id="register-username" v-model="registerData.username" placeholder="请输入用户名">
</div>
<div class="input-group">
<label for="register-email">邮箱：</label>
<input type="email" id="register-email" v-model="registerData.email" placeholder="请输入邮箱">
</div>
<div class="input-group">
<label for="register-password">密码：</label>
<input type="password" id="register-password" v-model="registerData.password" placeholder="请输入密码">
</div>
<input type="submit" value="注册">
<div class="switch-form">
已有账号？<a href="#" @click.prevent="switchForm('login')">立即登录</a>
</div>
</form>
<!-- 找回密码表单 -->
<form v-else-if="currentForm === 'forgotPassword'" @submit.prevent="resetPassword">
<h1>找回密码</h1>
<div class="input-group">
<label for="forgot-email">邮箱：</label>
<input type="email" id="forgot-email" v-model="forgotData.email" placeholder="请输入注册时使用的邮箱">
</div>
<div class="input-group verification-code">
<label for="forgot-code">验证码：</label>
<input type="text" id="forgot-code" v-model="forgotData.code" placeholder="请输入验证码">
<button type="button" @click="sendForgotCode" :disabled="forgotCountdown > 0">
{{ forgotCountdown > 0 ? forgotCountdown + '秒后重发' : '获取验证码' }}
</button>
</div>
<div class="input-group">
<label for="forgot-password">新密码：</label>
<input type="password" id="forgot-password" v-model="forgotData.password" placeholder="请输入新密码">
</div>
<input type="submit" value="重置密码">
<div class="switch-form">
记得密码？<a href="#" @click.prevent="switchForm('login')">立即登录</a>
</div>
</form>
</div>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 编写 Vue 实例 -->
<script>
new Vue({
el: '#app',
data: {
currentForm: 'login', // 当前显示的表单：login, register, forgotPassword
loginMethod: 'password', // 登录方式：password, code
loginData: {
username: '',
password: '',
code: '',
rememberMe: false
},
registerData: {
username: '',
email: '',
password: ''
},
forgotData: {
email: '',
code: '',
password: ''
},
countdown: 0, // 登录验证码倒计时
forgotCountdown: 0 // 找回密码验证码倒计时
},
methods: {
switchForm(form) {
this.currentForm = form;
this.clearData();
},
toggleLoginMethod() {
this.loginMethod = this.loginMethod === 'password' ? 'code' : 'password';
this.loginData.password = '';
this.loginData.code = '';
},
login() {
// 登录逻辑
if (this.loginMethod === 'password') {
alert(`用户名：${this.loginData.username}\n密码：${this.loginData.password}`);
} else {
alert(`用户名：${this.loginData.username}\n验证码：${this.loginData.code}`);
}
},
register() {
// 注册逻辑
alert(`用户名：${this.registerData.username}\n邮箱：${this.registerData.email}\n密码：${this.registerData.password}`);
},
resetPassword() {
// 重置密码逻辑
alert(`邮箱：${this.forgotData.email}\n验证码：${this.forgotData.code}\n新密码：${this.forgotData.password}`);
},
sendLoginCode() {
if (this.countdown === 0) {
alert('验证码已发送到您的手机！');
this.countdown = 60;
const interval = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(interval);
}
}, 1000);
}
},
sendForgotCode() {
if (this.forgotCountdown === 0) {
alert('验证码已发送到您的邮箱！');
this.forgotCountdown = 60;
const interval = setInterval(() => {
if (this.forgotCountdown > 0) {
this.forgotCountdown--;
} else {
clearInterval(interval);
}
}, 1000);
}
},
clearData() {
// 清空所有表单数据
this.loginData = { username: '', password: '', code: '', rememberMe: false };
this.registerData = { username: '', email: '', password: '' };
this.forgotData = { email: '', code: '', password: '' };
this.countdown = 0;
this.forgotCountdown = 0;
}
}
});
</script>
</body>
</html>
将完整代码保存为 index.html，在浏览器中打开，即可看到效果。
结语
通过本篇教程，我们学习了如何使用 HTML、CSS 和 Vue.js 构建一个功能完善的登录页面。这个页面不仅具有美观的界面，还包含了登录、注册、找回密码和验证码登录等常用功能。希望通过本次实践，大家对前端开发有了更深入的了解。
版权声明：本文为原创内容，转载请注明出处。
扫一扫
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
