Django4全栈进阶之路14 项目实战（用户管理）：base.html基础模板设计
在 Django 中，我们可以使用模板继承来避免代码的重复。模板继承是指我们可以在一个模板中定义一些公共的 HTML 代码，然后在其他模板中继承这个基础模板，并根据需要添加或覆盖一些内容。
通常情况下，我们会定义一个名为 base.html 的基础模板，其中包含网站的公共结构和样式，例如页眉、页脚、导航栏等。然后，在其他模板中，我们可以使用 extends 指令来继承这个基础模板，并在 block 块中添加或覆盖一些内容。
例如，下面是一个简单的 base.html 模板：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>{% block title %}{% endblock %}</title>
<!-- 引入 Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="{% static 'bootstrap-4.6.2/dist/css/bootstrap.min.css' %}">
{% block extra_head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">EDC</a>
{# Enterprise Data Center#}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">用户管理<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">文章</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">关于我们</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
个人中心
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">个人信息</a>
<a class="dropdown-item" href="#">修改密码</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="{% url 'logout' %}">注销</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block content %}{% endblock %}
</div>
<!-- 引入 jQuery 的 JavaScript 文件 -->
<script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script>
<!-- 引入 Bootstrap 的 JavaScript 文件 -->
<script src="{% static 'bootstrap-4.6.2/dist/js/bootstrap.min.js' %}"></script>
{% block extra_script %}{% endblock %}
</body>
</html>
在上面的模板中，我们定义了一个 title 块和一个 content 块。在 title 块中，我们使用了一个默认值 My Site，但是在其他模板中，我们可以通过覆盖 title 块来修改这个值。在 content 块中，我们使用了一个空块，但是在其他模板中，我们可以在这个块中添加内容。
例如，下面是一个简单的 home.html 和about.html模板，它继承了 base.html 模板，并在 content 块中添加了一些内容：
{% extends 'base.html' %}
{% block content %}
<h2>Welcome to My Site</h2>
<p>This is the home page.</p>
{% endblock %}
{% extends 'base.html' %}
{% block content %}
<h2>Welcome to My Site</h2>
<p>This is the about page.</p>
{% endblock %}
在上面的模板中，我们使用了 extends 指令来继承了 base.html 模板。在 content 块中，我们添加了一些 HTML 代码来显示欢迎信息和介绍信息。
使用模板继承可以让我们更轻松地维护网站的代码，减少代码的重复，并使网站的结构更加清晰易懂。
路由设置：
from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('home/', views.home, name='home'), path('about/', views.about, name='about'), path('user_list/', views.user_list, name='user_list'), # ... 其他 URL 模式 ... ]
视图：
from django.contrib.auth.models import User from django.shortcuts import render # Create your views here. from django.http import HttpResponse def index(request): return HttpResponse("Hello, world. You're at the index.") def home(request): return render(request, 'home.html') # return HttpResponse("This is the home page.") def about(request): return render(request, 'about.html') # return HttpResponse("This is the about page.") def user_list(request): users = User.objects.all() context = {'title': 'user list', 'users': users} return render(request, 'myapp/user_list.html', context)
浙公网安备 33010602011771号