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

二、引用模块

 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 访问连接：

http://127.0.0.1:5000

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 访问连接：

http://127.0.0.1:5000

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 访问连接：

http://127.0.0.1:5000

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

posted @ 2024-01-11 12:57 悟透阅读(216) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Python Flask 返回函数、带值的函数、装饰器设置全局函数、|(管道符)传值

· Python Flask 特殊装饰器，执行路由前和执行路由后执行的装饰器

· Flask开发

· Flask的简单学习

· Flask-框架秘籍-全-

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！

历史上的今天：
2022-01-11 Python模块之xlutils - 写入excel的xls文件
2022-01-11 Python模块之xlwt -写入excel的xls文件
2022-01-11 Python模块之xlrd - 读取excel的xls文件

公告

昵称：悟透
园龄： 11年1个月
粉丝： 18
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

合集 (6)

随笔分类 (834)

随笔档案 (856)

相册 (1)

test(1)

	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)

	<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>

	其他（略）
	return render_template('index.html', content='Hello Flask')

	{% extends 'layout.html' %}

	{% block content %}
	<h2>{{ content }} </h2>
	{% endblock %}

	<form action="">
	<input type="text">
	<input type="text">
	</form>

Python Flask html 模板的继承

前言全局说明

一、安装flask模块

二、引用模块

三、启动服务

四、普通方式调用 html 文件写法

4.1.1 文件名：index.py

4.1.2 文件名：index.html

4.2 访问连接：

4.3 效果：

五、变量方式传值给 html 文件写法

5.1.1 文件名：index.py

5.1.2 文件名：index.html

5.2 访问连接：

5.3 效果：

六、Html 变量索引方式调用

6.1.1 文件名：index.py

6.1.2 文件名：index.html

6.2 访问连接：

6.3 效果：

七、extends 模板的继承

7.1.1 文件名：index.py

7.1.2 文件名：index.html

7.1.2 文件名：layout.html

7.2 访问连接：

7.3 效果：

八、include 引入

8.1.1 文件名：index.py

8.1.2 文件名：index.html

8.1.3 文件名：form.html

8.2 访问连接：

8.3 效果：

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

合集 (6)

随笔分类 (834)

随笔档案 (856)

相册 (1)

阅读排行榜

评论排行榜

推荐排行榜

最新评论