将flask变量直接传递给vue的最佳方法是什么？ - javascript

我正在开发带有烧瓶服务器和前端vue.js的vizualisation应用程序。

关于该主题的类似问题正在寻找一种方法，以使vue.js和flask变量语法不会像显示的here那样发生冲突。

就我而言，我想知道是否仍然可以通过Flask render_template方法发送的变量直接分配vue.js变量data.d。

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

这是代码

烧瓶

import os
import flask
import json
from flask import Flask, render_template, request, redirect, url_for
from script_python import kernel as K


def App():
    # Initialize the Flask application
    app = Flask(__name__)
    app.config.from_object('marianaViz.config.ConfigClass')

    #return index.html on load
    @app.route('/')
    def index():
        d = [{'x':1, 'y':0, 'z': 1},{'x':1, 'y':0, 'z': 2}]
        return flask.render_template("histogram.html",d= flask.jsonify(**K.JSONResponse(data = d,error=False,message='')))

    return app

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>

参考方案

您有很多选择，我将向您展示4个将适用于简单数据类型（int，字符串等）的方法，而稍加努力，您还可以使它们适用于更复杂的数据类型（数组，对象等）。

使用内联JavaScript

只需在脚本标签中分配变量

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

然后在您的Vue脚本中，您可以

var vm = new Vue({
  el: '#demo',
  data: {
  d: d_var
  ...

其余步骤涉及将变量分配给DOM元素的属性（例如，隐藏输入）

使用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
  ...

使用普通的旧getElementById

如果您遇到JS库疲劳的问题，只需像以前一样创建隐藏的输入即可，但是这次您要做

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

使用vm。$ refs

使用ref属性创建隐藏的输入

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

在vue实例中访问它，例如

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

使用php重新加载内容 - javascript

在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…

保留文本区域的数据或值，然后选择输入 - javascript

通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

带有AJAX和DOM处理API的下拉菜单 - javascript

我从API获取数据，但未在我的下拉菜单中显示。如果我用?act=showprovince回显，结果就在那里。example.html<head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> …

尽管刷新，jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器（php文件）的可折叠内部加载列表视图。但是，尽管刷新了jQuery元素，但jQuery格式并未应用于添加的HTML。我的页面在这里：http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码（仅相关代码）<script> lastRecor…

将flask变量直接传递给vue的最佳方法是什么？ - javascript

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…