Django基础之模板

一.前言

前面我们讲了视图,我们今天来讲一下模板,模板其实也就是视图中render返回的html进行的渲染,然后展示到浏览器页面上去,那我们今天就来和大家来说一下模板的基本用法

二.寻找html模板

这个也就是我们前面说了的找html,前面已经说过了,我这里再说一遍

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(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',
            ],
        },
    },
]

优先去项目根目录 > 每个已注册的app的templates目录找。

如何选择:

  • 简单的项目,模板都放在根目录。

  • 复杂的项目,模板放在各自的app中,公共部分放在templates目录。  

三.模板处理的本质 

要学习模板我们就得先知道模板处理的本质和模板的基本用法

本质就是渲染完成后,生成字符串展示在页面上

基本用法就是在视图里面返回一个字典,html里面用{{}}引入想要的名字再进行替换,但是这里有一个要注意的是,他替换是对文本进行完整替换(并不会带上引号),这里举个例子大家就知道了

当我们想弹出名字的时候,这时候我们打开浏览器发现没有弹出,我们点开检查

发现他说往日情怀酿作酒没有定义,我们再看看这个html怎么个回事

发现他并没有把引号加上去,他这个是对内容进行完整替换,而不会加上引号,如果我们要带上引号

这样我们进去就有弹框拉

但是当我们导入一个js的时候

我们发现,js里的内容并没有被渲染,这是因为浏览器加载后先渲染html的内容,再来加载js,此时并不能起到渲染作用,所以引入js中需要注意,如果我们非得在js中使用返回的内容,可以通过在html的script标签定义window全局变量,在js中使用全局变量,或者在js中使用ajax请求来获取数据,这里就不和大家具体说了

四.常用语法

 这里就给出代码和注释,方便大家使用

