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

一、引言

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

1. 设置 Flask 项目结构
2. 创建 Flask API
3. 启动 Flask 服务
4. 创建前端项目（可选）
5. 连接前端与后端 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。

    
    
    
    <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>


    前后端分离示例
    

代码解释：

使用浏览器的 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头，以确认是否允许跨域请求。要解决这个问题，需要在后端服务器的响应中添加这个头：

最终结果：

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

三、小结

通过以上步骤，我们成功地构建了一个简单的前后端分离架构，Flask 充当后端 API，前端使用 HTML 通过 API 获取数据。随着项目的复杂度增加，我们可以逐渐引入更复杂的前端框架（如 React 或 Vue），以及更多的 Flask 路由和功能。

• 前端：
• 使用 HTML、CSS 和 JavaScript 构建用户界面。
• 通过 AJAX 请求与后端的 API 接口交互。
• 所有前端资源（HTML、CSS、JavaScript）放在 frontend 目录下。
• 后端：
• 使用 Flask 提供 RESTful API 接口。
• API 接口 /api/data 返回 JSON 数据供前端调用。

作者简介： 读研期间发表6篇SCI数据算法相关论文，目前在某研究院从事数据算法相关研究工作，结合自身科研实践经历持续分享关于Python、数据分析、特征工程、机器学习、深度学习、人工智能系列基础知识与案例。关注gzh：数据杂坛，获取数据和源码学习更多内容。

原文链接：

【Python程序开发系列】使用Flask实现前后端分离的简单实现（案例+源码）