zoukankan      html  css  js  c++  java
  • Jinja2模板(15)

    基本流程

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Template</title>
    </head>
    <body>
        <h1>hello {{ name }}</h1>
    </body>
    </html>
    @app.route("/")
    def index():
        return render_template("index.html", name="python")


    使用flask 中的render_template渲染模板
    变量

    <p>{{mydict['key']}}</p>
    
    <p>{{mydict.key}}</p>
    
    <p>{{mylist[1]}}</p>
    
    <p>{{mylist[myvariable]}}</p>
    from flask import Flask,render_template
    app = Flask(__name__)
    
    @app.route('/')
    def index():
        mydict = {'key':'silence is gold'}
        mylist = ['Speech', 'is','silver']
        myintvar = 0
    
        return render_template('vars.html',
                               mydict=mydict,
                               mylist=mylist,
                               myintvar=myintvar
                               )
    if __name__ == '__main__':
        app.run(debug=True)


    过滤器
    字符串过滤器
    safe:禁用转义;
      <p>{{ '<em>hello</em>' | safe }}</p>

    capitalize:把变量值的首字母转成大写,其余字母转小写;
      <p>{{ 'hello' | capitalize }}</p>

    lower:把值转成小写;
      <p>{{ 'HELLO' | lower }}</p>

    upper:把值转成大写;
      <p>{{ 'hello' | upper }}</p>

    title:把值中的每个单词的首字母都转成大写;
      <p>{{ 'hello' | title }}</p>

    trim:把值的首尾空格去掉;
      <p>{{ ' hello world ' | trim }}</p>

    reverse:字符串反转;
      <p>{{ 'olleh' | reverse }}</p>

    format:格式化输出;
      <p>{{ '%s is %d' | format('name',17) }}</p>

    striptags:渲染之前把值中所有的HTML标签都删掉;
      <p>{{ '<em>hello</em>' | striptags }}</p>

    支持链式使用过滤器
    <p>{{ “ hello world  “ | trim | upper }}</p>


    列表过滤器
    first:取第一个元素
      <p>{{ [1,2,3,4,5,6] | first }}</p>

    last:取最后一个元素
      <p>{{ [1,2,3,4,5,6] | last }}</p>

    length:获取列表长度
      <p>{{ [1,2,3,4,5,6] | length }}</p>

    sum:列表求和
      <p>{{ [1,2,3,4,5,6] | sum }}</p>

    sort:列表排序
      <p>{{ [6,2,3,1,5,4] | sort }}</p>


    自定义过滤器
    自定义的过滤器名称如果和内置的过滤器重名,会覆盖内置的过滤器。

    方式一:
        通过 add_template_filter (过滤器函数, 模板中使用的过滤器名字)

    def filter_double_sort(ls):
        return ls[::2]
    app.add_template_filter(filter_double_sort,'double_2')


    方式二:
        通过装饰器  app.template_filter (模板中使用的装饰器名字)

    @app.template_filter('db3')
    def filter_double_sort(ls):
        return ls[::-3]



    表单
    使用Flask-WTF表单扩展,可以帮助进行CSRF验证,帮助我们快速定义表单模板,而且可以帮助我们在视图中验证表的数据

    pip install Flask-WTF
    不使用Flask-WTF扩展时,表单需要自己处理

    #模板文件
    <form method='post'>
        <input type="text" name="username" placeholder='Username'>
        <input type="password" name="password" placeholder='password'>
        <input type="submit">
    </form>


     使用Flask-WTF扩展
    需要设置 SECRET_KEY 的配置参数

    from flask import Flask,render_template,request
    
    @app.route('/login',methods=['GET','POST'])
    def login():
        if request.method == 'POST':
            username = request.form['username']
            password = request.form['password']
            print username,password
            return “success”
        else:
            return render_template(“login.html”)



    模板页:

    <form method="post">
            #设置csrf_token
            {{ form.csrf_token() }}
            {{ form.us.label }}
            <p>{{ form.us }}</p>
            {{ form.ps.label }}
            <p>{{ form.ps }}</p>
            {{ form.ps2.label }}
            <p>{{ form.ps2 }}</p>
            <p>{{ form.submit() }}</p>
            {% for x in get_flashed_messages() %}
                {{ x }}
            {% endfor %}
     </form>



    视图函数

    rf#coding=utf-8
    from flask import Flask,render_template, redirect,url_for,session,request,flash
    
    #导入wtf扩展的表单类
    from flask_wtf import FlaskForm
    #导入自定义表单需要的字段
    from wtforms import SubmitField,StringField,PasswordField
    #导入wtf扩展提供的表单验证器
    from wtforms.validators import DataRequired,EqualTo
    app = Flask(__name__)
    app.config['SECRET_KEY']='1'
    
    #自定义表单类,文本字段、密码字段、提交按钮
    class Login(Flask Form):
        us = StringField(label=u'用户:',validators=[DataRequired()])
        ps = PasswordField(label=u'密码',validators=[DataRequired(),EqualTo('ps2','err')])
        ps2 = PasswordField(label=u'确认密码',validators=[DataRequired()])
        submit = SubmitField(u'提交')
    
    #定义根路由视图函数,生成表单对象,获取表单数据,进行表单数据验证
    @app.route('/',methods=['GET','POST'])
    def index():
        form = Login()
        if form.validate_on_submit():
            name = form.us.data
            pswd = form.ps.data
            pswd2 = form.ps2.data
            print name,pswd,pswd2
            return redirect(url_for('login'))
        else:
            if request.method=='POST':
    flash(u'信息有误,请重新输入!')
    
        return render_template('index.html',form=form)
    if __name__ == '__main__':
        app.run(debug=True)


    控制语句
     if语句
    {% if %} {% endif %}
     for语句
    {% for item in samples %} {% endfor %}

     
    类似于python中的函数,宏的作用就是在模板中重复利用代码,避免代码冗余。

    不带参数宏的定义与使用
    定义:
    {% macro input() %}
      <input type="text"
             name="username"
             value=""
             size="30"/>
    {% endmacro %}

    使用
    {{ input() }}

    带参数宏的定义与使用
    定义
    {% macro input(name,value='',type='text',size=20) %}
        <input type="{{ type }}"
               name="{{ name }}"
               value="{{ value }}"
               size="{{ size }}"/>
    {% endmacro %}

    使用
    {{ input(value='name',type='password',size=40)}}

    将宏单独封装在html文件中

    文件名可以自定义macro.html

    {% macro input() %}

        <input type="text" name="username" placeholde="Username">
        <input type="password" name="password" placeholde="Password">
        <input type="submit">
    {% endmacro %}

    在其它模板文件中先导入,再调用

    {% import 'macro.html' as func %}
    {% func.input() %}

    模板继承
    extend


    模板包含
    include

    flask在模板中使用特殊变量和方法
    config

    request

    url_for

  • 相关阅读:
    编程之美 2014资格赛 格格取数
    ios游戏开发--cocos2d学习(1)
    ios开发中常用的也是最基本的mysql语句
    无限树形结构的数据库表设计
    认真的辞职
    几种JavaScript富应用MVC MVVM框架
    javascript创建对象和属性的几种方式
    webresource.axd文件的配置及使用
    ITextSharp用来生成 PDF 的一个组件
    flexpaper 开源轻量级的在浏览器上显示各种文档的组件
  • 原文地址:https://www.cnblogs.com/lirunsheng/p/10996265.html
Copyright © 2011-2022 走看看