【Python程序开发系列】使用Flask实现前后端分离(案例)
off999 2025-05-08 20:45 4 浏览 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：数据杂坛，获取数据和源码学习更多内容。
原文链接：
相关推荐
- Python进阶教程:如何自定义异常(附电商库存管理案例)
-
在Python中，你可以使用异常（exceptions）来预期和处理那些干扰程序正常执行流程的错误。Python内置了许多常见的异常，例如ValueError、TypeError和KeyError，但...
- Python 中使用try来处理异常的方法
-
六二，直方大，不习无不利。在学习python中会经常遇到各种异常事件；现归纳一下如何捕捉并处理这些异常；今天来给大家整理一下。一、异常的概念什么是异常？异常即是一个事件，该事件会在程序执行过程中发生，...
- python入门-day3:异常处理（异常处理方法及流程python）
-
异常处理的内容，包括try、except、finally的用法，介绍常见异常类型，最后通过一个练习（处理用户输入的非法数字）帮你把知识点串起来。我会用简单易懂的语言，确保新手也能轻松掌握。Da...
- 16-Python的异常（python的异常类型及处理）
-
1-异常介绍1-2-什么是异常异常是程序运行时发生的错误或异常情况，它会中断正常的程序执行流程；Python使用异常处理机制来处理这些运行时错误。1-4-为什么要捕获异常异常会中断程序的执行;1-3-...
- Python 异常处理详解（python中异常）
-
一、什么是异常？核心定义在程序运行过程中，当Python解释器检测到无法继续执行的操作时，会立即创建异常对象并中断当前流程。此时若不处理异常，程序将直接崩溃退出。典型场景与原理用户输入无效数据nu...
- 掌握这些 Python 异常处理技巧，代码稳如老狗!
-
在Python中，异常处理不仅可以帮助我们捕获和处理错误，还能让我们更清晰地了解错误发生的背景。1.异常层次结构Python内置了许多异常，我们在编程时可能会经常遇到，例如ZeroDivisi...
- python异常处理机制最佳实践（python异常处理总结）
-
Python异常处理的最佳实践需要兼顾代码健壮性、可读性和性能。以下是经过工程验证的10个核心原则和技巧：一、精准捕获原则避免裸except禁止使用except:或exceptExce...
- python之异常处理（python异常处理过程可以概括为三个步骤）
-
异常语法try:<代码块>except<异常类型>:<代码块>捕获通用异常try:<代码块>exceptExceptionas...
- 一天学一点，今天学习掌握Python:异常处理与文件操作全攻略
-
这一笔记记录了我学习python的异常和文件的操作，这也是针对Python异常和文件操作教程的进一步优化建议和注意事项：异常处理优化1.避免过度捕获异常o不要为了捕获异常而捕获异常，应根据实际需求...
- 新手学Python避坑，学习效率狂飙! 十二、Python 异常处理
-
异常处理系统分享在Python里，异常指的是程序运行期间出现的错误。当异常发生时，正常的程序流程会被中断，Python会抛出异常对象。为了防止程序因异常而崩溃，你可以使用异常处理机制捕获并处理这...
- Python异常处理全攻略:从入门到精通，轻松应对代码“翻车”时刻
-
喜欢的条友记得关注、点赞、转发、收藏，你们的支持就是我最大的动力源泉。引言：异常处理——代码世界的“保险丝”在编程的世界里，错误和异常就像路上的“坑”，稍不留神就会让你的程序“翻车”。而异常处理，就是...
- Python异常处理全面指南（python异常处理步骤）
-
Python异常处理完全指南异常处理是编写健壮程序的关键技术。Python提供了灵活的语法和丰富的内置异常类型，能够有效管理程序运行时的错误。以下是Python异常处理的全面指南：一、异常处理...
- 进阶突破python——异常处理机制（异常处理用什么语句python）
-
Python的异常处理机制是其健壮性设计的核心，通过清晰的语法结构和灵活的处理策略实现错误管理。以下从核心语法、异常对象、高级特性和最佳实践四个维度详解：一、核心语法结构Python使用try-...
- Python基础编程——详细介绍Python的异常捕获示例代码
-
这篇文章主要为大家详细介绍了python的异常捕获，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助①捕捉一个异常捕捉一个异常以用0作为除数会得到Ze...
- Python学习 -- 异常捕获技巧（python怎么捕获异常）
-
在编写Python代码时，异常处理是确保程序稳定性的关键。Python提供了灵活的异常捕获机制，包括try...except语句、try...except...else语句和try...except....
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Python进阶教程:如何自定义异常(附电商库存管理案例)
- Python 中使用try来处理异常的方法
- python入门-day3:异常处理（异常处理方法及流程python）
- 16-Python的异常（python的异常类型及处理）
- Python 异常处理详解（python中异常）
- 掌握这些 Python 异常处理技巧，代码稳如老狗!
- python异常处理机制最佳实践（python异常处理总结）
- python之异常处理（python异常处理过程可以概括为三个步骤）
- 一天学一点，今天学习掌握Python:异常处理与文件操作全攻略
- 新手学Python避坑，学习效率狂飙! 十二、Python 异常处理
- 标签列表
-
- python计时 (54)
- python安装路径 (54)
- python类型转换 (75)
- python进度条 (54)
- python的for循环 (56)
- python串口编程 (60)
- python写入txt (51)
- python读取文件夹下所有文件 (59)
- java调用python脚本 (56)
- python操作mysql数据库 (66)
- python字典增加键值对 (53)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python qt (52)
- python人脸识别 (54)
- python斐波那契数列 (51)
- python多态 (60)
- python命令行参数 (53)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- centos7安装python (53)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)