uni-app获取flask render_template传递参数问题

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app获取flask render_template传递参数问题

问题描述

  1. 环境服务端：flask render_template()传递参数

    @app.route('/')
def index():
    var_list={
        'serverip':'1233333'
    }
    return render_template('index.html',**var_list)

  2. index.html是用uniapp vue3版本发布h5生成，在uniapp中index.vue中使用{{serverip}}获取不到参数

请问这种情况应该如何获取 render_template(‘index.html’,**var_list)中传递的参数？


1 回复

在处理 uni-app 与 Flask 后端交互时，若你想通过 Flask 的 render_template 传递参数并在前端（uni-app）中使用这些参数，通常你会遇到跨平台数据传输的问题。render_template 主要用于渲染服务器端的 HTML 页面，而 uni-app 是一个跨平台的前端框架，它通过 API 请求与后端进行通信。

下面是一个通过 API 请求从 Flask 后端获取数据并在 uni-app 中使用的示例，而不是直接使用 render_template 传递参数。

Flask 后端代码

首先，在 Flask 中创建一个 API 端点来返回数据：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    # 假设你想传递这些数据到前端
    data = {
        'message': 'Hello from Flask',
        'value': 42
    }
    return jsonify(data)

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

uni-app 前端代码

在 uni-app 中，你可以使用 uni.request 来获取这些数据：

// 在你的页面脚本中
export default {
    data() {
        return {
            message: '',
            value: 0
        };
    },
    onLoad() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            uni.request({
                url: 'http://localhost:5000/api/data', // 确保这里的URL是正确的
                method: 'GET',
                success: (res) => {
                    if (res.statusCode === 200) {
                        this.message = res.data.message;
                        this.value = res.data.value;
                        console.log('Data fetched:', this.message, this.value);
                    } else {
                        console.error('Failed to fetch data:', res.statusCode);
                    }
                },
                fail: (err) => {
                    console.error('Request failed:', err);
                }
            });
        }
    }
};

解释

  1. Flask 后端：定义了一个简单的 API 端点 /api/data，它返回一个 JSON 对象。
  2. uni-app 前端：在页面加载时（onLoad 生命周期钩子），调用 fetchData 方法发送 GET 请求到 Flask 后端。请求成功后，将返回的数据赋值给页面的 data 属性，以便在模板中使用。

这种方式利用了 HTTP API 进行数据交换，而不是 Flask 的 render_template，因为 uni-app 并不直接渲染服务器端模板，而是通过 API 请求获取数据并在客户端渲染。这种方法更加灵活，适用于现代的前后端分离架构。

回到顶部