Django中返回HTML文件的完整配置与实现步骤

闻溪

发布时间：2026-10-14| 3人浏览过

原创

本文详细介绍在Django项目中返回HTML文件的完整流程。从创建templates文件夹、编写HTML模板，到在Views中使用render函数渲染页面，再到Urls配置路由，最后通过浏览器验证结果及处理常见404报错，帮助开发者快速掌握Django前端展示的核心配置方法。

Django返回HTML文件概述

在前面的内容中，我们简要了解了Django的基本工作原理，其中页面展示主要依赖于视图（Views）返回的数据。然而，完整的前端页面通常包含HTML、CSS、JavaScript以及各种插件。今天我们将重点介绍如何通过HTML格式来返回页面内容。

Templates（模板）

配置Templates模板文件夹

首先，需要在Anjing目录下创建一个名为templates的文件夹。可能会有人疑惑，为什么必须创建这个特定名称的文件夹，而不能使用其他名称？

这是因为Django框架中对此有自动定义的规范，必须遵循这一约定才能被正确识别。


# HTML配置相关
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',
      ],
    },
  },
]

接下来，在该文件夹内添加一个名为Login.html的文件，并写入以下HTML代码：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
</head>
<body>
  <h1>
    <p style="text-align:center" font size="2">欢迎来到安静的博客：</p>


  </h1>
  <h1>
    <p style="text-align:center">请输出账号密码：</p>
  </h1>
  <form action="/index/" method="post">
    <p style="text-align:center">用户：<input type="text" name="username" /><br />
    </p>
    <p style="text-align:center">密码：<input type="password" name="password" /><br />
    <input type="submit" value="提交" />
  </form>
</body>
</html>

编写Views视图函数

Views（视图）

完成HTML文件的编写后，还需要在视图（Views）文件中编写对应的处理函数，以便返回HTML页面。


# Virws.pyfrom django.shortcuts import render

# 返回templates中的login.html文件
def login(request):
  return render(request, 'login.html')

这里主要使用render方法，该方法结合数据字典和请求元数据，对指定的HTML模板进行渲染。

配置Urls路由映射

Urls（路由配置）

视图函数已经添加完毕，根据之前的步骤，接下来需要配置URL地址。我们需要通过urls文件将之前渲染好的HTML页面与特定的路径关联起来，从而返回给前端用户。


# Urls.py文件

from django.contrib import admin
from django.urls import path
# 此文件一定要在setting.py文件中进行添加
from Anjing import views

urlpatterns = [
  path('admin/', admin.site.urls),
  path('login/', views.login),    # 加入关联的函数和应用
]