美文网首页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 -- 模板

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