Flask中的MTV架构之Templates
Flask 中的MTV架构之Templates
关注公众号“轻松学编程”了解更多。
1、Templates(模板引擎)
1.1 说明
模板文件就是按照特定规则书写的一个负责展示效果的HTML文件;模板引擎就是提供特定规则的解释和替换的工具.
1.2 Jinja2
在Flask中使用的就是该模板引擎,它是有flask核心开发组人员开发的,官方文档http://docs.jinkan.org/docs/jinja2/
1.3 Jinja2使用
a.目录结构
manage.py 项目启动控制文件
templates 所有的模板文件
b. 渲染模板文件
templates/hello.html
<h1>Hello Flask !</h1>
标签注释:{# 注释内容 #}
c. 渲染模板文件
return render_template('hello.html')
d.渲染模板字符串
return render_template_string('<h1>渲染字符串</h1>')
e.使用变量
var.html
{# 这里是注释,渲染的变量放在两个大括号中 ,g是代表全局变量的意思#}
<h1>Hello {{ name }}</h1>
<h1>Hello {{ g.name }}</h1>
f.传递name并渲染
return render_template('var.html', name='xiaoming')
g. 传递全局变量
g.name = ‘g的name属性’
g对象,在模板中使用不需要分配
h. 渲染模板字符串
return render_template_string('<h1>Hello {{ name }}</h1>',name='xxx')
i.使用函数
<h1>Hello {{ name | upper }}</h1>
j.模板函数
upper | 全部大写
lower | 全部小写
title | 每个单词首字母大写
capitalize | 首字母大写
trim | 去掉两边的空白
striptags | 过滤HTML标签
safe | 渲染时不转义,默认转义
不要滥用safe,否则可能不安全,只能用在自己信任的变量上
k. 流程控制
分之语句(if-else)
{% if name %}
<h1>Hello {{ name }} !</h1>
{% else %}
<h1>Hello world !</h1>
{% endif %}
l.循环结构(for-in)
<ol>
{% for i in range(1, 6) %}
<li>{{ i }}</li>
{% endfor %}
</ol>
m.文件包含
{% include 'include2.html' %}
n.宏的使用
采用类似于python中的函数的形式进行定义和调用,通常我们可以把特定功能的内容显示定义成一个宏,哪里使用哪里调用即可,避免了相同效果的代码重复书写。
o.宏的定义
{# 定义宏 #}
{% macro show_name(name) %}
<h1>Hello {{ name }}</h1>
{% endmacro %}
p.宏的导入
{# 导入宏 #}
{% from 'macro1.html' import show_name %}
r.宏的调用
{# 调用宏 #}
{{ show_name(name) }}
s.模板继承
父模板挖坑
parents.html
<html>
<head>
<title>{% block title %}默认标题{% endblock %}</title>
</head>
<body>
{% block body %}默认内容{% endblock %}
</body>
</html>
子模板填坑
children.html
继承父模板
{# 继承自指定模板文件 #}
{% extends 'parents.html' %}
填坑
{# 可以对基础模板中的block进行删除,重写 #}
{% block title %}欢迎登录{% endblock %}
{# 重写基础模板中的block #}
{% block body %}
{# 保留基础模板中的内容 #}
{{ super() }}
<div>欢迎您的到来...</div>
{% endblock %}
t.加载静态资源
默认目录为static
加载图片
<img src="{{ url_for('static', filename='cluo.jpg') }}">
u.加载CSS
{# 加载CSS #}
{% block styles %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='common.css') }}" />
{% endblock %}
v.加载JS
{# 加载JS #}
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="{{ url_for('static', filename='common.js') }}"></script>
{% endblock %}
w.加载收藏夹的图标
{# 加载收藏夹的图标 #}
{% block head %}
{{ super() }}
<link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='favicon.ico') }}" />
{% endblock %}
1.4 flask-bootsrap
a.安装
pip install flask-bootstrap
b.使用
导入类库
# 导入类库
from flask_bootstrap import Bootstrap
创建对象
bootstrap = Bootstrap(app)
测试模板boot.html
{# 继承自bootstrap的基础模板 #}
{% extends 'bootstrap/base.html' %}
{% block title %}用户注册{% endblock %}
{% block content %}
<div class="container">欢迎注册</div>
{% endblock %}
bootstrap/base.html中的block
| doc | 整个HTML文档 |
| html | html标签 |
| head | head标签 |
| title | title标签 |
| styles | 引入css |
| metas | 一组meta标签 |
| body | body标签 |
| navbar | 用户自定义导航条 |
| content | 用户自定义内容 |
| scripts | 用户定义的JS |
c.定义项目基础模板
一个项目中,很多页面都很相似,只有细微的差别,如果每个都定制势必会有大量的重复代码的书写。为了简化这种重复工作,我们通常为项目定制一个基础模板
步骤
1.从bootcss.com复制一个顺眼的导航条
2.将container-fluid改为container
3.显示反色导航条:navbar-inverse
4.将圆角改为直角:style=“border-radius: 0px;”
5.根据需要定制显示内容
6.修改折叠目标的定位:data-target=".navbar-collapse"
基础模板文件base.html
{% extends 'bootstrap/base.html' %}
{# 定制标题 #}
{% block title %}默认标题{% endblock %}
{# 定制导航条 #}
{% block navbar %}
<nav class="navbar navbar-inverse" style="border-radius: 0px;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target=".navbar-collapse" aria-expanded="false">
<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="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">板块一</a></li>
<li><a href="#">板块二</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
{% endblock %}
{# 定制内容 #}
{% block content %}
<div class="container">
{# 这里可以为页面内容显示预留位置 #}
{% block page_content %}默认内容{% endblock %}
</div>
{% endblock %}
d.错误页面定制
添加视图函数
# 错误定制
@app.errorhandler(404)
def page_not_found(e):
return render_template('404.html')
定制404.html
{% extends 'base.html' %}
{% block title %}出错了{% endblock %}
{% block page_content %}<h1>臣妾实在找不到啊@_@</h1>{% endblock %}
url_for函数
携带GET参数
url_for('var', name='xiaoming', pwd='123456')
相当于 /var/?name=xiaoming&pwd=123456
构造完整的外部链接
url_for('var', name='xiaoming', pwd='123456', _external=True)
http://127.0.0.1:5000/var/?name=xiaoming&pwd=123456
在超链接中使用反向解析
<li>注册</li>
后记
【后记】为了让大家能够轻松学编程,我创建了一个公众号【轻松学编程】,里面有让你快速学会编程的文章,当然也有一些干货提高你的编程水平,也有一些编程项目适合做一些课程设计等课题。
也可加我微信【1257309054】,拉你进群,大家一起交流学习。
如果文章对您有帮助,请我喝杯咖啡吧!
公众号
关注我,我们一起成长~~
Flask中的MTV架构之Templates的更多相关文章
- Flask 中的MTV架构之Views
Flask 中的MTV架构之Views 1.MVC与MTV 1.1 MVC M:model,模型,数据模型 V:view,视图,负责数据展示 C:controller,控制器,负责业务逻辑 ...
- Flask 中的MTV架构之Models
Flask 中的MTV架构之Models 1.Models(数据模型) 1.1 flask-sqlalchemy(数据库) 说明:提供了大多数关系型数据库的支持,而且提供了ORM # 安装: pi ...
- python框架Django中的MTV架构
MTV架构 关注公众号"轻松学编程"了解更多. 通过V对M和T进行连接,用户通过T(界面)对服务器进行访问(发送请求),T把请求传给V(调度),V调用M(数据模型)获取数据,把 ...
- Flask中的Templates
1.什么是模板 模板 , 在Flask 中就是允许响应给用户看的网页 在模板中,允许包含"占位变量"来表示动态的内容 模板最终也会被解析成字符串再响应给客户端,这一过程通常称为&q ...
- django上课笔记6-MVC,MTV架构-中间件-初识Form组件
一.MVC,MTV架构 models(数据库,模型) views(html模板) controllers(业务逻辑处理) --> MVC models(数据库,模型) templates(htm ...
- [Python自学] day-18 (2) (MTV架构、Django框架、模板语言)
一.实现一个简单的Web服务器 使用Python标准库提供的独立WSGI服务器来实现MVC架构. 首先,实现一个简单的Web服务器: from wsgiref.simple_server import ...
- Flask 中的 SQLAlchemy 使用教程
Flask 是一个 python web micro framework.所谓微框架,主要是 flask 简洁与轻巧,自定义程度高.相比 django 更加轻量级. 之前一直折腾 django,得益于 ...
- flask框架----整合Flask中的目录结构
一.SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import datetime from ...
- 第二篇 Flask 中的 Render Redirect HttpResponse
第二篇 Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返 ...
随机推荐
- Centos-将文件内容输出到标准输出-cat
cat 将文件内容输出到标准输出 相关选项 -n 显示行号,包括空行 -b 显示行号,不包括空行 -A 显示制表符为 ^I ,结尾符为 $ 应用 1. 清空文件 cat /dev/null > ...
- 内存操作【memset】【memcpy】
void *memset(void *s, int c, unsigned long n); 将指针变量 s 所指向的前 n 字节的内存单元用一个"整数" c 替换,注意 c 是 ...
- 047 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 09 嵌套while循环应用
047 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 09 嵌套while循环应用 本文知识点:嵌套while循环应用 什么是循环嵌套? 什么是循环嵌套? ...
- 005 01 Android 零基础入门 01 Java基础语法 01 Java初识 05 Eclipse简介
005 01 Android 零基础入门 01 Java基础语法 01 Java初识 05 Eclipse简介 Eclipse是一款集成开发工具--IDE. 集成开发环境(IDE,Integrated ...
- 题解【[USACO18FEB]New Barns 】
浅谈一下对于这题做完之后的感受(不看题解也是敲不出来啊qwq--) 题意翻译 Farmer John注意到他的奶牛们如果被关得太紧就容易吵架,所以他想开放一些新的牛棚来分散她们. 每当FJ建造一个新牛 ...
- SSIS 生成文件
程序说明 此SSIS的目标是生成如下的文本文件 此文件的列由TAB键分割,可以使用notepad++来查看 这样就能够看清TAB键了 文件由%H%表示头部和%D%表示的细节部分 以下为程序开发使用的V ...
- 小程序将base64的多张图片,传到tp5后台
zhu要是前端传过来的数据是base64的数据库存储不了base64的数据,因存储量太过于大,因此后台要将base64的数据转换成,34124323534.jpg等格式的,数据库才可将其存储 源码暂时 ...
- 2440启动流程 <转载>
韦东山 博客园 首页 订阅 管理 2440启动过程分析 2440启动过程分析 2440启动过程算是一个难点,不太容易理解,而对于2440启动过程的理解,影响了后面裸机代码执行流程的分析,从而看出2 ...
- 基于python实现顺序存储的栈
""" 栈 sstack.py 栈模型的顺序存储 重点代码 思路总结: 1.列表是顺序存储,但功能多,不符合栈的模型特征 2.利用列表,将其封装,提供接口方法 " ...
- 【博弈论】51Nod 1534 棋子游戏
题目内容 波雷卡普和瓦西里喜欢简单的逻辑游戏.今天他们玩了一个游戏,这个游戏在一个很大的棋盘上进行,他们每个人有一个棋子.他们轮流移动自己的棋子,波雷卡普先开始.每一步移动中,波雷卡普可以将他的棋子从 ...