详解Python flask的前后端交互

本文将详细讲解如何使用Python flask实现前后端交互。主要分为以下几个部分：

安装Flask框架
创建Flask应用
构建接口
前端页面的编写
进行前后端交互

1. 安装Flask框架

在安装Flask之前，请确保你已经安装了Python环境。安装Flask的方法有多种，这里介绍pip安装方式。

可以运行以下命令来安装Flask:

pip install Flask

2. 创建Flask应用

接下来我们要使用Python创建一个Flask应用。在你的代码编辑器中，创建一个名为 app.py的文件，输入以下代码：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

这个代码中，我们通过Flask来创建一个名为app的Flask应用，然后使用@app.route()装饰器来定义一个路由，方法中return返回的是一个字符串。

现在，我们可以在终端执行以下命令启动应用：

export FLASK_APP=app.py
flask run

终端会输出如下结果：

 * Serving Flask app "app.py"
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

在浏览器中输入http://127.0.0.1:5000/或http://localhost:5000/都可以访问这个Flask应用。页面输出“Hello, World!”表示应用启动成功。

3. 构建接口

接下来我们要为应用添加一个接口，用于处理后台逻辑。在app.py中加入以下代码：

@app.route('/api/greeting/<string:name>')
def api_greeting(name):
    return {'greeting': 'Hello, {}!'.format(name)}

这个代码中，使用@app.route()装饰器定义了一个路由，可以接收一个参数name，然后返回一个以name为参数的问候字符串。

4. 前端页面的编写

在本例中，我们使用了Jinja2模板引擎来编写HTML代码。在 templates 目录下，新建一个 greeting.html 文件，输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Greeting Page</title>
</head>
<body>
    <div>
        <input id="name-input" type="text" placeholder="Your Name">
        <button id="greet-btn" type="button">Greet</button>
    </div>
    <div id="greeting-panel">
    </div>
    <script>
        document.getElementById("greet-btn").addEventListener("click", function() {
            var name = document.getElementById("name-input").value;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById("greeting-panel").innerHTML = response.greeting;
                }
            };
            xhr.open("GET", "/api/greeting/" + name, true);
            xhr.send();
        });
    </script>
</body>
</html>

这个代码包含了一个表单，由name-input和greet-btn组成。当用户输入自己的名字，然后点击Greet按钮之后，JavaScript代码会向后台提交一个GET请求，返回相应的问候字符串，然后将其显示在页面上。

5. 进行前后端交互

在 app.py 中，新增一个路由，使浏览器可以访问到 greeting.html 页面。在此之前需要先在 app.py 中引入 render_template 方法导入。

from flask import Flask, render_template

...
@app.route('/greeting')
def greeting():
    return render_template('greeting.html')
...

这段代码的作用是返回一个渲染后的模板页面，并将其作为响应返回给用户。

需要注意的是，Flask会自动查找templates目录下的模板文件，并将其渲染返回给用户。

现在，执行以下命令启动应用：

export FLASK_APP=app.py
flask run

在浏览器中访问http://127.0.0.1:5000/greeting，即可看到前端页面greeting.html。在输入框中输入你的名字，点击Greet按钮，就可以看到后台返回的问候字符串显示在页面上了。

以上就是完整的 Python Flask 前后端交互攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解Python flask的前后端交互 - Python技术站