Question

所以这很令人尴尬。我有一个应用程序，我在Flask中汇集在一起，现在它只是提供一个静态HTML页面，其中包含一些指向CSS和JS的链接。我无法找到文档Flask中描述返回静态文件的位置。是的，我可以使用render_template，但我知道数据没有模板化。我原以为send_file或url_for是正确的，但我无法让它们发挥作用。与此同时，我正在打开文件，阅读内容，并使用适当的mimetype绑定Response：

import os.path

from flask import Flask, Response


app = Flask(__name__)
app.config.from_object(__name__)


def root_dir():  # pragma: no cover
    return os.path.abspath(os.path.dirname(__file__))


def get_file(filename):  # pragma: no cover
    try:
        src = os.path.join(root_dir(), filename)
        # Figure out how flask returns static files
        # Tried:
        # - render_template
        # - send_file
        # This should not be so non-obvious
        return open(src).read()
    except IOError as exc:
        return str(exc)


@app.route('/', methods=['GET'])
def metrics():  # pragma: no cover
    content = get_file('jenkins_analytics.html')
    return Response(content, mimetype="text/html")


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def get_resource(path):  # pragma: no cover
    mimetypes = {
        ".css": "text/css",
        ".html": "text/html",
        ".js": "application/javascript",
    }
    complete_path = os.path.join(root_dir(), path)
    ext = os.path.splitext(path)[1]
    mimetype = mimetypes.get(ext, "text/html")
    content = get_file(complete_path)
    return Response(content, mimetype=mimetype)


if __name__ == '__main__':  # pragma: no cover
    app.run(port=80)

有人想为此提供代码示例或网址吗？我知道这很简单。

Answer 1

首选方法是使用nginx或其他Web服务器来提供静态文件;他们能够比Flask更有效率地做到这一点。

但是，您可以使用send_from_directory从目录发送文件，这在某些情况下非常方便：

from flask import Flask, request, send_from_directory

# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path='')

@app.route('/js/<path:path>')
def send_js(path):
    return send_from_directory('js', path)

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

使用用户提供的路径不使用send_file或send_static_file。

send_static_file示例：

from flask import Flask, request
# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path='')

@app.route('/')
def root():
    return app.send_static_file('index.html')

Answer 2

我相信你会在那里找到你需要的东西：http://flask.pocoo.org/docs/quickstart/#static-files

基本上，您只需要在软件包的根目录下使用“静态”文件夹，然后就可以使用url_for('static', filename='foo.bar')或使用http://example.com/static/foo.bar直接链接到您的文件。

编辑：根据评论中的建议，您可以直接使用'/static/foo.bar'网址路径但 url_for()开销（性能明智）非常低，并使用它意味着您将能够轻松自定义之后的行为（更改文件夹，更改URL路径，将静态文件移动到S3等）。

Answer 3

您也可以，这是我的最爱，将文件夹设置为静态路径，以便每个人都可以访问其中的文件。

app = Flask(__name__, static_url_path='/static')

使用该集合，您可以使用标准HTML：

<link rel="stylesheet" type="text/css" href="/static/style.css">

Answer 4

如果您只想移动静态文件的位置，那么最简单的方法是在构造函数中声明路径。在下面的示例中，我将模板和静态文件移动到名为web的子文件夹中。

app = Flask(__name__,
            static_url_path='', 
            static_folder='web/static',
            template_folder='web/templates')

static_url_path=''从网址中删除任何前面的路径（即默认/static）。
static_folder='web/static'会告诉Flask发送的文件 web/static。
template_folder='web/templates'，类似地，这改变了模板文件夹。

使用此方法，以下URL将返回CSS文件：

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">

最后，这里是文件夹结构的一个快照，其中flask_server.py是Flask实例：

Answer 5

您可以使用此功能：

send_static_file(filename)
内部用于发送静态的函数从静态文件夹到浏览器的文件。

app = Flask(__name__)
@app.route('/<path:path>')
def static_file(path):
    return app.send_static_file(path)

Answer 6

我使用的（并且它工作得很好）是一个“模板”目录和一个“静态”目录。我将所有.html文件/ Flask模板放在templates目录中，static包含CSS / JS。无论你使用Flask的模板语法的程度如何，render_template对我所知的通用html文件都很好。以下是我的views.py文件中的示例调用。

