3. 模板变量及模板过滤器

1.模板路径的查找

  • 查找顺序
    • 首先会在根目录下的templates文件夹下面查找
    • 之后会在已注册的app中的templates文件夹下面查找
    • 只要找到一个符合的模板，就返回
  • 两种方案
    • 项目部署
    • app复用

2.静态页面，动态页面

  • 静态页面：无法变化，
  • 动态页面：根据交互的不同会进行变化

3.渲染机制

  • 可以将模板变量渲染进入页面
class Index(View):
    def get(self, request):
        now = datetime.now()
        return render(request, 'index/home.html', context={
            'now': now
        })

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页</title>
</head>
<body>
<h1>我是主页</h1>
<h4>当前时间是：{{ now }}</h4>
</body>
</html>

4.模板变量

  • 语法
    1. 语法: {{ 变量名 }}
    2. 命名由字母和数字以及下划线组成，不能有空格和标点符号
    3. 可以使用字典、模型、方法、函数、列表
    4. 不要和python或django关键字重名
    5. 变量和查找
  • 变量的解析规则
    1. 计算变量，将其替换为结果
    2. 遇到点(.)的时候，按一下顺序查找：
      • 字典键值查找
      • 属性或方法查找
      • 数字索引查找
    3. 如果结果是可调用的，则调用它时不带参数。调用的结果成为模板的值
      • 所谓的结果是可调用的，说明变量是不带参数个函数，或是个方法
    4. 渲染失败返回: ''
class Fruits:
    def __init__(self, name, color):
        self.name = name
        self.color = color
    def food(self):
        return '水果也是食物哦'

class Index(View):
    def get(self, request):
        now = datetime.now()
        list1 = [1,2,3]
        dict1 = {'name': '刘威', 'age': 18}
        dict2 = {'name': '刘威', 'age': 18, 'items':'abc'}
        def func():
            return '我是一个无参数的可调用函数'
        fruit = Fruits('apple', 'red')
        return render(request, 'index/home.html', context={
            'now': now,
            'list1':list1,
            'dict1': dict1,
            'dict2': dict2,
            'func':func,
            'fruit':fruit,
        })

<body>
<h4>变量调用：{{ now }}</h4>
<h4>列表调用：{{ list1}}</h4>
<h4>列表值调用：{{ list1.2}}</h4>
<h4>字典调用：{{ dict1 }}</h4>
<h4>字典key调用：{{ dict1.name }}</h4>
<h4>字典方法调用：{{ dict2.items }}</h4>
<h4>函数调用：{{ func }}</h4>
<h4>类对象调用：{{ fruit }}</h4>
<h4>类对象属性调用：{{ fruit.name }}</h4>
<h4>类对象方法调用：{{ fruit.food }}</h4>
</body>
模板变量.png

5.模板过滤器 filter

  • 作用：对变量进行过滤。在真正渲染出来之前，过滤器会根据功能处理好变量，然后得出结果后再替换掉原来的变量展示出来

    • 语法：{{fruits|lower}}

  • 链式调用：比如实现一个功能，先把所有字符变成小写，把第一个字符转换成大写

    • 语法：{{fruits|lower|capfirst}}

  • 使用参数：过滤器可以使用参数，在过滤器名称后面使用冒号”:”再加上参数，比如要把一个字符串中所有的空格去掉，则可以使用cut过滤器

    • 语法如下: {{fruits|cut:" "}}
    • 注意：使用参数的时候，冒号和参数之间不能有任何空格，一定要紧挨着

  • 常用模板过滤器

    • add 将参数与值相加 首先尝试转换成整数相加，失败，则尝试字符串，列表相加等。{{ value|add:"2" }}
    • capfirst 首字母大写，如果第一个字母不是字母则不起作用。{{ value|capfirst }}
    • date 日期格式化 {{ value|date:"D d M Y" }}
    • time 时间格式化 {{ value|time:"H:i" }} 格式化格式见官方文档：https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#date
    • default 如果变量解析失败，使用给定的默认值。{{ value|default:"nothing" }}（注意如果value是''空字符串，输出将会是'nothing'）
    • first 返回列表的第一个元素 {{ value|first }}
    • last 返回列表的最有一个元素 {{ value|last }}
    • slice 返回一个列表的切片 {{ some_list|slice:":2" }}，前闭后开
    • join 连接字符串列表 与str.join（list）一样 {{ value|join:" // " }}
    • floatformat 浮点数格式化 不指定小数位参数，默认保留一个为小数
    • length 返回字符串或列表的长度
    • length_is 判断字符串或列表长度是否指定的值，相等返回True {{ value|length_is:"4" }}
    • lower 字符串中的字母都变小写{{ value|lower }}
    • upper 字符串中的字母都变大写{{ value|upper }}
    • safe 关闭变量的自动转义，使html标签生效{{ value|safe }}
    • title 标题化，首字母大写 {{ value|title }}
    • truncatechars 根据后面给的参数，截断字符，如果超过了用...表示
    • truncatewords 同truncatechars，不过这个一个以单词为单位，进行截断
      以上两个针对html，会截断标签中的字符，而不会截断标签
    • striptags 去掉所有的html标签

  • xss 跨域脚本攻击

class Index(View):
    def get(self, request):
        # 用js写个死循环alert(1), 在渲染到前端，有兴趣的可以试试
        js= '<script>alert(1)</script>'
        return render(request, 'index/home.html', context={
            'js':js
        })

<body>
<p>{{ js|safe }}</p>
</body>

6.静态文件(static:css js image)

  • 路径配置
# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
  • 静态文件的引入
{# index.html #}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页</title>
  <link rel="stylesheet" href="{% static 'css/index/index.css' %}">
</head>
<body>
<p>我是红色</p>
</body>
</html>

/* index.css */
p{
    color: red;
}
  • 访问
# index.views.py
from django.views import View
from django.shortcuts import render,


class Index(View):
    def get(self, request):

        return render(request, 'index/home.html')

# index/urls.py
from django.views import View
from django.shortcuts import render,


class Index(View):
    def get(self, request):

        return render(request, 'index/home.html')

7.Bootstrap套用举例

image.png
image.png
image.png
image.png
image.png

再获取网页源代码，以及相应css文件，导入到我们的项目中，进行代码设计


image.png
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Signin Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="{% static 'css/login/login.css' %}" rel="stylesheet">
  </head>

  <body>

    <div class="container">
      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div> <!-- /container -->
  
  </body>
</html>

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

class Login(View):
    def get(self, request):
        return render(request, 'login/login.html')

urlpatterns = [
    path('login/', views.Login.as_view(), name='login'),
]
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • bash
    官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,668评论 0赞 5
  • Django 模板语言（译）
    声明：转载请注明出处http://www.jianshu.com/p/1664dcfd840c 最近在折腾Djan...
    蛇发女妖阅读 6,429评论 1赞 10
  • oracle错误集合
    ORA-00001: 违反唯一约束条件 (.) 错误说明：当在唯一索引所对应的列上键入重复值时，会触发此异常。 O...
    我想起个好名字阅读 5,871评论 0赞 9
  • 何为拆书法
    R-阅读原文 心理学家把发展或增强某种技术和能力的意愿称作“精熟目标”。当人们在追求精熟目标时，他们不因是否达到特...
    cy_alice阅读 293评论 0赞 0
  • 路
    往来奔波，苦 也为心头，喜 161014 不前。良.田.路：幸呼！哀 呼。
    喜贝贝阅读 240评论 8赞 13

友情链接更多精彩内容