一个Python网站。-CSDN博客

本文链接：https://blog.csdn.net/bicart/article/details/135554696

本文使用创作助手。

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 来访问具有登录验证和注册功能的网站，并且只有在成功登录后才能查看网站的内容。

请注意，这只是一个简单的示例，您需要根据您的实际需求来实现更复杂的登录验证和注册逻辑，并采取安全措施来保护用户的信息和隐私。