Django基础教程（六十八）Django实现后端页面框架：手残党福音！Django后端页面框架：一套模板，全站通用！

原创于 2025-10-11 08:04:18 发布 · 417 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#django #sqlite #python

Django基础教程专栏收录该内容

170 篇文章

订阅专栏

1. 为啥要折腾页面框架？先吐个槽

想象一下这个场景：老板让你给公司后台管理系统加个“今日推荐”模块。你吭哧吭哧改了导航栏、调了侧边栏、修了页脚，结果发现——全站30个页面，得一个一个改！（此时内心OS：我想离职……）

没错，传统写法最大的痛点就是：重复代码多、维护难、改一处崩一片。而Django的页面框架思想，恰恰解决了这个问题。它的核心秘密就俩：

模板继承：像搭积木一样拼页面，基础框架不变，只换内容区
包含标签：把重复使用的组件（比如导航栏）变成“乐高模块”

说白了，就是让你写最少的代码，干最多的活（摸最久的鱼）。接下来，咱们直接进入实战环节！

2. 基础准备：先整个Django项目

假设你已经装好了Django（没装的话，赶紧pip install django安排上）。首先创建项目和应用：

django-admin startproject my_site
cd my_site
python manage.py startapp backend_pages

在settings.py中注册应用：

# my_site/settings.py
INSTALLED_APPS = [
    ...,
    'backend_pages',
]

接着配置模板路径（重点！）：

# my_site/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # 添加这行
        ...,
    },
]

然后在项目根目录创建templates文件夹，咱们的页面框架就要在这里诞生了！

3. 核心武器：基础模板（base.html）

在templates文件夹里创建base.html，它就是全站的“骨架”：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}默认标题{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">我的后台</a>
            <div class="navbar-nav">
                <a class="nav-link" href="#">首页</a>
                <a class="nav-link" href="#">用户管理</a>
                <a class="nav-link" href="#">数据统计</a>
            </div>
        </div>
    </nav>
    <div class="container mt-4">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3">
                {% include "sidebar.html" %}
            </div>
            
            <!-- 内容区（可变部分） -->
            <div class="col-md-9">
                {% block content %}
                <!-- 这里是子模板填充的区域 -->
                {% endblock %}
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer class="bg-light text-center py-3 mt-5">
        {% block footer %}
        <p>© 2023 我的网站. 保留所有权利.</p>
        {% endblock %}
    </footer>
</body>
</html>

划重点：

{% block %} 标签定义可替换的区域，相当于“占位符”
{% include %} 直接插入其他模板文件，适合重复使用的组件
用Bootstrap快速美化，拒绝“裸奔”页面

4. 组件化：侧边栏和导航栏

在templates文件夹创建sidebar.html：

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">用户列表</a>
    <a href="#" class="list-group-item list-group-item-action">订单管理</a>
    <a href="#" class="list-group-item list-group-item-action">系统设置</a>
</div>

看，这样侧边栏就组件化了！如果想修改菜单，只需改这个文件，全站同步更新。

5. 子模板：继承的魔法时刻

现在创建第一个具体页面templates/user_list.html：

{% extends "base.html" %}

{% block title %}用户管理页面{% endblock %}

{% block content %}
<div class="d-flex justify-content-between">
    <h2>用户列表</h2>
    <button class="btn btn-primary">新增用户</button>
</div>
<table class="table table-striped mt-3">
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
        </tr>
    </thead>
    <tbody>
        <!-- 动态数据示例 -->
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>zhangsan@example.com</td>
        </tr>
    </tbody>
</table>
{% endblock %}

神奇的事情发生了：我们只写了核心内容，导航、侧边栏、页脚全自动继承！这就好比装修房子时，直接拎包入住，只需要往房间里摆家具。

6. 动态数据：结合视图函数

光有静态页面还不够，咱们得让数据动起来。修改backend_pages/views.py：

from django.shortcuts import render

def user_list(request):
    users = [
        {'id': 1, 'name': '张三', 'email': 'zhangsan@example.com'},
        {'id': 2, 'name': '李四', 'email': 'lisi@example.com'},
    ]
    return render(request, 'user_list.html', {'users': users})

配置路由backend_pages/urls.py：

from django.urls import path
from . import views

urlpatterns = [
    path('users/', views.user_list, name='user_list'),
]

最后更新主路由my_site/urls.py：

from django.urls import include, path

urlpatterns = [
    path('backend/', include('backend_pages.urls')),
]

现在模板可以动态显示数据了：

<tbody>
    {% for user in users %}
    <tr>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
    </tr>
    {% endfor %}
</tbody>

7. 高级技巧：block.super和自定义标签

情况一：想在保留父模板内容的基础上添加内容？用block.super！

{% block footer %}
    {{ block.super }}  <!-- 保留原有的页脚 -->
    <p>技术支持：技术部</p>
{% endblock %}

情况二：想在不同页面显示不同的侧边栏？用include传参！

创建支持参数的侧边栏模板dynamic_sidebar.html：

<div class="list-group">
    {% for item in sidebar_items %}
    <a href="#" class="list-group-item list-group-item-action">{{ item }}</a>
    {% endfor %}
</div>

在视图中传递参数：

def user_list(request):
    context = {
        'users': [...],
        'sidebar_items': ['用户管理', '权限设置', '操作日志']
    }
    return render(request, 'user_list.html', context)

模板中使用：

{% include "dynamic_sidebar.html" with sidebar_items=sidebar_items %}

8. 实战经验：我踩过的那些坑

block命名冲突：别在子模板里定义父模板没有的block，Django会默默忽略（别问我怎么知道的）
静态文件处理：记得用{% load static %}加载CSS/JS，否则页面可能“裸奔”
多层继承：可以无限套娃，但建议不超过3层，否则调试时想砸电脑
移动端适配：Bootstrap帮了大忙，但自定义样式记得测试手机端

9. 总结：为什么这套框架真香？

回顾一下，我们用Django实现后端页面框架的核心步骤：

基础模板定义框架和block
组件模板通过include复用
子模板继承基础模板并填充block
视图函数传递动态数据
路由配置把一切串联起来

这套方案的最大优势就是维护性。比如老板突然要把导航栏的“用户管理”改成“会员管理”，你只需要修改base.html，全站立即生效——深藏功与名！

最后的友情提示：完整示例代码已经放在文中，复制粘贴时记得改改样式和内容，免得你们老板以为你突然变强了（虽然你真的变强了）。