第三课 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.模板语法
模板语法主要分为两种:变量和标签
- 模板中的变量{ { var }}
- 视图传递给模板的数据
- 前面定义出来的数据
- 变量不存在，默认忽略
- 模板中的标签{% tag %}
- 控制逻辑
- 使用外部表达式
- 创建变量
- 宏定义
- 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)
- 结构标签
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')
- 过滤器
过滤器语法： { { 变量|过滤器|过滤器… }}
过滤器种类较多有兴趣可以自己看官网的API。常用如下
capitalize 首字母大写
lower 小写
upper 大写
title 标题
trim 去空格
reverse 反向
format 格式化
striptags渲染之前，将值中标签去掉
第二节 flask-bootstrap拓展库
- 安装flask-bootstrap：pip install flask-bootstrap -i https://pypi.douban.com/simple
- 这个库不支持bootstrap4
- 初始化（ext.py）：
from flask_bootstrap import Bootstrap
Bootstrap(app) - bootstrap/base.html 内容如下：
- html_attribs 给整个html添加属性
- html
- head
- title
- metas
- styles
- body. attribs
- body
- navbar
- content
- scripts
- head
- 一些组件直接从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')
第三节 修改默认路径配置
- 模板路径默认在Flask (app) 创建的路径下
- 如果想自己指定模板路径
- 在Flask创建的时候，指定template_ folder
- 在蓝图创建的时候，也可以template_ folder
- 蓝图指定此蓝图统前缀/xx
- 修改默认资源文件： static_folder
- 修改HTML中硬编码的静态路径为反向解析路径。
- 硬编码： /static/filepath
- 反向解析：{ { url_for(‘static’, filename= ‘filepath’) }}
第四节 flask-debugtoolbar
- 安装:pip install flask-debugtoolbar
- 配置debugtoolbar到flask中。在ext.py:DebugToolbarExtension(app)
- 配置SECRET_KEY
- 只有渲染页面时可以看到调试工具。直接返回值看不到。
- 可以进行性能调优（看他的Profile）