Django(2)|templates模板+静态资源目录static

一、templates模板

1.模板标签系统介绍

在做web开发,要给用户提供一个页面,页面包括静态页面+数据,两者结合起来就是完整的可视化的页面,django的模板系统支持这种功能,首先需要写一个静态页面,然后通过python的模板语法将数据渲染上去。

1.创建一个templates目录
在这里插入图片描述

2.配置
在这里插入图片描述

2.调用模板的三种方法

views页面

# ---------------------------------调用templates的方法一-----------------
from django.shortcuts import render
from django.http import HttpResponse

def indextmp(request):
    # render的三个参数(请求,页面,字典参数),字典参数对应页面的用{{key}}
    return render(request, 'indextmp.html', {'content': '哈哈哈哈哈'})


# ---------------------------------调用templates的方法二-----------------
from django.shortcuts import render_to_response

def a(request):
    # render_to_response两个参数(页面,字典参数),字典参数对应页面的用{{key}}
    return render_to_response('indextmp.html', {'content': '哈哈哈哈哈'})


# ---------------------------------调用templates的方法三-----------------
from django.template.loader import get_template

def b(request):
    template = get_template('indextmp.html')
    con = {'content': '哈哈哈哈哈'}
    hh = template.render(con)
    return HttpResponse(hh)

urls.py

path('indextmp/',views.indextmp),
path('a/',views.a),
path('b/',views.b),

templates模板里,创建一个indextmp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>
    <h1>11111111111111111111111111111</h1>
    <h2>{{content}}</h2>
</body>
</html>

在这里插入图片描述

3.模板语法

遵循python语法,但是需要有开始和终结符号

①取列表和字典的值

  • 取列表值在python中为list[索引值],在html中为list.索引值
  • 取字典值在python中为d[key值],在html中为d.key值

views.py

# locals()会将局部变量都转换为字典,不需要自己转换为字典
def d(request):
    name = '张三'
    age = 12
    hobby = ['唱', '跳', 'rap']
    course = {'yw': 55, 'sx': 66, 'yy': 100}
    return render(request, 'test1.html', locals())  

test1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
	姓名:{{ name }}<br>
	年龄:{{ age }}<br>
	爱好:{{ hobby.0 }}<br>
	成绩:{{ course.sx }}
</body>
</html>

运行结果
在这里插入图片描述

②条件语句if和循环语句for

views.py

# 模板语法的if使用
def e(request):
    name = '张三'
    age = 33
    hobby = ['唱', '跳', 'rap']
    course = {'yw': 55, 'sx': 66, 'yy': 100}
    return render(request, 'test1.html', locals())

#—————————————————————————————————————————————
# 模板语法的for使用
def g(request):
    return render(request, 'test1.html', {'name': '张三', 'age': 12, 'hobby': ['唱', '跳', 'rap'],
                                          'course': {'yw': 55, 'sx': 66}, 'yy': 100})
#—————————————————————————————————————————————
# 模板语法的for使用,forloop负责计数次数
def h(request):
    return render(request, 'test1.html', {'name': '张三', 'age': 12, 'hobby': ['唱', '跳', 'rap'],
                                          'course': {'yw': 55, 'sx': 66}, 'yy': 100})

test1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
{% if age > 15 and age < 30 %}
    <p>我是青年</p>
{% elif age >= 30 %}
    <p>我是老年</p>
{% endif %}

{% for x in hobby reversed %}
    <p>{{ x }}</p>
{% endfor %}

{% for x in hobby reversed %}
    <p>{{forloop.counter}}.{{ x }}</p>
{% endfor %}

#----------------------------------倒序且计数
{% for x in hobby reversed %}
    {% if forloop.first %}
    <p style="color: red">{{forloop.counter}}.{{ x }}</p>
        {% elif forloop.last %}
        <p style="color: blue">{{forloop.counter}}.{{ x }}</p>
        {% else %}
        <p>{{forloop.counter}}.{{ x }}</p>
    {% endif %}
{% endfor %}

</body>
</html>

在这里插入图片描述

③过滤器

  • 基本格式:{{ 变量名 | 过滤器:可选参数 }}

  • 举例:

    功能举例意义
    小写```{{ namelower }}```
    大写```{{ nameupper }}```
    传递后大写```{{ my_listfirst
    截取词```{{ biotruncatewords:“30” }}```
    默认值```{{ namedefault:“默认值” }}```
    求长度```{{ namelength}}```
    根据字符截取长度```{{ strtruncatechars:2}}```
    安全转义```{{ views_strsafe }}```

二、静态资源目录static

1.静态目录的作用

在web开发过程当中,有一类型的文件专门存放静态资源(例如css,js,image)的静态文件。这些文件通常不被直接访问,往往是在加载页面的时候被加载,这些内容是固定的。我们一般在固定文件夹中存放这些静态资源,一般是static目录

2.静态文件的配置

①创建static目录
在这里插入图片描述

②在static目录下创建三个目录存放资源

在这里插入图片描述

③setting配置
在这里插入图片描述

3.使用静态资源文件

这里简单使用一下
在这里插入图片描述

views.py

def statictest(request):
    phb = [
        {'name': '吕布', 'img': 'lvbu.png'},
        {'name': '赵云', 'img': 'zy.png'},
        {'name': '关羽', 'img': 'gy.png'},
    ]
    return render(request, 'statictest.html', locals())

urls.py

path('statictest/',views.statictest),

statictest.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试静态文件</title>
    <link rel="stylesheet" href="../static/css/statictest.css">
</head>
<body>
{% for one in phb %}
    <img src="../static/images/{{ one.img }}">
    <h1>
        姓名:{{ one.name }}
    </h1>
    <hr>
{% endfor %}
</body>
</html>

statictest.css

img{
    width: 160px;
    height: 160px;
}
h1{
    display: inline-block;
}

结果:
在这里插入图片描述

4.静态文件的两种调用方式

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张烫麻辣亮。

谢谢老板,祝你生8个儿子!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值