Javascript Flask模板在重定向后不呈现

我正在使用Vue JS和Flask构建一个非常基本的CARTO应用程序。可以找到完整的代码

应用程序的工作原理如下：

用户在模式窗体中选择一个选项并单击visualize按钮。这将发送一个名为

loadMap

的Vue方法，该方法发送一个POST请求，其中包含一个查询字符串（

query

computed property）值作为有效负载

然后，它将路由重定向到另一个模板（

map.html

），并获取从SQLAPI调用生成的变量（

features

）

此变量是一个GeoJSON，它将填充地图的数据源

问题是在执行重定向后，贴图模板不会渲染。这是我的Python代码：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import requests
from flask import Flask, render_template, request, url_for, redirect

app = Flask(__name__, static_folder='static', template_folder='templates')

@app.route('/')
def home():
    """Displays the homepage."""

    return render_template('index.html')

@app.route('/query', methods=['POST'])
def query():

    data = request.get_json()
    query = data['query']

    return redirect(url_for('map', query=query))

@app.route('/map', methods=['GET'])
def map():

    query = request.args['query']
    url = 'https://ramiroaznar.carto.com/api/v2/sql?q={}&format=geojson'.format(query)

    session = requests.Session()
    r = session.get(url)
    features = r.json()

    return render_template('map.html', features=features)

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

看起来POST和GET调用已正确完成，但随后未启动重定向，因此未加载映射：

---

我如何解决这个问题？有没有更优雅的方法来实现这一点（从API调用加载新网站的数据）？

而不是重定向尝试呈现模板

@app.route('/query', methods=['POST'])
def query():
    data = request.get_json()
    query = data['query']
    return render_template('map.html', query=query)

---

希望这有帮助：p

问题出在我的js代码中。因此，我修复了将映射逻辑移动到vue实例的问题。为了避免使用两个模板，我还简化了python代码。现在应用程序可以工作了，但我应该重构js代码以提高性能（加载时间太长）和可伸缩性（映射逻辑应该再次移到vue实例之外）。您可以找到工作示例

以下代码片段是我的Flask python代码

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import requests
from flask import Flask, render_template, request, url_for, redirect

app = Flask(__name__, static_folder='static', template_folder='templates')

@app.route('/')
def home():
    """Displays the homepage."""

    return render_template('index.html')

@app.route('/data', methods=['GET'])
def data():

    query = request.args.get('query')
    url = 'https://ramiroaznar.carto.com/api/v2/sql?q={}&format=geojson'.format(query)

    session = requests.Session()
    r = session.get(url)
    features = r.json()

    return features

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

。。。这是我的js代码：

Vue.config.ignoredElements = [/as-\w+/];

const vm = new Vue({
    el: "#app",
    data: {
        geometryType: 'cities',
        map: false,
        features: {}
    },
    computed: {
        query: function() {
          let table = ''
          if (this.geometryType == 'cities'){
            table = 'ne_10m_populated_places_simple';
          } else {
            table = 'world_borders';
          }
          return `select * from ${table}`
        }
      },
    methods: {
        loadMap: function() {
          this.map = true;

          this.$http.get('/data', {params:  {query: this.query}} ).then(response => {
            this.features = JSON.parse(response.bodyText);
            console.log(this.features);
          }, response => {
            console.log('an error ocurred')
          })
        }
    },
    watch: {

      features: function() {

        const map = new mapboxgl.Map({
          container: 'map',
          style: carto.basemaps.voyager,
          center: [10.151367,51.172455],
          zoom: 2,
          scrollZoom: false
          });

        const nav = new mapboxgl.NavigationControl({ showCompass: false });
        map.addControl(nav, 'top-left');

        carto.setDefaultAuth({
            username: 'cartovl',
            apiKey: 'default_public'
        });

        console.log(this.features);
        const source = new carto.source.GeoJSON(this.features);
        const viz = new carto.Viz();
        const layer = new carto.Layer('layer', source, viz);
        layer.addTo(map, 'watername_ocean');
    }

  }
})

---

“不渲染”是什么意思？你到底看到了什么？地图没有显示。你可以在我共享的链接中查看。@DanielRoseman我已经用更详细的信息更新了这个问题。我还将链接改为glitch，现在应用程序托管在github中。但是你的应用程序根本不工作；当你点击按钮时，什么也不会发生。这显然是JS的问题，与Flask或重定向无关。我将尝试在我的JS代码中找出问题所在。