jinja2 模版引擎

jinja2 模版引擎

官方网站
http://docs.jinkan.org/docs/jinja2/
类似于java中thymeleaf，jinja2 是一个现代的，设计者友好的，仿照 Django 模板的 Python 模板语言。它速度快，被广泛使用，并且提供了可选的沙箱模板执行环境保证安全:

<title>{% block title %}{% endblock %}</title>
<ul>
{% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}
</ul>

特性:

沙箱中执行
强大的 HTML 自动转义系统保护系统免受 XSS
模板继承
及时编译最优的 python 代码
可选提前编译模板的时间
易于调试。异常的行数直接指向模板中的对应行。
可配置的语法
模版继承
base.html ``` <!DOCTYPE html> {% block head %} {% endblock%} {% block body%}
This is base body!
{% endblock %}

base2.html

{% extends “base.html” %} {% block title%}Index{% endblock %} {% block head %} {{ super() }} {% endblock head%}

{% block body %} {{super()}}

Hello World

{% endblock body%}

### 继承base页面写出404

{% extends “user.html” %} {% block title %}

not found

{% endblock title%} {% block page_content %} {{super()}} {% endblock %} {% block content %} Page Not Found{% endblock %}

## flask-bootstrap

from flask import Flask,render_template from Config import Config from flask_bootstrap import Bootstrap

app = Flask(name) app.config.from_object(Config) bootstrap = Bootstrap(app) # 将应用实例传给构造函数

@app.route(“/“) def index(): return render_template(“user.html”)

app.run()

```
{% extends "bootstrap/base.html" %}
{% block title %}{% endblock title %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
                data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flask</a>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock navbar%}
{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello bootstrap</h1>
    </div>
</div>
{% endblock content %}

Flask-Moment

UTC协调世界时，然后经过js渲染，调用每个用户本地的时区信息就能够转换为用户当地时间。
Flask-Moment是一个Flask扩展，能简化把Moment.js集成到jinja2模版中。
下面是一个简单的应用例子：
　　前端页面模板部分代码：

{% block scripts %}
    {{ super() }}
    {{ moment.include_moment() }}　　//在前端中通过方法引用moment.js文件
    {{ moment.locale('zh-cn') }}　　//将moment.js本地化，否则渲染出来的时间日期都是英文的
{% endblock %}
{% block page_content %}
    {{ super() }}
    <h3>Time now is {{ moment(current_time).format('LLL') }}</h3><hr>
{% endblock %}

后端部分代码：

m = Moment(app)    #和bootstrap一样，不要忘了这一步，否则前端报找不到moment类的错
@app.route('/time',methods=['GET'])
def show_time():
    return render_template('time.html',current_time=datetime.datetime.utcnow())

表单校验

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}User{% endblock %}
{% block page_content %}
<div class="page-header">
    <h1>Hello, User page!</h1>
    <hr>
    <!-- <form action="" method="POST">
        {{form.hidden_tag() }}
        {{form.name.label}} {{form.name}}
        {{form.email.label}} {{form.email}}
        {{ form.submit() }}
    </form> -->
    {{wtf.quick_form(form)}}
    {% if name %}
        <h2>Welcom {{name}} </h2>
    {% endif %}
    <hr>
    <p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
    <p>That was {{ moment(current_time).fromNow(refresh=True) }}.</p>
</div>
{% endblock %}

from flask import Flask,render_template
from Config import Config
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from datetime import datetime
from flask_wtf import FlaskForm
from wtforms import StringField,SubmitField
from wtforms.validators import DataRequired,Email
app = Flask(__name__)
app.config.from_object(Config)
bootstrap = Bootstrap(app)  # 将应用实例传给构造函数
m = Moment(app)
# 定义表单类
class NameForm(FlaskForm):
    name = StringField('What is your name?',validators=[DataRequired()])
    email = StringField("Enter your email",validators=[Email()])
    submit = SubmitField('Submit')
@app.route("/")
def index():
    utc = datetime.utcnow()
    return render_template("index.html",current_time=utc)
@app.route("/user",methods=['get','post'])
def user():
    name = None
    email = None
    form = NameForm()
    if form.validate_on_submit(): # 如果通过验证
        name = form.name.data
        email = form.email.data
        form.name.data = ''  # 重制
        form.email.data = ''
    utc = datetime.utcnow()
    return render_template("user.html",current_time=utc,form=form,name=name,email=email)
@app.errorhandler(404)
def errorhandler(e):
    return render_template('404.html'),404
@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'),500
app.run()

flask-BootStrap

在exts中的init中引入

from flask_sqlalchemy import SQLAlchemy
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap()
db = SQLAlchemy()

apps中的init绑定bootstarp

from flask import Flask,render_template,session,redirect,url_for,flash
from settings import Config
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from datetime import datetime
from flask_wtf import FlaskForm
from wtforms import StringField,SubmitField
from wtforms.validators import DataRequired,Email
from exts import db, bootstrap
from apps.user.model import *
def create_app():
    app = Flask(__name__, template_folder='../templates/', static_folder='../static/') # type:Flask
    app.config.from_object(Config) 
    bootstrap.init_app(app=app)  # bootstrap
    m = Moment(app)
    db.init_app(app) # 数据库
    app.register_blueprint(user_bp)
    # print(app.url_map)
    return app

基本语法可以参考下面这篇博文：
http://www.bjhee.com/jinja2-statement.html

自定义过滤器

@index_bp.app_template_filter('summary')
def summary(content):
    return content[:50]+'......'


<p class="my-font-description" >{{ arti.content|summary }}</p>

Python-Web框架

4. jinja2模版