模板文件夹中的烧瓶 url_for 'static'？

Question

也许有更好的方法可以做到这一点，但我正在尝试组织我的 Flask 应用程序，以便 静态 Javascript 和 HTML 模板位于同一文件夹中（类似于组件）

这只是为了组织目的，我不会在 jinja2 中呈现静态

所以，而不是这个：

├── templates/
│   ├── login.html
├── static/
│   ├── login.js

我正在寻找这个（只是一个想法）：

├── components/
│   ├── login/
│   │   ├── login.html
│   │   └── login.js

或者这个，所以我可以制作一个包装器，仅通过文件夹名称呈现组件，例如：return render_component('login')

├── components/
│   ├── login/
│   │   ├── template.html
│   │   └── login.js

概念是在login.html 模板中添加一个脚本标签 和url_for 到login.js

我也愿意接受不同的想法/方法来实现这种组件结构

Answer 1

我确信还有其他方法可以实现这一点，但一种方法是使用蓝图结构并在蓝图文件夹中包含该特定蓝图的所有静态文件。

app
|- collections
|    - blueprint_one
|        - configs
|        - static
|           - css
|           - js
|              js_file_one.js
|        - templates
|           - blueprint_one
|              html_file_one.html
|        blue_print_one_view_file_one.py
|        __init__.py   
|    - blueprint_two
|    - blueprint_three
|- static
|    - js
|    - css 
|- templates
__init__.py

上面的文件夹结构不仅可以让您分离出静态文件，还可以分离出 Flask 视图文件。

以下是激活/导入文件的示例：

1) 应用程序/init.py

app = Flask(__name__, static_folder='static')
app.config.from_pyfile('app_config.py')
# Do all your db set up and etcs..
# Import blueprints below set ups to prevent circular import
app.collections.blueprint_one import blueprint_one
app.collections.blueprint_two import blueprint_two
# Now register blueprints that you've imported
app.register_blueprint(blueprint_one, url_prefix='/blueprint_one')
app.register_blueprint(blueprint_two, url_prefix='/blueprint_two')

2) blueprint_one/init.py

# Create a blueprint
from flask import Blueprint
blueprint_one = Blueprint('blueprint_one_name', __name__, template_folder='templates', static_folder='static')
# Import required views to use
from . import blue_print_one_view_file_one.py

3) blueprint_one/blue_print_one_view_file_one.py

# Import blueprint
from app.collections.blueprint_one import blueprint_one
# Any view functions using above blueprint 
@blueprint_one.route('/login/, methods=['GET'])
def login():
    return render_template('blueprint_one/html_file_one.html')

4) blueprint_one/templates/blueprint_one/html_file_one.html

// Note: instead of .static, you can use blueprint_one.static.
<script type="text/javascript" src="{{ url_for('.static', filename = 'js/js_file_one.js') }}"></script>

5) app/static 和 app/templates 仍然可以像您当前使用的一样使用。

这个方案并没有解决js和html放在同一个文件夹的问题，但至少你可以将每个特性分成像蓝图这样的组件，让项目结构更加模块化。

Answer 2

没有最好的方法来做到这一点，所以我建议您查看烧瓶项目的设置方式。

http://flask.pocoo.org/docs/1.0/tutorial/layout/

另外我认为这个问题可能有一个可以解决你的问题的答案。

Flask url_for URLs in Javascript

现在有一些想法。 对我来说，听起来您想在静态文件夹中的文件中使用模板。这不是静态文件夹的用途。静态意味着不变，因此您的静态文件夹中的文件不应更改。模板旨在是动态的，这通常意味着它们会发生变化。如果您打算从静态目录中的文件呈现模板，您将遇到许多问题，甚至可能无法做到。我可以看到您可能遇到的最突出的问题之一是，如果浏览器认为新的 javascript 文件位于您的静态目录中，它就不会想要获取它们。浏览器可能会认为它们没有改变。 Flask 在幕后也做了一些魔术。当从已经请求文件的客户端处理静态目录中文件的 url 时，flask 会返回 HTTP CODE 304，这基本上意味着“文件没有更改”。

我可以继续讨论为什么你不应该这样做。相反，如果以上信息都不能解决您的问题，我建议您将 javascript 模板放在模板目录的子目录中。然后使用以下代码返回它们。

@app.route('/js/<file_name>',methods=['GET'])
def get_js_templates(file_name):
    return render_template('js/'+file_name)

我绝不是任何方面的专家，但我已经使用烧瓶 Web 框架完成了全栈开发。如果您有更多问题，请在此帖子上发表评论。