用Python Flask框架编写的登录页面示例

最新推荐文章于 2024-09-05 17:56:26 发布

原创最新推荐文章于 2024-09-05 17:56:26 发布 · 2.2k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#python #flask #后端

文章展示了如何利用Python的Flask框架创建一个基础的登录页面。通过安装Flask、编写路由处理函数和HTML模板，实现用户输入验证并展示登录成功或失败的信息。同时，还涉及到了CSS样式文件以美化页面。

部署运行你感兴趣的模型镜像

Python是一门非常强大的编程语言，可以用来编写各种应用程序，包括网站、桌面应用程序等。下面是一个用Python Flask框架编写的登录页面示例

首先，你需要安装Flask框架。请在命令行中输入以下命令进行安装：

pip install Flask

然后，你可以使用以下代码编写你的登录页面：

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        if username == 'admin' and password == 'admin':
            return redirect(url_for('success'))
        else:
            return render_template('login.html', error=True)
    else:
        return render_template('login.html', error=False)

@app.route('/success')
def success():
    return "登录成功！"

if __name__ == '__main__':
    app.run(debug=True)

然后，你需要创建一个名为login.html的模板文件，用来渲染登录页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    {% if error %}
        <div class="error">用户名或密码错误，请重新输入！</div>
    {% endif %}
    <div class="login-container">
        <h1>欢迎登录</h1>
        <form method="post">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" autofocus required>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
            <input type="submit" value="登录">
        </form>
    </div>
</body>
</html>

最后，你需要创建一个名为style.css的CSS文件来美化你的页面：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #f2f2f2;
    font-family: Arial, sans-serif;
}
.login-container {
    background: #fff;
    border-radius: 10px;
    padding: 50px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    max-width: 500px;
    margin: 100px auto;
    text-align: center;
}
h1 {
    font-size: 36px;
    margin-bottom: 30px;
    color: #555;
}
form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
label {
    font-size: 18px;
    color: #555;
    margin-top: 20px;
    display: block;
}
input[type="text"],
input[type="password"] {
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 5px;
    background: #f2f2f2;
    color: #555;
    width: 100%;
    margin-top: 10px;
}
input[type="submit"] {
    background: #555;
    color: #fff;
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    margin-top: 20px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}
input[type="submit"]:hover {
    background: #333;
}
.error {
    background-color: #f44336;
    color: #fff;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
}

你可以在程序所在目录下创建一个名为static的文件夹，将style.css文件放在其中。

最后，在命令行中输入以下命令启动应用程序：

python app.py

在浏览器中访问http://localhost:5000来查看你的登录页面了。

您可能感兴趣的与本文相关的镜像

Python3.10

Conda

Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本