flask环境下的echarts前后端交互的多种方法

原创已于 2022-05-19 22:53:36 修改 · 819 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#python #flask #后端 #echarts

于 2022-05-14 18:32:23 首次发布

python 专栏收录该内容

71 篇文章

订阅专栏

本文探讨了四种不同的前后端交互方式：1) Flask直接遍历，利用双括号进行数据传递；2) Ajax实现异步更新；3) JSON用于防止乱码的数据传输；4) Flask风格的前端接收。作者指出，虽然这些方法都能实现交互，但理解其工作原理和适用场景至关重要。在开发中，考虑将Echart的setOption移至前端，提高代码可读性。文章提供了实例代码，帮助开发者了解如何在实际项目中应用这些方法。

文章目录

正常情况下是在html页面写交互的。
我找的一个可视化模板把交互echart的 setoption 写在js里面了。
可能需要移到前端。

我的思路哈，先在前端定义再使用，更有利于前端开发者的可读性。
开发的时候把定义的语句返回给前端就可以了。
在这里插入图片描述

所以我需要在前端再写一个新的option来修改。
并删除js里面的数据。

参考

 xAxis:{
                type:'category',
                data:[{%for g in game%}'{{ g }}',{% endfor %}]
            },

第一种方法 flask直接遍历：

用的是双括号

和这个类似，
那么这两个例子可以大概知道前后端怎么交互，

第二种方法 Ajax：

但是我的模板只有和这个很类似，他用的是 Ajax，

准备试一下，并和前面对比。
貌似这两种方法都可以，但是第一种方法原理不是很清楚（应该是python Dj的框架），

第三种方法 JSON：

需要注意避免乱码
用的是 JSON

第四种方法：flask风格遍历前端接受

这种风格也很flask
但其实是第一种的多此一举的版本。
直接把flask的传过来的值用在需要用的用的地方就行了。

好处是什么，如果用flask风格开发更方便，但是兼容性会更差，