Python Web 框架-FLASK day02

程序员文章站 2022-03-05 07:50:13

...

1.模板 - Templates

2.自定义错误页面

1.模板 - Templates

模板中的语法

变量
变量时一种特殊的占位符，告诉模板引擎该位置的值是从渲染模板时的数据中来获取的

在视图中：
@app.route('/')
def index():
render_template('xxx.html',name='sf.zh',age=18)

name 和 age 就是要传递到 xxx.html 中的变量

在模板中：
{{变量名}}

练习：在01_temp.html基础上，完成下列效果显示
书名：《钢铁是咋炼成的》
作者：奥斯特洛夫斯基
价格：32.5
出版社：北京大学出版社

过滤器

什么是过滤器
过滤器是允许在变量输出显示之前改变变量的值

过滤器的语法
{{变量|过滤器}}

Jinja2 变量过滤器

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

控制结构
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

静态文件
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行
模板的继承
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.自定义错误页面

404 的错误处理
@app.errorhandler(404)
def page_not_found(e):
return render_template('404.html'),404
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>

Python Web 框架-FLASK day02

1.模板 - Templates

2.自定义错误页面

在Linux上安装Python的Flask框架和创建第一个app实例的教程

详解Python的Flask框架中生成SECRET_KEY密钥的方法

Python的Flask框架应用程序实现使用QQ账号登录的方法

Python用Bottle轻量级框架进行Web开发

在Python的Flask中使用WTForms表单框架的基础教程

Python的Flask框架中SQLAlchemy使用时的乱码问题解决

Python的Flask框架中配置多个子域名的方法讲解

用Python的Flask框架结合MySQL写一个内存监控程序

Python Web框架Flask信号机制(signals)介绍

Python使用Flask框架同时上传多个文件的方法