Web 开发 Django 模板

上次为大家介绍了 Django 的模型和自带的管理工具,有了这个工具就可以全自动地根据模型创建后台管理界面,以供网站管理者更方便的管理网站数据。有了网站数据,那怎么样更方便又好看的展示给用户看呢?目前流行的 Web 框架基本都采用 MVC 的架构,而 Django 在这个架构基础上做了一点改变,即 MTV 框架,这里的 T 就是今天我们要讲的 Django 的模板系统( Template )。

认识模板

首先模板是一个文本文件,它定义了占位符以及各种用于规范文档该如何显示的各部分基本逻辑,主要用于动态生成 HTML ,即模板包含所需 HTML 输出的静态部分以及描述动态内容将被插入的一些特殊语法。Django 默认内置了一个模板系统 DTL( Django template language ),在一般项目开发中已足够使用,当然你也可以选择其他第三方模板,一般 Django 项目可以配置一个或多个模板引擎。

使用模板

Django 模板系统其实是 Python 的一个库,只要在代码中引用它,就可以创建并使用模板,但通常情况我们都是把模板和视图结合一起使用的。使用模板一般分两步:

  1. 创建一个模板文本,或者直接通过文本路径来创建 Template 对象,当然也可以直接在代码中通过字符串创建对象。

  2. 调用 Template 对象的 render() 方法,并传入相应 <K,V> 变量对象,这样我们在模板中配置的变量就会替换为相应的值。

现在我们继续在之前 TestProject 项目下的 polls 应用里面修改代码,进入到 polls 目录下,编辑 views.py 文件如下:

# views.pyfrom django.http import HttpResponsefrom polls.models import Choice, Questionfrom django.utils import timezone# 导入模板相关库from django.template import Template, Context
# 修改之前 index 页面为模板渲染def index(request):    # 定义模板    t = Template('你好<span style="color:#FF0000">{{ name }}</span>, 这是一个投票页面。')    # 定义传入对象    c = Context({'name': '张三'})    # 返回渲染模板    return HttpResponse(t.render(c))
# …… 忽略部分代码

修改完成并保存,先通过命令 python manage.py runserver 127.0.0.1:8080 启动本地 server,然后通过访问 URL http://127.0.0.1:8080/polls 就能看到我们刚修改完的页面,展示如下图所示:

图片

模板语法规则