@app.route('/projects')
def projects():
    return render_template("projects.html", title = 'Projects')

当您想要在单独的静态目录中引用某些静态文件时，请确保使用url_for（）。你可能最终会在html中的CSS / JS文件链接中这样做。例如......

<script src="{{ url_for('static', filename='styles/dist/js/bootstrap.js') }}"></script>

这里是“规范”非正式Flask教程的链接 - 这里有很多很棒的技巧可以帮助你实现目标。

http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

Answer 7

基于其他答案的最简单的工作示例如下：

from flask import Flask, request
app = Flask(__name__, static_url_path='')

@app.route('/index/')
def root():
    return app.send_static_file('index.html')

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

使用名为 index.html 的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <div>
         <p>
            This is a test.
         </p>
    </div>
</body>
</html>

重要提示： index.html 位于名为 static 的文件夹中，这意味着<projectpath>拥有.py文件，<projectpath>\static包含html文件。

如果您希望服务器在网络上可见，请使用app.run(debug=True, host='0.0.0.0')

编辑：如果要求显示文件夹中的所有文件，请使用此

@app.route('/<path:path>')
def static_file(path):
    return app.send_static_file(path)

这基本上是BlackMamba的答案，所以请给他们一个upvote。

Answer 8

对于创建下一个文件夹树的angular +样板流：

backend/
|
|------ui/
|      |------------------build/          <--'static' folder, constructed by Grunt
|      |--<proj           |----vendors/   <-- angular.js and others here
|      |--     folders>   |----src/       <-- your js
|                         |----index.html <-- your SPA entrypoint 
|------<proj
|------     folders>
|
|------view.py  <-- Flask app here

我使用以下解决方案：

...
root = os.path.join(os.path.dirname(os.path.abspath(__file__)), "ui", "build")

@app.route('/<path:path>', methods=['GET'])
def static_proxy(path):
    return send_from_directory(root, path)


@app.route('/', methods=['GET'])
def redirect_to_index():
    return send_from_directory(root, 'index.html')
...

它有助于重新定义静态＆＃39;要自定义的文件夹。

Answer 9

所以我开始工作了（基于@ user1671599答案），并希望与你们分享。

（我希望我这样做是因为它是我在Python中的第一个应用程序）

我这样做了 -

项目结构：

enter image description here

server.py：

from server.AppStarter import AppStarter
import os

static_folder_root = os.path.join(os.path.dirname(os.path.abspath(__file__)), "client")

app = AppStarter()
app.register_routes_to_resources(static_folder_root)
app.run(__name__)

AppStarter.py：

from flask import Flask, send_from_directory
from flask_restful import Api, Resource
from server.ApiResources.TodoList import TodoList
from server.ApiResources.Todo import Todo


class AppStarter(Resource):
    def __init__(self):
        self._static_files_root_folder_path = ''  # Default is current folder
        self._app = Flask(__name__)  # , static_folder='client', static_url_path='')
        self._api = Api(self._app)

    def _register_static_server(self, static_files_root_folder_path):
        self._static_files_root_folder_path = static_files_root_folder_path
        self._app.add_url_rule('/<path:file_relative_path_to_root>', 'serve_page', self._serve_page, methods=['GET'])
        self._app.add_url_rule('/', 'index', self._goto_index, methods=['GET'])

    def register_routes_to_resources(self, static_files_root_folder_path):

        self._register_static_server(static_files_root_folder_path)
        self._api.add_resource(TodoList, '/todos')
        self._api.add_resource(Todo, '/todos/<todo_id>')

    def _goto_index(self):
        return self._serve_page("index.html")

    def _serve_page(self, file_relative_path_to_root):
        return send_from_directory(self._static_files_root_folder_path, file_relative_path_to_root)

    def run(self, module_name):
        if module_name == '__main__':
            self._app.run(debug=True)

Answer 10

class ListViewAdd extends StatefulWidget {
  @override
  _ListViewAddState createState() => _ListViewAddState();
}

class _ListViewAddState extends State<ListViewAdd> {

  int steps = 1;

