flask学习之加载静态文件_flask运行网页静态文件

作者：你好赵伟 | 2024-05-05 19:31:46

踩

flask运行网页静态文件

应用背景：
这里的静态文件主要介绍三种：css文件 js文件图片文件
使用方法：
加载这三个文件的位置：是在父模板还是子模板呢？放在父模板里的
通畅加载这三个内容是在最顶部就开始加载的，放在父模板里，放在子模板有可能出现加载不出来的情况

方法：
在Jinja中加载静态文件非常简单，只需要通过url_for全局函数就可以实现。

{{ url_for('static',filename='js/index.js') }}
1

类似于这样的方式，从全局的角度调用url_for
css的加载：

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

js的加载：

<script src="{{ url_for('static',filename='js/index.js') }}"></script>
1

img的加载：

<img src="{{ url_for('static',filename='images/index.jpeg') }}" alt="">
1

完整代码：
python文件：

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def staticFile():
    return render_template('list.html')

if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <script src="{{ url_for('static',filename='js/index.js') }}"></script>

</head>
<body>
<img src="{{ url_for('static',filename='images/index.jpeg') }}" alt="">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

此外，在工作路径，新建static文件夹，在static文件夹内新建css images js文件夹：在子文件夹内再新建相应的文件，通过在url_for函数内通过filename指定文件的路径。
js:
定义动作

alert('hello world');
1

css:
定义网页格式

body{
    background:pink;
}
1
2
3

网页：
在这里插入图片描述
url_for函数默认会在项目根目录下的static文件夹中寻找about.css文件，如果找到了，会生成一个相对于项目根目录下的/static/about.css路径。当然我们也可以把静态文件不放在static文件夹中，此时就需要具体指定了

app = Flask(__name__,static_folder='C:\static')
1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/540461