Python Flask 开发 - Flask 快速上手（Flask 最简单的案例、Flask 处理跨域、Flask 基础接口）

一、Flask 最简单的案例

安装 flask 模块

shell 复制代码

pip install flask

导入 flask 模块，实现最简单的案例

python 复制代码

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'Hello World'


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

二、Flask 处理跨域

安装 flask-cors 模块

shell 复制代码

pip install flask-cors

导入 flask-cors 模块，处理跨域

python 复制代码

from flask_cors import CORS

...

CORS(app)

三、Flask 基础接口

1、不带参数的 GET 请求

python 复制代码

@app.route('/test')
def test():
    return 'Test Page'

js 复制代码

// Promise 风格

fetch("http://127.0.0.1:5000/test", {
    method: "GET",
})
    .then((response) => response.text()) // 解析数据
    .then((data) => console.log(data)) // 处理数据
    .catch((error) => console.error("Error:", error)); // 处理错误

js 复制代码

// async await 风格

try {
    const response = await fetch("http://127.0.0.1:5000/test", {
        method: "GET",
    });

    const data = await response.text();

    console.log(data);
} catch (error) {
    console.error("Error:", error);
}

2、带参数的 GET 请求

路径参数

python 复制代码

@app.route('/showUsername/<username>')
def show_username(username):
    print(f'username type: {type(username)}')
    return f'username: {username}'

js 复制代码

try {
    const response = await fetch("http://127.0.0.1:5000/showUsername/test123", {
        method: "GET",
    });

    const data = await response.text();

    console.log(data);
} catch (error) {
    console.error("Error:", error);
}

查询参数

python 复制代码

@app.route('/showUserId')
def show_userId():
    userId = request.args.get('userId')
    print(f'userId type: {type(userId)}')
    return f'userId: {userId}'

js 复制代码

try {
    const response = await fetch("http://127.0.0.1:5000/showUserId?userId=test123", {
        method: "GET",
    });

    const data = await response.text();

    console.log(data);
} catch (error) {
    console.error("Error:", error);
}

3、POST 请求

表单数据

python 复制代码

@app.route('/login', methods=['POST'])
def login():
    username = request.form['username']
    password = request.form['password']
    print(f'username type: {type(username)}')
    print(f'password type: {type(password)}')
    print(f'username: {username}, password: {password}')

    return 'Login Page'

js 复制代码

const formData = new FormData();
formData.append("username", "admin");
formData.append("password", "123456");

try {
    const response = await fetch("http://127.0.0.1:5000/login", {
        method: "POST",
        body: formData,
    });

    const data = await response.text();

    console.log(data);
} catch (error) {
    console.error("Error:", error);
}

JSON 数据

python 复制代码

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data['username']
    password = data['password']
    print(f'username type: {type(username)}')
    print(f'password type: {type(password)}')
    print(f'username: {username}, password: {password}')

    return 'Login Page'

js 复制代码

try {
    const response = await fetch("http://127.0.0.1:5000/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            username: "admin",
            password: "123456",
        }),
    });

    const data = await response.text();

    console.log(data);
} catch (error) {
    console.error("Error:", error);
}