flask模板加载js,css文件

最近在做数据可视化的时候接到一个需求：要求在flask中用ECharts实现数据可视化这就涉及到了flask中模板静态文件加载的问题，我们使用传统的方法是不能导入文件的如`<script src="/js/echarts.js"></script>`用这样的方法Flask找不到资源文件。

静态文件：通常是 CSS 和 JavaScript 文件的存放位置。理想情况下，你已经配置 web 服务器来提供它们，但是在开发中， Flask 也可以做到。只要在你的包中或模块旁边创建一个名为 static 的文件夹，在应用中使用 /static 即可访问。

我们可以给静态文件生成 URL ，使用特殊的 ‘static’ 端点名来引入静态文件:

url_for('static', filename='js/echarts.js')
这个文件应该存储在文件系统上的 static/js/echarts.js
在这里插入图片描述
我们在模板中可以使用<script src="{{ url_for('static',filename='js/echarts.js') }}"></script>来引入
然后在模板中写自己的js
下面粘上一个在ECharts官网上找的一个简单的小例子
先来看效果

完整代码

from flask import Flask,render_template,flash,request,redirect,url_for

app = Flask(__name__)


@app.route('/',methods=['POST','GET'])
def hello_world():
    return render_template('tryEcharts.html')


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

模板代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="{{ url_for('static',filename='js/echarts.js') }}"></script>
    <script src="{{ url_for('static',filename='theme/vintage.js') }}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'),'vintage');

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

flask模板加载js,css文件

flask模板加载js,css文件

我们可以给静态文件生成 URL ，使用特殊的 ‘static’ 端点名来引入静态文件:

猜你喜欢