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

在本文中，我们将介绍如何使用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的文件，并将以下代码复制进去：

<!DOCTYPE html>
<html>
<head>
    <title>Flask App</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Welcome to Flask App!</h1>
</body>
</html>

打开浏览器并访问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代码：

<form id="myform" action="/submit" method="POST">
    <input type="text" name="data">
    <button type="submit">Submit</button>
</form>

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

document.getElementById("myform").addEventListener("submit", function(event) {
    event.preventDefault();

    var data = document.getElementById("data").value;

    fetch("/submit", {
        method: "POST",
        body: JSON.stringify({ data: data }),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(function(response) {
        return response.text();
    })
    .then(function(data) {
        console.log(data);
    });
});