本文使用创作助手。
在register.html中添加一个用于注册的表单，其中包含用户名和密码字段：
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<style>
body {
background-color: #f1f1f1;
}
form {
background-color: #ffffff;
width: 300px;
padding: 20px;
margin: 100px auto;
border-radius: 5px;
text-align: center;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<form action="/register" method="post">
<h1>Register</h1>
<input type="text" name="username" placeholder="Username" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="submit" value="Register">
</form>
</body>
</html>
在app.py中添加路由和处理函数来处理注册逻辑，并在beautiful_page.html中添加相关链接：
from flask import Flask, render_template, request, redirect
app = Flask(__name__)
def is_user_logged_in():
# 检查用户是否已登录的逻辑
# 返回True表示已登录，返回False表示未登录
# 这里我们假设用户已登录
return True
@app.route('/')
def login():
if is_user_logged_in():
return redirect('/beautiful_page')
return render_template('login.html')
@app.route('/register', methods=['POST'])
def register():
username = request.form['username']
password = request.form['password']
# 处理注册逻辑，这里我们简单将注册的用户名和密码存储在一个变量中
registered_users = [{'username': username, 'password': password}]
return redirect('/beautiful_page')
@app.route('/beautiful_page')
def beautiful_page():
if not is_user_logged_in():
return redirect('/register')
return render_template('beautiful_page.html')
if __name__ == '__main__':
app.run()
在beautiful_page.html中添加一个<a>标签，用于在用户未登录时跳转到注册页面：
<!DOCTYPE html>
<html>
<head>
<title>Beautiful Page</title>
<style>
body {
background-color: #f1f1f1;
background-image: url("background.jpg");
background-size: cover;
}
h1 {
color: blue;
}
img {
display: none;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>Welcome to Beautiful Page!</h1>
<div id="image-container"></div>
<audio controls autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<p>This is a beautiful page with music and image slideshow.</p>
{% if not is_user_logged_in() %}
<a href="/register">Register here</a>
{% endif %}
<script>
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片文件名列表
var currentImageIndex = 0; // 当前显示的图片索引
function showNextImage() {
var imageContainer = document.getElementById('image-container');
imageContainer.innerHTML = ''; // 清空容器中的内容
var image = document.createElement('img');
image.src = images[currentImageIndex];
imageContainer.appendChild(image);
currentImageIndex = (currentImageIndex + 1) % images.length; // 更新当前图片索引
}
setInterval(showNextImage, 2000); // 每隔2秒调用一次showNextImage函数
</script>
</body>
</html>
现在，当用户未登录时访问http://127.0.0.1:5000，将会自动跳转到注册页面进行注册。注册成功后用户将被重定向到美观的页面。