前言
之前的简单Flask例子中，使用Flask显示了一个最简单的helloworld, 直接返回的是一个字符串。在实际的开发和应用中显然不能满足需求，实际的网页都是由HTML+CSS+JavaScript组成， 因此Flask需要实际的渲染和生成一个HTML界面,在Flask中， HTML文件又称为模板template。
本节的内容: 使用Flask显示一个简单的HTML界面.
测试环境
Ubuntu 20.04
python flask
vscode
关于Flask web开发中的术语简介
刚刚接触web开发之前，笔者对web中涉及的HTML/CSS/JS这些是一头雾水，分不清哪些是程序开发语言，哪些是开发框架。 经过一段时间的学习，浅谈一下笔者对以下内容在Flask中扮演角色的认识:
| Item | 全称 | 用途 | 运行环境 |
|---|---|---|---|
| HTML | 超文本标记语言 | 网页内容的显示， 相当于网页的骨架 | 浏览器渲染 |
| CSS | 层叠样式表 | 网页的布局以及显示格式，比如背景颜色，对齐方式之类 | 浏览器渲染 |
| JavaScript | - 和Java没关系 | HTML界面中嵌入的脚本程序，用于网页一些动态效果的控制 | 浏览器执行，除了浏览器还可以使用nodejs执行 |
| Python | 不用说了，大家都知道大蟒蛇 | web后台，和数据库打交道 | python解释器， 通常使用conda环境 |
HTML和CSS不算是程序开发的语言， JavsScript是程序开发语言， 类似于经常使用的python/C++/Java一样， JavaScript和Python感觉比较像，都是脚本语言。 由于Flask属于Python web, 因此不会涉及太多的JavaScript。
Flask 渲染HTML模板涉及的内容
-
render_template()函数
Flask中关于render_template函数的介绍:- template_name_or_list: 被渲染的模板的名称，一般是待渲染的HTML文件的名称
- context: key-val迭代器， 传入render_template()函数中的一些字典变量，比如：
render_template("index.html", param1=val_1, param2=val_2), 用于向html文件中传入一些动态的变量
def render_template(template_name_or_list, **context):
"""Renders a template from the template folder with the given
context.
:param template_name_or_list: the name of the template to be
rendered, or an iterable with template names
the first one existing will be rendered
:param context: the variables that should be available in the
context of the template.
"""
-
url_for()函数
def url_for(endpoint, **values):
"""Generates a URL to the given endpoint with the method provided.
Variable arguments that are unknown to the target endpoint are appended
to the generated URL as query arguments. If the value of a query argument
is ``None``, the whole pair is skipped. In case blueprints are active
you can shortcut references to the same blueprint by prefixing the
local endpoint with a dot (``.``).
- Jinja2语法
Jinja2 是 Flask 框架的两大核心(Jinja2 模板引擎和 Werkzeug WSGI 工具集)之一, Jinja2 是 Flask 框架内置的模板语言， 在安装 Flask 框架时，就会默认安装上 Jinja2 模板引擎。
Jinja2用于flask中的html文件， jinja2支持一些python中的语法:
- for循环
- if， if-else
- import
- include
- val 变量显示
- block 代码块
- extend 模板继承
VSCode提供了对flask, Jinja2支持的插件:
image.png
测试工程
demo1 --- 使用HTML显示一首诗
工程文件目录组织
image.png
为了在Flask中显示HTML, 需要添加以下文件:
static: 包含css和js文件夹， 分别存放css文件以及javascript代码文件
templates: 存放HTML文件
代码介绍
- app.py
需要在python flask中倒入函数 ——render_template, render_template() 函数输入为HTML文件，返回为包含HTML文件的响应。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
- index.html
为了使得显示效果更好， 在html的 head标签中引入了css文件， 这里使用了Flask提供的函数url_for()用于查找和定位css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask_demo</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
</head>
<body>
<p id="content">
<b>将进酒·君不见黄河之水天上来</b> <br> <br>
[唐] 李白 <br> <br>
君不见黄河之水天上来，奔流到海不复回。<br>
君不见高堂明镜悲白发，朝如青丝暮成雪。<br>
人生得意须尽欢，莫使金樽空对月。<br>
天生我材必有用，千金散尽还复来。<br>
烹羊宰牛且为乐，会须一饮三百杯。<br>
岑夫子，丹丘生，将进酒，杯莫停。<br>
与君歌一曲，请君为我倾耳听。<br>
钟鼓馔玉不足贵，但愿长醉不复醒。<br>
古来圣贤皆寂寞，惟有饮者留其名。<br>
陈王昔时宴平乐，斗酒十千恣欢谑。<br>
主人何为言少钱，径须沽取对君酌。<br>
五花马，千金裘，<br>
呼儿将出换美酒，与尔同销万古愁。
</p>
</body>
</html>
- style.css文件
这个css很简单， #{element}代表id选择器(CSS,HTML内容，不属于flask)
#content {
text-align: center;
}
运行： flask run
运行效果:
image.png
在浏览器上， 按F12 进入开发模式，观察渲染之后的HTML文件:
image.png
网友评论