【Python程序开发系列】使用Flask实现前后端分离(案例)

off999 2025-05-08 20:45 42 浏览 0 评论

这是我的第398篇原创文章。

一、引言

随着 web 开发的不断发展，前后端分离已成为越来越流行的架构设计。Flask 是一个轻量级的 Python web 框架，非常适合用于构建 API，然后配合前端框架（例如 React、Vue 或 Angular）实现前后端分离。在这篇文章中，我将带你走过实现 Flask 前后端分离的过程。步骤操作：

设置 Flask 项目结构
创建 Flask API
启动 Flask 服务
创建前端项目（可选）
连接前端与后端 API

二、实现过程

2.1 设置 Flask 项目结构

首先，我们需要创建一个目录来存放 Flask 项目和前端项目。

mkdir my_flask_app
cd my_flask_app
mkdir backend
mkdir frontend

2.2 创建 Flask API

在 backend 目录中创建一个名为 app.py 的文件，并在其中编写一个简单的 API。

# backend/app.py
from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route('/api/hello', methods=['GET'])
def hello():
    # 返回一个简单的 JSON 响应
    response = jsonify({"message": "Hello, World!"})
    return response
if __name__ == '__main__':
    # 设置 Flask 服务在本地运行
    app.run(debug=True)

代码解释：

from flask import Flask, jsonify, request：导入 Flask 所需的库。

app = Flask(__name__)：创建 Flask 应用实例。

@app.route('/api/hello', methods=['GET'])：定义一个路由，响应 GET 请求。

return jsonify({"message": "Hello, World!"})：返回 JSON 格式的响应。

app.run(debug=True)：启动 Flask 服务。

2.3 启动 Flask 服务

在终端中运行以下命令以启动 Flask 项目：

cd backend
python app.py

访问http://127.0.0.1:5000/api/hello应该能看到返回的 JSON 数据。

2.4 创建前端项目（可选）

在 frontend 目录中创建一个简单的前端文件，例如 index.html。

<!-- frontend/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端应用</title>
    <script>
        async function fetchData() {
            const response = await fetch('http://127.0.0.1:5000/api/hello');
            const data = await response.json();
            document.getElementById('result').innerText = data.message;
        }
        window.onload = fetchData;
    </script>
</head>
<body>
    前后端分离示例
    <div id="result"></div>
</body>
</html>

代码解释：

使用浏览器的 fetch API 来调用后端 API。

当页面加载完毕后执行 fetchData 函数，并将获取的消息显示在页面上。

2.5 连接前端与后端 API

在浏览器中打开 frontend/index.html，你应该能看到从 Flask 后端获取的数据。后端的日志可以看出前端在请求：

但是前端没有展示内容，在控制台发现报错：

这是由于CORS（跨源资源共享）策略导致的。当你从一个源（比如http://localhost:63342，这通常是LiverServer或类似工具的默认端口）尝试访问另一个源（比如http://127.0.0.1:5000）的资源时，浏览器会检查响应头中是否包含
Access-Control-Allow-Origin头，以确认是否允许跨域请求。要解决这个问题，需要在后端服务器的响应中添加这个头：

最终结果：

为了更清晰地理解程序结构，我们可以使用类图表示其组件关系：