1. Django模板引擎
Django是一个使用了MTV(Model-Template-View)设计模式的Web框架。其中模板引擎Template是我们设计用户页面的重要组成部分。
1.1 创建一个Django项目并生成一个App
使用以下命令创建一个Django项目并生成一个App:
django-admin startproject myproject
cd myproject
python manage.py startapp myapp
注意:使用以上命令前,需确认Django已安装成功。
1.2 配置template路径
在Django的settings.py文件中,将TEMPLATES中的DIRS修改如下:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'APP_DIRS': True,
'DIRS': ['templates'], # 添加这行
'OPTIONS': {
# ... some options here ...
},
},
]
注意:修改后,需要在项目根目录下创建一个名为templates的目录,所有的HTML模板文件需要放在此目录下。
2. HTML模板
HTML模板是Django Template框架的核心部分。它可以在一定程度上将我们的代码和显示逻辑分离开来,使得我们可以更好地管理和维护代码。
2.1 基本用法
Django模板语言具有以下几个常用指令:
if语句:
{% if condition %}
... display something ...
{% endif %}
for语句:
{% for element in list %}
... display something ...
{% endfor %}
模板继承:
{% extends 'base.html' %}
另外,Django模板中的变量是用{{}}包裹的:
Hello, {{ name }}!
2.2 继承
为了避免在多个页面中重复编写相同的HTML,Django模板引擎提供了继承功能。
我们可以在基础模板中定义公共的HTML代码块,而在继承模板中,只需添加需要特殊显示的区域即可。
基础模板base.html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<h1>My Site</h1>
{% block content %}
{% endblock %}
</body>
</html>
继承模板child.html
{% extends 'base.html' %}
{% block title %}
I am a child template!
{% endblock %}
{% block content %}
<p>Here is the content for the child template.</p>
{% endblock %}
在child.html模板中,使用{% extends 'base.html' %}命令,即可使用基础模板中的所有方法和代码块。
其中,{% block ... %} 和 {% endblock %} 用来指定模板继承后的子模板中所包含的代码块。
3. 静态文件
一般情况下,项目中会涉及到不少的静态文件,包括css文件、js文件、图片等。
Django支持管理静态文件,以方便开发和维护。
3.1 配置静态文件路径
首先在settings.py文件中,需要进行如下配置:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
注意:同时需在项目的根目录中创建 static 文件夹,并将所需静态资源文件放置在该文件夹下。
3.2 加载静态文件
在模板中加载静态文件,有两种方式,分别是静态文件标签和静态文件加载器。
静态文件标签:{% static '路径/文件名' %}
在HTML模板中,通过以下标签加载静态文件:
<html>
<head>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
</head>
<body>
<img src="{% static 'images/avatar.jpg' %}" alt="avatar">
</body>
</html>
静态文件加载器
另外一种在模板中加载静态文件的方式是使用静态文件加载器。
在模板中,使用{% load static %}命令即可加载静态文件加载器,接着在需要加载静态资源的地方使用{% static '路径/文件名' %}即可。
示例:
{% load static %}
<html>
<head>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
</head>
<body>
<img src="{% static 'images/avatar.jpg' %}" alt="avatar">
</body>
</html>
4. Django表单
Django表单框架可以让我们更加简单方便地创建HTML Form表单,同时还带有自动验证的功能。
4.1 创建表单
在forms.py文件中创建一个简单的表单:
from django import forms
class ContactForm(forms.Form):
name = forms.CharField()
email = forms.EmailField()
message = forms.CharField(widget=forms.Textarea)
上述代码中,我们定义了一个名为ContactForm的表单类,包含了3个表单项,分别是:name,email,message,其中,name和email是单行文本框,message是多行文本框。
4.2 渲染表单
在模板中,可以通过以下方式渲染表单:
方法1:使用form.as_p标签
<form action="/submit/" method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
方法2:使用form.as_table标签
<form action="/submit/" method="POST">
{% csrf_token %}
{{ form.as_table }}
<button type="submit">Submit</button>
</form>
方法3:使用form.as_ul标签
<form action="/submit/" method="POST">
{% csrf_token %}
{{ form.as_ul }}
<button type="submit">Submit</button>
</form>
其中,form.as_p、form.as_table、form.as_ul是用来生成带有、