从零开始学Python Flask Web（六）--jinja2模板

前言：

后面的内容准备以一个登录注册的web程序来演示。在开始做程序之前，先说点需要用到的东西。那就是jinja2模板的一些常用方法，以及数据库的ORM映射关系。

jinja2模板基本语法：

先来看一个简单的模板的样子base.html：

  <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="请输入关键字">
        </div>
        <button type="submit" class="btn btn-default">查找</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
          {% if user %}
              <li><a href="#">{{ user.username }}</a></li>
              <li><a href="{{ url_for('logout') }}">注销</a></li>
          {% else %}
              <li><a href="{{ url_for('login') }}">登录</a></li>
              <li><a href="{{ url_for('register') }}">注册</a></li>
          {% endif %}
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="main">
    {% block main %}

    {% endblock %}
</div>
</body>
</html>

其中：url_for('login') 这是个路由反转的方式，这里表示的是 login是我的一个视图处理函数的名字，我根据这个名字来得到我的路由信息。

@app.route('/login/',methods=['GET','POST'])
def login():
    if request.method == 'GET':
        return  render_template('login.html')

那我使用url_for('login') 得到的就是/login/ 这个路由URL。这样就保证了在如果我换了路由的信息，/login/ 换成了/temp-login/ ,那url_for('login') 指向的就是temp-login/。

{{ ... }} 里面是用来存放变量的，可用于把想表达的数据输出到模板上

{% ... %} 这里面存放的是语句，比如if判断语句或者for循环语句

{# ... #} 模板注释，他不会出现在渲染的页面中

合理的使用模板继承，让模板能重用，能提高工作效率和代码质量。我们刚才定义一个base.html，然后我们再定义一个index.html:如下：

{% extends 'base.html' %}

{% block main %}
     <ul class="question-list-group">
        <li>
            <div class="avatar-group">
                <img src="{{ url_for('static',filename='images/sl.jpg') }}" class="avatar">
            </div>
            <div class="question-gruop">
                <p class="question-title"><a href="#">索隆</a></p>
                <p class="question-content">这是要展示的一个博物馆藏品</p>
                <div class="question-info">
                    <span class="question-author">索隆</span>
                    <span class="question-time">2018-8-2 15:42:12</span>
                </div>
            </div>
        </li>
     </ul>
{% endblock %}

那么这个index.html 通过{% extends 'base.html' %}的方式，继承自base.html。就意味着base.html上的东西都会显示在index.html上面。完全拷贝过来了。这样就可以达到我们模板重用的方便性。

而我的index.html这个子模版也需要自己个性化的东西，那么在base.html中我们看到有这样的代码。

扫描二维码关注公众号，回复： 5285278 查看本文章

{% block main %} ... {% endblock %}

这就表示，子模版在做自己个性化东西的时候写在main这个标记块中。那么在index.html中我们看到

{% block main %}

<ul class="question-list-group"> <li> <div class="avatar-group"> <img src="{{ url_for('static',filename='images/sl.jpg') }}" class="avatar"> </div> <div class="question-gruop"> <p class="question-title"><a href="#">索隆</a></p> <p class="question-content">这是要展示的一个博物馆藏品</p> <div class="question-info"> <span class="question-author">索隆</span> <span class="question-time">2018-8-2 15:42:12</span> </div> </div> </li> </ul>

{% endblock %}

效果展示：

最上面的导航栏都是继承自base模板的。所以所有子模块都具有相同的导航栏，而内容块（block修饰的）却都是自己的。

这是登录页面以及首页（均继承了base模板）：

常用的jinja2模板的知识就说到这里，它让我们可以在html文件中方便的显示变量，写简单的python语句来处理问题等。这都是flask模板给我们做好了的，我们直接使用就可以。

从零开始学Python Flask Web（六）--jinja2模板

前言：

jinja2模板基本语法：

猜你喜欢