python -- web开发与Django模板系统

模板

模板介绍

web开发: 给用户提供一个可视化的页面:包含两部分:

  • 静态页面, css html,js,img
  • 动态数据:需要使用模板语法将数据渲染

django的模板系统完全能够完成上面两个部分的内容

调用一个html页面

def tpltest(request):
    html = """
    <html>
    <head></head>
    <body>
    <h1>这个是tpltest页面</h1>
    <img src ="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572840692157&di=e24697b23c4e67b5ed95845b0a6989fa&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F20167_1_23%2Fa2jx1g6563802381352.jpg">
    <a href = "https://www.baidu.com">百度</a>
    </body>
    </html>
    """
    return HttpResponse(html)

动态数据渲染过程

from django.template import Template,Context
def tpltest(request):
    html = """
    <html>
    <head></head>
    <body>
    <h1>这个是tpltest页面</h1>
    <h2>姓名:{{ name }}</h2>
    <img src ="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572840692157&di=e24697b23c4e67b5ed95845b0a6989fa&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F20167_1_23%2Fa2jx1g6563802381352.jpg">
    <a href = "https://www.baidu.com">百度</a>
    </body>
    </html>
    """
    ## 数据的渲染
    name = "laoli"
    ## 1. 实例化一个template对象
    template_obj = Template(html)
    ##
    params = dict(name=name)
    ## 2. 实例化一个 context实力对象
    context_obj = Context(params)
    ##3. 进行数据渲染
    result = template_obj.render(context_obj)
    ##4. 返回结果
    return HttpResponse(result)

以上的方法能够实现动态数据+静态页面,但是代码依然是嵌入到python中,这种方法不使用

第二种模板

将模板单独放在一个文件中,视图进行提供数据,然后进行渲染

在项目的工程目录新建templates目录

settings.py 中配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

### 模板的配置
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates', ## django模板引擎   jinja2
        'DIRS': [os.path.join(BASE_DIR,'templates')],  ## 配置模板目录路径
        'APP_DIRS': True,    ### True 会自动寻找app下面的模板目录,同时 DIRS 可以为空
        'OPTIONS': {     # 针对后端的一些配置
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

调用第一个页面

第一种方法:

返回静态页面
from django.shortcuts import render
def myindex(request):
    return render(request,"index.html")

返回静态页面+ 数据
from django.shortcuts import render,render_to_response
def myindex(request):

    return render(request,"index.html",{"name":"laowang"})

第二种方法

返回静态页面
from django.shortcuts import render,render_to_response
def myindex2(request):
    return render_to_response("index.html")
 
返回静态页面+ 数据 
def myindex2(request):
    return render_to_response("index.html",{"name":"index2"})    

第三种方式

from django.template.loader import get_template

def myindex3(request):

    name = "lisi"
    template = get_template("index.html")
    result = template.render({"name":name})

    return HttpResponse(result)

回顾:

  1. 在项目的根目录创建一个templates模板目录
  2. 在settings中添加模板路径的配置
  3. templates中编写html内容
  4. 视图中使用render 或者 render_to_response 返回页面
    1. render(request,“返回的html页面”,{数据})
    2. render_to_response(“返回的页面”,{数据})

在模板中如果想要使用后端传入的数据,就要使用模板语法

变量的使用

django中使用变量的语法是 {{ name }}

python中数据类型: 整形 string list tuple dict set

def tmptest(request):

    # return render(request,"tmptest.html",{"name":"laowang","age":19})
    # params = dict(name="lisi",age=19)
    # return render(request,"tmptest.html",params)

    name = "hello"
    age = 10
    # params = {"name":name,"age":age}
    return render(request,"tmptest.html",locals())

locals() 属于python的方法,作用,将局部变量作为字典返回

<body>
{{ name }} <br>
{{ age }} <br>
{{ hobby }} <br>
{{ score }} <br>

<h2>列表</h2>
<p>
    {{ hobby.0 }}
    {{ hobby.3 }}
    {#    {{ hobby[1] }}#}
</p>

<h2>字典</h2>
<p>
    {{ score }}
    {#    {{ score["shuxue"] }}#}
    {{ score.shuxue }}
    {{ score.yuwen }}

</p>

变量的使用: python字典,列表,字符串,数字都可以 ,语法 {{ key }}

取列表或者字典中的内容 使用 .

控制语句

if 判断语句

django模板语法中,使用if判断,语法结构:

{% if 条件 %}
   条件成立执行
{% elif 条件%}
	条件成立执行
{% else %}
	条件不成立的执行
{% endif %}
<h2>if 判断</h2>
{% if age < 18 %}
    未成年
{% elif age > 18 %}
    成年
{% else %}
    在成年的路上
{% endif %}

ifequal 判断两个值是否相等

{% ifequal age 18 %}
    成年的路上
{% endifequal %}
{% ifequal age 19 %}
    我是19岁
{% endifequal %}
{% ifequal age 17 %}
    我是17岁
{% endifequal %}

for 循环语句

django 模板中的for循环,语法结构:

{% for one in xxxx%}
	
{% endfor %}
  • 循环列表

    • <h2>循环列表</h2>
      {% for one in hobby %}
          循环列表 {{ one }}
      {% endfor %}
      
      逆序
      {% for one in hobby reversed %}
          循环列表 {{ one }}
      {% endfor %}
      
      
  • 循环字典

    • <h2>循环字典</h2>
      {% for key,value in score.items %}
          {{ key }}:{{ value }} <br>
      {% endfor %}
      
      

if 和for 一起使用

{% for one in hobby %}
    {% if one == "football" %}
        足球
    {% else %}
        {{ one }}
    {% endif %}
{% endfor %}

forloop

forloop是django模板自带的方法,作用是 记录循环的次数

{% for one in hobby %}
    {{ forloop.counter }}:{{ one }}
    {% if forloop.first %}
        <li style="color: red">{{ one }}</li>
    {% elif forloop.last %}
        <li style="color: blue">{{ one }}</li>
    {% else %}
        <li style="color:green;">{{ one }}</li>
    {% endif %}
{% endfor %}

过滤器

对后端传入的数据进行二次处理

语法结构: {{ 变量 | 过滤器的名字: 参数 }}

提供的过滤器单一,可以自定义过滤器去实现个性化的功能

add    给变量增加值    {{ age | add:12}}
capfirst   首字母大写  {{ name | capfirst }}
lower    小写         {{ name | lower }}
upper   大写          {{ name | upper }}
default  默认值       {{ name1 | default:"xxxx" }}
date    对时间进行处理  {{ now_time | date:"Y-m-d H:i:s" }}
cut      移除指定字符   {{ name | cut:"l" }}

safe django模板会将后台传入的js或者是html代码,认为是不安全的,然后进行了转义,被safe修饰的内容,执行原有的意思
在这里插入图片描述

静态文件

web开发中,有一个类型的文件叫作 静态文件: css,js,img。静态文件往往不会被直接引用,通过加载页面的时候加载,这部分内容往往是固定的,大部分服务器会将静态文件做单独处理

使用静态文件

  1. 在项目的工程目录中创建一个static目录,放静态文件

  2. 在settings中进行配置

    ## 静态文件的配置
    STATIC_URL = '/static/'    ## 静态文件的路由
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR,"static"),  ### 静态文件的路径 地址
    )/static/ 代理下面的静态文件的地址
    
  3. 前端使用静态文件:

    • 第一种

在这里插入图片描述

  • 第二种:
  • 在这里插入图片描述

模板继承

创建工程

激活虚拟环境
	activate DjangoPath
创建工程
	django-admin startproject ArticleBlog

加载静态文件

创建templates和static目录

修改settings文件

复制静态文件和html文件到项目中
在这里插入图片描述

修改静态文件的路径
在这里插入图片描述

超链接的跳转路径的配置

  • 第一种方法

在这里插入图片描述

  • 第二种方法
    在这里插入图片描述

模板继承

在实际的开发中,使用前段写好的页面,有很多重复的代码,为了能够简单操作和便于管理,复用代码,因此可以使用模板继承,

​ 将公共的代码提取出来,作为的父类

  1. 首先应该创建父类模板
  2. 父类模板中放入公共的部分
  3. 子类模板继承父类模板
  4. 子类模板中使用父类的公共的部分,以及放各个子类模板独有的部分
创建父类模板 base.html

调用base.html文件

在这里插入图片描述

将index.html 代码放入base.html中,将不是公共的部分删掉

删掉之后,增加块,进行站位标识
在这里插入图片描述

base.html 常用的块

  1. title

  2. head
    在这里插入图片描述

  3. script

在这里插入图片描述

  1. 文章块

在这里插入图片描述

子模板继承

  1. 继承父类模板 base.html

  2. 将公共部分删除

  3. 将独有的部分 写入到指定的块中

    在这里插入图片描述

%} {% endifequal % }

  • {% for %}
    • 遍历字典
    • 遍历列表
  • 过滤器
    • add {{ age | add:12 }}
    • upper
    • lower
    • default
    • date
    • safe
    • default
    • cut

静态文件

  • 创建static目录 放静态文件 js images css
  • settings中增加配置
    • STATICFILES_DIRS = (os.path.join(BASR_DIR,“static”),)

模板继承

父类模板:

​ 保留下公共的部分,

​ 删除不是公共的部分,补充块

​ {% block 名字 %} {% endblock %}

子类模板:

​ 继承父类模板

​ {% extends 父类模板%}

​ 打开相对应的块

​ {% block 名字%} {%endblock%}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值