Flask

Flask 初学者教程

1. 安装 Flask：

复制代码

pip install flask

2. 创建第一个应用：

复制代码

# hello.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, Flask!'

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

3. 启动应用：

复制代码

python hello.py

项目结构

复制代码

flask_demo/
├── app.py
├── static/
│   └── images/
│       └── sample.jpg
├── templates/
│   └── index.html
├── uploads/

1. 基础 Flask 应用（app.py）

复制代码

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

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'uploads'

# 展示 HTML 页面
@app.route('/')
def index():
    return render_template('index.html')

# 展示图片（静态资源）
@app.route('/image')
def show_image():
    return '<img src="/static/images/sample.jpg" alt="Sample Image">'

# HTML 中嵌入图片
@app.route('/html-image')
def html_image():
    return render_template('index.html')

# 上传文件页面
@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        f = request.files['file']
        f.save(os.path.join(app.config['UPLOAD_FOLDER'], f.filename))
        return f'文件 {f.filename} 上传成功！'
    return '''
        <form method="post" enctype="multipart/form-data">
            <input type="file" name="file">
            <input type="submit" value="上传">
        </form>
    '''

# 下载文件
@app.route('/download/<filename>')
def download_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename, as_attachment=True)

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

2. HTML 模板（templates/index.html）

复制代码

<!DOCTYPE html>
<html>
<head>
    <title>Flask 示例</title>
</head>
<body>
    <h1>欢迎来到 Flask 教程</h1>
    <p>下面是嵌入的图片：</p>
    <img src="{{ url_for('static', filename='images/sample.jpg') }}" alt="示例图片">
</body>
</html>

3. 图片文件（static/images/sample.jpg）

放一张你自己的图片命名为 sample.jpg，放在 static/images/ 目录下。

4. 上传文件目录（uploads/）

Flask 会将上传的文件保存到这个目录。确保它存在并有写权限。

功能说明

功能	路由	说明
展示 HTML 页面	`/`	渲染 index.html
展示图片	`/image`	返回 HTML 标签展示图片
HTML 中嵌入图片	`/html-image`	index.html 中使用 `url_for` 引入图片
上传文件	`/upload`	表单上传文件并保存到服务器
下载文件	`/download/<filename>`	下载指定文件

企业级 Flask 项目结构推荐，前后端分离

以下是一个典型的企业级结构，支持蓝图、数据库、表单、模板、静态资源、配置管理和测试：

复制代码

backend/
├── app/
│   ├── __init__.py
│   ├── config.py
│   ├── extensions.py
│   ├── models/
│   │   └── user.py
│   ├── routes/
│   │   ├── __init__.py
│   │   ├── auth.py
│   │   └── user.py
│   ├── schemas/
│   │   └── user.py
│   └── utils/
│       └── jwt.py
├── run.py
├── requirements.txt

每个文件代码示例

`run.py`

复制代码

from app import create_app

app = create_app()

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

`app/init.py`

复制代码

from flask import Flask
from app.config import Config
from app.extensions import db, jwt, cors
from app.routes.auth import auth_bp
from app.routes.user import user_bp

def create_app():
    app = Flask(__name__)
    app.config.from_object(Config)

    db.init_app(app)
    jwt.init_app(app)
    cors.init_app(app, resources={r"/api/*": {"origins": app.config['CORS_ORIGINS']}})

    app.register_blueprint(auth_bp, url_prefix='/api/auth')
    app.register_blueprint(user_bp, url_prefix='/api/user')

    return app

`app/config.py`

复制代码

class Config:
    SECRET_KEY = 'your-secret-key'
    SQLALCHEMY_DATABASE_URI = 'sqlite:///site.db'
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    JWT_SECRET_KEY = 'your-jwt-secret'
    CORS_ORIGINS = ['http://localhost:5173']  # Vue dev server

`app/extensions.py`

复制代码

from flask_sqlalchemy import SQLAlchemy
from flask_jwt_extended import JWTManager
from flask_cors import CORS

db = SQLAlchemy()
jwt = JWTManager()
cors = CORS()

用户模型与 JWT 工具 `app/models/user.py`

复制代码

