Question

我的项目具有以下结构：

run.py
application/
-- __init.py__
-- landing/
-- -- templates/
-- -- -- index.html
-- -- static/
-- -- -- img/
-- -- -- -- photo1.png
-- -- -- -- photo2.png
-- -- -- -- photo3.png
-- -- -- js/
-- -- -- -- script.png
-- -- __init.py__
-- -- models.py 
-- -- views.py

run.py包含：

from application import app

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

除其他事项外，application/__init.py__包含：

from application.landing.views import landing
app.register_blueprint(landing)

application/landing/__init.py__包含：

# coding:utf-8
from views import *

application/landing/models.py为空

application/landing/views.py包含：

from flask import render_template , Blueprint

from application import app

landing = Blueprint('landing' , __name__ , static_url_path='/landing/static' , static_folder='./static' , template_folder='./templates')

@landing.route('/')
@landing.route('/index')
def index():
        return render_template("index.html")

现在，在index.html中，我将每个css和jpg文件定义为：

{{ url_for('landing.static' , filename='css/bootstrap.min.css') }}

和

{{ url_for('landing.static' , filename='img/logo.png') }}

分别。到现在为止还挺好。但是，application/landing/static/js/main.js下的文件需要三个静态文件： //全屏背景图像幻灯片 $ .backstretch（[ “登陆/静态/ IMG / BG / 01.JPG”， “登陆/静态/ IMG / BG / 02.JPG”， “登陆/静态/ IMG / BG / 03.jpg” ]，{持续时间：3000，淡入淡出：750}）;

显然，我不想硬编码这些文件，而是使用蓝图代替或者换句话说，就像这样：

    $.backstretch([
        "{{ url_for('landing.static' , filename='img/bg/01.jpg') }}", 
        "{{ url_for('landing.static' , filename='img/bg/02.jpg') }}",
        "{{ url_for('landing.static' , filename='img/bg/03.jpg') }}"
    ], {duration: 3000, fade: 750});

但是你可能会猜到，这会返回404错误：

127.0.0.1 - - [31/Aug/2015 16:47:42] "GET /%7B%7B%20url_for('landing.static'%20,%20filename='img/bg/01.jpg')%20%7D%7D HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2015 16:47:42] "GET /%7B%7B%20url_for('landing.static'%20,%20filename='img/bg/02.jpg')%20%7D%7D HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2015 16:47:42] "GET /%7B%7B%20url_for('landing.static'%20,%20filename='img/bg/03.jpg')%20%7D%7D HTTP/1.1" 404 -

所有想法？

Answer 1

您可以尝试使用Flask-jsglue插件http://stewartpark.github.io/Flask-JSGlue/

仅包含插件

<head>
{{ JSGlue.include() }}
</head>

然后在实际的javascript代码中：

Flask.url_for("landing.static", {"filename": "img/bg/01.jpg"})

如何在JavaScript中利用Flask蓝图？

1 个答案: