美文网首页Flask实践Pythoner集中营
Flask实践Step by Step -- 模板

Flask实践Step by Step -- 模板

作者: CoderMiner | 来源:发表于2016-10-13 14:07 被阅读221次

Flask开发环境配置
Flask快速入门
Flask实践Step by Step -- 'Hello World'
Flask实践Step by Step -- 模板
Flask实践Step by Step -- Web表单

模板

在上节中Hello World的程序以及可以顺利运行,大概得目录结构如下:

microblog/
|-- app
|   |-- __init__.py
|   |-- __init__.pyc
|   |-- static
|   |-- templates
|   |-- views.py
|   `-- views.pyc
|-- run.py
`-- tmp

运行 python run.py 可以在浏览器中通过 http://127.0.0.1:5000访问

为什么使用模板

如果想在欢迎页面加入一些欢迎语,如果使用python来写HTML的话,需要修改一下 views.py中的
逻辑,具体的代码如下:

from app import app

@app.route('/')
@app.route('/index')
def index():
    user = {'nickname': 'Miguel'}  # fake user
    return '''
<html>
  <head>
    <title>Home Page</title>
  </head>
  <body>
    <h1>Hello, ''' + user['nickname'] + '''</h1>
  </body>
</html>
'''

保存,运行可以在页面中看到效果

使用模板

可以将HTML和python代码分离,我们需要写第一个模板(file app/templates/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ title }} - microblog</title>
  </head>
  <body>
    <h1>Hello,{{ user.nickname }}</h1>
  </body>
</html>

标准的HTML页面的内容,{{...}}是需要动态显示的内容,然后就需要修改对应的方法(file app/views.py)

from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = {'nickname': 'Miguel'}  # fake user
    return render_template('index.html',title = 'Home',user = user)

然后运行看一下效果,
为了渲染模板,需要引入 render_template,这个方法第一个参数就是需要渲染的文件名,运行时会
自动到 templates文件夹中去寻找对应的文件,后面是参数的list
模板中的控制逻辑
在Jinja2模板中支持控制逻辑 需要包含在 {% ... %}块中,修改一下 app/templates/index.html
加入一下控制逻辑

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    {% if title %}
    <title>{{ title }} - microblog</title>
    {% else %}
    <title>Welcome to microblog</title>
    {% endif %}
  </head>
  <body>
    <h1>Hello,{{ user.nickname }}</h1>
  </body>
</html>

可以把 app/views.py中的title的参数去除运行看一下实际的效果

在模板中加入循环逻辑

修改一下 app/views.py,手动加入一些测试的数据信息

from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = {'nickname': 'Miguel'}  # fake user
    posts = [
        {
            'author':{'nickname':'John'},
            'body':'Beautiful day in Beijing!'
        },
        {
            'author':{'nickname':'Kevin'},
            'body':'The Aveengers movie so cool!'
        }
    ]
    return render_template('index.html',title = 'Home', user = user , posts = posts)

为了渲染这个list中的数据,需要修改一下模板中的结构 (file app/templates/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    {% if title %}
    <title>{{ title }} - microblog</title>
    {% else %}
    <title>Welcome to microblog</title>
    {% endif %}
  </head>
  <body>
    <h1>Hello,{{ user.nickname }}</h1>
    {% for post in posts %}
    <div>
      <p>
        {{ post.author.nickname}} says: <b>{{ post.body }}</b>
      </p>
    </div>
    {% endfor %}
  </body>
</html>

模板继承

通常一个网站会有对应的导航栏和头部以及尾部信息,我们不希望在每一个页面中都要重新写一遍
这可以考虑将这些公有的信息统一放在一个公有的模板页面中其他的页面只需要继承这个页面即可
在Flask中的木耙支持继承,首先我们需要一个base模板(file app/templates/base.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    {% if title %}
    <title>{{ title }} - microblog</title>
    {% else %}
    <title>Welcome to microblog</title>
    {% endif %}
  </head>
  <body>
    <div>
      Microblog : <a href="/index">Home</a>
    </div>
    <hr>
    {% block content %}{% endblock %}
  </body>
</html>

在这个模板中,使用block是需要继承的地方,Blocks需要一个唯一的名字,不能有重复,block
的内容会被子模板替换
修改一下 index.html继承base.html

{% extends "base.html" %}
{% block content %}
  <h1>Hi,{{user.nickname}}</h1>
  {% for post in posts %}
  <div>
    <p>
      {{ post.author.nickname }} says: {{ post.body }}
    </p>
  </div>
  {% endfor %}
{% endblock %}

使用关键字extends来继承base模板

相关文章

  • Flask实践Step by Step -- 模板

    Flask开发环境配置Flask快速入门Flask实践Step by Step -- 'Hello World'F...

  • Flask实践Step by Step -- Web表单

    Flask开发环境配置Flask快速入门Flask实践Step by Step -- 'Hello World'F...

  • Flask实践Step by Step -- 'Hell

    Flask开发环境配置Flask快速入门Flask实践Step by Step -- 'Hello World'F...

  • Flask 开发环境配置

    Flask开发环境配置Flask快速入门Flask实践Step by Step -- 'Hello World'F...

  • Flask 快速入门

    Flask开发环境配置Flask快速入门Flask实践Step by Step -- 'Hello World'F...

  • step by step

    忙毕业的事,一直没有时间和心情去研究彩铅画,难的这几天有空闲时间,就找了画纸,买了彩铅(超市里买的儿童24色彩铅笔...

  • Step by step

    我相信,每一个光鲜亮丽的外表下,都有一段执拗而又孤独的坚持。 如果人生只有一次翻身的机会,那么你一定要拼尽全力。 ...

  • Step by step

    今天是第一天来到简书,关于写作这件事情,始终是蛰伏在心底的。 这个星期四,我在数学课上,忽然想换个微博,想在微博上...

  • step by step

    今天开始,慢慢来。 一切,也都会慢慢的到来❤️

  • Step by step

    ----针对多多少少已经有点工作经验的盆友 补充那些被遗忘、忽略的知识 (重点是面试中曾出现过的问题 ajax、...

网友评论

    本文标题:Flask实践Step by Step -- 模板

    本文链接:https://www.haomeiwen.com/subject/hemwyttx.html