第三课 Flask模板、flask-bootstrap、静态资源路径

Flask 第三课Flask模板、flask-bootstrap

tags:

  • Flask
  • 2019千锋教育

categories:

  • flask
  • template
  • flask-bootstrap
  • 默认路径修改
  • 静态文件的反向解析路径
  • flask-debugtoolbar
  • 性能调优

文章目录

  • Flask 第三课Flask模板、flask-bootstrap
    • 第一节 flask的模板
      • 1. JInja2
      • 2.模板语法
    • 第二节 flask-bootstrap拓展库
    • 第三节 修改默认路径配置
    • 第四节 flask-debugtoolbar

第一节 flask的模板

模板是呈现给用户的界面
在MVT中充当T的角色,实现了VT的解耦,开发中VT有这N:M的关系,一个V可以调用任意T,一个T可以被任意V调用
模板处理分为两个过程
1.加载
2.渲染
模板代码包含两个部分
1.静态HTML
2.动态插入的代码段

1. JInja2

Flask中使用Jinja2模板引擎
Jinja2由Flask作者开发一个现代化设计和友好的Python模板语言,模仿Django的模板引擎
优点
速度快,被广泛使用
HTML设计和后端Python分离
减少Python复杂度
非常灵活,快速和安全
提供了控制,继承等高级功能

2.模板语法

模板语法主要分为两种:变量和标签

  1. 模板中的变量{ { var }}
    • 视图传递给模板的数据
    • 前面定义出来的数据
    • 变量不存在,默认忽略
  2. 模板中的标签{% tag %}
    • 控制逻辑
    • 使用外部表达式
    • 创建变量
    • 宏定义
  3. for循环:可以使用和Python一样的for…else
    {% for item in cols %}
    AA
    {% else %}
    BB
    {% endfor %}
    也可以获取循环信息loop
    loop.first loop.last
    loop.index loop.index0
    loop.revindex loop.revindex0

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StudentsListtitle>
head>
<body>
<ul>
    
    
    {% for student in student_list %}
        <li> {
    { student }} li>
    {% endfor %}
    
     
    {% for student in student_list %}
        {% if loop.first %}
            <li style="color: red"> {
    { loop.index }}:{
    { loop.index0 }}:{
    { student }} li>
        {% elif loop.last %}
            <li style="color: green"> {
    { loop.index }}:{
    { loop.index0 }}:{
    { student }} li>
        {% else %}
            <li style="color: grey"> {
    { loop.index }}:{
    { loop.index0 }}:{
    { student }} li>
        {% endif %}
    {% endfor %}
ul>
<hr>
    
    {% if a == 5 %}
        这是A
    {% endif %}
body>
html>
@blue.route('/students/')
def students():
    student_list = [i for i in range(10)]
    return render_template('Students.html', student_list=student_list, a=5, b=5)
  1. 结构标签
    block
    {% block xxx %}
    {% endblock %}
    块操作: 父模板挖坑,子模板填坑
    extends 挖坑继承体现的是化整为零的操作
    {% extends xxx %} 继承后保留块中的内容
    { { super() }} 不覆盖前一个页面的内容
    include
    {% include ‘xx’ %}
    包含,将其他html包含进来,体现的是由零到一的概念
    marco 宏定义,可以在模板中定义函数(可以帮我们生产html),在其它地方调用
    宏定义可导入:{% from ‘xx’ import xxx %}
    {% macro hello(name) %}
    { { name }}
    {% endmacro %}

<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <title>{
    { title }}title>
    {% block ext_css %}
    {% endblock %}
head>
<body>
<div>
    {% block header %}
    {% endblock %}
    {% block content %}
    {% endblock %}
    {% block footer %}
    {% endblock %}
div>
{% block ext_js %}
{% endblock %}
body>
html>
{% extends 'user/base_user.html' %}

