Python Flask html 模板的继承-526互联

前言全局说明

一、安装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 效果：

七、html 模板的继承

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>