PyCharm实战：手把手教你用Flask打造登录界面（从环境搭建到安全部署的完整开发保姆教程 | 附源码）

HAHA（立志有钱版）

已于 2025-03-18 14:27:48 修改

阅读量1.2k

点赞数 14

文章标签： pycharm flask ide

于 2025-03-18 11:24:49 首次发布

本文链接：https://blog.csdn.net/weixin_66321657/article/details/146258717

版权

哈喽哇，记录一下我使用Flask写登陆界面的过程，登陆界面用来做毕设滴，希望能对看到的人有帮助。超级保姆级教程

编译器：Pyharm

Flask 是一个用 Python 编写的轻量级 Web 应用框架，详细教程见：Flask 教程 | 菜鸟教程

步骤 1：创建新项目

打开PyCharm → 点击「New Project」
选择模板：
- 设置项目位置（Location）建议使用D盘，专门设置一个文件来储存项目
- 选择Python解释器（建议使用Virtualenv）
- 其他设置保持默认
点击「Create」创建按钮

步骤 2：安装依赖包

方法一：使用终端（本人使用，但失败，没装完整）

打开PyCharm底部终端（Terminal）
输入以下命令：

pip install flask flask-wtf

安装成功会显示successfully巴拉巴拉

ps：安装完后，查看编辑器是否完成拥有flask，flask-wtf，和wtforms

查看方法：点击界面右下角，打开py解释器-----解释器设置，或者使用方法，打开py解释器，然后查看。最终需要有以下三个包！！

方法二：使用图形界面（推荐）

点击 File（文件） → Settings（设置） → Project（项目） → Python Interpreter（Py编译器）
点击「+」号添加包
搜索并安装：
- flask
- flask-wtf
- WTForms

步骤 3：创建项目结构

your_project/
├── app.py          # 应用主程序
├── templates/      # 模板文件目录
│   └── login.html  # HTML 模板文件
└── static/         # 静态资源目录
    └── style.css   # CSS 样式文件

具体操作：

右键项目根目录 → New → Python File → 命名为 app.py（主文件，启动项目需要启动该文件。该文件名可以自由命名，不要命跟flask.py这种跟库相冲突的名字）【ps：也可以直接使用系统直接生成的main.py，默认这个为主文件，都一样】
右键项目根目录 → New → Directory（目录） → 命名为 templates（templates文件夹，存放html模板文件）【ps：目录名必须为 templates（Flask 强制约定）】
在 templates 目录中新建 html文件→login.html（登陆界面）
右键项目根目录 → New → Directory （目录）→ 命名为 static（static文件夹用于存放各种静态文件，css、js、图片，等等）【ps：目录名必须为 static（Flask 强制约定）】
在 static 目录中新建文件，设置为css文件，命名为style.css

步骤 4：复制代码

将对应的代码分别粘贴到对应文件：

app.py → 主程序代码

# app.py
from flask import Flask, render_template, request, redirect, url_for, session, flash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'  # 生产环境中应使用更安全的随机值

# 模拟用户数据库（实际项目中应使用数据库并加密存储密码）
users = {
    'admin': {'password': 'secret'},
    'user1': {'password': 'password123'}
}

class LoginForm(FlaskForm):
    username = StringField('用户名', validators=[DataRequired()])
    password = PasswordField('密码', validators=[DataRequired()])
    submit = SubmitField('登录')

@app.route('/')
def home():
    if 'username' in session:
        return f'欢迎回来，{session["username"]}! <a href="/logout">退出登录</a>'
    return redirect(url_for('login'))

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    
    if form.validate_on_submit():
        username = form.username.data
        password = form.password.data
        
        if username in users and users[username]['password'] == password:
            session['username'] = username
            flash('登录成功！', 'success')
            return redirect(url_for('home'))
        else:
            flash('用户名或密码错误', 'danger')
    
    return render_template('login.html', form=form)

@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('login'))

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

templates/login.html → HTML模板

<!-- templates/login.html -->
<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <form method="POST" action="{{ url_for('login') }}">
            {{ form.hidden_tag() }}
            <div class="form-group">
                {{ form.username.label }}
                {{ form.username(class="form-control") }}
            </div>
            <div class="form-group">
                {{ form.password.label }}
                {{ form.password(class="form-control") }}
            </div>
            {{ form.submit(class="btn btn-primary") }}
        </form>
    </div>
</body>
</html>

static/style.css → CSS样式文件

/* static/style.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f2f5;
}

.login-container {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 300px;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.btn {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.btn:hover {
    background-color: #0056b3;
}

.alert {
    padding: 10px;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

步骤 5：配置运行设置（这一步我没做，好像也不会有问题，能运行）

点击右上角配置下拉菜单 → Edit Configurations
点击「+」号 → 选择「Flask Server」
设置配置：
- Name: 任意命名（如 "Flask App"）
- Target type: Module name
- Target: flask
- FLASK_ENV: development
- 环境变量（Environment variables）：
  
  bash
  
  复制
```
FLASK_APP=app.py
FLASK_ENV=development
```
确保Python解释器选择正确

步骤 6：运行项目

点击右上角的绿色运行按钮 ▶️
在控制台看到输出：

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

按住Ctrl点击链接，或在浏览器输入：http://localhost:5000/login

常见问题排查

问题现象	解决方案
"Template Not Found"	1. 确认模板文件夹命名为`templates` 2. 检查文件是否在正确目录
样式文件未加载	1. 确认静态文件夹命名为`static` 2. 检查浏览器开发者工具Network标签
表单验证失败	1. 检查是否安装了`flask-wtf` 2. 确认`SECRET_KEY`已设置
无法导入模块	1. 在项目根目录右键 → Mark Directory as → Sources Root

项目扩展建议（可选）

添加数据库支持：
```
pip install flask-sqlalchemy
```
添加密码加密：
```
pip install werkzeug
```
使用专业登录管理：
```
pip install flask-login
```

项目运行演示

成功运行后，你会看到以下界面：

# 控制台输出
 * Serving Flask app 'app.py' (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)


可用的测试账号组合如下：

浏览器访问效果：