【Python程序开发系列】使用Flask实现前后端分离(案例)
这是我的第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 frontend2.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头，以确认是否允许跨域请求。要解决这个问题，需要在后端服务器的响应中添加这个头：
最终结果：
为了更清晰地理解程序结构，我们可以使用类图表示其组件关系：
三、小结
通过以上步骤，我们成功地构建了一个简单的前后端分离架构，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：数据杂坛，获取数据和源码学习更多内容。
原文链接：