当前位置:   article > 正文

【jinja2】flask和jinja2配合使用_flask与jinja2版本兼容关系

flask与jinja2版本兼容关系

目录

jinja2简介

模板渲染

模板访问变量属性

内置过滤器的使用

自定义过滤器

控制语句

模板继承

加载静态文件


jinja2简介

  • 特征
  • 沙箱中执行
  • 强大的 HTML 自动转义系统保护系统免受 XSS
  • 模板继承
  • 及时编译最优的 python 代码
  • 可选提前编译模板的时间
  • 易于调试。异常的行数直接指向模板中的对应行。
  • 可配置的语法
  • Jinja 分隔符

Jinja 在模板字符串中使用各种分隔符。

  • {% %}-陈述
  • {{ }}-要打印到模板输出的表达式
  • {# #}-模板输出中未包含的注释
  • # ##-行语句

模板渲染

  • app.py
  1. from flask import Flask,render_template,request
  2. app = Flask(__name__)
  3. @app.route('/')
  4. def hello_world():
  5. return render_template('index.html')
  6. @app.route('/blog/<int:blog_id>')
  7. def blog(blog_id):
  8. page = request.args.get('page', default=1, type=int)
  9. return render_template('blog.html',id=blog_id,page=page)
  10. if __name__ == '__main__':
  11. app.run()
  • index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>coleak's page</title>
  6. </head>
  7. <body>
  8. <h1>START</h1>
  9. <h2>coleak2</h2>
  10. <h3>coleak3</h3>
  11. <h4>coleak4</h4>
  12. <h5>coleak5</h5>
  13. <h1>END</h1>
  14. </body>
  15. </html>
  • blog.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>这里是第{{ id }}位博客主的第{{ page }}页博客</h1>
  9. </body>
  10. </html>
  • 效果测试 
  1. http://10.133.5.113:8000
  2. http://10.133.5.113:8000/blog/3
  3. http://10.133.5.113:8000/blog/3?page=6

 

模板访问变量属性

  • app.py
  1. from flask import Flask,render_template,request
  2. app = Flask(__name__)
  3. class user:
  4. def __init__(self,username,email):
  5. self.username=username
  6. self.email=email
  7. @app.route('/')
  8. def hello_world():
  9. User=user('coleak','123@163.com')
  10. person={
  11. "username":"coleak",
  12. "email":"123@666.com"
  13. }
  14. return render_template('index.html',user=User,person=person)
  15. @app.route('/blog/<int:blog_id>')
  16. def blog(blog_id):
  17. page = request.args.get('page', default=1, type=int)
  18. return render_template('blog.html',id=blog_id,page=page)
  19. if __name__ == '__main__':
  20. app.run()
  • index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>coleak's page</title>
  6. </head>
  7. <body>
  8. <h1>START</h1>
  9. <div><h1>welcome {{ user.username }}</h1></div>
  10. <div><h1>你的别名是{{ person.username }},邮箱是{{ person["email"] }}</h1></div>
  11. <h2>coleak2</h2>
  12. <h3>coleak3</h3>
  13. <h4>coleak4</h4>
  14. <h5>coleak5</h5>
  15. <h1>END</h1>
  16. </body>
  17. </html>
  • 效果测试

内置过滤器的使用

可以将过滤器应用于数据以对其进行修改。 例如,sum 筛选器可以对数据求和,escape 筛选器对它们进行转义,sort 筛选器对它们进行排序。

  • app.py
  1. from flask import Flask,render_template,request
  2. app = Flask(__name__)
  3. class user:
  4. def __init__(self,username,email):
  5. self.username=username
  6. self.email=email
  7. @app.route('/')
  8. def hello_world():
  9. User=user('coleak','123@163.com')
  10. person={
  11. "username":"coleak",
  12. "email":"123@666.com"
  13. }
  14. return render_template('index.html',user=User,person=person)
  15. @app.route('/filter')
  16. def filter():
  17. User1=user('coleak',-123.456)
  18. return render_template("filter.html",user=User1)
  19. if __name__ == '__main__':
  20. app.run()
  • filter.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>过滤器</title>
  6. </head>
  7. <body>
  8. <div>{{ user.username }}长度为{{ user.username|length }}</div>
  9. <div>{{ user.email }}绝对值为{{ user.email|abs }}</div>
  10. </body>
  11. </html>
  • 效果测试

自定义过滤器

  • app.py
  1. from flask import Flask,render_template,request
  2. from datetime import datetime
  3. app = Flask(__name__)
  4. def my_filter(value,format="%Y年-%m月-%d日 %H时:%M分"):
  5. return value.strftime(format)
  6. class user:
  7. def __init__(self,username,email):
  8. self.username=username
  9. self.email=email
  10. app.add_template_filter(my_filter,"time_filter")
  11. @app.route('/')
  12. def hello_world():
  13. User=user('coleak','123@163.com')
  14. person={
  15. "username":"coleak",
  16. "email":"123@666.com"
  17. }
  18. return render_template('index.html',user=User,person=person)
  19. @app.route('/filter')
  20. def filter():
  21. mytime=datetime.now()
  22. User1=user('coleak',-123.456)
  23. return render_template("filter.html",user=User1,mytime=mytime)
  24. if __name__ == '__main__':
  25. app.run()
  • filter.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>过滤器</title>
  6. </head>
  7. <body>
  8. <div>{{ mytime }}过滤后为{{ mytime|time_filter }}</div>
  9. </body>
  10. </html>
  • 效果测试

控制语句

  • app.py
  1. from flask import Flask,render_template,request
  2. from datetime import datetime
  3. app = Flask(__name__)
  4. class user:
  5. def __init__(self,username,email):
  6. self.username=username
  7. self.email=email
  8. @app.route('/')
  9. def hello_world():
  10. User=user('coleak','123@163.com')
  11. person={
  12. "username":"coleak",
  13. "email":"123@666.com"
  14. }
  15. return render_template('index.html',user=User,person=person)
  16. @app.route('/control')
  17. def control():
  18. age=request.args.get('age')
  19. age=int (age)
  20. books=[{"name":"boo1",'price':12},{"name":"boo2",'price':18},{"name":"book3",'price':21}]
  21. return render_template('control.html',age=age,books=books)
  22. if __name__ == '__main__':
  23. app.run()
  • control.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>控制语句</title>
  6. </head>
  7. <body>
  8. <div>
  9. {% if age>18 %}
  10. <h2>可以进入网吧</h2>
  11. {% elif age==18 %}
  12. <h2>家长陪同下进入网吧</h2>
  13. {% else %}
  14. <h2>不可以进入网吧</h2>
  15. {% endif %}
  16. </div>
  17. <div>
  18. {% for book in books %}
  19. <p>名称:{{ book.name }}</p>
  20. <p>价格:{{ book.price }}</p>
  21. {% endfor %}
  22. </div>
  23. </body>
  24. </html>
  •  效果测试

模板继承

模板继承是一项强大的功能,可减少代码重复并改善代码组织。 我们定义了一个基本模板,其他模板文件也从中继承。 这些模板文件将覆盖基本模板文件的特定块。

  • app.py
  1. from flask import Flask,render_template,request
  2. from datetime import datetime
  3. app = Flask(__name__)
  4. class user:
  5. def __init__(self,username,email):
  6. self.username=username
  7. self.email=email
  8. @app.route('/')
  9. def hello_world():
  10. User=user('coleak','123@163.com')
  11. person={
  12. "username":"coleak",
  13. "email":"123@666.com"
  14. }
  15. return render_template('index.html',user=User,person=person)
  16. @app.route('/base')
  17. def base():
  18. return render_template("base.html")
  19. @app.route('/ch1')
  20. def ch1():
  21. return render_template("ch1.html")
  22. @app.route('/ch2')
  23. def ch2():
  24. return render_template("ch2.html")
  25. if __name__ == '__main__':
  26. app.run()
  • base.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{% block title %}{% endblock %}</title>
  6. </head>
  7. <body>
  8. {% block body %}
  9. {% endblock %}
  10. </body>
  11. </html>
  • ch1.html
  1. {% extends "base.html" %}
  2. {% block title %}
  3. ch1的标题
  4. {% endblock %}
  5. {% block body %}
  6. <div>ch1的body</div>
  7. {% endblock %}
  • ch1.html
  1. {% extends "base.html" %}
  2. {% block title %}
  3. ch2的标题
  4. {% endblock %}
  5. {% block body %}
  6. <div>ch2的body</div>
  7. {% endblock %}

加载静态文件

  • 结构框架 

  • add.py
  1. from flask import Flask,render_template,request
  2. from datetime import datetime
  3. app = Flask(__name__)
  4. class user:
  5. def __init__(self,username,email):
  6. self.username=username
  7. self.email=email
  8. @app.route('/')
  9. def hello_world():
  10. User=user('coleak','123@163.com')
  11. person={
  12. "username":"coleak",
  13. "email":"123@666.com"
  14. }
  15. return render_template('index.html',user=User,person=person)
  16. @app.route('/static')
  17. def static_use():
  18. return render_template("static.html")
  19. if __name__ == '__main__':
  20. app.run()
  • static.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>static</title>
  6. <link rel="stylesheet" href="{{ url_for('static',filename="css/style.css") }}">
  7. <script src="{{ url_for('static',filename="js/myjs.js") }}"></script>
  8. </head>
  9. <body>
  10. <img src="{{ url_for('static',filename="images/flask.jpg") }}"></img>
  11. </body>
  12. </html>
  • myjs.js
alert('coleak');
  • style.css 
  1. body{
  2. background-color: pink;
  3. }
  • flask.jpg

  •  效果测试

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/191379
推荐阅读
相关标签
  

闽ICP备14008679号