{% block header %}
    
    {% include 'banner.html' %}
{% endblock %}
{% block content %}
    <h2>这是用户注册的内容h2>
    
    {% macro hello(name) %}
        <h2>这是一个hello函数h2>
    {% endmacro %}

    
    {
    { hello() }}
    {
    { hello() }}
    {
    { hello() }}

    
    {% from 'html_func.html' import hehe, goods %}
    {
    { hehe('小李') }}
    {
    { goods('水杯') }}
{% endblock %}
{
     % extends 'user/user_register.html' %}
<!--user/user_register2.html页面-->
{
     % block content %}
    <!--不覆盖前一个页面的内容-->
    {
     {
      super() }}
    <h2>二次填坑</h2>
{
     % endblock %}

<div>
    <h1>大字轮播h1>
div>

{% macro hehe(name) %}
	<h1>哈哈: {
    { name }}h1>
{% endmacro %}

{% macro goods(name) %}
	<h1>这有一个商品: {
    { name }}h1>
{% endmacro %}
@blue.route('/user_register')
def user_register():
    return render_template('user/user_register.html', title='用户注册')


@blue.route('/user_register2')
def user_register2():
    return render_template('user/user_register2.html', title='用户注册2')
  1. 过滤器
    过滤器语法: { { 变量|过滤器|过滤器… }}
    过滤器种类较多有兴趣可以自己看官网的API。常用如下
    capitalize 首字母大写
    lower 小写
    upper 大写
    title 标题
    trim 去空格
    reverse 反向
    format 格式化
    striptags渲染之前,将值中标签去掉

第二节 flask-bootstrap拓展库

  1. 安装flask-bootstrap:pip install flask-bootstrap -i https://pypi.douban.com/simple
  2. 这个库不支持bootstrap4
  3. 初始化(ext.py):
    from flask_bootstrap import Bootstrap
    Bootstrap(app)
  4. bootstrap/base.html 内容如下:
    • html_attribs 给整个html添加属性
    • html
      • head
        • title
        • metas
        • styles
      • body. attribs
      • body
        • navbar
        • content
        • scripts
  5. 一些组件直接从bootstrap上找案例:导航和巨幕

{% extends 'bootstrap/base.html' %}
{% block navbar %}
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigationspan>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
            button>
            <a class="navbar-brand" href="#">标题a>
        div>

        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首 页 <span class="sr-only">(current)span>a>li>
                <li><a href="#">电影a>li>
                <li><a href="#">电影院a>li>
            ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名">
                div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="密码">
                div>
                <button type="submit" class="btn btn-default">登录button>
            form>
        div>
    div>
nav>
{% endblock %}
{% block content %}
    {% block header %}

    {% endblock %}
    {% block container %}

    {% endblock %}
    {% block footer %}

    {% endblock %}
{% endblock %}

{% extends 'base.html' %}
{% block header %}
<div class="container">
    <div class="jumbotron">
        <h1>Hello, world!h1>
        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn morea>p>
    div>
div>
{% endblock %}
@blue.route('/index')
def index1():
    return render_template('index.html')

第三节 修改默认路径配置

  1. 模板路径默认在Flask (app) 创建的路径下
  2. 如果想自己指定模板路径
    • 在Flask创建的时候,指定template_ folder
    • 在蓝图创建的时候,也可以template_ folder
  3. 蓝图指定此蓝图统前缀/xx
  4. 修改默认资源文件: static_folder
  5. 修改HTML中硬编码的静态路径为反向解析路径。
    • 硬编码: /static/filepath
    • 反向解析:{ { url_for(‘static’, filename= ‘filepath’) }}

第四节 flask-debugtoolbar

  1. 安装:pip install flask-debugtoolbar
  2. 配置debugtoolbar到flask中。在ext.py:DebugToolbarExtension(app)
  3. 配置SECRET_KEY
  4. 只有渲染页面时可以看到调试工具。直接返回值看不到。
  5. 可以进行性能调优(看他的Profile)

你可能感兴趣的:(python_Flask框架)