上面我们完成了使用模板来输出数据,从而实现了数据与视图的分离。下面我们再来详细介绍下在模板中常用的语法规则:

  1. 条件判断语法 基本语法:

     {% if 条件 %} #   满足条件展示内容 {% endif %} # 或者 {% if 条件1 %} #   满足条件1展示 {% elif 条件2 %} #   满足条件2展示 {% else %} #   不满足条件1条件2的展示 {% endif %}

    另外,条件判断还支持 and , or 或者 not 关键字来对多个变量进行判断,模板代码如下:

     {% if 变量1 and 变量2 %} #   当变量1或者变量2为 true ,那就展示此处模板内容 {% endif %}

    现在我们继续在 TestProject 项目下的 polls 应用里面修改代码,进入到 polls 目录下,编辑 views.py 文件如下:

    # views.pyfrom django.http import HttpResponsefrom polls.models import Choice, Questionfrom django.utils import timezone# 导入模板相关库from django.template import Template, Context# 修改之前 index 页面为模板渲染def index(request):    # 定义模板    t = Template('{%if name %}你好<span style="color:#FF0000">{{ name }}</span>,{% else %} 你好游客, {% endif %} 这是一个投票页面。')    # 定义传入对象    c = Context({'name': '张三'})    # 返回渲染模板    return HttpResponse(t.render(c))
    # …… 忽略部分代码

    刷新页面,发现跟之前页面没有区别,因为我们这里 Context 里传入了 name 变量,如果不传 name 变量,得到的结果如下图:

    图片

  2. ​​​​​​​
  3. ​​​​​​​
  4. ​​​​​​​
  5. 循环迭代语法 和大多数语言相同,循环是通过 for 语法实现,每一次循环中,模板系统会渲染在 {% for %} 和 {% endfor %} 之间的所有内容。

     {% for book in book_list %}     <li>{{ book.name }}</li> {% endfor %}
     # 或者 可以增加 reversed 标签反向迭代 book_list
     {% for book in book_list reversed %}     <li>{{ book.name }}</li> {% endfor %}

    我们继续在 TestProject 项目下的 polls 应用里面修改代码,编辑 views.py 文件如下:

    # views.pyfrom django.http import HttpResponsefrom polls.models import Choice, Questionfrom django.utils import timezone# 导入模板相关库from django.template import Template, Context
    # 修改之前 index 页面为模板渲染def index(request):    # 定义模板    t = Template(' 以下{% for name in name_list %} <li>{{ name }}</li>  {% endfor %}  请选择?')    # 定义传入对象    c = Context({'name_list': ('张一','张二','张三')})    # 返回渲染模板    return HttpResponse(t.render(c))# …… 忽略部分代码

    刷新页面,这里在 Context 里传入了 name_list 列表变量,使用循环迭代语法,得到的结果如下图:

    图片

  6. ​​​​​​​
  7. ​​​​​​​
  8. 特殊比较语法

     # ifequal/ifnotequal 语法用于更直接的比较两个变量是否相等 {% ifequal user 'admin' %}     <h1>这是一个管理员页面!</h1> {% endifequal %} # 或者 {% ifnotequal user 'admin' %}     <h1>这是是一个游客页面!</h1> {% endifnotequal %} # 和条件判断语法类似, {% ifequal %} 支持可选的 {% else%} 标签 {% ifequal user 'admin' %}     <h1>这是一个管理员页面!</h1> {% else %}     <h1>这是是一个游客页面!</h1> {% endifequal %}

    我们继续在 TestProject 项目下的 polls 应用里面修改代码,编辑 views.py 文件如下:

    # views.pyfrom django.http import HttpResponsefrom polls.models import Choice, Questionfrom django.utils import timezone# 导入模板相关库from django.template import Template, Context# 修改之前 index 页面为模板渲染def index(request):    # 定义模板    t = Template('{% ifequal type 1 %}你好<span style="color:#FF0000"> 管理员</span>,这是个管理页面。{% else %} 你好游客, 这是一个投票页面。{% endifequal %}')    # 定义传入对象    c = Context({'type': 1})    # 返回渲染模板    return HttpResponse(t.render(c))# …… 忽略部分代码

    刷新页面,这里在 Context 里传入了 type 变量,当变量传入1时,得到管理页面,如果不是1则还是原来的页面,type 传入 1时,得到的结果如下图:

    图片

  9. ​​​​​​​
  10. ​​​​​​​
  11. 模板过滤器

    模板过滤器可以在变量被显示前修改它,过滤器使用管道字符。另外过滤管道可以被套接,即一个过滤器管道的输出又可以作为下一个管道的输入。

      # {{ book_name }} 变量被过滤器 lower 处理后,文档大写转换文本为小写。   {{ book_name|lower }}  # 将变量第一个元素转化为大写字母   {{ book_name|first|upper }}  # 将截取变量 book_name 的前10位字符  {{ book_name|truncatewords: "10" }}
    

    当然除了上面三个,还有很多其他过滤器就不再一一介绍,如果有需要可自行搜索,总之可以看出过滤器大大方便我们在模板中的灵活操作。

  12. ​​​​​​​
  13. 模板继承

    模板继承就是说可以通过这种方式实现模板的复用,既然需要复用,那我们就需要先创建一个能被复用的模板文件。首先在项目根目录下,创建 templates 目录用来存放模板文件,并在该目录下创建 common.html 文件用于复用,编写如下代码:

      <html>    <head>        <title>公共页面</title>    </head>    <body>        <h1>你好<span style="color:#FF0000">{{ name }}</span>,这是一个公共页面!</h1>        {% block mainbody %}        <p>原始页</p>        {% endblock %}    </body>  </html>

    然后再创建 index.html 模板文件,并在文件中编写代码,实现对 common.html 模板文件的利用。

        {% extends "common.html" %}    {% block mainbody %}    <p>这里继承了 common.html 模板!</p>    {% endblock %}

    最后修改项目目录下,TestProject/settings.py 配置文件,在配置文件找到 TEMPLATES 对象,并在修改其中 DIRS 的配置路径如下:

        TEMPLATES = [        {            'BACKEND': 'django.template.backends.django.DjangoTemplates',            'DIRS': [BASE_DIR,'templates',],     # 修改模板配置路径            'APP_DIRS': True,            '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',                ],            },        },    ]

    好了,现在模板配置完成,下一步要修改我们的渲染页面,再次打开 polls 应用下的 views.py, 把主页代码注释,然后重新编写主页代码如下:

        from django.shortcuts import render    from django.http import HttpResponse    from polls.models import Choice, Question    from django.utils import timezone    from django.template import Template, Context    # 注释原代码    #def index(request):    #    return HttpResponse("你好,这是一个投票页面。")    #    t = Template('你好<span style="color:#FF0000">{{ name }}</span>, 这是一个投票页面。')    #    c = Context({'name': '张三'})    #    return HttpResponse(t.render(c))    # 增加新代码    def index(request):        context = {}        context['name'] = '张三'        # 返回模板渲染后的主页界面        return render(request, 'index.html', context)​​​​​​​​​​​​​​​​​​​​​​​​​​​​

修改完成,最后通过访问 URL http://127.0.0.1:8080/polls 就能看到我们刚修改完的页面,展示如下图所示:

图片

这样就能更好的实现模板的复用了。

  1. 模板包含

    这个就是通过 {% include %} 语法标签,将一个模板引入另一个或多个模板的内容,代码如下:

      {% include "common.html" %}
    
  2. ​​​​​​​

总结

本文为大家介绍了 Django Template 模板基础,可以通过应用的模板实现数据和展示的分离,这样我们可以对前端进行更灵活的展示操作。当然只是简单介绍了下模板,它还有更复杂的使用方式,以后会为大家深入介绍。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/57334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【24种设计模式】适配器模式(Adapter Pattern)

适配器模式&#xff08;Adapter Pattern&#xff09; 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换为客户端所期望的另一个接口。适配器模式使得原本因接口不兼容而无法一起工作的类可以协同工作。 适配器模…

ssm端游游戏账号销售管理系统源码和论文

ssm端游游戏账号销售管理系统源码和论文069 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面…

基于java swing和mysql实现的仓库商品管理系统(源码+数据库+运行指导视频)

一、项目简介 本项目是一套基于java swing和mysql实现的仓库商品管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经…

嵌入式学习笔记——ARM的编程模式和7种工作模式

ARM提供的指令集 ARM态-ARM指令集&#xff08;32-bit&#xff09; Thumb态-Thumb指令集&#xff08;16-bit&#xff09; Thumb2态-Thumb2指令集&#xff08;16 & 32 bit&#xff09; Thumb指令集是对ARM指令集的一个子集重新编码得到的&#xff0c;指令长度为16位。通常在…

Jtti:如何通过宝塔面板快速安装WordPress博客源码?

通过宝塔面板快速安装WordPress博客源码是非常简单的。宝塔面板提供了图形化界面&#xff0c;使安装过程变得直观和方便。以下是通过宝塔面板安装WordPress的步骤&#xff1a; 登录宝塔面板&#xff1a; 打开您的Web浏览器&#xff0c;访问您的宝塔面板地址&#xff08;通常是 …

【Spring Boot】数据库持久层框架MyBatis — MyBatis简介

MyBatis简介 本节首先会介绍什么是ORM、什么是MyBatis、MyBatis的特点以及核心概念&#xff0c;最后介绍MyBatis是如何启动、如何加载配置文件的&#xff1f; 1.什么是ORM ORM&#xff08;Object Relational Mapping&#xff0c;对象关系映射&#xff09;是为了解决面向对象…

LoginPage.vue中的form

const form ref() const login async () > {await form.value.validate()const res await userLoginService(formModel.value)console.log(res)UserStore.setToken(res.data.token)ElMessage.success(登录成功)router.push(/) }<el-form:model"formModel":r…

高亮img、pdf重点部分(html2canvas、pdfjs-dist、react-pdf)

可用业务场景 报销单据审批中&#xff0c;高亮发票部分 需求 后台返回一张图片或者pdf、返回一组坐标&#xff0c;坐标类型[number,number,number,number]&#xff0c;分别代表了x、y、width、height。需要根据坐标在图片上高亮出来坐标位置。如下图 高亮的坐标是&#xff1…

Android 权限机制与及运行时权限申请示例

一、Android 权限机制 安装时权限声明 权限机制说明 安装软件时弹出软件所需要申请的全部权限&#xff0c;如果用户认可软件申请的权限&#xff0c;就会继续安装软件&#xff1b;如果用户不认可所申请的权限&#xff0c;就可以拒绝安装。 实现方式 在 AndroidManifest.mxl …

linux————keepalived+LVS(DR模式)

一、作用 使用keepalived解决LVS的单点故障 高可用集群 二、 调度器配置 环境 两台LVS服务 一主一备 两台web服务 采用nginx &#xff08;实现LVS负载均衡&#xff09; 服务ip 主LVS 192.168.100.3 备LVS 192.168.100.6 web1 192.…

nestjs:docker build时执行npm install sharp提示downloading libvips socket hang up

问题&#xff1a; 如题 参考&#xff1a; sharp - High performance Node.js image processing 参考chinese-mirror处理 原因&#xff1a; 默认是从github上下载libvips库&#xff0c;但是使用socket协议&#xff0c;linux下不挂载梯子是无法加速的&#xff0c;因此得更换下镜像…

创作2周年纪念日-特别篇

创作2周年纪念日-特别篇 1. 与CSDN的机缘2. 收获3. 憧憬 1. 与CSDN的机缘 很荣幸&#xff0c;在大学时候&#xff0c;能够接触到CSDN这样一个平台&#xff0c;当时对嵌入式开发、编程、计算机视觉等内容比较感兴趣。后面一个很偶然的联培实习机会&#xff0c;让我接触到了Pych…

中国平台软件市场研究报告:OceanBase为金融行业国产分布式数据库销售额第一

近日&#xff0c;《2022-2023年度中国平台软件市场研究报告》&#xff08;以下简称“报告”&#xff09;发布&#xff0c;报告对包括数据库、操作系统等在内的平台软件市场发展进行了分析。报告指出&#xff0c;在对平台软件需求增长最快的金融行业&#xff0c;OceanBase已占据…

音频母带制作::AAMS V4.0 Crack

自动音频母带制作简介。 使用 AAMS V4 让您的音乐听起来很美妙&#xff01; 作为从事音乐工作的音乐家&#xff0c;您在向公众发布材料时需要尽可能最好的声音&#xff0c;而为所有音频扬声器系统提供良好的商业声音是一项困难且耗时的任务。AI掌握的力量&#xff01; 掌控您…

关系型数据库与非关系型数据库类比

关系型数据库和非关系型数据库都有多种不同类型&#xff0c;每种类型都针对不同的数据存储需求和使用场景。以下是一些常见的关系型数据库和非关系型数据库类型&#xff1a; 关系型数据库类型&#xff1a; MySQL&#xff1a; 一种开源的关系型数据库管理系统&#xff0c;用于处…

Android studio APK切换多个摄像头(Camera2)

1.先设置camera的权限 <uses-permission android:name"android.permission.CAMERA" /> 2.布局 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"and…

Spring redis使用报错Read timed out排查解决

文章目录 使用场景报错信息解决方式 使用场景 我们使用redis作为缓存服务&#xff0c;缓存一些业务数据&#xff0c;如路口点位信息、渠化信息、设备信息等有一些需要实时计算的数据&#xff0c;缓存在redis里&#xff0c;如实时信号周期相位、周期内过车数量等有需要不同服务…

三分钟深入了解threejs的常见面试知识点

前序 由于金九银十准备到了。而且自己也有threejs的项目&#xff0c;但是threejs的面试知识点了解的比较少&#xff0c;然后就去学习了一些面试常见知识点&#xff0c;以备不时之需&#xff0c;用于记录的同时也可以通过了解这些知识点同时也能提高对threejs更多的认知。虽然没…

Druid配置类、Dubbo配置类、Captcha配置类、Redis配置类、RestTemplate配置类

DruidConfig配置类package com.xdclass.app.config;import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid.support.http.StatViewServlet; import com.alibaba.druid.support.http.WebStatFilter; import org.springframework.beans.factory.annotation.V…

Nodejs+Typescript+Eslint+Prettier+Husky项目构建

NodejsTypescriptEslintPrettierHusky项目构建 准备工作初始化项目Eslint安装和配置Prettier安装和配置在Eslint中使用Prettier插件Husky安装和配置修改tsconfig.json启用表示src目录 修改package.json设置vscode调试 仓库地址 准备工作 确保已经安装了git以及Node.js和npm&a…