前言:
后面的内容准备以一个登录注册的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中我们看到有这样的代码。
{% 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模板给我们做好了的,我们直接使用就可以。