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的 script标签

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

Answer 1

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

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）app / 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 / 初始化 .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

没有最好的方法来执行此操作，因此我建议您检查一下应该设置Flask项目的方式。

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

我还认为，这个问题可能在这里可以解决您的问题。

Flask url_for URLs in Javascript

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

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

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

我绝不是任何能力的专家，但我已经使用flask网络框架进行了全栈开发。如果您还有其他问题，请在此帖子上发表评论。

在模板文件夹中是否包含url_for'static'？

2 个答案: