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

http://127.0.0.1:5000

4.3 效果：

image

五、变量方式传值给 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 效果：

image

七、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 效果：
继承了模板里的内容

image

八、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 引入的输入框

image

    • *
免责声明：本号所涉及内容仅供安全研究与教学使用，如出现其他风险，后果自负。
    • *

参考、来源：
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

原网址: 访问
创建于: 2024-12-17 16:26:36
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论