基于Python的Flask Web开发笔记（2）

来源：互联网发布：能看杂志的软件编辑：程序博客网时间：2024/05/17 06:45

模板

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

<h1>Hello World!</h1>

templates/index.html:Jinja2模板

<h1>Hello, {{ name }}!</h1>

templates/user.html:Jinja2模板

1. Jinja2 模板引擎

渲染模板

from flask import Flask, render_template # ...     @app.route('/')     def index():         return render_template('index.html')     @app.route('/user/<name>')     def user(name):         return render_template('user.html', name=name)

可识别的模板变量

<p>A value from a dictionary: {{ mydict['key'] }}.</p>     <p>A value from a list: {{ mylist[3] }}.</p>     <p>A value from a list, with a variable index: {{ mylist[myintvar] }}.</p>     <p>A value from an object's method: {{ myobj.somemethod() }}.</p>

可以使用过滤器修改变量，过滤器名添加在变量名之后，中间使用竖线分隔。例如，下述模板以首字母大写形式显示变量name 的值:

     Hello, {{ name|capitalize }}

要显示变量中存储的 HTML代码，这时就可使用 safe 过滤器

控制结构

if for 宏

模板继承

<html>     <head>{% block head %}<title>{% block title %}{% endblock %} - My Application</title> {% endblock %}     </head>     <body>{% block body %}{% endblock %} </body></html>

{% extends "base.html" %}{% block title %}Index{% endblock %} {% block head %}         {{ super() }}         <style>         </style>{% endblock %}{% block body %} <h1>Hello, World!</h1> {% endblock %}

使用Flask-Bootstrap 集成 Bootstrap

<span style="font-size: 9pt; font-family: UbuntuMono;">{</span><span style="font-size: 9pt; font-family: LucidaSans; vertical-align: -1pt;">% </span><span style="font-size: 9pt; font-family: UbuntuMono;">extends "bootstrap/base.html" </span><span style="font-size: 9pt; font-family: LucidaSans; vertical-align: -1pt;">%</span><span style="font-size: 9pt; font-family: UbuntuMono;">}</span><div class="page" title="Page 48"><div class="layoutArea"><div class="column"><p><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">{</span><span style="font-size: 9.000000pt; font-family: 'LucidaSans'; vertical-align: -1.000000pt">% </span><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">block title </span><span style="font-size: 9.000000pt; font-family: 'LucidaSans'; vertical-align: -1.000000pt">%</span><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">}Flasky{</span><span style="font-size: 9.000000pt; font-family: 'LucidaSans'; vertical-align: -1.000000pt">% </span><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">endblock </span><span style="font-size: 9.000000pt; font-family: 'LucidaSans'; vertical-align: -1.000000pt">%</span><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">}</span></p><p><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">{</span><span style="font-size: 9.000000pt; font-family: 'LucidaSans'; vertical-align: -1.000000pt">% </span><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">block navbar </span><span style="font-size: 9.000000pt; font-family: 'LucidaSans'; vertical-align: -1.000000pt">%</span><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">}<div class="navbar navbar-inverse" role="navigation"></span></p><pre><span style="font-size: 9.000000pt; font-family: 'UbuntuMono'">         <div class="container">             <div class="navbar-header"></span>

                 <button type="button" class="navbar-toggle"                  data-toggle="collapse" data-target=".navbar-collapse">

                     <span class="sr-only">Toggle navigation</span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>

</button>

                 <a class="navbar-brand" href="/">Flasky</a>             </div>

             <div class="navbar-collapse collapse">                 <ul class="nav navbar-nav">

                     <li><a href="/">Home</a></li>                 </ul>

             </div>         </div>

</div>
{%endblock %}

{%block content%}<div class="container">

{%block page_content%}{%endblock %}</div>

{%endblock %}

user可以简写成

{% extends "base.html" %}{% block title %}Flasky{% endblock %}{% block page_content %} <div class="page-header">         <h1>Hello, {{ name }}!</h1>     </div>{% endblock %}

链接 url_for

在模板中直接编写简单路由的 URL 链接不难，但对于包含可变部分的动态路由，在模板中构建正确的URL 就很困难。而且，直接编写URL 会对代码中定义的路由产生不必要的依赖关系。如果重新定义路由，模板中的链接可能会失效。

为了避免这些问题，Flask提供了 url_for()辅助函数，它可以使用程序 URL 映射中保存的信息生成URL。

url_for() 函数最简单的用法是以视图函数名(或者 app.add_url_route() 定义路由时使用的端点名)作为参数，返回对应的URL。例如，在当前版本的hello.py 程序中调用url_for('index')得到的结果是/。调用url_for('index', _external=True)返回的则是绝对地址，在这个示例中是http://localhost:5000/。

使用 url_for()生成动态地址时，将动态部分作为关键字参数传入。例如，url_for('user', name='john', _external=True)的返回结果是http://localhost:5000/user/john

静态文件

如，放置APP图标

{% block head %}{{ super() }}<link rel="shortcut icon" href="{{ url_for('static', filename = 'favicon.ico') }}"type="image/x-icon"><link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}"type="image/x-icon"> {% endblock %}

使用Flask-Moment本地化日期和时间

安装

$ pip install flask-moment

初始化

from flask.ext.moment import Moment moment = Moment(app)

引入moment.js 库，在base.html中

{% block scripts %}{{ super() }}{{ moment.include_moment() }} {% endblock %}

在hello.py中调用

from datetime import datetime     @app.route('/')     def index():         return render_template('index.html',                                current_time=datetime.utcnow())

0 0

基于Python的Flask Web开发 笔记 （2）

模板