zoukankan      html  css  js  c++  java
  • Flask学习之二 模板

    继续学习flask

    本部分Miguel Grinberg教程的翻译地址:http://www.pythondoc.com/flask-mega-tutorial/templates.html

    英文原文地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates

    一、为什么使用模板?

    以下做一个小小的扩展:输出一个大标题。

    一个容易的选择就是改变我们的视图功能,输出 HTML。

    修改app/views.py

     1 from app import app
     2 
     3 @app.route('/')
     4 @app.route('/index')
     5 def index():
     6     user = { 'nickname': 'Miguel'} # fake user
     7     return '''
     8     <html>
     9       <head>
    10         <title>Home Page</title>
    11       </head>
    12       <body>
    13         <h1>hello,''' + user['nickname'] + '''</h1>
    14       </body>
    15     </html>
    16     '''

    网页浏览器上的显示情况:

    以下是教程原话:

    我们暂时还不支持用户,所以暂时使用占位符的用户对象,有时也被称为假冒或模仿的对象。这样让我们可以集中关注应用程序的某一方面,而不用花心思在暂未完成的部分上。

    我希望你同意我的说法,上面的解决方案是非常难看!如果我们需要返回一个含有大量动态内容的大型以及复杂的 HTML 页面的话,代码将会有多么复杂啊!如果你需要改变你的网站布局,在一个大的应用程序,该应用程序有几十个视图,每一个直接返回HTML?这显然​​不是一 个可扩展的选择。

    二、初步使用模板

    就是把前端和后端的分离。

    文件 app/templates/index.html

    1 <html>
    2   <head>
    3     <title>{{title}} - microblog</title>
    4   </head>
    5   <body>
    6       <h1>Hello, {{user.nickname}}!</h1>
    7   </body>
    8 </html>

    注意一下index.html的位置

    我们只是写了一个大部分标准的HTML页面,唯一的区别是有一些动态内容的在 {{ ... }} 中。

    然后在视图函数(文件 app/views.py)中使用这些模板,修改 app/views.py 内容:

     1 from app import app
     2 from flask import render_template
     3 
     4 @app.route('/')
     5 @app.route('/index')
     6 def index():
     7     user = { 'nickname': 'Miguel'} # fake user
     8     return render_template("index.html",
     9         title = 'Home',
    10         user = user)

    为了渲染模板,我们必须从 Flask 框架中导入一个名为 render_template 的新函数。此函数需要传入模板名以及一些模板变量列表,返回一个所有变量被替换的渲染的模板。

    在内部,render_template 调用了 Jinja2 模板引擎,Jinja2 模板引擎是 Flask 框架的一部分。Jinja2 会把模板参数提供的相应的值替换了 {{...}} 块。

    运行后的浏览器页面可以看到是和之前一样的。

    关于模板中的控制和循环语句和其他语言没什么差别,很容易理解。

    三、模板继承

    我们知道多数网站都有导航栏,而同一个网站的导航栏都是一样的。在每个模板中复制粘贴同样的代码是很浪费时间,而且修改起来也很麻烦(修改一个部分就要把它的拷贝全部修改)。

    教程原话:我们可以利用 Jinja2 的模板继承的特点,这允许我们把所有模板公共的部分移除出页面的布局,接着把它们放在一个基础模板中,所有使用它的模板可以导入该基础模板。

    定义一个基础模板,该模板包含导航栏以及上面谈论的标题(文件 app/templates/base.html):

    <html>
      <head>
        {% if title %}
        <title>{{title}} - microblog</title>
        {% else %}
        <title>microblog</title>
        {% endif %}
      </head>
      <body>
        <div>Microblog: <a href="/index">Home</a></div>
        <hr>
        {% block content %}{% endblock %}
      </body>
    </html>

    在这个模板中,我们使用 block 控制语句来定义派生模板可以插入的地方。块被赋予唯一的名字content。

    然后修改我们的 index.html 模板继承自 base.html (文件 app/templates/index.html):

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

    这样的话,之后如果要修改导航栏只需要修改一个地方就可以了。

  • 相关阅读:
    手把手教你使用markdown
    spring WebSocket详解
    springmvc请求参数异常处理
    蓝桥杯java 算法提高 摆花
    蓝桥杯java 算法提高 扶老奶奶过街
    蓝桥杯java 算法训练 未名湖边的烦恼
    蓝桥杯java 算法训练 Torry的困惑(基本型)
    java算法 硬币
    java算法 牌型种数
    java算法 方格填数
  • 原文地址:https://www.cnblogs.com/AminHuang/p/4262276.html
Copyright © 2011-2022 走看看