Python Flask html 模板的继承
前言全局说明
一、安装flask模块
官方源：
pip3 install flask==2.3.2
国内源：
pip3 install flask==2.3.2 -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com
以上二选一，哪个安装快用哪个
flask 安装时间 2023-11
更多国内源: https://www.cnblogs.com/wutou/p/17949398
二、引用模块
from flask import Flask
三、启动服务
https://www.cnblogs.com/wutou/p/17949220
四、普通方式调用 html 文件写法
4.1.1 文件名：index.py
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
# app.debug = True
# app.run(host='127.0.0.1',port = 5000)
app.run(host='0.0.0.0',port = 5000)
4.1.2 文件名：index.html
<html lang="zh-cn">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<link href="/static/default.css" rel="stylesheet">
<link href="/static/github.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Hello Flask</h2>
</body>
</html>
html 内容是写死的，如果有1000个页面，要修改1000内容
4.2 访问连接：
4.3 效果：
五、变量方式传值给 html 文件写法
5.1.1 文件名：index.py
其他（略）
return render_template('index.html', content='Hello Flask')
和 4.1.1 代码区别，加了 "content='>Hello Flask'"
5.1.2 文件名：index.html
<html lang="zh-cn">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<link href="/static/default.css" rel="stylesheet">
<link href="/static/github.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>{{ content }} </h2>
</body>
</html>
和 4.1.2 代码区别，Hello Flask 改成 {{ content }} 变量
5.2 访问连接：
同上（略）
5.3 效果：
效果同上（略）
六、Html 变量索引方式调用
6.1.1 文件名：index.py
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
nums = [11, 22, 33]
return render_template('index.html', nums = nums)
if __name__ == '__main__':
# app.debug = True
# app.run(host='127.0.0.1',port = 5000)
app.run(host='0.0.0.0',port = 5000)
6.1.2 文件名：index.html
<html lang="zh-cn">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<link href="/static/default.css" rel="stylesheet">
<link href="/static/github.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>{{ nums[0] }} </h2>
</body>
</html>
6.2 访问连接：
同上（略）
6.3 效果：
七、extends 模板的继承
7.1.1 文件名：index.py
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
return render_template('index.html', content='Hello Flask')
if __name__ == '__main__':
# app.debug = True
# app.run(host='127.0.0.1',port = 5000)
app.run(host='0.0.0.0',port = 5000)
7.1.2 文件名：index.html
{% extends 'layout.html' %}
{% block content %}
<h2>{{ content }} </h2>
{% endblock %}
{% extends 'layout.html' %} 意思是继承 layout.html 文件
{% block content %} {% endblock %} 中间的内容是，要放到模板里的位置
7.1.2 文件名：layout.html
<html lang="zh-cn">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
</head>
<body>
<h2>laylout.html 模板继承</h2>
{% block content %} {% endblock %}
</body>
</html>
7.2 访问连接：
7.3 效果：
继承了模板里的内容
八、include 引入
适合固定不变的继承（如开头和结尾）
8.1.1 文件名：index.py
同7.1.1 （略）
8.1.2 文件名：index.html
{% extends 'layout.html' %}
{% block content %}
<h2>{{ content }} </h2>
{% include 'form.html' %}
{% endblock %}
{% include 'form.html' %} 用 include 方式引入 form.html
8.1.3 文件名：form.html
<form action="">
<input type="text">
<input type="text">
</form>
8.2 访问连接：
8.3 效果：
include 引入的输入框
免责声明：本号所涉及内容仅供安全研究与教学使用，如出现其他风险，后果自负。
参考、来源：
https://www.bilibili.com/video/BV11Y411h71J?p=31
https://blog.csdn.net/pick_ears/article/details/122093865
https://blog.csdn.net/gh254172840/article/details/81745338
