flask 静态文件_在Flask开发过程中处理静态JS文件的简单方法

flask 静态文件

If your project has many JS files in the static directory, maintaining import links can be a pain.

如果您的项目在静态目录中有许多JS文件，那么维护导入链接可能会很麻烦。

This is a simple method to import all JS files from the static directory with three lines of code:

这是使用三行代码从静态目录导入所有JS文件的简单方法：

{% for file in js_files %}
  <script type=\"text/javascript\" src = {{file}}>  </script>
{% endfor %}

Now I will explain how to generate and pass the js_files object to the front end.

现在，我将解释如何生成js_files对象并将其传递给前端。

Given a static folder organized like this each file would need to be imported using a url which can quickly become difficult to maintain.

给定一个像这样组织的静态文件夹，则每个文件都需要使用url导入，该URL可能很快变得难以维护。

First we need to import the listdir module.

首先，我们需要导入listdir模块。

import os
from os import listdir

The following function can be used on the backend to generate a list of urls.

可以在后端使用以下函数来生成URL列表。

def compile_javascript():    # Defining the path to the folder where the JS files are saved
    path = \'static/javascript\'    # Getting all the files from that folder
    files = [f for f in listdir(path) if isfile(join(path, f))]    # Setting an iterator
    i = 0    # Looping through the files in the first folder
    for file in files:        # Building a file name
        file_name = \"javascript/\" + file        # Creating a URL and saving it to a list
        all_js_files_1[i] = url_for(\'static\', filename = file_name)        # Updating list index before moving on to next file
        i +=1return(all_js_files)

Then all you need to do is run the function within your route and pass the list into the render_template function.

然后，您所要做的就是在路由中运行该函数，并将列表传递给render_template函数。

@app.route(\"/\", methods = [\'GET\',\'POST\'])@app.route(\"/index\" , methods = [\'GET\',\'POST\'])
def index():    all_js_files = compile_javascript()return render_template(\'index.html\', 
                       title = \'Home\',
                       js_files = all_js_files)

Then with the js_files object available to the front end the following three lines of code inside the body of your html will import any files within the javascript folder.

然后，在js_files对象可用于前端的情况下，HTML正文中的以下三行代码将导入javascript文件夹内的所有文件。

{% for file in js_files %}
  <script type=\"text/javascript\" src = {{file}}>  </script>
{% endfor %}

If you have a lot more JS files you might want to break them down into sub directories within the javascript folder from the previous example. This method can easily be expanded to accommodate a more complex file structure.

如果您有更多的JS文件，则可能需要将它们分解为上一个示例的javascript文件夹内的子目录。可以轻松扩展此方法以适应更复杂的文件结构。

Considering a static folder structured like this:

考虑这样的静态文件夹：

To account for these sub folders we will alter our compile_js function to loop through both folders, create two lists, then combine then before returning it.

为了说明这些子文件夹，我们将更改compile_js函数以遍历两个文件夹，创建两个列表，然后合并然后返回。

def compile_javascript():    # Defining the path to the first folder
    path = \'static/javascript/JS_DIR_1\'
    
    # Getting all the files from that folder
    files = [f for f in listdir(path) if isfile(join(path, f))]
    
    # Setting an iterator
    i = 0
    
    # Looping through the files in the first folder
    for file in files:
        
        # Building a file name
        file_name = \"javascript/JS_DIR_1/\" + file
        
        # Creating a URL and saving it to a list
        js_files_1[i] = url_for(\'static\', filename = file_name)
        
        # Updating list index before moving on to next file
        i +=1    # Defining the path to the second folder
    path = \'static/javascript/JS_DIR_2\'
    
    # Getting all the files from that folder
    files = [f for f in listdir(path) if isfile(join(path, f))]
    
    # Setting an iterator
    i = 0
    
    # Looping through the files in the second folder
    for file in files:
        
        # Building a file name
        file_name = \"javascript/JS_DIR_2/\" + file
        
        # Creating a URL and saving it to a list
        js_files_2[i] = url_for(\'static\', filename = file_name)
        
        # Updating list index before moving on to next file
        i +=1# Combining both lists of URLs
    all_js_files = js_files_1 + js_files_2
    
    return(all_js_files)

And since the list of urls returned is exactly the same as our old version it can be handled by the same method as well (running the compile_js function in the route and passing it through the render_template function).

而且由于返回的URL列表与我们的旧版本完全相同，因此也可以使用相同的方法来处理(在路由中运行compile_js函数并将其通过render_template函数传递)。

Now you can add or rename any files within the define directories and they will automatically be imported. Notice also that nowhere in the code is an actual file name written. This is a helpful strategy to avoid annoying errors of broken links caused by silly spelling mistakes.

现在，您可以在define目录中添加或重命名任何文件，它们将被自动导入。还要注意，代码中没有写任何实际的文件名。这是一种有用的策略，可以避免由愚蠢的拼写错误引起的令人讨厌的链接断开错误。