3. 模板

本宝宝不开心

于 2021-06-17 16:36:51 发布

阅读量69

点赞数

分类专栏： flask框架web开发实战

本文链接：https://blog.csdn.net/zh_cn1/article/details/117655442

版权

flask框架web开发实战专栏收录该内容

9 篇文章 0 订阅

订阅专栏

模板

应用开发中，很多页面骨架一样，但是内容不同，开发人员反复复制粘贴骨架html代码，模板就是为了解决次此类问题
模板是包含响应文本的文件，其中包含用占位变量表示的动态部分，其具体值只在请求的上下文中才能知道。将实际值替换变量，然后展现出来，这一过程称之为渲染

Jinja2模板引擎

Flask使用Jinja2模板引擎

示例：
templates/index.html

<h1>Hello World!</h1>

templates/user.html

<h1>Hello {{ name }}!</h1> //{{ name }} 表示一个变量，这是一种特殊的占位符

hello.py 渲染模板

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
	return render_template('index.html')

@app.route('/user/<name>')
def user(name):
	return render_template('user.html',name=name)

变量

JinJa2 模板引擎能识别所有类型的变量
变量示例

<p>A value from a dictionary: {{ mydict['key'] }}.</p>
<p>A value from a list: {{ mylist[3] }}</p>
<p>A value from a list,with a variable index: {{ mylist[myintvar] }}</p>
<p>A value from an object's method: {{ myobj.somemethod() }}</p>

变量的值可以使用过滤器修改

Hello, {{ name|capitalize }} //将name值变成首字母大写，| 后面这个就叫过滤器

Jinja2 部分常用过滤器表

过滤器名	说明
safe	渲染时不转义
capitalize	把值的首字母转换成大写，其他字母转化为小写
lower	把值转化为小写
upper	把值转化为大写
title	把值中每个单词的首字母都转化成大写
trim	把值的首尾空格去掉
striptags	渲染之前把值中所有的html标签都删掉

默认情况下，Jinja2会转义所有变量，safe标签只能用在非用户输入且需要显示html代码的变量中

控制结构

JinJa2 提供了多种控制结构

条件判断语句

{% if user %}
	Hello,{{ user }}!
{% else %}
	Hello,Stranger!
{% endif %}

for循环

<ul>
	{% for comment in comments %}
		<li>{{ comment }}</li>
	{% endfor %}
</ul>

宏

{% macro render_comment(comment) %}
	<li>{{ comment }}</li>
{% endmacro %}
<ul>
	{% for comment in comments %}
		{{ render_comment(comment)}}
	{% endfor %}
</ul>

重复使用宏

将宏另存为单独的文件

{% import 'macros.html' as macros %}
<ul>
	{% for comment in comments %}
		{{ macros.render_comment(comment) }}
	{% endfor %}
</ul>

模板继承

base.html

<html>
<head>
	<% block head %>
	<title>{% block title %}{% endblock %}-My Appliaction</title>
	{% endblock %}
</head>
<body>
	{% block body %}
	{% endblock %}
</body>
</html>

test.html

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
	{{ super() }}
	<style>
	</style>
{% endblock %}
{% block body %}
<h1>Hello, World！</h1>
{% endblock %}

使用Flask-Bootstrap集成Bootstrap

Bootstrap是Twitter开发的一个开源web框架
导入flask扩展常用方式from flask_ import xxx

pip install flask-bootstrap4

hello.py

from flask import Flask,render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

@app.route('/')
def index():
	return render_template('index.html')

@app.route('/user/<name>')
def user(name):
	return render_template('user.html',name=name)

user.html

{% extends "bootstrap/base.html" %}

{% block title %}Flasky{% endblock %}

{% 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>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello, {{ name }}!</h1>
    </div>
</div>
{% endblock %}

自定义错误页面

hello.py

from flask import Flask,render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

@app.route('/')
def index():
	return render_template('index.html')

@app.route('/user/<name>')
def user(name):
	return render_template('user.html',name=name)

@app.errorhandler(404)
def page_not_found(e):
	return render_template('404.html'),404

@app.errorhandler(505)
def internal_server_error(e):
	return render_template('500.html'),500

404.html

<h1>Not Found</h1>

静态文件

默认设置下，Flask在应用根目录中名为static的子目录中寻找静态文件
base.html

{% extends "bootstrap/base.html" %}

{% block title %}Flasky{% endblock %}

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}

{% 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>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
    {% block page_content %}{% endblock %}
</div>
{% endblock %}

本宝宝不开心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3. 模板

模板应用开发中，很多页面骨架一样，但是内容不同，开发人员反复复制粘贴骨架html代码，模板就是为了解决次此类问题模板是包含响应文本的文件，其中包含用占位变量表示的动态部分，其具体值只在请求的上下文中才能知道。将实际值替换变量，然后展现出来，这一过程称之为渲染Jinja2模板引擎Flask使用Jinja2模板引擎示例：templates/index.html<h1>Hello World!</h1>templates/user.html<h1>Hello
复制链接

扫一扫

专栏目录