只用HTML页创建login和homepage界面,用户输入用户名和密码,点击登录。若用户身份校验通过,利用response、request对象实现跳转到homepage界面,显示当前登录用户的用户信息。若用户身份校验不通过,提示用户用或密码错误。
时间: 2024-11-12 07:32:42 浏览: 24
使用Flask-Login实现用户登录和权限验证
要创建一个简单的HTML登录页面和主页,你可以按照以下步骤操作:
1. 创建`index.html` 登录页面:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form id="loginForm" action="check_login.php" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Login">
</form>
<div id="message" style="display:none; color:red;"></div>
</body>
</html>
```
在这个页面上,我们有一个表单,包含用户名和密码输入字段,以及提交按钮。当用户填写并提交表单时,数据会被发送到`check_login.php`。
2. 创建`check_login.php`文件处理表单验证和响应:
```php
<?php
session_start();
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
// 检查实际的用户认证逻辑,这里仅示例,应连接数据库检查
if ($username == 'admin' && $password == 'password') {
$_SESSION['user'] = $username;
header("Location: homepage.php");
exit;
} else {
echo '<script>document.getElementById("message").innerText = "Invalid username or password";</script>';
echo '<script>document.getElementById("message").style.display = "block";</script>';
}
}
?>
```
在PHP文件中,我们首先启动会话,然后检查请求是否为POST。如果匹配,从表单获取用户名和密码,并进行身份验证。如果验证成功,将用户名保存到会话中,并使用`header()`函数实现页面重定向。如果验证失败,给出错误消息。
3. 创建`homepage.php` 显示用户信息的主页:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Homepage - Welcome, <?php echo isset($_SESSION['user']) ? htmlspecialchars($_SESSION['user']) : ''; ?></title>
</head>
<body>
<h2>Welcome to Homepage!</h2>
<?php
if (isset($_SESSION['user'])) {
echo "You are logged in as: " . htmlspecialchars($_SESSION['user']);
} else {
echo "<p>You are not logged in.</p>";
}
?>
</body>
</html>
```
这个页面在用户已登录的情况下显示欢迎信息和用户名。如果没有登录,会提示用户未登录。
阅读全文