用bootstrap4和jq,写一个登录页面,不需要调用接口,前端校验,生成随机token,设置过期时间1个小时,在首页进行监听
时间: 2023-09-04 07:11:48 浏览: 52
好的,下面是一个简单的登录页面的代码,使用了 Bootstrap 4 和 jQuery,包括前端校验、生成随机 token、设置过期时间等功能。
HTML 代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-6">
<div class="card">
<div class="card-header text-center">
<h4>Login</h4>
</div>
<div class="card-body">
<form id="login-form">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function() {
// 表单提交事件
$('#login-form').submit(function(event) {
event.preventDefault(); // 阻止默认表单提交行为
// 前端校验用户名和密码是否为空
var username = $('#username').val();
var password = $('#password').val();
if (!username || !password) {
alert('Username and password are required');
return;
}
// 生成随机 token
var token = Math.random().toString(36).substr(2);
var expireTime = new Date().getTime() + 60 * 60 * 1000; // 设置过期时间为 1 小时后
// 将 token 和过期时间保存到 localStorage 中
localStorage.setItem('token', token);
localStorage.setItem('expireTime', expireTime);
// 跳转到首页
window.location.href = 'index.html';
});
// 在首页进行监听
var token = localStorage.getItem('token');
var expireTime = localStorage.getItem('expireTime');
if (token && expireTime && new Date().getTime() < expireTime) {
// token 有效,可以访问首页
console.log('Token is valid');
} else {
// token 已过期或不存在,跳转回登录页
console.log('Token is invalid');
localStorage.removeItem('token');
localStorage.removeItem('expireTime');
window.location.href = 'login.html';
}
});
</script>
</body>
</html>
```
在这个页面中,我们使用了 Bootstrap 4 的样式来美化界面,使用了 jQuery 来实现前端校验和监听功能。在表单提交时,我们先进行了简单的前端校验,判断用户名和密码是否为空,如果为空则弹出提示框。然后,我们生成了一个随机的 token,并将其和过期时间(一小时后)保存到了 localStorage 中。最后,我们跳转到了首页(假设首页为 `index.html`)。在首页中,我们进行了监听,判断 localStorage 中保存的 token 是否有效。如果有效,则可以访问首页;如果无效,则跳转回登录页(假设登录页为 `login.html`)。
注意,这个代码中的 token 是非常简单的随机字符串,实际应用中应该使用更为复杂且安全的 token。此外,这个代码中的 token 和过期时间都保存在了 localStorage 中,实际应用中可能需要使用更加安全的方式来保存这些信息。