Django框架（三）--模板，静态文件

最新推荐文章于 2023-06-11 01:28:44 发布

一个非常正经的人

最新推荐文章于 2023-06-11 01:28:44 发布

阅读量550

点赞数 1

分类专栏： Django框架文章标签： Django templates模板静态文件

本文链接：https://blog.csdn.net/qq_34244910/article/details/100672664

版权

Django框架专栏收录该内容

18 篇文章 8 订阅

订阅专栏

一、模板

from django.http import HttpResponse
from django.template import Template, Context
def gethtml(request):
    html='''
    <html>
    <head>
    </head>
    <body>
    <h1>一级标签</h1>
    <h2>{{ name }}</h2>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568004065249&di=ac15fb01c9ff9cf418dfe4736e807d3d&imgtype=0&src=http%3A%2F%2Fi-1.chuzhaobiao.com%2F2018%2F6%2F30%2FKDYwMHgp%2F029e8607-1c43-460e-bb42-4c367e4ac27e.jpg" alt='404'>
    <p style="font-size:28px;">{{ content }}</p>
    <a href="#">超链接</a>
    </body>
    </html>
    '''

    '''
    渲染数据步骤：
    '''
    # 1.构建模板结构
    template_obj=Template(html)
    # 2.创建渲染模板
    params=dict(name='表情包',content='段落')
    content_obj=Context(params)
    # 3.进行数据渲染
    result=template_obj.render(content_obj)
    # 4.返回结果
    return HttpResponse(result)

    # return HttpResponse(html)

这种方式虽然能够实现调用一个html页面，并且能够将数据渲染上去，但是页面依然嵌套在python代码中，编写不方便，所以不常用。

（一）模板标签系统介绍

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

创建一个templates目录
修改settings.py配置文件
添加路由，编写html文件

标记templates文件夹为模板文件夹

1.调用模板的第一种方法

在这里插入图片描述

2.调用模板的第二种方式

在这里插入图片描述

3.调用模板的第三种方式

在这里插入图片描述

（二）模板语法

在模板中，如果想要使用后端传入的数据，就要用到模板语法去实现。

Django提供的模板语法：变量的使用，控制语句，循环。

1.Django模板html文件中使用变量的语法：{{ 变量名.索引/键 }}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tpltest</title>
</head>
<body>
<h1>这是一个模板测试页面</h1>
姓名：{{ name }}
<br>
年龄：{{ age }}
<br>
爱好：{{ hobby }}
<br>
第一个爱好：{{ hobby.0 }}
<br>
第二个爱好：{{ hobby.1 }}
<br>
成绩：{{ score }}
<br>
数学成绩：{{ score.math }}
<br>
英语成绩：{{ score.English }}
<br>
</body>
</html>

也可以使用locals()方法传数据，作用是将当前视图函数的所有局部变量返回。
在这里插入图片描述
结果都相同。

2.控制语句

路由：
在这里插入图片描述
视图：

模板：

结果：

3.循环语句

1.遍历列表

并且将数据放入有序列表。

<ol>
{% for one in hobby %}    <!-- 加reversed倒序 -->
  <li>{{ one }}</li>
{% endfor %}
</ol>

2.遍历字典

{% for key,value in score.items %}
  <p>{{ key }}:{{ value }}</p>
{% endfor %}

3.forloop

forloop是一个Django自带的一个变量，作用于循环，记录循环的次数，可以对循环的内容进行控制。

{% for one in hobby reversed %}
  {% if forloop.first %}
    <p style="color:pink">{{ forloop.counter }}.{{ one }}</p>
  {% elif forloop.last %}
    <p style="color:yellowgreen">{{ forloop.counter }}.{{ one }}</p>
  {% else %}
    <p>{{ forloop.counter }}.{{ one }}</p>
  {% endif %}
{% endfor %}

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

4.过滤器语法结构：

过滤器：对视图传过来的数据，进行二次处理。

初始状态：
在这里插入图片描述

使用过滤器处理后，对数据进行了二次处理。

capfirst：首字母大写

upper：全大写

lower：全小写
在这里插入图片描述

safe：Django出于安全考虑，会将前面注入的js或者html语句进行转义，使用safe将指定的js或者html变为安全的语句，正常执行。

静态文件

前端三大部分：结构、样式、行为

在web开发的过程中，有一类文件叫做静态文件，指：css、js、image。这些文件通常不被直接访问，往往是在加载页面的时候被加载，这些内容是固定的。

静态文件的配置

1.创建目录

在这里插入图片描述

2.配置静态文件

在这里插入图片描述
由STATIC_URL对下面的静态文件的具体地址进行代理

3.静态文件的使用

在这里插入图片描述

结果

在这里插入图片描述

实例–球星排行榜

路由

在这里插入图片描述

视图

def staticdemo(request):
    # 球星排行榜
    params = [
        {"name": "麦迪", "img": "maidi.jpg",
         "url": "https://baike.baidu.com/item/%E7%89%B9%E9%9B%B7%E8%A5%BF%C2%B7%E9%BA%A6%E6%A0%BC%E9%9B%B7%E8%BF%AA/6118977?fromtitle=%E9%BA%A6%E8%BF%AA&fromid=136057&fr=aladdin"},
        {"name": "科比", "img": "kb.jpg", "url": "https://baike.sogou.com/v226587.htm?fromTitle=%E7%A7%91%E6%AF%94"},
        {"name": "姚明", "img": "ym.jpg", "url": "https://baike.sogou.com/v4957112.htm?fromTitle=%E5%A7%9A%E6%98%8E"},
        {"name": "易建联", "img": "yjl.jpg", "url": "https://baike.sogou.com/v17764.htm?fromTitle=%E6%98%93%E5%BB%BA%E8%81%94"},
    ]
    return render(request,'staticdemo.html',locals())

静态文件目录

在这里插入图片描述

模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>staticdemo</title>
  <link rel="stylesheet" href="/static/css/1.css">
</head>
<body>
<a href="/index">回到首页</a>
<ol>
  {% for one in params %}
    <li>
      <h2>{{ one.name }}</h2>
      <a href="{{ one.url }}">
        <img src="/static/images/{{ one.img }}" alt="">
      </a>
    </li>
  {% endfor %}
</ol>
</body>
</html>

结果

在这里插入图片描述

一个非常正经的人

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Django框架（三）--模板，静态文件

一、模板from django.http import HttpResponsefrom django.template import Template, Contextdef gethtml(request): html=''' <html> <head> </head> <body> <...
复制链接

扫一扫