本文使用创作助手。
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, sessionapp = Flask(__name__)
app.secret_key = 'secretkey'@app.route('/')
def index():if 'logged_in' in session:logged_in = session['logged_in']else:logged_in = Falsereturn 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'] = Truereturn redirect('/')@app.route('/register', methods=['POST'])
def register():username = request.form['username']password = request.form['password']# 在此处执行注册逻辑# ...# 注册成功后,自动进行登录session['logged_in'] = Truereturn redirect('/')if __name__ == '__main__':app.run()
在此示例中,我使用了 Flask 的会话(session)功能来跟踪用户的登录状态。当用户成功登录或注册后,会将登录状态保存到会话(session)中。在 HTML 文件中,只有当用户未登录时才显示登录和注册表单。否则,将显示用户已登录的内容。
确保将 HTML 文件保存为 index.html
,Python 文件保存为 app.py
。
运行 Python 应用程序(app.py
)后,您应该能够通过访问 http://localhost:5000
来访问具有登录验证和注册功能的网站,并且只有在成功登录后才能查看网站的内容。
请注意,这只是一个简单的示例,您需要根据您的实际需求来实现更复杂的登录验证和注册逻辑,并采取安全措施来保护用户的信息和隐私。