Flask 如何连接后端（Python，Flask）和前端（HTML，CSS，JavaScript）

2024-07-04 22:55| 来源: 网络整理| 查看: 265

在本文中，我们将介绍如何使用Flask框架连接后端（Python，Flask）和前端（HTML，CSS，JavaScript）。Flask是一个轻量级的Python web框架，非常适合构建简单的web应用程序和API。

阅读更多：Flask 教程

前后端基本原理

在开始连接前后端之前，让我们先了解一下前后端的基本原理。后端负责处理服务器端的业务逻辑，并将数据返回给前端。前端则负责展示用户界面和与用户交互。为了实现前后端的连接，我们需要通过HTTP请求将数据从前端发送到后端，并从后端获取响应。

创建Flask应用程序

首先，我们需要安装Flask。可以使用pip命令来安装Flask，例如：

pip install flask

接下来，我们创建一个Flask应用程序。新建一个Python文件，并将以下代码复制进去：

from flask import Flask app = Flask(__name__) @app.route("/") def index(): return "Hello, World!" if __name__ == "__main__": app.run()

以上代码创建了一个简单的Flask应用程序，并设置了一个简单的路由。在浏览器中访问http://localhost:5000，您将看到”Hello, World!”的消息。

静态文件

在前端开发中，我们通常会使用HTML、CSS和JavaScript来构建用户界面。而在Flask应用程序中，我们可以将这些静态文件放在一个独立的文件夹中，并通过特定的路由来访问它们。

首先，在项目目录下创建一个名为static的文件夹。在该文件夹中，我们可以创建一个名为styles.css的CSS文件。例如，创建以下文件：

/* styles.css */ body { background-color: #f5f5f5; font-family: Arial, sans-serif; } h1 { color: #333; }

接下来，我们需要告诉Flask去哪里找到这些静态文件并将它们返回给前端。修改我们之前的Flask应用程序代码，在app对象中添加以下代码：

app = Flask(__name__, static_folder="static") # ...

现在，我们可以在HTML文件中引用这个CSS文件。例如，创建一个名为index.html的文件，并将以下代码复制进去：

Flask App Welcome to Flask App!

打开浏览器并访问http://localhost:5000，您将看到一个带有自定义样式的页面。

数据交互

要实现与后端的数据交互，我们可以使用Flask的路由功能。

我们可以创建一个路由来处理前端的POST请求，并将数据从前端传递给后端。例如，我们可以修改之前的Flask应用程序代码，如下所示：

from flask import Flask, request # ... @app.route("/submit", methods=["POST"]) def submit(): data = request.form.get("data") # 进行后续的数据处理 return "Received data: " + data

在前端，我们可以使用JavaScript来实现将数据发送到后端。例如，假设我们有以下HTML代码：

Submit

然后，我们可以使用JavaScript来监听表单提交事件，并发送数据到后端。例如，假设我们有以下JavaScript代码：

以上代码使用了Fetch API，将表单数据打包为JSON格式，并将其发送到后端的/submit路由。在后端，我们可以使用request.form.get("data")来获取这个数据，并进行后续的处理。

总结

在本文中，我们介绍了如何使用Flask框架连接后端（Python，Flask）和前端（HTML，CSS，JavaScript）。我们学习了如何创建一个简单的Flask应用程序并设置路由，以及如何使用静态文件和处理数据交互。希望这篇文章对于初学者能够有所帮助，让您能够更好地理解和使用Flask。

【本文地址】

公司简介

联系我们