本文使用创作助手。
HTML文件(index.html):
<!DOCTYPE html>
<html>
<head>
<title>bicart介绍</title>
<style>
body {
background-color: #f5f5f5;
background-image: url("/static/background_image.jpg");
background-size: cover;
background-position: center;
}
.nav {
background-color: #333;
overflow: hidden;
}
.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.slideshow-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.mySlides {
display: none;
}
.mySlides img {
width: 100%;
height: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.dot-container {
text-align: center;
}
.dot {
height: 10px;
width: 10px;
margin: 0 4px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
</style>
<script>
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 3000);
}
function currentSlide(n) {
slideIndex = n;
showSlides();
}
</script>
</head>
<body onload="showSlides()">
<div class="nav">
<a href="/">Home</a>
<a href="/login">Login</a>
<a href="/register">Register</a>
</div>
<h1>Welcome to bicart</h1>
<div class="slideshow-container">
<div class="mySlides">
<img src="/static/1.jpg">
</div>
<div class="mySlides">
<img src="/static/2.jpg">
</div>
<div class="mySlides">
<img src="/static/3.jpg">
</div>
<a class="prev" onclick="currentSlide(slideIndex - 1)">?</a>
<a class="next" onclick="currentSlide(slideIndex + 1)">?</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<span>这是一个文本</span>
<p>这是一个段落。</p>
<a href="/easter_egg">Easter Egg</a>
<audio src="/static/1.mp3" autoplay loop></audio>
<!-- Login form -->
{% if not logged_in %}
<form action="/login" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Login">
</form>
{% endif %}
<!-- Register form -->
{% if not logged_in %}
<form action="/register" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Register">
</form>
{% endif %}
</body>
</html>
Python代码(app.py):
from flask import Flask, render_template, request, redirect, session
app = Flask(__name__)
app.secret_key = 'secretkey'
@app.route('/')
def index():
if 'logged_in' in session:
logged_in = session['logged_in']
else:
logged_in = False
return render_template('index.html', logged_in=logged_in)
@app.route('/login', methods=['POST'])
def login():
username = request.form['username']
password = request.form['password']
# 在此处执行登录验证逻辑
# ...
# 如果登录成功,将登录状态保存到会话中
session['logged_in'] = True
return redirect('/')
@app.route('/register', methods=['POST'])
def register():
username = request.form['username']
password = request.form['password']
# 在此处执行注册逻辑
# ...
# 注册成功后,自动进行登录
session['logged_in'] = True
return redirect('/')
if __name__ == '__main__':
app.run()
在此示例中,我使用了 Flask 的会话(session)功能来跟踪用户的登录状态。当用户成功登录或注册后,会将登录状态保存到会话(session)中。在 HTML 文件中,只有当用户未登录时才显示登录和注册表单。否则,将显示用户已登录的内容。
确保将 HTML 文件保存为 index.html
,Python 文件保存为 app.py
。
运行 Python 应用程序(app.py
)后,您应该能够通过访问 http://localhost:5000
来访问具有登录验证和注册功能的网站,并且只有在成功登录后才能查看网站的内容。
请注意,这只是一个简单的示例,您需要根据您的实际需求来实现更复杂的登录验证和注册逻辑,并采取安全措施来保护用户的信息和隐私。