  List<Widget> buildsteps() {
    List<Widget> l = [];

    for (int i = 1; i <= steps; i++)
      l.add(Padding(
        padding: const EdgeInsets.all(8.0),
        child: MyTextFormField(
          labelText: "Step ${i}",
        ),
      ));

    l.add(
      Center(
        child: RaisedButton(
          child: Text("Add step"),
          onPressed: () {
            setState(() {
              steps++;
            });
          },
        ),
      ),
    );

    return l;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("ListViewAdd")
      ),
      body: new ListView(
        children: buildsteps()
      )
    );
  }
}

如果您的根目录中有模板，则包含以下内容的文件也位于同一位置，如果该文件位于另一个位置，则放置app = Flask（ name ）将起作用。您将必须指定模板位置，以使Flask指向该位置

Answer 11

from flask import redirect, url_for
...
@app.route('/', methods=['GET'])
def metrics():
    return redirect(url_for('static', filename='jenkins_analytics.html'))

这会为您的html文件中引用的所有文件（css＆amp; js ...）提供服务。

Answer 12

最简单的方法是在主项目文件夹中创建一个静态文件夹。包含.css文件的静态文件夹。

主文件夹

/Main Folder
/Main Folder/templates/foo.html
/Main Folder/static/foo.css
/Main Folder/application.py(flask script)

Image of main folder containing static and templates folders and flask script

烧瓶

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def login():
    return render_template("login.html")

html（布局）

<!DOCTYPE html>
<html>
    <head>
        <title>Project(1)</title>
        <link rel="stylesheet" href="/static/styles.css">
     </head>
    <body>
        <header>
            <div class="container">
                <nav>
                    <a class="title" href="">Kamook</a>
                    <a class="text" href="">Sign Up</a>
                    <a class="text" href="">Log In</a>
                </nav>
            </div>
        </header>  
        {% block body %}
        {% endblock %}
    </body>
</html>

html

{% extends "layout.html" %}

{% block body %}
    <div class="col">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <input type="submit" value="Login">
    </div>
{% endblock %}

Answer 13

默认名为“ static”的文件夹包含所有静态文件这是代码示例：

<link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

Answer 14

要分享...。这个例子。

from flask import Flask
app = Flask(__name__)

@app.route('/loading/')
def hello_world():
    data = open('sample.html').read()    
    return data

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

这更好更简单。

Answer 15

所有答案都是好的，但对我而言，行之有效的只是使用Flask中的简单功能send_file。当 host：port / ApiName 将在浏览器中显示文件的输出

时，当您只需要发送HTML文件作为响应时，此方法很好用


@app.route('/ApiName')
def ApiFunc():
    try:
        return send_file('some-other-directory-than-root/your-file.extension')
    except Exception as e:
        logging.info(e.args[0])```

Answer 16

可以使用静态端点创建静态文件的URL，如下所示：

url_for('static', filename = 'name_of_file')
<link rel="stylesheet" href="{{url_for('static', filename='borders.css')}}" />

Answer 17

默认情况下，flask使用“templates”文件夹来包含所有模板文件（任何纯文本文件，但通常为.html或某种模板语言，如jinja2）＆amp;一个“静态”文件夹，用于包含所有静态文件（例如.js .css和您的图片）。
在routes中，您可以使用render_template()呈现模板文件（如上所述，默认情况下，它位于templates文件夹中）作为您的请求的响应。在模板文件中（它通常是类似.html的文件），你可以使用一些.js和/或`.css'文件，所以我猜你的问题是如何将这些静态文件链接到当前模板文件。

Answer 18

如果您只是想尝试打开文件，可以使用app.open_resource()。因此，阅读文件看起来像

with app.open_resource('/static/path/yourfile'):
      #code to read the file and do something

Answer 19

一种简单的方法。 干杯！

demo.py

ModuleNotFoundError: No module named 'tensorflow'

现在创建名为 templates 的文件夹名称。将您的 index.html 文件添加到模板文件夹

index.html

from flask import Flask, render_template
app = Flask(__name__)

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

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

项目结构

<!DOCTYPE html>
<html>
<head>
    <title>Python Web Application</title>
</head>
<body>
    <div>
         <p>
            Welcomes You!!
         </p>
    </div>
</body>
</html>

Answer 20

在静态目录中，在该目录中创建模板目录，添加所有 html 文件，为 css 和 javascript 创建单独的目录，因为flask 将处理或识别模板目录中的所有 html 文件。

static -
       |_ templates
       |_ css
       |_javascript
       |_images

如何在Flask中提供静态文件

20 个答案: