利用Vue3的axios+Python的flask实现前后端交互功能

1 功能实现

1.1 功能

在网页中输入两个数字后，点击计算按钮在线计算（注意不是在浏览器端）获得两数之和。

1.2 思路

前端使用vue3的axios向服务器发送post请求，利用flask框架使python服务器返回计算后的数值，赋给前端的变量，最终在浏览器上显示。

2 前端部分：

2.1 html

<div>
<input v-model="num1" type="number" placeholder="输入第一个数字">
<input v-model="num2" type="number" placeholder="输入第二个数字">
<button @click="calculateSum">计算和</button>
<p>结果：{{ sum }}</p>
</div>

• 这里在input中使用了vue3的v-model属性，作用是双向绑定，即将输入框中的数据分别同步到变量num1和num2中。type属性限制只能输入数字，placeholder属性在输入框中显示提示文字，引导用户输入。
• button按钮使用了vue3的v-on:click，绑定了事件calculateSum，当鼠标点击按钮时触发该事件。
• p结果中使用了双层花括号，用变量的值来替换，以实现计算结果的显示。

2.2 js

<script>
   import axios from 'axios';
   //import headBanner from './banner.vue';
 
   export default {
     name: 'WeatherComponent',
     components: {
 
        //headBanner,
     },
     data() {
        return {
        num1: null,
        num2: null,
        sum: null,
        };
    },
    methods: {
            calculateSum() {
        const num1Value = parseFloat(this.num1);
        const num2Value = parseFloat(this.num2);
        axios.post('http://127.0.0.1:8081/calculate', { num1: num1Value, num2: num2Value })
            .then(response => {
            this.sum = response.data.sum;
            })
            .catch(error => {
            console.error('发生错误：', error);
            });
        },
    },
   };
</script>

• Axios是一个基于Promise的http客户端，用于在浏览器和node.js中发送HTTP请求。
• 在js代码中，先导入axios库，然后在自定义组件中分别填写数据和方法。
• data()是一个函数，用于返回变量的初始值。method用于填写各种函数方法，是网页交互的核心。
• 这里定义函数calculateSum()，实现发送请求。
• 首先把num1和num2从字符串转换成浮点数值，利用parseFloat()函数，注意填写参数时，要在变量前面加上this.，以明确作用域（类似于面向对象）。
• 然后利用axios.post()函数向服务器发送请求，这里要填写两个参数，第一个参数是请求的接口地址，用单引号包裹，第二个参数是 { num1: num1Value, num2: num2Value }对象字面量，是一个对象的两个属性组成的键值对。
• .then()用于在发送请求之后的执行。在其中填写response()函数，将对象的sum变量赋值为后端发送过来的sum变量，注意请求到的变量前面要加response.data.。.catch用于捕获和处理请求发生错误时的情况。

3 后端部分：

后端利用了python的flask框架，在使用flask框架之前，要先配置python的虚拟环境，否则无法安装和运行flask框架。

from flask import Flask, request, jsonify
from flask_cors import CORS
 
app = Flask(__name__)
CORS(app)  # 允许所有源的跨源请求，可以根据实际情况进行配置
@app.route('/calculate', methods=['POST'])
def calculate_sum():
    data = request.get_json()
    num1 = data.get('num1')
    num2 = data.get('num2')
    if num1 is not None and num2 is not None:
        sum_result = num1 + num2
        return jsonify({'sum': sum_result})
    else:
        return jsonify({'error': '无效的输入'}), 400
 
if __name__ == '__main__':
    app.run(port=8081)

3.1 python虚拟环境安装

详见另一篇文章。

3.2 导入模块

• from flask import Flask, request, jsonify：导入 Flask 框架的核心组件。Flask 用于创建应用实例，request 用于获取请求对象，jsonify 用于将 Python 字典转换为 JSON 格式的响应。
• from flask_cors import CORS：导入用于处理跨源资源共享（CORS）的模块。

3.3 创建应用实例

app = Flask(__name__)：创建一个 Flask 应用实例。__name__ 参数用于确定应用的位置，以便 Flask 能够找到相关的资源。

3.4 配置 CORS

• CORS(app)：启用 CORS，允许所有源的跨源请求。如果需要更精细的控制，可以传入参数来指定允许的源、方法等。

3.5 定义路由

• @app.route('/calculate', methods=['POST'])：使用装饰器定义了一个路由，路径为 /calculate，只接受 POST 请求方法。
• def calculate_sum():：定义了与路由关联的处理函数。这个函数将处理发送到 /calculate 的 POST 请求。

3.6 处理请求

• data = request.get_json()：从请求中获取 JSON 数据。
• num1 = data.get('num1') 和 num2 = data.get('num2')：从 JSON 数据中获取 num1 和 num2 的值。
• if num1 is not None and num2 is not None:：检查 num1 和 num2 是否都不为 None。如果是，则进行求和操作并返回结果；否则，返回错误信息和 400 状态码。
• sum_result = num1 + num2：计算 num1 和 num2 的和。
• return jsonify({'sum': sum_result})：如果输入有效，返回包含求和结果的 JSON 响应。
• return jsonify({'error': '无效的输入'}), 400：如果输入无效，返回包含错误信息的 JSON 响应，并带有 400 状态码。

3.7 运行应用

• if __name__ == '__main__':：确保代码在直接运行脚本时才执行以下代码块。
• app.run(port=8081)：启动 Flask 应用，监听在 8081 端口上。