文章目录
- [1 概述](#1 概述)
-
- [1.1 目的](#1.1 目的)
- [1.2 标签:block、extends](#1.2 标签:block、extends)
- [1.3 目录结构](#1.3 目录结构)
- [2 templates 目录](#2 templates 目录)
-
- [2.1 base.html:父页面](#2.1 base.html:父页面)
- [2.2 login.html:子页面](#2.2 login.html:子页面)
- [3 其它代码](#3 其它代码)
-
- [3.1 settings.py](#3.1 settings.py)
- [3.2 views.py](#3.2 views.py)
- [3.3 urls.py](#3.3 urls.py)
1 概述
1.1 目的
- 模板继承 和 类继承 的目的是一样的,都是为了提高代码的复用
1.2 标签:block、extends
python
# 父 Html 中,block:定义语句块,供 子页面使用
{% block xx %}
{% endblock %}
# 子 Html 中,extends:继承父页面
{% extends "xx.html" %}
1.3 目录结构
2 templates 目录
2.1 base.html:父页面
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %} 基础页面 {% endblock %}</title>
{% block css %} {% endblock %}
</head>
<body>
<a href="https://www.baidu.com/"> 百度一下 </a>
{% block content %} {% endblock %}
{% block js %} {% endblock %}
</body>
</html>
2.2 login.html:子页面
html
{% extends "base.html" %}
{% block title %}
登录首页
{% endblock %}
{% block css %}
<style>
p {color: red}
</style>
{% endblock %}
{% block content %}
<p>姓名:<input type="text" placeholder="姓名"></p>
<p>密码:<input type="text" placeholder="密码"></p>
{% endblock %}
{% block js %}
<script>alert('欢迎登录')</script>
{% endblock %}
登录效果:
3 其它代码
3.1 settings.py
python
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',
],
},
},
]
3.2 views.py
python
from django.shortcuts import render, HttpResponse, redirect
def login(request):
return render(request, "login.html")
3.3 urls.py
python
from django.urls import path
from app01 import views
urlpatterns = [
path('login/', views.login),
]