python框架Django中MTV框架之Template(模板/界面)
MTV框架之Template(模板/界面)
关注公众号“轻松学编程”了解更多。
1、模板目录位置
应用下
- 不需要注册
- 无法跨应用地进行复用
工程下
需要注册
settings.py范例
# django默认的模板配置
TEMPLATES = [
{
...,
# 模板路径
'DIRS': [
os.path.join(BASE_DIR, 'templates'),
],
...
},
]
可以在不同应用中复用
1.1Django框架自带模板位置
2、模板语法
2.1 读取数据
- {{ xxx }}
- {{ xxx.attr }}
- {{ xxx.method }}
- {{ xxx.i }}
- {{ xxx.key }}
2.2 注释
- {# 模板注释是不可见的 (在html页面中是看不到的) #}
- {% comment %}…{% endcomment %}
- 注释多行内容
2.3 模板内计算
- 加减
- {{ value|add:10 }} //value加10
- {{ value|add:-10 }} //value减10
- 乘除
- {% widthratio a b c %} //widthratio 是关键字
- a/b*c
- {% widthratio a b c %} //widthratio 是关键字
- 大小写转换
- {{ animal.a_name|lower }} //小写
- {{ animal.a_name|upper }} //大写
- 判断是否整除
- {% if forloop.counter|divisibleby:2 %} //如果循环变量的下标整除2
- 连接容器内元素
- {{ animals|join:’=’ }}
2.4 加载静态文件
{% load static %}
{% load staticfiles %}
#访问静态资源
<img src="{% static 'img/dragon.gif' %}">
<img src="/static/img/dragon.gif">
<img src="{% static imgName %}"> #imgName是一个变量,由视图层传过来
settings.py配置
静态文件夹位置
访问路由
-#静态文件访问路由
STATIC_URL = '/static/' #静态文件存储目录:根目录/static/
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
2.5 流程控制
遍历
{% if forloop.first %} //如果第一个循环变量为真
{% if forloop.last %} //如果最后一个循环变量为真
{{ forloop.counter0 }}
- 正序下标,索引从0开始
{{ forloop.counter }}
- 正序下标,索引从1开始算
{{ forloop.revcounter }}
- 索引从最大长度到1
forloop.revcounter0
- 索引从最大长度到0
forloop.parentloop
- 获取上一层 for 循环的 forloop
{% empty %}
当列表为空时用 for empty
{% for animal in animals %}
<li>{{ animal.a_name }}</li>
{% empty %}
<h3>动物都跑啦</h3>
{% endfor %}
#当animals为空时,才会显示<h3>标签
for循环中使用变量:
{% for i in comments %}
<blockquote>
<p>{{ i.user.name }}:</p>
<p>{{ i.content }}</p>
<small><a href="{% url 'good' i.id book.id %}">点赞({{ i.good }})</a>
</small>
</blockquote>
{% endfor %}
if条件
- {% if forloop.first %}…{% elif forloop.last %}…{% else %}…{% endif %}
- {% ifequal value1 value2 %}…{% else %}…{% endifequal %}
- 如果value1==value2
- {% ifnotequal value1 value2 %}…{% else %}…{% endifnotequal %}
- 如果value1!=value2
2.6 转义开关
html转义就是将 html关键字(包括标签,特殊字符等) 进行过滤替换.
过滤替换格式如下:
假设:content=<h1>hello world</h1>
转义
{% autoescape off %} {{ content }} {% endautoescape %}
关闭自动抑制——进行转义
浏览器输出一号标题hello world
{{ content|safe }}
确认数据是安全的——对数据进行转义
浏览器输出一号标题hello world
抑制
直接展示数据模式使用抑制(不转义)
{% autoescape on %} {{ content }} {% endautoescape %}
{{ content }}
浏览器直接输出:<h1>hello world</h1>
2.7 继承与兼并
{% extends ‘base_main.html’ %}
- 继承父模板
{% include xxx.html %}
- 兼并另一个模板使之成为页面的一部分
父模板
{% block header %}
{% endblock %}#重写父模板的当前块
{% block header %}
...
{% endblock %}
{{ block.super }}
- 引用父模板对当前块的实现
2.8 翻页框架
引入
样式
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
脚本
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
样式
<div class="swiper-container" id="topSwiper">
- 外层包裹,需要配合脚本使用
<div class="swiper-wrapper">
- 翻页包装器
<div class="swiper-slide">...</div>
- 分页内容1
<div class="swiper-slide">...</div>
- 分页内容2
如果需要分页器
<div class="swiper-pagination"></div>
如果需要导航按钮
<div class="swiper-button-prev"></div>
如果需要滚动条
<div class="swiper-scrollbar"></div>
脚本
$(function () {
var swiper = Swiper(".swiper-container",{});
})
例子:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<style type="text/css">
.swiper-container img {
height: 300px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
</head>
<body>
{# 轮播 #}
<div class="swiper-container" style=" text-align: center;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{% static 'img/c++.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/python.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/go.jpg' %}">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script>
$(function () {
var mySwiper = new Swiper(
'.swiper-container',
{
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
}
)
})
</script>
</body>
</html>
效果图:
2,9 模板渲染过程
加载模板
- template = loader.get_template('Hello.html')
<class 'django.template.backends.django.Template'>
- 渲染模板
result = template.render()
<class 'django.utils.safestring.SafeText'>
result = template.render(context={"haha":"你哈什么哈"})
- 渲染时给模板传递数据
后记
【后记】为了让大家能够轻松学编程,我创建了一个公众号【轻松学编程】,里面有让你快速学会编程的文章,当然也有一些干货提高你的编程水平,也有一些编程项目适合做一些课程设计等课题。
也可加我微信【1257309054】,拉你进群,大家一起交流学习。
如果文章对您有帮助,请我喝杯咖啡吧!
公众号
关注我,我们一起成长~~
python框架Django中MTV框架之Template(模板/界面)的更多相关文章
- python框架Django中MTV框架之VIew(业务控制器)
MTV框架之VIew(业务控制器) 关注公众号"轻松学编程"了解更多. 1.什么是视图 视图层=路由表(urls.py)+视图函数(views.py) 其角色相当于MVC中的Con ...
- python框架Django中MTV之Model(数据模型)
MTV框架之Model(数据模型) 关注公众号"轻松学编程"了解更多. 1.连接MySQL数据库 项目中的settings.py设置范例 # 配置数据库 DATABASES = { ...
- 写写Django中DRF框架概述以及序列化器对象serializer的构造方法以及使用
写写Django中DRF框架概述以及序列化器对象serializer的构造方法以及使用 一.了解什么是DRF DRF: Django REST framework Django REST framew ...
- python框架Django中的MTV架构
MTV架构 关注公众号"轻松学编程"了解更多. 通过V对M和T进行连接,用户通过T(界面)对服务器进行访问(发送请求),T把请求传给V(调度),V调用M(数据模型)获取数据,把 ...
- python框架django中结合vue进行前后端分离
一:创建django项目 1.django-admin startproject mysite # 创建mysite项目 2.django-admin startapp app01# 创建app01应 ...
- 测试开发之Django——No4.Django中前端框架的配置与添加
我们在开发一个web项目的时候,虽然我们不是专业开发,但是我们也想要做出来一个美美的前端页面. 这种时候,百度上铺天盖地的前端框架就是我们的最好选择了. 当然,在网上直接下载的框架,我们是不能直接用的 ...
- Python—在Django中使用Celery
一.Django中的请求 Django Web中从一个http请求发起,到获得响应返回html页面的流程大致如下: http请求发起 经过中间件 http handling(request解析) ur ...
- python django中restful框架的使用
在使用django进行前后台分离开发时通常会搭配django-rest-framework框架创建RESTful风格的接口API.框架介绍及版本要求可参考官方地址:https://www.django ...
- 在python的web框架Django中使用SQL Server
在pycharm中安装 安装pyodbc和Django——pyodbc是一个用python写的ODBC引擎 安装Django-pyodbc-azure 在后方网址中查 ...
随机推荐
- centos7安装YouCompleteMe,vim打造成C++的IDE
一.安装python3 1.安装编译工具 yum -y groupinstall "Development tools" yum -y install zlib-devel bzi ...
- CUMTCTF'2020 未完成 wp
Web babysqli burp抓包,发现有 的过滤,用/**/过滤空格. 报错注入 payload username=admin&password='/**/or/**/extractva ...
- 003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程
003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程 Java程序长啥样? 首先编写一个Java程序 记事本编写程序 打开记事本 1.wi ...
- Makefile常用函数(转)
一.字符串处理函数 1.$(subst FROM,TO,TEXT) 函数名称:字符串替换函数-subst. 函数功能:把字串"TEXT"中的"FROM"字符替换 ...
- 多测师讲解接口测试 _linux中搭建环境cms_高级讲师肖sir
cms后台的搭建, 我们主要是用来做接口测试和接口自动化测试: 我们搭建的流程和之前搭建多有米一样: 后期给我们一个war包就要知道搭建一个文档: 要知道环境项目怎么讲? 讲解下搭建cms环境的流 ...
- Kubernetes K8S之存储ConfigMap详解
K8S之存储ConfigMap概述与说明,并详解常用ConfigMap示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS ...
- day18 Pyhton学习 内置函数最后七个
1. enumerate 枚举函数 for i in enumerate(['a','b','c'],1): print(i)#(1, 'a')(2, 'b')(3, 'c') goods_lst= ...
- pytest学习纪要123-针对经常用到的内容详实记录
pytest123 本文主要参考:https://www.cnblogs.com/yoyoketang/tag/pytest 如有侵权,请站内联系我 目录 pytest123 1.setup和tear ...
- <二分查找+双指针+前缀和>解决子数组和排序后的区间和
<二分查找+双指针+前缀和>解决子数组和排序后的区间和 题目重现: 给你一个数组 nums ,它包含 n 个正整数.你需要计算所有非空连续子数组的和,并将它们按升序排序,得到一个新的包含 ...
- Zookeeper入门看这篇就够了
https://blog.csdn.net/java_66666/article/details/81015302