Flask Web框架的使用-静态文件和模版

一、前言
二、静态文件
三、模版
- 1. 渲染模版
- 2.变量
- 3.控件

一、前言

个人主页: ζ小菜鸡
大家好我是ζ小菜鸡，让我们一起来学习Flask Web框架的使用-静态文件和模版。
如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)

二、静态文件

动态Web 应用也会需要静态文件，通常是CSS和JavaScript 文件。理想状态下，你已经配置好Web 服务器来提供静态文件，但是在开发中，Flask 也可以做到。只是在你的包中或者是模块的所在目录中创建一个名为static 的文件夹，在应用中使用“/static”即可访问。

给静态文件生成URL，使用特殊的“/static” 端点名：

url_for("static",filename="style.css")

这个文件应该存储在文件系统上的“static/style.css”。

三、模版

模版是一个包含响应文件的文件，其中包含用占位变量表示的动态部分，其具体值只在请求的上下文中才能知道。使用真实值替换变量，再返回最终得到的响应字符串，这一过程称为渲染。为了渲染模版，Flask 使用了一个名为 “Jinja2” 的强大模版引擎。

1. 渲染模版

默认情况，Flask在程序文件夹中的templates 子文件夹中寻找模版。下面通过一个实例学习如何渲染模版。

示例：渲染模版

创建 04 文件夹，在该文件夹中创建templates 文件夹，然后创建2个文件夹，分别命名为index.html和user.html，最后在04文件夹下创建render.py文件，渲染这些模版。目录结构如下所示：

在这里插入图片描述

templates/index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>Hello world!</h1>
</body>
</html>

templates/user.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>Hello,{{username}}!</h1>
</body>
</html>

render.py 代码如下：

from flask import Flask, render_templateapp = Flask(__name__)@app.route("/")
def hello_world():return render_template("index.html")@app.route("/user/<username>")
def show_user_profile(username):# 显示该用户的用户信息return render_template("user.html", name=username)if __name__ == "__main__":app.run(debug=True)

Flask 提供的 render_template() 函数把 “Jinja2” 模版引擎集成到了程序中。render_template() 函数的第一个参数是模板的文件名。随后的参数都是键值对，表示模版中变量对应的真实值。在这段代码中，第二个模板收到一个名为name的变量。“name = name” 是关键字参数，这类关键字参数很常见，但如果你不熟悉它们的话，可能会觉得迷惑且难难以理解。左边“name”表示参数名，就是模板中使用的占位符;右边的“name”是当前作用域中的变量，表示同名参数的值。

运行效果如下图所示：

在这里插入图片描述

2.变量

在模板中使用的“{{username}}” 结构表示一个变量，它是一种特殊的占位符，告诉模板引擎这个位置的值从渲染模板时使用的数据中获取。 “Jinja2”能识别所有类型的变量，甚至是一些复杂的类型，例如，列表、字典、和对象。在模板中使用变量的一些示例如下：

<p>从字典中取一个值：{{mydict["key"]}}.</p>
<p>从一个列表中取一个值：{{mylist[3]}}.</p>
<P>从一个列表中取一个带索引的值{{mylist[myintvar]}}.</P>
<p>从一个对象的方法中去一个值：{{myobj.somemethod()}}.</p>

可以使用过滤器修改变量，过滤器名添加在变量之后，中间使用竖线分隔。例如，下述模板以首字母大写的形式显示变量 name 的值：

Hello,{{name|capitalize}}

Jinja2 提供的部分常用过滤器如下表所示：

名称	说明
safe	渲染值时不转义
capitalize	把首字母转成大写，其他字母转成小写
lower	把值转成小写的形式
upper	把值转成大写的形式
title	把值中的每个单词的首字母都换成大写
trim	把值的收尾空格去掉
striptags	渲染之前把值中的所有的HTML 标签都删掉

safe过滤器值得特别说明一下。默认情况下，出于安全考虑，Jinja2 会转义所有变量。如果个交量的值为“<hI>HeHo<hI>”，Jimja2会将其渲染成“'<hl>Hello</hl>”，浏览器能显示这个hI元素，但不会进行解释。很多情况下需要显示变量中存储的HTML代码，这时就可以使用safe 过滤器。

3.控件

Jinja2 提供了多种控制结构，可用来改变模版的渲染流程。接下来我们将使用简单的例子介绍其中最有用的控制结构。

下面这个例子展示了如何在模板中使用条件控制语句：

{% if user %}
Hello,{{user}}
{% else %}
Hello,Stranger
{% endif %}

另外一种常见需求是在模板中渲染一组元素。如下所示展示了如何使用for循环实现这一需求：

<ul>{% for comment in comments %}<li>{ {comment} }</li>{% endfor %}
</ul>

Jinja2 还支持宏。宏类似于 Python 代码中的函数。例如：

{% macro render_comment(comment) %}
<li>{ {comment} }
</li>
{% endmacro %}
<ul>{% for comment in comments %}<li>{ {comment} }</li>{% endfor %}
</ul>

为了独立使用宏，我们可以将其保存在单独的文件中，然后在需要使用的模板中导入：

{% import "macros.html" as macros %}
<ul>{% for comment in comments %}<li>{ {comment} }</li>{% endfor %}
</ul>

需要在多处重复使用的模板代码片段可以写入单独的文件，再包含在所有的模板中，以避免重复：

{% include "common.html" %}

另一种重复使用代码的强大方式的模板继承，它类似于Python 代码中的类继承。首先，创建一个名为base.html 的基模板：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>{% block head %}<title>{% block title %}{% endblock %} - My Application</title>{% endblock %}
</head>
<body>
{% block boby %}
{% endblock %}
</body>
</html>

block 标签定义的元素在衍生模板中修改，在本例中，我们定义了名为head、title和body 的块。注意，title 包含在head 中，下面这个示例是基模版的衍生模版：

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super()}}
<style>
</style>
{% endblock %}
{% block boby %}
<h1>Hello,World!</h1>
{% endblock %}