Python Web 框架-FLASK day02_python中{% block container %}

目录

 

1.模板 - Templates

2.自定义错误页面

---

1.模板 - Templates

1. 模板中的语法
   1. 变量
      变量时一种特殊的占位符，告诉模板引擎该位置的值是从渲染模板时的数据中来获取的
      
      在视图中：
      @app.route('/')
      def index():
          render_template('xxx.html',name='sf.zh',age=18)
      
      name 和 age 就是要传递到 xxx.html 中的变量
      
      在模板中：
        {{变量名}}
      
      练习：在01_temp.html基础上，完成下列效果显示
      书名：《钢铁是咋炼成的》
      作者：奥斯特洛夫斯基
      价格：32.5
      出版社：北京大学出版社
   2. 过滤器
      1. 什么是过滤器
         过滤器是允许在变量输出显示之前改变变量的值
      2. 过滤器的语法
         {{变量|过滤器}}
         
         Jinja2 变量过滤器

         过滤器名	说明
         capitalize	首字符变大写，其他字符变小写
         lower	把值转换成小写
         upper	把值转换成大写
         title	把值中的每个单词的首字符变大写
         trim	把值两端的空格去掉

          

      3. 控制结构

         1. if结构
            {% if 条件 %}
            
            {% endif %}
            
            
            {% if 条件 %}
            满足条件要执行的代码
            {% else %}
            不满足条件要执行的代码
            {% endif %}
            查看下面示例 01_temp.html 21行

         2. for结构
            {% for 变量 in 元组|列表|字典}
            {% endfor %}

         3. 宏
            使用{% macro %} 标签声明宏
            
            //声明
            {% macro show(str) %}
                <h1>{{str}}</h1>
            {% endmacro %}
            
            //调用
            {{show(uname)}}
            查看下面示例 Run1.py 27行 / 01_temp.html 68行
            
            为了方便重复使用，允许将宏放在单独的模板文件中声明定义

            1. 创建macro.html
               {% mscro show(str) %}
                   <h1>{{str}}</h1>
               {% endmacro %}

               {% mscro show_li(str) %}
               <li>{{str}}</li>
               {% endmacro %}

            2. 在使用的网页中，导入macro.html
               {% import 'macro.html' as macros %}
               
               {{ macros.show_li(uname) }}
               查看下面示例 Run1.py 28行 / 01_temp.html 80行 / macro.html

         4. 模板的包含
            在多处重复使用的模板代码可以放在单独的文件中，可以被其他的模板所包含（引用）
            {% include 'xxx.html' %}
            查看下面示例 Run1.py 47行 / 02-head.html / 03-index.html

2. 静态文件

   1. 什么是静态文件
      在Flask中不能与服务器动态交互的文件都是静态文件
      如：css，js，图片，音视频，... ...

   2. 静态文件的处理
      所有静态文件都保存在项目文件夹中的 static 文件夹中，在访问静态文件的时候需要通过/static/资源路径 进行访问
      <img src = '/static/资源路径'>
      
      反向解析：
      url_for('static',filename='<file_path>')
      <img src="{{url_for('static',filename='images/b04.jpg')}}">
      查看下面示例Run1.py 47行 /  03-index.html 17行

3. 模板的继承

   1. 什么是模板的继承
      模板的继承类似于类的继承，如果在一个模板中出现的大量内容是另外一个模板的话，那么就可以使用继承的方式来简化开发

   2. 语法

      1. 父模板中
         需要定义出哪些内容在子模板中是可以被重写的
         {% block 块名 %}
         {% endblock %}
         
         block:定义允许在子模板中被修改的内容

         1. 在父模板中正常显示，没有任何影响

         2. 在子模板中可以被重写

      2. 子模板中

         1. 使用{% extends '父模板名称' %} 来完成继承

         2. 使用{% block 块名 %} 来重写父模板中的同名内容
            {% block 块名 %}
                覆盖掉父模板中的内容
            {% endblock %}
            
            允许通过{{super()}} 来调用父模板中的内容
            查看下面示例 Run1.py 52行，56行 / 04-parent.html / 05-child.html

2.自定义错误页面

1. 404 的错误处理
   @app.errorhandler(404)
   def page_not_found(e):
       return render_template('404.html'),404
2. 500的错误处理
   @app.errorhandler(500)
   def internal_server_error(e):
       return render_template('500.html'),500
   ... ...
   404.html,500.html 需要自定义
   查看下面示例 Run1.py 59行 / 404.html

 

以上示例：

 

Run1.py

from flask import Flask, render_template
 
app = Flask(__name__)
 
class Person(object):
 
    name = None
 
    def say(self):
        return "hello i'm a person "
 
