将Flask变量直接传递到vue的最佳方法是什么？

2024-10-02 12:38:17 发布

您现在位置：Python中文网/ 问答频道 /正文
8437 3

我正在开发一个带有烧瓶服务器的可视化应用程序vue.js版对于前端。

在这个问题上类似的问题寻找一种方法vue.js版与flask变量语法不冲突，如所示here。

在我的情况下，我想知道是否有直接分配vue.js版variable data.d带有一个变量send from Flask render_template方法。

    var app = new Vue({
      el: '#app',
      data: {
        'd': {{Flask-variable}}
      },
})

这是密码

烧瓶

^{pr2}$

js公司

var app = new Vue({
  el: '#app',
  data: {
    'd':{{ d.data|tojson|safe}},
  },
  created:function(){
        this.drawHistogram(d),
      },
  methods:{
  // Called when the Visualization API is loaded.
    drawHistogram: function(){
      var data = null;
      var graph = null;
      var self = this;


      // Create and populate a data table.
      console.log(d);
        data = self.d;
        //data = [{x:1, y:0, z: 1},{x:1, y:0, z: 2},{x:2, y:0, z: 3},{x:3, y:0, z: 2},{x:4, y:0, z: 1},{x:5, y:0, z: 1},{x:6, y:0, z: 2},{x:7, y:0, z: 3},{x:8, y:0, z: 2},{x:9, y:0, z: 1},{x:10, y:0, z: 1},{x:11, y:0, z: 2},{x:12, y:0, z: 3},{x:13, y:0, z: 2},{x:14, y:0, z: 1},{x:15, y:0, z: 1},{x:16, y:0, z: 2},{x:17, y:0, z: 3},{x:18, y:0, z: 2},{x:19, y:0, z: 1}];

        // create some nice looking data with sin/cos

        /*
        function custom(x, y) {
        return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
        }
        var steps = 4;  // number of datapoints will be steps*steps
        var axisMax = 15;
        var axisStep = axisMax / steps;
        for (var x = 0; x <= axisMax; x+=axisStep) {
          for (var y = 0; y <= axisMax; y+=axisStep) {
            var z = custom(x,y);
              data.push({x:x, y:0, z: z});
          }
          console.log(data);
        }
        */

        // specify options
        var options = {
          width:  '300px',
          height: '300px',
          style: 'bar',
          xBarWidth: 0.5,
          yBarWidth: 0.5,
          showPerspective: true,
          showGrid: true,
          showShadow: false,
          "showYAxis":false,
          "xLabel":'',
          "zLabel":'',
          cameraPosition: {
              horizontal: 0*3.14,
              vertical: 0*3.14,
              distance: 1.8
            },
            legendLabel: '',
          keepAspectRatio: true,
          verticalRatio: 0.5,
          "backgroundColor":'black',
          "showLegend": true,
          "xCenter":'50%',
        };

        var camera = graph ? graph.getCameraPosition() : null;

        // create our graph
        var container = document.getElementById('histogram');
        graph = new vis.Graph3d(container, data, options);

        if (camera) graph.setCameraPosition(camera); // restore camera position


  }

    }
})

html格式

<!doctype html>
<html>
    <head>
    <!--Vuejs-->
     <script type="text/javascript" src="{{url_for ('static',filename='js/vue.js')}}"></script>
    <!--css-->
    <link href="{{url_for ('static',filename='css/disp.css')}}" rel="stylesheet" type="text/css"/>
    <!--Vis visualisation lib-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
    <!--<script type="text/javascript" src="/front/lala_web/vis.js"></script>-->

    </head>

    <body>

        <div id="app">
            <h2>Histogram:</h2>
            <div id="histogram"></div>
        </div>
    </body >
        <!--display.js-->
         <script type="text/javascript" src="{{url_for ('static',filename='js/histogram.js')}}"></script>

</html>

Tags： textappfordatavartypejsscript
2条回答
网友
1楼 · 编辑于 2024-10-02 12:38:17

我想你可以做点什么

'd':{{ flask_variable|tojson|safe }}

你的变量需要是json可序列化的

您可能需要实际将json解析回js

JSON.parse('{{ flask_variable|tojson|safe }}')（至少是类似的），它必须是一个可以转换为json的对象（例如python类可能无法工作。。。字符串和数字应该）

网友
2楼 · 编辑于 2024-10-02 12:38:17

您有许多选项，我将向您展示4个适用于简单数据类型（int、string等）的选项，您还可以让它们适用于更复杂的数据类型（数组、对象等）

  1. 使用内联JavaScript

只需在脚本标记中指定变量

<script type="text/JavaScript"> 
 #some var from flask
  var d_var = "{{somevalue}}" 
 </script>

然后在你的vue脚本中，你可以

^{pr2}$

剩下的步骤包括将变量分配给DOM元素的属性（例如隐藏的输入）

  1. 使用jQuery

在主vue dom元素中创建一个隐藏输入，其值设置为flask变量

<input name="d_elem" type="hidden" value="{{somevalue}}" id="d_elem" />

然后在你的vue脚本中，你现在可以

var d_var = $("#d_elem").val(); 
var vm = new Vue({
  el: '#demo',
  data: {
  d: d_var
  ...
  1. 使用普通的旧getElementById

如果你受到JS库的疲劳，只需像以前一样创建隐藏的输入，但这次你做了

 var d_var =  document.getElementById("d_elem").value;
 var vm = new Vue({
  el: '#demo',
  data: {
  d: d_var
  ...
  1. 使用vm.$refs

使用ref属性创建隐藏输入

<input name="d_elem" type="hidden" value="{{somevalue}}" ref="d_elem" />

在vue实例中访问它，如下所示

var d_var = this.$refs.d_elem.value ;

相关问题 更多 >

    编程相关推荐

    热门问题