from django.shortcuts import render
from django.shortcuts import render, HttpResponse,redirect
from django.urls import reverse
from django.http import JsonResponse
from django.views import Viewclass Person(object):def __init__(self,name,age):self.name=nameself.age=agedef getdata(self):return '我是一个人类'def getname():return '往日情怀酿作酒'def show(request):return render(request,'web/login.html',{'n1':'往日情怀酿作酒','n2':['请关注','感谢','收藏'],'n3':{'name':'往日情怀酿作酒','age':'20','hobby':'play coomputer'},'n4':[{'id':1,'name':'Mr.3','age':18},{'id':2,'name':'Mr.2','age':18},{'id':3,'name':'Mr.2','age':18}],'n5':Person('Mr.7',28),'n6':getname})
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body>{#n1直接写#}
<h1>{{ n1 }}</h1>
<hr>{#n2是一个数组可以通过for循环遍历每一个值 取出来要加上.#}
<h1>{{ n2.1 }}</h1>
<ul>{% for i in n2 %}<li>{{ i }}</li>{% endfor %}
</ul>
<hr>{#n3是一个字典,如果不加上item,那么就只能去到键,取值也要用.#}
<ul>{% for k,v in n3.items %}<li>{{ k }}={{ v }}</li>{% endfor %}
</ul>
<hr>{#n4是一个列表嵌套着字典,这种可以制作一个表格#}
<table border="1">{% for i in n4 %}<tr><td>{{ i.id }}</td><td>{{ i.name }}</td><td>{{ i.age }}</td></tr>{% endfor %}
</table>
<hr>{#n5是一个类,也可以直接.他的属性和方法,并且函数不要加上括号#}
<h1>{{ n5.name }}</h1>
<h1>{{ n5.age }}</h1>
<h1>{{ n5.getdata }}</h1>
<hr>{#n6是一个函数,也可以直接执行,但是默认是不让传递参数#}
<h1>{{ n6 }}</h1>
<hr></body>
</html>

 效果如上图,我们需要主义的点:

1.引用django字典返回的值需要再外面加上{{}}

2.字典和列表都是通过.来取值而不是通过[]

3.函数默认就是给执行了,我们在html里面不需要再加上括号,并且默认是不支持传递参数的

五.内置函数 

常用的就这些,这些是django中自带的函数,默认都是不支持传递参数的,用的都很少,一会才是和大家说如何自定义函数并且支持传递参数

六.自定义模板函数

首先要确保我们的app是已经注册的,前面我们也已经注册了,接下来就是要创建一个目录名叫templatetags(名字一定要叫这个)

 

然后再创建再里面创建一个py文件,作为以后要导入的名字,py文件里面先要加上固定代码

from django import template
register=template.Library()

 

这样我们就能够定义我们想要的函数了

6.1 filer

filter允许的参数是1-2个

 

可以发现我们把|前面的当成是第一个参数,函数名字后面:是第二个参数

 6.2 simple_tag

simple_tag支持任意个参数

他的调用方式和filter不一样,他是{%%}和前面的load一样,他先写函数名,后面用空格间隔第一个参数,第二个参数等等

6.3 inclusion_tag  

参数无限制,返回的是一个html片段

 

这个也是{%%}来调用

七.母版和继承 

当我们写html的时候,发现有许多重复的地方,我们就可以把重复的地方写成母板,有需要的地方去继承就行了

 

我们用 block来隔离独立的内容,继承用extends关键字

 

通常我们都会继承一下js和css

八.模板的导入 

 

通过include直接进行导入

九.总结

这里也都是讲了知识点,大家所见即所得,记得点赞关注收藏,不记得了记得来看吖

十.补充 

下一期将和大家讲解一下中间件,期待大家的点赞关注加收藏 

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

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

相关文章

基于回溯法解决八皇后问题+以位运算方法优化n皇后问题(算法与数据结构期末设计)

文章目录 基于回溯法解决八皇后问题以位运算方法优化n皇后问题1. 八皇后问题问题描述2.回溯法求八皇后&#xff08;n皇后&#xff09;问题①由四皇后问题引入②皇后的占位问题③皇后的放置过程④放置过程中的问题⑤回溯算法核心⑥回溯算法的求解过程⑦验证算法和代码实现LeetCo…

Linux - MySQL迁移至一主一从

Linux - MySQL迁移至一主一从 迁移准备安装MySQL ibd文件迁移原服务器操作目标服务器操作 一主一从增量同步异常解决结尾 首先部分单独安装MySQL&#xff0c;请参考Linux - MySQL安装&#xff0c;迁移数据量比较大约400G左右且网络不通故使用文件迁移&#xff0c;需开启一段时间…

PaddleOCR模型ch_PP-OCRv3文本检测模型研究(一)骨干网络

从源码上看&#xff0c;PaddleOCR一共支持四个版本&#xff0c;分别是PP-OCR、PP-OCRv2、PP-OCRv3、PP-OCRv4。本文选择PaddleOCR的v3版本的骨干网络作为研究对象&#xff0c;力图探究网络模型的内部结构。 文章目录 研究起点卷归层压发层残差层骨干网代码实验小结 研究起点 参…

数据结构——栈的模拟实现

大家好&#xff0c;今天我要介绍一下数据结构中的一个经典结构——栈。 一&#xff1a;栈的介绍 与顺序表和单链表不同的是&#xff1a; 顺序表和单链表都可以在头部和尾部插入和删除数据&#xff0c;但是栈的结构就锁死了&#xff08;栈的底部是堵死的&#xff09;栈只能从…

Ubuntu 安装 Samba Server

在 Mac 上如何能够与Ubuntu 服务器共享文件夹&#xff0c;需要在 Ubuntu 上安装 Samba 文件服务器。本文将介绍如何在 Ubuntu 上安装 Samba 服务器从而达到以下目的&#xff1a; Mac 与 Ubuntu 共享文件通过用户名密码访问 安装 Samba 服务 sudo apt install samba修改配置文…

Alan Chhabra:MongoDB AI应用程序计划(MAAP) 为客户提供价值

MongoDB全球合作伙伴执行副总裁 Alan Chhabra 每当有人向我问询MongoDB&#xff0c;我都会说他们很可能在不觉之间已经与MongoDB有过交集。事实上&#xff0c;包括70%财富百强在内的许多世界领先企业公司都在使用MongoDB。我们在MongoDB所做的一切都是为了服务客户&#xff0c…

计算机组成原理与系统结构——微程序控制

笔记内容及图片整理自XJTUSE “计算机组成原理与系统结构” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 基本概念 微指令 将控制单元实现为基本逻辑单元之间的互连并非易事&#xff0c;且设计相对呆板&#xff0c;难以灵活地改变&#xff0c;因此实现微程序控制…

CUDA算子手撕与面试指南

引言 最近秋招落幕&#xff0c;期间一直在找高性能计算&#xff08;HPC&#xff09;相关岗位&#xff0c;整理了一些CUDA算子手撕的代码和知识点分享给大家。 项目地址&#xff1a;https://github.com/Tongkaio/CUDA_Kernel_Samples 如果觉得本项目对你有帮助&#xff0c;欢…

IIS部署程序https是访问出现403或ERR_HTTP2_PROTOCOL_ERROR

一、说明 在windows server 2016中的IIS程序池里部署一套系统&#xff0c;通过https访问站点&#xff0c;同时考虑到安全问题以及防攻击等行为&#xff0c;就用上了WAF云盾功能&#xff0c;能有效的抵挡部分攻击&#xff0c;加强网站的安全性和健壮性。 应用系统一直能够正常…

【EthIf-05】 Ethernet Interface main function

Ethernet Interface main function函数有以下功能和要点&#xff1a; 要实现支持轮询模式下帧传输确认和帧接收的以太网接口轮询机制&#xff1a;实现轮询功能&#xff0c;定期检查传入的帧。帧传输确认&#xff1a;包括确认帧已成功传输的机制。可配置轮询周期&#xff1a;允…

康耐视智能相机(Insight)通过ModbusTCP发送字符串到倍福(BECKHOFF)PLC中

文章目录 1.背景2.分析3.实现3.1.PLC的ModbusTCP_Server3.1.1.安装TF6250-Modbus-TCP3.1.2.PLC设置 3.2.智能相机的ModbusTCP_Client3.2.1.了解ModbusTCP的协议3.2.2.根据协议写代码3.2.2.1.纯函数代码3.2.2.2.脚本代码 3.2.3.非脚本处理时的代码逻辑图3.2.4.关于代码的问题及解…

ruoyi Cannot find module ‘@/views/system/user/index‘

Cannot find module /views/system/user/index 删除node_module 后打包成功

如何将你的 Ruby 应用程序从 OpenSearch 迁移到 Elasticsearch

作者&#xff1a;来自 Elastic Fernando Briano 将 Ruby 代码库从 OpenSearch 客户端迁移到 Elasticsearch 客户端的指南。 OpenSearch Ruby 客户端是从 7.x 版 Elasticsearch Ruby 客户端分叉而来的&#xff0c;因此代码库相对相似。这意味着当将 Ruby 代码库从 OpenSearch 迁…

spring cloud contract http实例

微服务很多时&#xff0c;服务之前相互调用&#xff0c;接口参数的一致性要变得很难维护。 spring cloud contract 提供了测试接口一致性的方法。 一 项目配置 plugins {id "groovy"id "org.springframework.cloud.contract" version "4.0.5"i…

帆软的无数据展示方案

文章目录 需求描述第一步、设置控件第二步、设置数据集优化改进 在日常工作中&#xff0c;使用到帆软报表工具&#xff0c;以下记录日常使用的过程&#xff0c; 需求描述 用帆软报表展示销量的信息&#xff0c;选择不同的订单状态&#xff0c;展示其订单数和总金额。 第一步、…

【操作系统】实验九:设备驱动程序

实验9 设备驱动程序 在钻研Linux内核的人当中&#xff0c;大多数人都是在写设备驱动程序。尽管由于设备的特殊性&#xff0c;使得每个驱动程序都不一样。但是编写设备驱动程序的许多原则和基本技巧都是一样的&#xff0c;甚至Windows下的设备驱动程序从原理上讲也与之相通。在…

文件上传—阿里云OSS对象存储

目录 一、OSS简介 二、OSS基本使用 1. 注册账号 2. 基本配置 (1) 开通OSS (2) 创建存储空间 (3) 修改权限 (4) 配置完成&#xff0c;上传一张图片&#xff0c;检验是否成功。 (5) 创建AccessKey 三、Java项目集成OSS 1. 导入依赖 2. Result.java代码&#xff1a; …

极米投影仪-看电视

文章目录 前言操作步骤1.进入GitHub下载软件2.修改后缀3.粘贴到U盘 前言 使用网络提供的电视接口免费看电视。 操作步骤 1.进入GitHub下载软件 地址&#xff1a;https://github.com/andandroidor/ourtv 也可以直接下载我已保存的apk&#xff0c;地址&#xff1a;https://d…

重生之我在异世界学编程之C语言:深入文件操作篇(下)

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 函数递归与迭代 引言正文一、文件的基本操作&#…

Rust HTTP请求库

GITHUB 地址 LTPP-GIT 地址 接口文档 说明 http-request 是一个轻量级、高效的库&#xff0c;用于在 Rust 应用程序中构建、发送和处理 HTTP/HTTPS 请求。它提供了一个简单直观的 API&#xff0c;使开发人员可以轻松地与使用 “HTTP” 或 “HTTPS” 协议的 Web 服务进行交互…