@app.route('/temp')
def temp():
    # dic = {
    #     'title':'我的第一个模板',
    #     'bookName':'钢铁是咋练成的',
    #     'author':'奥斯特洛夫斯基',
    #     'price':32.5,
    #     'publisher':'北京大学出版社',
    # }
 
    title = '我的第一个模板'
    bookName = '钢铁是咋练成的'
    author = '奥斯特洛夫斯基'
    price = 32.5
    publisher = '北京大学出版社'
    list = ["金毛狮王","青衣父王","紫衫龙王","白眉鹰王"]
    tup = ("刘德华","张学友","黎明","郭富城")
    dic = {
        'LW':'老魏',
        'WWC':'隔壁老王',
        'LZ':'吕泽',
        'MM':'萌萌',
        'PY':'皮爷',
    }
    per = Person()
    per.name = '漩涡鸣人'
    uname = 'uzumaki naruto'
 
    print(locals())
    return render_template('01_temp.html',params=locals())
 
@app.route('/login')
def login():
    return '这里是登录页面'
 
@app.route('/index')
def index():
    return render_template('03-index.html',uname='测试变量')
 
@app.route('/parent')
def parent():
    return render_template('04-parent.html')
 
@app.route('/child')
def child():
    return render_template('05-child.html')
 
@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'),404
 
 
if __name__ == '__main__':
    app.run(debug=True)

 

01_temp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{params.title}}</title>
</head>
<body>
    {% if params.uname %}
        <h1>欢迎:{{params.uname}}</h1>
    {% endif %}
 
    {% if uname %}
        <h1>欢迎:{{uname}}</h1>
    {% else %}
        <h1>
            <a href="{{url_for('login')}}">登录</a>
        </h1>
    {% endif %}
 
 
    <!-- for 循环  -->
    <div style="font-size: 22px;">
        {% for str in params.list %}
            <p>{{str}}</p>
        {% endfor %}
    </div>
 
    <ul>
        {% for str in params.tup %}
            <li>{{str}}</li>
        {% endfor %}
    </ul>
 
    <div style="color: #f60;">
        {% for key,value  in params.dic.items() %}
        <h2>{{key}}:{{value}}</h2>
        {% endfor %}
    </div>
 
 
 
 
 
    <h2>书名:<<{{params.bookName}}>></h2>
    <h2>作者:{{params.author}}</h2>
    <h2>价格:{{params.price}}</h2>
    <h2>出版社:{{params.publisher}}</h2>
    <!-- 获取列表中的第二个元素 -->
    <h2>list[1]:{{params.list.1}}</h2>
    <h2>list[1]:{{params.list[1]}}</h2>
    <!-- 获取元组中的第三个元素 -->
    <h2>tup[2]:{{params.tup.2}}</h2>
    <h2>tup[2]:{{params.tup[2]}}</h2>
    <!-- 获取字典中的键为 WWC 的值-->
    <h2>dic['PY']:{{params.dic.PY}}</h2>
    <h2>dic['WWC']:{{params.dic['WWC']}}</h2>
    <!-- 获取per对象的name属性值-->
    <h2>per.name:{{params.per.name}}</h2>
    <!-- 调用 per 对象的 say 方法-->
    <h2>per.say():{{params.per.say()}}</h2>
    <!-- 过滤器 -->
    <h2>原始值:{{params.uname}}</h2>
    <h2>capitalize : {{params.uname|capitalize}}</h2>
    <h2>upper : {{params.uname|upper}}</h2>
    <h3>title : {{params.uname|title}}</h3>
 
 
    <!-- 声明一个 宏 -->
    {% macro show(str) %}
        <li style="color:#f60;">{{str}}</li>
    {% endmacro %}
 
    <h2>使用宏显示数据</h2>
    <ul>
        {% for str in params.list %}
            {{show(str)}}
        {% endfor %}
    </ul>
 
    <!-- 引入 macro.html 并使用 show_li 宏 -->
    {% import 'macro.html' as macros %}
    <ul>
        {% for str in params.tup %}
            {{macros.show_li(str)}}
        {% endfor %}
    </ul>
</body>
</html>

 

macro.html

{% macro show_li(str) %}
    <li>
        <p style="font-size:20px;">内容:</p>
        <span style="color:#f60;">{{str}}</span>
    </li>
{% endmacro %}

 

02-head.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="container">
        <div class="top">
            <h2>网页头部</h2>
            <h2>{{uname}}</h2>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="#">导航1</a>
                </li>
                <li>
                    <a href="#">导航2</a>
                </li>
                <li>
                    <a href="#">导航3</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

 

03-index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 包含 02-head.html 内容到当前模板中来 -->
    {% include '02-head.html' %}
    <!-- 网页的主体 -->
    <div class="container">
        <div class="f1">
            <h2>这是主体内容</h2>
        </div>
    </div>
    <p>
        <img src="/static/images/b04.jpg" width="350">
        <img src="{{url_for('static',filename='images/b04.jpg')}}" width="350">
    </p>
</body>
</html>

 

04-parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是父模板中 头部内容</h1>
    {% block container %}
    <h1>这是父模板中 主体内容</h1>
    {% endblock %}
    <h1>这是父模板中 底部内容</h1>
</body>
</html>

 

05-child.html

{% extends '04-parent.html' %}
 
<!-- 重写 04-parent.html 的 container 的内容 -->
{% block container %}
    <!-- 调用父母版中的内容 -->
    {{ super() }}
    <h1>这是子模板中被重写的内容</h1>
{% endblock %}

 

404.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>你要查找的资源不存在!!!</h1>
</body>
</html>