Python学习计划——11.2处理静态文件和模板继承

最新推荐文章于 2024-08-27 21:36:13 发布

写代码的M教授

最新推荐文章于 2024-08-27 21:36:13 发布

阅读量169

点赞数 5

分类专栏： Python学习计划文章标签：学习开发语言网络协议 python

本文链接：https://blog.csdn.net/qq_41698317/article/details/140789272

版权

Python学习计划专栏收录该内容

40 篇文章 4 订阅

订阅专栏

在Web开发中，处理静态文件（如CSS、JavaScript和图片）和使用模板继承来简化模板管理是两个重要的知识点。Flask提供了简单的方法来处理这些需求。

1. 处理静态文件

Flask默认将静态文件放在名为static的目录中，可以通过url_for()函数生成静态文件的URL。

示例：处理静态文件

首先，创建一个名为static的目录，并在其中创建一个名为style.css的文件：

/* static/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
h1 {
    color: #333;
}

然后，修改Flask应用代码，使用CSS文件：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', name="Flask")

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

在templates目录中创建一个名为index.html的文件：

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Flask App</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
</body>
</html>

访问http://127.0.0.1:5000/，你将看到应用使用了CSS样式。

2. 模板继承

模板继承是模板引擎的一项强大功能，允许你定义一个基础模板，然后在其他模板中继承这个基础模板，从而简化模板管理。Jinja2模板引擎支持模板继承。

示例：使用模板继承

首先，创建一个基础模板base.html：

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Flask App{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h1>My Flask App</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>

然后，创建继承基础模板的页面模板：

<!-- templates/index.html -->
{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<h2>Hello, {{ name }}!</h2>
{% endblock %}

<!-- templates/about.html -->
{% extends "base.html" %}

{% block title %}About{% endblock %}

{% block content %}
<h2>This is the About page.</h2>
{% endblock %}

修改Flask应用代码，添加新的路由：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', name="Flask")

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

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

访问以下URL：

http://127.0.0.1:5000/：显示"Hello, Flask!"
http://127.0.0.1:5000/about：显示"This is the About page."

3. 可运行的Python案例

下面是一个完整的Python程序，演示了如何处理静态文件和使用模板继承。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', name="Flask")

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

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

在static目录中创建style.css文件：

/* static/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
h1 {
    color: #333;
}
h2 {
    color: #555;
}

在templates目录中创建以下文件：

base.html：

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Flask App{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h1>My Flask App</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>

index.html：

<!-- templates/index.html -->
{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<h2>Hello, {{ name }}!</h2>
{% endblock %}

about.html：

<!-- templates/about.html -->
{% extends "base.html" %}

{% block title %}About{% endblock %}

{% block content %}
<h2>This is the About page.</h2>
{% endblock %}

可以将上面的代码保存到相应的文件中，然后运行app.py，观察程序的输出。这个案例综合了Flask处理静态文件和模板继承的基本知识，帮助你理解和掌握这些操作。继续加油，学习Python会越来越有趣和有用！