zoukankan      html  css  js  c++  java
  • django学习笔记(八)-----模板

    一、定义模板

    1、变量:

    • 视图传递给模板的数据,
    • 要遵守标识符规则
    • 语法:{{var}} 计算以下var的值
    • 注意:如果使用的变量不存在,则插入的是空字符串
    • 在模板中使用点语法<h1>{{grade.gname}}</h1>
      字典查询
      属性或者方法
      数字
    • 在模板中调用对象的方法<h1>{{grade.getName}</h1>getName是models.py的函数名(不能传递参数)

    在templates/firstapp中的index.html下面第九行添加<h1>{{num}}</h1>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <hody>
        <h1>sunck is good man</h1>
        <h1>{{num}}</h1>
    </hody>
    </html>

    在firstapp/views.py更改index函数

    def index(request):
        return render(request,'firstapp/index.html',{"num":10})

    在这里插入图片描述

    2、标签

    1、语法{% tag %}
    2、作用

    • 在输出中创建文本
    • 控制逻辑和循环

    3、标签

    1. if 格式:
      {% if 表达式 %} 语句 {% endif %}
      {% if 表达式1 %} 语句1 {% else 表达式2 %} 语句2 {% endif %}
      {% if 表达式1 %} 语句1 {% elif 表达式2 %} 语句2 ... {% elif 表达式n %} 语句n {% endif %}
      {% if 表达式1 %} 语句1 {% elif 表达式2 %} 语句2 ... {% elif 表达式n %} 语句n {% else %} 语句 {% endif %}
    {%if num%}
        <h1>sunck is good man</h1>
    {%endif%}
    1. for 格式:
      {%for 变量 in 列表%} 语句 {%endfor%}
      {%for 变量 in 列表%} 语句1 {%empty%} 语句2 {%endfor%}注意:列表为空或者列表不存在时执行语句2
      {{forloop.counter}}表示当前是第几次循环,不是标签
    #templates/firstapp/students.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学生信息</title>
    </head>
    <hody>
        <h1>学生信息列表</h1>
        <ul>
            {%for stu in students%}
            <li>
                {{forloop.counter}}--{{stu.sname}}--{{stu.scontend}}--{{stu.sgrade}}
            </li>
            {%empty%}
                <li>目前没有学生</li>
            {%endfor%}
        </ul>
    </hody>
    </html>
    #firstapp/views.py
    def students(request):
        list=Students.stuObj2.all()
        return render(request,'firstapp/students.html',{"students":list})
    #firstapp/urls.py
    path('students/', views.students),

    在这里插入图片描述
    3. comment-----作用:注释多行
    {% comment %} 注释的内容 {% endcomment %}
    4. ifequal。ifnotequal 作用:判断是否相等或者不相等
    格式:{%ifequal '值1' '值2' %} 语句 {% endifequal %} 如果值1等于值2,则执行语句
    5. include
    作用:加载模板并以标签内的参数渲染
    格式:{% include '模板目录‘ 参数1 参数2...%}
    6. url
    作用:反向解析
    格式:{% url 'namespace:name' p1 p2%}
    7. csrf_token
    作用:用于跨站请求伪造保护的
    格式:{% csrf_token %}
    8. block/extends
    作用:用于模板的继承
    9. autoescape
    作用:用于HTML转义

    3、过滤器

    1、语法:{{ var|过滤器 }} 和 {{ 变量|过滤器 }}一样,<h1>{{str|upper}}</h1>,字符串显示之前,修改成大写,str本身不变
    2、作用:在变量被显示前修改它
    3、

    1. lower <h1>{{str|lower}}</h1>
    2. upper <h1>{{str|upper}}</h1>
    3. 过滤器可以传递参数,参数用引号引起来
      join 格式:<h1>{{列表|join:'#'}}</h1>
    4. 如果一个变量没有被提供,或者值为false或者为空,可以使用默认值
      default 格式:<h1>{{var|default:'good'}}</h1>
      <h1>{{test|default:'没有'}}</h1> test有值,返回值,没有值,返回default
    5. 根据给定格式转换日期为字符串
      date-----格式:{{dateval | date:'y-m-d'}} dateval–日期的变量
    6. HTML转义----escape
    7. 加减乘除
      <h1>num={{num | add :10}}</h1>
      <h1>num={{num | add :-5}}</h1>
      标签
      <h1>{% widthratio num 1 5 %}</h1> ------><!--num/1*5-->----->num*5
      <h1>{% widthratio num 2 1 %}</h1> ------><!--num/5*1-->------>num/5

    4、注释

    1、单行注释
    语法:{#注释的内容#}

    多行注释
    comment-----作用:注释多行
    {% comment %} 注释的内容 {% endcomment %}

    二、反向解析

    第一部分

    1、在templates/firstapp/index.html里面加一个<a href="good/">链接</a>,
    <a href="/good/">表示从头开始
    2、点击链接,转到good的页面,需要firstapp/urls.py配置路由path('good/',views.good),
    3、然后在firstapp/views.py中创建一个good视图
    def good(request):
    return render(request,'firstapp/good.html')
    4、在templates/firstapp中创建一个good.html,填写上内容<h1>good</h1>

    第二部分,传递一个数字123

    1、在templates/firstapp/index.html里面加一个<a href="good/123/">链接</a>,
    2、点击链接,转到good的页面,需要firstapp/urls.py配置路由path('good/<int:id>/',views.good),,
    注意:路径里id是视图函数定义时的id
    3、然后在firstapp/views.py中创建一个good视图
    def good(request,id):
    return render(request,'firstapp/good.html',{"num":id})
    4、在templates/firstapp中创建一个good.html,填写上内容<h1>good--{{num}}</h1>
    注意:这里的num是将id赋给了num
    在这里插入图片描述
    在这里插入图片描述
    第三部分,动态生成匹配的网址
    (1)、project.urls.py
    path('firstapp/', include(('firstapp.urls',"myapp"),namespace='myapp')),
    (2)、firstapp.urls.py
    app_name='firstapp'
    path('good/<int:id>/',views.good,name="good"),
    (3)、动态生成要匹配的网址
    <a href="{% url 'myapp:good' 1 %}">链接2</a>注意: ‘myapp:good’ 和1之间有空格,可以自定义是1还是别的
    myapp拿的是(1)的地址,good拿的是(2)的good的地址,有几个<int:id>,后面跟几个参数,上面就一个,所以就跟一个参数值

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    三、模板继承

    1、作用:模板继承可以减少页面内用的重复定义,实现页面的重用
    2、block标签:

    • 在父模板中预留区域,子模版去填充
    • 语法:{% block 标签名%} {%enderblock 标签名%}

    3、extends标签:

    • 继承模板,需要写在模板文件的第一行
    • 语法:{% extends '父模板路径'%}

    4、示例
    定义父模板(基础模板)
    定义子模板(主页模板)

    基础模板1 一个block标签

    {% block main%} {%endblock main%}

    #base.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            #header{
                width:100%;
                height:100px;
                background-color:red;
            }
            #footer{
                width:100%;
                height:100px;
                background-color:blue;
            }
        </style> 
    </head>
    <hody>
        <div id="header">header</div>
        <div id="main">
            {% block main%}
            {%endblock main%}
        </div>
        <div id="footer">footer</div>
    </hody>
     

    主页模板1

    #templates/firstapp/main.html,继承base.html,只需要填充{% block main%}  {%endblock main%},中间部分
    
    {%extends 'firstapp/base.html'%}
    
    {% block main %}
        <h1>sunck is good main</h1>
    {% endblock main%}
    
    #firstapp/urls.py
    path('main/',views.main),
    #firstapp/views.py
    def main (request):
        return render(request,'firstapp/main.html')

    http://localhost:8000/firstapp/main/
    在这里插入图片描述

    主页模板2

    #templates/firstapp/detail.html,继承base.html,只需要填充{% block main%}  {%endblock main%},中间部分
    {%extends 'firstapp/base.html'%}
    {% block main %}
        <h1>sunck  man</h1>
    {% endblock main%}
    #firstapp/urls.py
    path('detail/',views.detail),
    #firstapp/views.py
    def detail(request):
        return render(request,'firstapp/detail.html')

    http://localhost:8000/firstapp/detail/
    在这里插入图片描述

    基础模板2 两个block标签

    {% block main%} {%endblock main%}
    <hr/>
    {% block main2%} {%endblock main2%}

    #templates/firstapp/main.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            #header{
                width:100%;
                height:100px;
                background-color:red;
            }
            #footer{
                width:100%;
                height:100px;
                background-color:blue;
            }
        </style> 
    </head>
    <hody>
        <div id="header">header</div>
        <div id="main">
            {% block main%}
            {%endblock main%}
            <hr/>
            % block main2%}
            {%endblock main2%}
        </div>
        <div id="footer">footer</div>
    </hody>
    </html>

    主页模板

    #templates/firstapp/main.html,继承base.html,只需要填充{% block main%}  {%endblock main%},中间部分,
    #{% block main2 %}   {% endblock main2%}
    
    {%extends 'firstapp/base.html'%}
    
    {% block main %}
        <h1>sunck is good main</h1>
    {% endblock main%}
    
    {% block main2 %}
        <h1> good man</h1>
    {% endblock main2%}

    http://localhost:8000/firstapp/main/
    在这里插入图片描述

    四、HTML转义

    1、问题

    #firstapp/views.py
    def index(request):
        return render(request,'firstapp/index.html',{"num":10,"code":"<h1>sunck is a very good man</h1>"})
    #在templates/firstapp/index.html里面添加下面代码
    {{code}}

    将接受到的code当成普通字符串渲染
    在这里插入图片描述
    将接受到的字符串当成HTML渲染,解决一个

    #在templates/firstapp/index.html里面添加下面代码
    {{code}}#转成字符串
    {{code|escape}}#----->转成字符串
    {{code|safe}}#字符串当成HTML渲染

    localhost:8000/firstapp/index/
    在这里插入图片描述

    将接受到的字符串当成HTML渲染,解决一堆

    #在templates/firstapp/index.html里面添加下面代码
    {% autoescape off %}#off 关闭自动转义,当HTML渲染
    {{code}}
    {% endautoescape %}
    {% autoescape on %}#on 打开自动转义,还是字符串
    {{code}}
    {% endautoescape %}

    在这里插入图片描述

    五、CSRF

    • 跨站请求伪造: 某些恶意网站包含链接,表单,按钮,JS,利用登录的用户在浏览器中认证,从而攻击服务
    • 防止CSRF:在setting.py文件中的MIDDLEWARE,#'django.middleware.csrf.CsrfViewMiddleware',
    • {% csrf_token %},加一个验证

    六、验证码

    1、作用:

    • 在用户注册,登录页面的时候使用,为了防止暴力请求,减轻服务器的压力
    • 也是防止csrf一种方式

    2、

  • 相关阅读:
    二叉树的存储结构
    面试Java需要的知识总结
    EJB总结
    WEB 容器、WEB服务和应用服务器的区别与联系
    Linux安装JBOSS
    JBOSS和WebLogic区别
    深入浅出JMS(一)--JMS基本概念
    Java缓冲流细节
    xor和路径(codevs 2412)
    外星千足虫(bzoj 1923)
  • 原文地址:https://www.cnblogs.com/llb123/p/13398713.html
Copyright © 2011-2022 走看看