from app.extensions import db
from werkzeug.security import generate_password_hash, check_password_hash

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    password_hash = db.Column(db.String(128), nullable=False)

    def set_password(self, password):
        self.password_hash = generate_password_hash(password)

    def check_password(self, password):
        return check_password_hash(self.password_hash, password)

登录接口（auth.py）`app/routes/auth.py`

复制代码

from flask import Blueprint, request, jsonify
from flask_jwt_extended import create_access_token
from app.models.user import User
from app.extensions import db

auth_bp = Blueprint('auth', __name__)

@auth_bp.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    user = User.query.filter_by(username=data['username']).first()
    if user and user.check_password(data['password']):
        token = create_access_token(identity=user.id)
        return jsonify({'token': token})
    return jsonify({'msg': 'Invalid credentials'}), 401

用户信息接口（user.py）`app/routes/user.py`

复制代码

from flask import Blueprint, jsonify
from flask_jwt_extended import jwt_required, get_jwt_identity
from app.models.user import User

user_bp = Blueprint('user', __name__)

@user_bp.route('/profile', methods=['GET'])
@jwt_required()
def profile():
    user_id = get_jwt_identity()
    user = User.query.get(user_id)
    return jsonify({'id': user.id, 'username': user.username})

顶层结构（backend/）

文件/目录	作用说明
`run.py`	应用入口，调用 `create_app()` 启动 Flask 服务
`requirements.txt`	项目依赖列表（如 Flask、Flask-JWT-Extended、SQLAlchemy 等）
`app/`	主应用目录，包含所有业务逻辑、配置、模型、接口等模块

app/ 应用目录

`init.py`

创建 Flask 应用实例
初始化扩展（数据库、JWT、CORS）
注册蓝图（auth、user 等）

`config.py`

配置类（如数据库 URI、JWT 密钥、CORS 白名单）
可根据环境拆分为 DevConfig、ProdConfig

`extensions.py`

初始化 Flask 扩展（如 SQLAlchemy、JWT、CORS）
避免循环引用，集中管理扩展对象

models/ 数据模型

文件	说明
`user.py`	定义 `User` 模型，包含字段、密码加密验证方法等
`__init__.py`	可选，用于统一导出模型或初始化数据库结构

routes/ 路由蓝图

文件	说明
`auth.py`	登录、注册、刷新 token 等认证相关接口
`user.py`	用户信息接口，如 `/profile`
`__init__.py`	可选，用于统一注册蓝图或组织模块

schemas/ 数据序列化与验证

文件	说明
`user.py`	使用 Marshmallow 定义用户输入/输出结构（如登录表单、用户返回字段）
优点	解耦数据结构与模型，便于前后端协作和接口文档生成

utils/ 工具模块

文件	说明
`jwt.py`	封装 JWT 生成、解析、权限校验等逻辑
其他	可扩展为日志、加密、分页、响应封装等工具函数

总结：模块职责一览

模块	职责关键词
`config.py`	配置管理
`extensions.py`	扩展初始化
`models/`	ORM 数据模型
`routes/`	蓝图路由接口
`schemas/`	请求/响应结构验证
`utils/`	工具函数封装
`run.py`	启动入口

Flask 初学者教程

1. 安装 Flask：

2. 创建第一个应用：

3. 启动应用：

项目结构

1. 基础 Flask 应用（app.py）

2. HTML 模板（templates/index.html）

3. 图片文件（static/images/sample.jpg）

4. 上传文件目录（uploads/）

功能说明

企业级 Flask 项目结构推荐，前后端分离

每个文件代码示例

run.py

app/__init__.py

app/config.py

app/extensions.py

用户模型与 JWT 工具 app/models/user.py

登录接口（auth.py）app/routes/auth.py

用户信息接口（user.py）app/routes/user.py

顶层结构（backend/）

app/ 应用目录

__init__.py

config.py

extensions.py

models/ 数据模型

routes/ 路由蓝图

schemas/ 数据序列化与验证

utils/ 工具模块

总结：模块职责一览

`run.py`

`app/init.py`

`app/config.py`

`app/extensions.py`

用户模型与 JWT 工具 `app/models/user.py`

登录接口（auth.py）`app/routes/auth.py`

用户信息接口（user.py）`app/routes/user.py`

`init.py`

`config.py`

`extensions.py`