zoukankan      html  css  js  c++  java
  • Flask:模板

    模板是一个包含响应文本的文件,其中包含用占位变量表示的动态部分,具体值只在请求的上下文中才能知道.使用真实值替换变量,再返回最终得到的响应字符串.这个过程称为渲染,为了渲染模板,Flask使用了一个名为Jinja2的强大模板引擎.

    前面的视图函数中,我们是通过return 'Hello World!'的方法来返回响应.但是这种情况下反馈少数的内容还可以,如果要反馈复杂的网页界面那就没办法了.这种情况就需要渲染模板了.代码如下通过render_template反馈具体的网页模板.默认情况下,Flask在程序文件夹中的template子文件夹中寻找模板.

    from flask import render_template

    @app.route('/')

    def hello_world():

    return render_template('index.html')

    template中添加index.html

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Flask</title>

    </head>

    <body>

    <p>欢迎来到Flask</p>

    </body>

    </html>

    还可以在模板中传入参数并传递到html

    @app.route('/')

    def hello_world():

        name='zhf'

    return render_template('index.html',name=name)

    网页中通过{{name}}的方式进行传递.

    {{ name }}<p>欢迎来到Flask</p>

    还可以使用过滤器修改变量,过滤器名添加在变量后之后,中间使用竖线分隔

    {{ name|capitalize }}<p>欢迎来到Flask</p>

    Jinjia变量过滤器如下:

    safe:渲染值时不转义

    capitalize:把值的首字母转换成大写,其他字母转换成小写

    lower:把值转换成小写形式

    upper:把值转换成大写形式

    title:把值中每个单词的首字母都转换成大写

    trim:把值的首尾空格去掉

    striptags:渲染之前把指中所有的HTML标签都删掉

    Flask中使用模板变量方式和django是一样的,都有控制结构.

    @app.route('/')

    def hello_world():

        name=['c','c++','python']

    return render_template('index.html',name=name)

    HTML中的代码:

    {% for i in name %}

    <li>{{ i }}</li>

    {% endfor %}

    另一种重复使用代码的方式是模板继承,类似于python代码中的类继承.首先创建一个名为base.html的基模板.在这个模板中定义了名为head,titlebody的块.块的定义是通过{% block}的方式来定义

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        {% block head %}

            <title>{% block title %}{% endblock %}-My Applicaltion</title>

        {% endblock %}

    </head>

    <body>

    {% block body %}

    {% endblock %}

    </body>

    </html>

    index.html中通过extends的方式来引用base.html.在extends指令之后,基模板中的3个块被重新定义,模板引擎会将其插入适当的位置,注意新定义的head块,在基模板中其内容不是空的,所以使用super()获取原来的内容.在index.html中重新定义的title,body块会覆盖base.html中的内容

    {% extends "base.html" %}

    {% block title %}index{% endblock %}

    {% block head %}

        {{ super() }}

        <style>

        </style>

    {% endblock %}

    {% block body %}

        <h1>hello,world</h1>

    {% endblock %}

    使用Flask-Bootstrap

    django中,Bootstrap的使用可以参考下面的这个例子

    http://www.cnblogs.com/zhanghongfeng/p/7750088.html

    Flask中使用Bootstrap的方法和在django中不一样.首先需要安装Flask-BootstrapFlask扩展安装后使用方式如下

    from flask_bootstrap import Bootstrap

    app = Flask(__name__)

    bootstrap=Bootstrap(app)

    @app.route('/')

    def hello_world():

        name='zhf'

    return render_template('index.html',name=name)

    然后在index.html中使用方式如下:

    {% extends "bootstrap/base.html" %}

    {% block title %}Flask{% endblock %}

    {% block content %}

        <div class="container">

            <div class="page-header"><h1>hello {{ name }}</h1></div>

        </div>

    {% endblock %}

    通过extends “bootstrap/base.html”的方式来继承bootstrapbase页面,然后在页面中重新定义各种块,并在class中引用bootstrap中的CSS格式,得到的界面如下.

    @font-face { font-family: "Times New Roman"; }@font-face { font-family: "宋体"; }p.MsoNormal { margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: "Times New Roman"; font-size: 10.5pt; }h1 { margin-top: 5pt; margin-bottom: 5pt; text-align: left; font-family: 宋体; font-weight: bold; font-size: 24pt; }p.p { margin: 5pt 0pt; text-align: left; font-family: "Times New Roman"; font-size: 12pt; }span.msoIns { text-decoration: underline; color: blue; }span.msoDel { text-decoration: line-through; color: red; }div.Section0 { }

    自定义错误页面

    在HTML中,有各种状态码来指示访问状态.比如200表示访问成功,400表示客户端请求未知页面或路由时的显示,500表示有未处理的异常时处理.为这两个错误代码指示自定义处理程序的方式如下所示.

    @app.errorhandler(404)

    def page_not_found(e):

        return render_template('404.html'),404

    @app.errorhandler(500)

    def internal_server_error(e):

    return render_template('500.html'),500

    当访问不存在的页面的时候提示如下.

    Internal Server Error

    The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.

  • 相关阅读:
    Git本地windows凭证账号更改
    解决vue ui创建项目很慢的原因
    跨域问题总结
    JS柯里化
    vue diff算法讲解
    当面试官问你闭包时,他究竟想听到些什么?
    JS中的 ==
    必须知道的 prototype, [[prototype]], __proto__
    Deepcopy in Javascript
    http问题整理
  • 原文地址:https://www.cnblogs.com/zhanghongfeng/p/8404060.html
Copyright © 2011-2022 走看看