【Python程序开发系列】使用Flask实现前后端分离(案例)
ccwgpt 2025-07-23 13:20 2 浏览 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 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：数据杂坛，获取数据和源码学习更多内容。
原文链接：
相关推荐
- FastUI:用Python构建高性能React应用，告别JavaScript
-
在现代Web开发中，前后端分离已经成为主流趋势。然而，前端开发往往需要深入掌握JavaScript和各种框架，这对于许多Python开发者来说是一个不小的挑战。今天，我们要介绍一个革命性的UI框架——...
- Python + Flet 开发网站的最佳数据库模块组合
-
对于使用Python和Flet开发网站并需要数据库支持的应用，以下是推荐的模块组合方案。方案一：SQLite+SQLAlchemy(推荐轻量级方案)**适用场景**：中小型应用、单用户或...
- 前端程序员应该往全栈方向发展吗?还是坚守前端?
-
这是一个非常经典且重要的问题，几乎每一位走到职业生涯十字路口的前端程序员都会思考。它没有一个绝对的“正确答案”，但我们可以从多个维度来分析，帮你找到最适合你的那条路。简单来说，这不是一个“要不要”的...
- Python交互仪表盘工具:Panel 进阶学习路线图
-
Panel作为Python生态系统中最强大的交互式仪表盘工具之一，其学习曲线既平缓又深远。这里我将为您构建一个系统化的进阶学习框架，包含实战项目和关键学习节点。1.现代化Web集成开发1....
- PuePy:将Python带入浏览器的革命性框架
-
在现代网络开发中，JavaScript无疑是主导地位的编程语言。但最近，随着WebAssembly和PyScript的崛起，Python的使用场景逐渐扩展到了前端开发领域。PuePy应运而生，作为一...
- 不容易!找到一个python的超简易网站搭建神器
-
作者：清香客来源：Python技术相信很多学习python的酱友们，大部分和我一样是为了提升工作效率，但是在提升自己的工作效率时，也会想着做同样工作的同事能不能也用上自己写的脚本（视工作环境而定）...
- PyWebView:用 Python 构建桌面应用的神器
-
作为一个Python开发者，我一直希望能找到一种简便的方法来构建桌面应用，而不是去学习诸如Electron这种重度依赖JavaScript的技术栈。就在我为桌面应用开发寻找替代方案时，遇到...
- Python Django框架中级教程:深入探索Django的核心功能
-
在Python的Web开发领域中，Django框架以其强大的功能和高效的开发模式占据着重要地位。对于已经掌握了Django基础的开发者来说，进一步深入学习中级知识能让我们开发出更复杂、更强大的Web应...
- 【Python程序开发系列】使用Flask实现前后端分离(案例)
-
这是我的第398篇原创文章。一、引言随着web开发的不断发展，前后端分离已成为越来越流行的架构设计。Flask是一个轻量级的Pythonweb框架，非常适合用于构建API，然后配合前端框...
- 每天一个Python库:Flask超轻量Web框架，灵活高效!
-
为什么要学Flask？Flask是一个「微型但强大的」Web框架：极简上手，几行代码即可跑起来灵活扩展，想加啥加啥（RESTful、JWT、数据库…）文档齐全，适合入门API开发或快...
- Python个人量化投资系统:后台搭建
-
独立搞量化系统的程序员最烦啥？重复造权限管理的轮子绝对排前三。技术老手用Python+PearAdminFlask两天搭出量化后台，实测开源框架真能省下80%基础工作量。开源后台框架选对，一人项目...
- python后端学什么（python后端好找工作吗）
-
在当今数字化的时代，Python后端开发成为了众多开发者追逐的热门领域。那么，想要在这个领域崭露头角，我们究竟应该学些什么呢？学习Python后端开发需要掌握全栈技术栈，涵盖从基础语法到分布式...
- Motia:重新定义后端与智能体整合的未来平台
-
在AIagent技术飞速发展的今天，我们拥有了诸如Dify、RAGFlow、LangChain等一系列优秀平台。然而，随着场景复杂度增加，开发者正面临一个共同问题：后端越来越碎片化，Agen...
- Python数据校验不再难:Pydantic库的工程化实践指南
-
在FastAPI框架横扫Python后端开发领域的今天，其默认集成的Pydantic库正成为处理数据验证的黄金标准。这个看似简单的库究竟隐藏着哪些让开发者爱不释手的能力？本文将通过真实项目案例，带您解...
- Python Flask 建站框架实操教程（flask框架网页）
-
下面我将带您从零开始构建一个完整的Flask网站，包含用户认证、数据库操作和前端模板等核心功能。##第一部分：基础项目搭建###1.创建项目环境```bash#创建项目目录mkdirfl...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- FastUI:用Python构建高性能React应用，告别JavaScript
- Python + Flet 开发网站的最佳数据库模块组合
- 前端程序员应该往全栈方向发展吗?还是坚守前端?
- Python交互仪表盘工具:Panel 进阶学习路线图
- PuePy:将Python带入浏览器的革命性框架
- 不容易!找到一个python的超简易网站搭建神器
- PyWebView:用 Python 构建桌面应用的神器
- Python Django框架中级教程:深入探索Django的核心功能
- 【Python程序开发系列】使用Flask实现前后端分离(案例)
- 每天一个Python库:Flask超轻量Web框架，灵活高效!
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)