Flask框架之数据交互的实现

Flask是一款轻巧灵活的Python Web框架，通过Flask框架搭建后端服务可以快速地进行前后端的数据交互。本文将详细讲解Flask框架中数据交互的实现完整攻略，包括使用Flask框架通过GET和POST方式实现前后端数据传递的两个具体示例。

一、GET方式实现数据交互

GET方式是HTTP请求中最常见的一种方式，我们一般通过在URL中进行上传数据来实现前后端数据的交互。以下是一个通过GET方式在Flask中实现数据交互的示例：

1.1 服务器端代码示例

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/hello')
def hello():
    name = request.args.get('name')
    age = request.args.get('age')
    return jsonify({'status': 'success', 'name': name, 'age': age})

if __name__ == '__main__':
    app.run(debug=True)

以上代码中，我们定义了一个/hello的路由地址，当使用GET方式请求这个地址时，我们从Request中获取到前端上传的数据，并将这些数据返回给前端。使用request.args.get()方法可以轻松地获取到上传的GET参数。jsonify()方法则将我们返回的数据转换成JSON格式。

1.2 客户端代码示例

function loadData() {
    var name = document.getElementById("input-name").value;
    var age = document.getElementById("input-age").value;
    var url = "/hello?name=" + name + "&age=" + age;
    fetch(url, {
        method: "GET",
    }).then((response) => response.json())
    .then((data) => {
        if (data.status == "success") {
            document.getElementById("result").innerHTML = "Your name is " + data.name +
            " and your age is " + data.age;
        } else {
            document.getElementById("result").innerHTML = "Failed to load data";
        }
    });
}

以上代码中，我们定义了一个loadData()函数，通过获取到用户输入的姓名和年龄，将这些数据打包在URL中上传给服务器，同时使用fetch()方法请求这个URL。如果返回的数据状态为success，则解析返回的JSON数据并将数据展示在前端页面中。

二、POST方式实现数据交互

POST方式是向服务器发送数据的另一种方式，我们一般使用POST方式上传文件或较大的数据内容。以下是一个通过POST方式在Flask中实现数据交互的示例：

2.1 服务器端代码示例

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/submit', methods=['POST'])
def submit():
    name = request.form.get('name')
    age = request.form.get('age')
    return jsonify({'status': 'success', 'name': name, 'age': age})

if __name__ == '__main__':
    app.run(debug=True)

以上代码中，我们定义了一个/submit的路由地址，并指定了这个路由只接受POST方式的请求。通过request.form.get()方法可以获取到上传的POST参数，同样的，我们使用jsonify()方法将返回的数据转换成JSON格式。

2.2 客户端代码示例

function submitData() {
    var name = document.getElementById("input-name").value;
    var age = document.getElementById("input-age").value;
    fetch("/submit", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        body: "name=" + name + "&age=" + age
    }).then((response) => response.json())
    .then((data) => {
        if (data.status == "success") {
            document.getElementById("result").innerHTML = "Submit success! Your name is " +
            data.name + " and your age is " + data.age;
        } else {
            document.getElementById("result").innerHTML = "Failed to submit data";
        }
    });
}

以上代码中，我们定义了一个submitData()函数，通过获取到用户输入的姓名和年龄，将这些数据打包在POST中并上传给服务器，同时使用fetch()方法请求这个URL。如果返回的数据状态为success，则解析返回的JSON数据并将数据展示在前端页面中。

至此，我们通过两个具体的示例分别演示了在Flask框架下通过GET和POST方式实现前后端数据传递的完整攻略。