小白学Python – Django Web 开发教程 三(Django 模板)

2023-10-26 14:14:56 浏览数 (2)

Django Web 开发教程 三(Django 模板)

模板是 Django MVT 结构的第三个也是最重要的部分。Django 中的模板基本上是在 .html 文件中用 HTML、CSS 和 Javascript 编写的。Django 框架有效地处理和生成最终用户可见的动态 HTML 网页。Django 主要与后端一起运行,因此,为了提供前端并为我们的网站提供布局,我们使用模板。根据我们的需要,有两种方法可以将模板添加到我们的网站。

  • 我们可以使用单个模板目录,该目录将分布在整个项目中。
  • 对于我们项目的每个应用程序,我们可以创建不同的模板目录。

对于我们当前的项目,为了简单起见,我们将创建一个模板目录,该目录将分布在整个项目中。应用程序级模板通常用于大型项目或我们想要为网页的每个组件提供不同布局的情况。

配置

Django 模板可以在 app_name/settings.py 中配置, 

代码语言:javascript复制
TEMPLATES = [
	{
		'BACKEND': 'django.template.backends.django.DjangoTemplates',
		
		# 模板目录
		'DIRS': [],
		'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',
			],
		},
	},
]

现在让我们创建一个模板目录并将该目录添加到上面的配置中。创建模板文件夹后,我们的目录应如下所示 – 

让我们在模板字典中添加该目录的位置。

代码语言:javascript复制
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',
			],
		},
	},
]

添加模板目录的位置后,我们将创建一个简单的 HTML 文件并将其命名为 index.html,然后我们将通过视图函数渲染该文件。

HTML 文件:

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Homepage</title>
</head>
<body>
	<h1>Welcome to demo007x</h1>
</body>
</html>

为了在我们的网站上渲染这个 HTML,我们需要使用 django.shortcuts 中的渲染函数。以下是更新后的视图功能。

view.py
代码语言:javascript复制
from django.shortcuts import render

# create a function
def geeks_view(request):
	
	return render(request, "index.html")

Django 模板语言

这是 Django 模板提供的最重要的功能之一。Django 模板是使用 Django 模板语言标记的文本文档或 Python 字符串。一些构造由模板引擎识别和解释。主要是变量和标签。正如我们在上面的示例中使用循环一样,我们将其用作标签。同样,我们可以使用各种其他条件,例如 if、else、if-else、empty 等。Django 模板语言的主要特征是变量、标签、过滤器和注释。 

变量

变量从上下文输出一个值,该值是一个将键映射到值的类似字典的对象。我们从视图发送的上下文对象可以使用 Django 模板的变量在模板中访问。 

语法:

{{ 变量名 }}

标签

标签在渲染过程中提供任意逻辑。例如,标签可以输出内容、用作控制结构(例如“if”语句或“for”循环)、从数据库获取内容,甚至允许访问其他模板标签。

句法
代码语言:javascript复制
{% 标签名 %}
过滤器

Django 模板引擎提供了用于转换变量和标签参数值的过滤器。我们已经讨论了主要的 Django 模板标签。标签不能修改变量的值,而过滤器可用于增加变量的值或根据自己的需要修改它。

语法:
代码语言:javascript复制
{{ 变量名 | 过滤器名称 }}

注释

模板会忽略 {% comment %} 和 {% end comment %} 之间的所有内容。可以在第一个标签中插入可选注释。例如,在注释掉代码以记录代码被禁用的原因时,这非常有用。

语法:
代码语言:javascript复制
{% comment 'comment_name' %} 
{% endcomment %}

模板继承

Django 模板引擎中最强大也是最复杂的部分是模板继承。模板继承允许您构建一个基本“骨架”模板,其中包含站点的所有常见元素并定义子模板可以覆盖的块。extends标签用于Django中模板的继承。人们需要一次又一次地重复相同的代码。使用扩展我们可以继承模板和变量。

语法:
代码语言:javascript复制
{% extends 'template_name.html' %}

示例:假设以下目录结构:

代码语言:javascript复制
dir1/ 
   template.html 
   base2.html 
   my/ 
       base3.html 
base1.html

在 template.html 中,以下路径有效: 

代码语言:javascript复制
{% extends "./base2.html" %}
{% extends "../base1.html" %}
{% extends "./my/base3.html" %}

创建 Django 表单

在 Django 中创建表单与创建模型完全相似,需要指定表单中存在哪些字段以及什么类型。例如,要输入注册表单,可能需要名字 (CharField)、卷号 (IntegerField) 等。 

要创建 Django 表单,首先在 app 文件夹中创建一个 forms.py。

代码语言:javascript复制
from django import forms

class GeeksForm(forms.Form):

	title = forms.CharField(max_length=200)
	description = forms.CharField(widget=forms.Textarea)
	image = forms.ImageField()

将此函数映射到不同的 URL 假设我们将此函数映射到 http://127.0.0.1:8000/add/。为此,请转到应用程序的 urls.py 文件和上述 URL 的另一个路径。

代码语言:javascript复制
from django.urls import path
from . import views

urlpatterns = [
	path('', views.geeks_view, name='geeks_view'),
	path('add/', views.geeks_form, name="geeks_form")
]

Django 表单字段有多种内置方法来简化开发人员的工作,但有时需要手动实现自定义用户界面 (UI)。表单带有 3 个内置方法,可用于呈现 Django 表单字段。  

  • {{ form.as_table }} 会将它们呈现为包裹在 <tr> 标签中的表格单元格
  • {{ form.as_p }} 会将它们呈现在 <p> 标签中
  • {{ form.as_ul }} 会将它们呈现在 <li> 标签中

现在让我们制作 form.html 来呈现我们的表单。

代码语言:javascript复制
<form action="" method="POST">
	{% csrf_token %}
	{{form.as_p}}
	<input type="submit" value="submit">
</form>

完成此操作后,保存所有文件并转到 http://127.0.0.1:8000/add/ 查看我们创建的表单。它应该看起来像这样—— 

我们还可以看到我们的表单已自动验证。我们不能提交空表格。

0 人点赞