【Python程序开发系列】使用Flask实现前后端分离(案例)
off999 2025-05-08 20:45 21 浏览 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：数据杂坛，获取数据和源码学习更多内容。
原文链接：
相关推荐
- 16《Python 办公自动化教程》钉钉群机器人配置
-
在互联网企业中，数字化办公早已经不是什么新鲜事了，其中以钉钉为代表的工具更是其中的主力军。目前公司中钉钉的使用已经较为普及，像钉钉打卡、钉钉会议室、钉盘等。本小节将针对钉钉群机器人进行介绍，助力利用钉...
- 15《Python 办公自动化教程》文件压缩与解压缩
-
压缩包也是我们平时工作中经常要接触到的文件格式，压缩文件后缀名通常有.zip、.rar、.7z等等。Python中也有专门用来操作压缩包文件的第三方模块zipfile。听这个名字就知道是用来操...
- 08《Python 办公自动化教程》smtplib 模块与 email 模块
-
日常办公中正式文件的发送都需要用到邮件，以及在互联网工作中，月度总结、销售报表、考评表等等都需要邮件进行发送。在不考虑办公自动化之前，你发送一封邮件的步骤是如何呢？第一步打开浏览器进入到邮箱登录界面，...
- 好用的五个python表格自动化工具，谁都可以复制直接用
-
引言在之前文章中，有一篇《这五个办公室常用自动化工具我用python帮你写好了，复制代码就能用》，没想到受到了广大读者的喜爱。其中进行了一个投票，总结发现很多读者对于excel的自动化需求非常高，...
- 1-Pytest全栈自动化测试指南- 运行
-
通常，使用命令调用pytest（有关调用pytest的其他方法，pytest请参见下文）。这将在名称遵循表单的所有文件中或在当前目录及其子目录中执行所有测试。更一般地说，pytest遵...
- Python40个自动化办公实战案例，终于实现下班自由啦~
-
拿来就能用，这么爽的吗？！今天我想聊聊，如何通过Python自动化工具，解决工作中常见的办公效率低下的问题。你有没有想过，下班晚，加班，可能是因为自己工作比较低效？回想一下，自己是不是也曾遇到过这样的...
- Python自动化 | 解锁高效办公利器，Python助您轻松驾驭Excel!
-
大家不论在日常工作还是生活中，都经常用到Excel这款办公软件，它在数据处理、报表生成等方面起到了重要作用。然而，作为一个Python工程师，你可知道Python也能成为操作Excel的得力助手吗？而...
- Python自动化办公实战:包含Word、Excel、Pdf和Email邮件案例
-
背景想象一下，现在你有一份Word邀请函模板，然后你有一份客户列表，上面有客户的姓名、联系方式、邮箱等基本信息，然后你的老板现在需要替换邀请函模板中的姓名，然后将Word邀请函模板生成Pdf格式，之后...
- Python自动化办公学习笔记11——布尔类型、变量赋值、类型转换
-
1.布尔类型(Boolean)在Python中，布尔类型是整数类型的子类，其中`True`表示"真"或"是"，`False`表示"假"或"否&...
- Python自动化办公应用学习笔记9——赋值语句、i...
-
1.赋值语句在程序中产生或计算值的代码称为表达式。Python语言中，等号(=)表示“赋值”操作，即将右侧表达式的计算结果赋给左侧的变量。包含等号(=)的语句称为赋值语句。同步赋值语句可以...
- Python自动化办公应用学习笔记13——表达式
-
1.表达式基础定义：表达式是代码中能计算并返回一个值的代码片段。组成：由操作数（变量、字面量）和操作符（运算符、函数调用）构成。特点：不包含语句（如if、for）、可嵌套（如(a+b)*...
- Python办公自动化之操作Excel(一)
-
处理Excel的库主要有xlrd、xlwt、xlwings和openpyxl。xlrd、xlwt、xlwings可以用于处理Excel2010文档之前的文档，而openpyxl是用于处理Excel...
- Python办公自动化系列篇之五:Web 自动化与数据提取
-
作为高效办公自动化领域的主流编程语言，Python凭借其优雅的语法结构、完善的技术生态及成熟的第三方工具库集合，已成为企业数字化转型过程中提升运营效率的理想选择。该语言在结构化数据处理、自动化文档生成...
- Python自动化办公应用学习笔记18—— while循环
-
1.定义while循环（条件循环/无限循环）是Python中基于条件判断的循环结构。它不需要预先知道循环次数，只要条件满足就会持续执行代码块，直到条件变为False时停止。特别适合处理动态变...
- Python自动化办公应用学习笔记15——算法
-
针对各种类型的问题，拟定出有效的解决方法和步骤，也就是算法。可以说，设计算法是程序设计的核心。简单来说，为解决一个问题而采取的具体方法和操作步骤，就称为“算法”。比如在解决一个数值计算问题时，我们不仅...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 16《Python 办公自动化教程》钉钉群机器人配置
- 15《Python 办公自动化教程》文件压缩与解压缩
- 08《Python 办公自动化教程》smtplib 模块与 email 模块
- 好用的五个python表格自动化工具，谁都可以复制直接用
- 1-Pytest全栈自动化测试指南- 运行
- Python40个自动化办公实战案例，终于实现下班自由啦~
- Python自动化 | 解锁高效办公利器，Python助您轻松驾驭Excel!
- Python自动化办公实战:包含Word、Excel、Pdf和Email邮件案例
- Python自动化办公学习笔记11——布尔类型、变量赋值、类型转换
- Python自动化办公应用学习笔记9——赋值语句、i...
- 标签列表
-
- python计时 (73)
- python安装路径 (56)
- python类型转换 (93)
- python进度条 (67)
- python吧 (67)
- python字典遍历 (54)
- python的for循环 (65)
- python格式化字符串 (61)
- python静态方法 (57)
- python列表切片 (59)
- python面向对象编程 (60)
- python 代码加密 (65)
- python串口编程 (77)
- python读取文件夹下所有文件 (59)
- java调用python脚本 (56)
- python操作mysql数据库 (66)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python多态 (60)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)