提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
模板渲染
变量
语法:{{}} 或 {{%%}}
views.py 视图文件
from django.shortcuts import render
def home(request):
username = 'SByaya' # 可以传字符串
num = 10 # 可以传数字
lst1 = [11,22,33] # 可以传列表
dict1 = {'k1':'v1','k2':'v2'} # 可以传字典
class A:
def __init__(self):
self.name = 'yayasillydog'
def get_name(self):
return self.name + '太蠢了'
a = A() # 可以传类对象
dic = {
'username':username,
'num':num,
'lst1':lst1,
'dict1':dict1,
'a':a,
}
'''
'asdfasdfasdf{{hobby.0}}' = hobby[0] 索引取值
模板渲染完成之后, 才返回给浏览器, 浏览器再进行页面渲染, 生成效果
'''
return render(request,'home.html',dic)
html 文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome to dog's home!!</h1>
<h1>{{ username }}</h1>
<h1>{{ num }}</h1>
<h1>{{ lst1 }}</h1>
<h1>{{ lst1.1 }}</h1> <!-- 用点索引来取值 -->
<h1>{{ dict1 }}</h1>
<h1>{{ dict1.k1 }}</h1> <!-- 字典.键来取值 -->
<h1>{{ a.name }}</h1> <!-- 可以获取对象里的属性 -->
<h1>{{ a.get_name }}</h1> <!-- 只能获取对象里的无参方法,不能够获取有参方法 -->
</body>
</html>
过滤器
语法
语法 无参数过滤的用法{{ 变量|过滤器名称 }} 有参数过滤器用法{{变量|过滤器名称:‘参数’}}}
注意点:管道符两边不能有空格,有参数的冒号加参数,无参数的不需要冒号
django自带的过滤器
default默认值
如果一个变量是false或者为空,使用给定的默认值。 否则,使用变量的值。
'''没有传值'''
def home(request):
username = 'yayapig' # 可以传字符串
dic = {
# 'username':username, # 没有传username
}
return render(request,'home.html',dic)
值为空
'''值为空'''
username = ''
default默认值语法
<p>
{{ username|default:'Libolun' }}
</p
length 判断长度
<p>
{{ username|length }}
</p>
filesizeformat 展示为可读的大小,自动计算单位
<p>
{{ file_size|filesizeformat }}
</p>
slice 切片
<p>
{{ msg|slice:'0:4' }}
</p>
date 日期格式化
<p>
{{ current_time|date:"Y-m-d H:i:s" }} <!-- 注意分钟是用i来表示 -->
</p>
safe 将标签字符串识别为一个标签效果
使用safe的目的:防止xss攻击(跨站脚本攻击)
views.py 视图文件
def test(requqest):
a_tag = '<a href="">某宝</a>'
return render(request,'test.html',{'a_tag':a_tag})
test.html
<p>
{{ a_tag|safe }}
</p>
truncatechars 字符截断
注意:7包括4个字符加3个省略号
<p>
{{ msg|truncatechars:7 }}
</p>
truncatewords 单词截断
<p>
{{ msg|truncatewords:2 }}
</p>
cut 移除value中所有的与给出的变量相同的字符串
<p>
{{ msg|cut:' ' }} <!-- 去除value中所有的空格 -->
</p>
join 字符串拼接
<p>
{{ list1|join:'+' }} <!-- 等同于python中的"+".join(list1) -->
</p>
for 循环标签
语法
语法: {% 标签逻辑 %}
循环列表
<ul>
{% for i in lst1 %}
<li>{{ i }}</li>
{% empty %}
<span>哥,啥也木有啊</span>
{% endfor %}
</ul>
<!-- 如果lst1为空,或者后台没有给lst1数据,那么就展示empty下面的内容 -->
循环字典
<ul>
{% for k,v in dic1.items %}
<li>{{ k }}--->{{ v }}</li>
{% endfor %}
</ul>
<!-- 在循环中,可以接dic1.keys values items -->
循环嵌套
<ul>
{% for i in lst1 %}
<li>{{ i }}--->{{ forloop.counter }}</li>
{% if forloop.last %}
{% for ii in i %}
<li>{{ ii }}--->{{ forloop.counter }}--->{{ forloop.parentloop.counter }}</li>
{% endfor %}
{% endif %}
{% endfor %}
</ul>
forloop用法
forloop.counter # 当前循环的索引值(从1开始),forloop是循环器,通过点来使用功能
forloop.counter0 # 当前循环的索引值(从0开始)
forloop.revcounter # 当前循环的倒序索引值(从1开始)
forloop.revcounter0 # 当前循环的倒序索引值(从0开始)
forloop.first # 当前循环是不是第一次循环(布尔值)
forloop.last # 当前循环是不是最后一次循环(布尔值)
forloop.parentloop # 本层循环的外层循环的对象,再通过上面的几个属性来显示外层循环的计数等
if循环标签
if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断,注意条件两边都有空格。
views.py
from django.shortcuts import render
def home(request):
number = 102
dic = {
'number':number,
}
return render(request,'home.html',dic)
home.html
{% if number == 100 %}
<h1>猜对了</h1>
{% elif number == 101 %}
<h1>101不对呀</h1>
{% else %}
<h1>这更不对了</h1>
{% endif %}
if语句也可以和过滤配合使用
{% if user_list|length > 5 %} <!--结合过滤器来使用-->
可以可以
{% else %}
不行不行
{% endif %}
Django的模板语言中属性的优先级大于方法
views.py
d2 = {'items': [11,22,33]}
优先使用items属性,不使用items方法,容易导致错误
html文件
优先使用items属性,不使用items方法,容易导致错误
<ul>
{% for key,v in d2.items %}
<li>{{ key }} -- {{ v }}</li>
{% endfor %}
</ul>
with 起别名
使用一个简单地名字缓存一个复杂的变量,多用于给一个复杂的变量起别名,当你需要使用一个“昂贵的”方法(比如访问数据库)很多次的时候是非常有用的
例如:
注意等号左右不要加空格。
{% with business.employees.count as total %}
{{ total }} <!--只能在with语句体内用-->
{% endwith %}
模板继承
Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 blocks 。
语法:
{{% extends '模板文件' %}}
{% block content %}
<h1>基础模板</h1>
{% endblock %}
例如:
先创建一个模板
base.html 模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background-color: pink;
height: 40px;
}
.left-menu{
background-color: tan;
width: 200px;
min-height: 600px;
}
.item{
background-color: yellow;
height: 40px;
border-bottom: 1px solid red;
}
.left{
float: left;
}
.right{
float: left;
}
</style>
{% block css %}
{% endblock %}
</head>
<body>
<div class="nav">
<div class="c1">
<a href="">32官网</a>
<span>性感荷官, 在线发牌</span>
</div>
</div>
<div class="main">
<div class="left">
<div class="left-menu">
<div class="menu1 item">
<a href="/t1/">菜单1</a> <!-- 写相对路径时,前面的斜杠必须写 -->
</div>
<div class="menu2 item">
<a href="/t2/">菜单2</a>
</div>
<div class="menu3 item">
<a href="/t3/">菜单3</a>
</div>
</div>
</div>
<div class="right">
<div class="content">
{% block content %}
<h1>基础模板</h1>
{% endblock %}
</div>
</div>
</div>
</body>
{% block js %}
{% endblock %}
</html>
'''
在模板中预留block块(叫做 钩子)
{% block content %}
<h1>基础模板</h1>
{% endblock %}
'''
<!子页面中继承模板extends
并重写模板中预留的block块中的内容
{{ block.super }} `显示模板的内容 !>
{% extends 'base.html' %}
{% block css %}
<style>
.c1{
background-color: green;
height: 40px;
}
</style>
{% endblock %}
{% block content %}
<h1>性感美女,在线指导</h1>
{{ block.super }} <!-- 显示模板的内容 -->
{% endblock %}
block块的写法
{% block content %}
...
{% endblock %}
{% block content %}
...
{% endblock content %} 可以指定endblock的名称,起到一个提示作用
组件
概念:
组件:把完整的一套功能封装成模块
在前端中,就是把一套完整的样式封装起来,供其他人使用
在其他的html文件中引入一个html文件
在home.html中如果我们想使用已经封装好的zujian.html
zujian.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background-color: pink;
height: 40px;
}
</style>
</head>
<body>
<div class="nav">
<div class="c1">
<a href="">32官网</a>
<span>性感荷官, 在线发牌</span>
</div>
</div>
</body>
</html>
在home.html中引入一下include
在页面什么位置引入,组件效果就生成到什么位置
home.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>这是home页面</h1>
{% include 'zujian.html' %}
</body>
</html>
静态文件配置
在项目根目录下创建一个文件夹,比如名称为statics
在setting.py中写入如下内容
STATIC_URL = '/static/' #别名
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'statics'), # 注意别忘了写逗号,第二个参数就是项目中你存放静态文件的文件夹名称
]
在html文件中引入时使用别名
<!-- 两种引入方式 -->
<link rel="stylesheet" href="/static/css/test.css"> # 直接写别名路径开头
<link rel="stylesheet" href="{% static 'css/test.css' %}"> # 推荐使用
<!-- 导入一张图片 -->
<img src="/static/imgs/test.png" alt="">
<!-- 引入js文件 -->
<script src="/static/js/xx.js"></script>
设置STATIC_URL的意义
别名也是一种安全机制,浏览器上通过调试台你能够看到的是别名的名字,这样别人就不能知道你静态文件夹的名字了,不然别人就能通过这个文件夹路径进行攻击。