在 VS Code 中试用 ！

Visual Studio Code 中的 Django 教程

Django 是一个高级 Python 框架，专为快速、安全和可伸缩的 Web 开发而设计。Django 包括对 URL 路由、页面模板和数据操作的丰富支持。

在此 Django 教程中，你将创建一个使用通用基础模板的三页简单 Django 应用。你在 Visual Studio Code 环境中创建此应用，以了解如何在 VS Code 终端、编辑器和调试器中处理 Django。本教程不探讨 Django 本身的各种细节，例如使用数据模型和创建管理界面。有关这些方面的指导，请参阅本教程末尾的 Django 文档链接。

此 Django 教程的完整代码项目可在 GitHub 上找到：python-sample-vscode-django-tutorial。

如果遇到任何问题，可以在 Python 扩展讨论问答上搜索答案或提问。

先决条件

要成功完成此 Django 教程，必须执行以下操作（与 通用 Python 教程中的步骤相同）

  1. 安装 Python 扩展。

  2. 安装 Python 3 的某个版本（本教程基于此版本编写）。选项包括

    • （所有操作系统）从 python.org 下载；通常使用页面上首先出现的 Download Python 3.9.1 按钮（或任何最新版本）。
    • （Linux）内置的 Python 3 安装运行良好，但要安装其他 Python 包，必须在终端中运行 sudo apt install python3-pip。
    • （macOS）在 macOS 上通过 Homebrew 使用 brew install python3 安装（macOS 上的系统安装 Python 不受支持）。
    • （所有操作系统）从 Anaconda 下载（用于数据科学目的）。

  3. 在 Windows 上，确保 Python 解释器所在的位置已添加到 PATH 环境变量中。你可以在命令提示符下运行 path 来检查位置。如果未包含 Python 解释器文件夹，请打开 Windows 设置，搜索“环境”，选择 Edit environment variables for your account（编辑帐户的环境变量），然后编辑 Path 变量以包含该文件夹。

为 Django 教程创建项目环境

在本节中，你将创建一个安装了 Django 的虚拟环境。使用虚拟环境可以避免将 Django 安装到全局 Python 环境中，并使你能够精确控制应用程序中使用的库。虚拟环境还可以方便地为环境创建 requirements.txt 文件。

  1. 在文件系统上，为此教程创建一个项目文件夹，例如 hello_django。

  2. 在该文件夹中，使用以下命令（根据你的计算机选择合适的命令）根据当前的解释器创建一个名为 .venv 的虚拟环境

    # Linux
sudo apt-get install python3-venv    # If needed
python3 -m venv .venv
source .venv/bin/activate

# macOS
python3 -m venv .venv
source .venv/bin/activate

# Windows
py -3 -m venv .venv
.venv\scripts\activate

    注意：运行上述命令时，请使用标准 Python 安装。如果使用 Anaconda 安装中的 python.exe，将会看到错误，因为 ensurepip 模块不可用，且环境会处于未完成状态。

  3. 通过运行 code . 或运行 VS Code 并使用 文件 > 打开文件夹 命令在 VS Code 中打开项目文件夹。

  4. 在 VS Code 中，打开命令面板（视图 > 命令面板 或 (⇧⌘P (Windows, Linux Ctrl+Shift+P))))。然后选择 Python: 选择解释器 命令

    Django tutorial: opening the Command Palette in VS Code

  5. 该命令会显示 VS Code 可以自动找到的可用解释器列表（你的列表会因环境而异；如果你没有看到所需的解释器，请参阅配置 Python 环境）。从列表中选择项目文件夹中以 ./.venv 或 .\.venv 开头的虚拟环境

    Django tutorial: Selecting the virtual environment for Python

  6. 从命令面板运行 终端: 创建新终端 (⌃⇧` (Windows, Linux Ctrl+Shift+`))))，这将创建一个终端并通过运行其激活脚本自动激活虚拟环境。

    注意：在 Windows 上，如果默认终端类型是 PowerShell，你可能会看到一个错误，指出无法运行 activate.ps1，因为系统禁用了运行脚本。该错误提供了一个链接，其中包含有关如何允许脚本的信息。否则，请使用 终端: 选择默认配置文件 将“命令提示符”或“Git Bash”设置为默认值。

  7. 选定的环境会出现在 VS Code 状态栏的右侧，并会注意到 ('.venv': venv) 指示器，告诉你正在使用虚拟环境

    Django tutorial: selected environment showing in the VS Code status bar

  8. 通过在 VS Code 终端中运行以下命令来更新虚拟环境中的 pip

    python -m pip install --upgrade pip

  9. 通过在 VS Code 终端中运行以下命令来在虚拟环境中安装 Django

    python -m pip install django

现在，你已经拥有一个独立的、可用于编写 Django 代码的环境。当你使用 终端: 创建新终端 (⌃⇧` (Windows, Linux Ctrl+Shift+`)))) 时，VS Code 会自动激活该环境。如果打开单独的命令提示符或终端，请通过运行 source .venv/bin/activate (Linux/macOS) 或 .venv\Scripts\Activate.ps1 (Windows) 来激活环境。当命令提示符开头显示 (.venv) 时，表示环境已激活。

创建并运行一个最小的 Django 应用

在 Django 术语中，“Django 项目”由多个站点级配置文件以及一个或多个部署到 Web 主机以创建完整 Web 应用程序的“应用”组成。一个 Django 项目可以包含多个应用，每个应用通常在项目中具有独立的功能，并且同一个应用可以存在于多个 Django 项目中。就应用本身而言，它只是遵循 Django 期望的某些约定的 Python 包。

因此，要创建一个最小的 Django 应用，首先需要创建 Django 项目作为应用的容器，然后创建应用本身。出于这两个目的，你都将使用 Django 管理实用程序 django-admin，该实用程序在你安装 Django 包时也会安装。

创建 Django 项目

  1. 在已激活虚拟环境的 VS Code 终端中，运行以下命令

    django-admin startproject web_project .

    此 startproject 命令假设（通过末尾使用 .）当前文件夹是你的项目文件夹，并在其中创建以下内容

    • manage.py：项目的 Django 命令行管理实用程序。你使用 python manage.py <command> [options] 运行项目的管理命令。

    • 一个名为 web_project 的子文件夹，其中包含以下文件

      • __init__.py：一个空文件，告诉 Python 此文件夹是一个 Python 包。
      • asgi.py：ASGI 兼容 Web 服务器用于提供项目服务的入口点。你通常会将此文件保持原样，因为它为生产 Web 服务器提供了挂钩。
      • settings.py：包含 Django 项目的设置，在开发 Web 应用过程中你会修改此文件。
      • urls.py：包含 Django 项目的目录，在开发过程中你也会修改此文件。
      • wsgi.py：WSGI 兼容 Web 服务器用于提供项目服务的入口点。你通常会将此文件保持原样，因为它为生产 Web 服务器提供了挂钩。

  2. 通过运行以下命令创建一个空的开发数据库

    python manage.py migrate

    首次运行服务器时，它会在文件 db.sqlite3 中创建一个默认的 SQLite 数据库，该数据库用于开发目的，但也可用于低流量 Web 应用的生产环境。有关数据库的其他信息，请参阅数据库类型部分。

  3. 要验证 Django 项目，请确保你的虚拟环境已激活，然后使用命令 python manage.py runserver 启动 Django 的开发服务器。服务器运行在默认端口 8000 上，你会在终端窗口中看到如下所示的输出

    Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 13, 2023 - 18:38:07
Django version 4.2.2, using settings 'web_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

    Django 的内置 Web 服务器仅用于本地开发目的。然而，当你部署到 Web 主机时，Django 会改用主机的 Web 服务器。Django 项目中的 wsgi.py 和 asgi.py 模块负责挂接到生产服务器。

    如果你想使用与默认 8000 不同的端口，请在命令行上指定端口号，例如 python manage.py runserver 5000。

  4. 在终端输出窗口中Ctrl+单击 http://127.0.0.1:8000/ URL，以在默认浏览器中打开该地址。如果 Django 安装正确且项目有效，你将看到下方所示的默认页面。VS Code 终端输出窗口也会显示服务器日志。

    Django tutorial: default view of empty Django project

  5. 完成后，关闭浏览器窗口，并根据终端输出窗口中的指示，在 VS Code 中使用Ctrl+C 停止服务器。

创建 Django 应用

  1. 在已激活虚拟环境的 VS Code 终端中，在你的项目文件夹（manage.py 所在的位置）运行管理实用程序的 startapp 命令

    python manage.py startapp hello

    该命令会创建一个名为 hello 的文件夹，其中包含许多代码文件和一个子文件夹。在这些文件中，你经常会使用 views.py（包含定义 Web 应用页面功能的函数）和 models.py（包含定义数据对象的类）。migrations 文件夹由 Django 的管理实用程序用于管理数据库版本，本教程稍后会讨论。此外还有文件 apps.py（应用配置）、admin.py（用于创建管理界面）和 tests.py（用于创建测试），本教程不对此进行介绍。

  2. 修改 hello/views.py 使其与以下代码匹配，该代码为应用的主页创建了一个视图

    from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

  3. 创建一个文件 hello/urls.py，内容如下。urls.py 文件是你指定模式以将不同 URL 路由到其相应视图的位置。下面的代码包含一个路由，将应用的根 URL ("") 映射到刚刚添加到 hello/views.py 中的 views.home 函数

    from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]

  4. web_project 文件夹也包含一个 urls.py 文件，这是实际处理 URL 路由的位置。打开 web_project/urls.py 并修改它以匹配以下代码（如果喜欢，可以保留说明性注释）。此代码使用 django.urls.include 引入应用的 hello/urls.py，这会将应用的路由包含在应用内部。当项目包含多个应用时，这种分离很有帮助。

    from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("hello.urls")),
    path('admin/', admin.site.urls)
]

  5. 保存所有修改过的文件。

  6. 在 VS Code 终端中，再次激活虚拟环境，使用 python manage.py runserver 运行开发服务器，并在浏览器中打开 http://127.0.0.1:8000/ 以查看一个渲染“Hello, Django”的页面。

    Django tutorial: the basic Django app running in a browser

创建调试器启动配置

你可能已经想知道是否有更简单的方法来运行服务器和测试应用，而无需每次都输入 python manage.py runserver。幸运的是，有！你可以在 VS Code 中创建一个自定义启动配置，该配置也用于不可避免的调试练习。

  1. 在 VS Code 中切换到运行视图（使用左侧活动栏或F5）。你可能会看到消息“要自定义运行和调试，请创建 launch.json 文件”。这意味着你还没有包含调试配置的 launch.json 文件。如果你单击创建 launch.json 文件链接，VS Code 可以为你创建。

    Django tutorial: initial view of the debug panel

  2. 选择该链接，VS Code 会提示选择调试配置。从下拉列表中选择 Django，VS Code 将使用 Django 运行配置填充一个新的 launch.json 文件。launch.json 文件包含许多调试配置，每个配置都是 configuration 数组中的一个独立的 JSON 对象。

  3. 向下滚动并检查名称为“Python: Django”的配置

    {
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python Debugger: Django",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}\\manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    }
  ]
}

    此配置指示 VS Code 使用选定的 Python 解释器和 args 列表中的参数运行 "${workspaceFolder}/manage.py"。因此，使用此配置启动 VS Code 调试器，与在已激活虚拟环境的 VS Code 终端中运行 python manage.py runserver 相同。（如果需要，可以将端口号如 "5000" 添加到 args 中。）"django": true 条目还指示 VS Code 启用 Django 页面模板的调试，你将在本教程后面看到这一点。

  4. 通过选择 运行 > 开始调试 菜单命令，或选择列表旁边的绿色开始调试箭头 (F5) 来测试配置

    Django tutorial: start debugging/continue arrow on the debug toolbar

  5. 在终端输出窗口中Ctrl+单击 http://127.0.0.1:8000/ URL 以打开浏览器，查看应用是否正常运行。

  6. 完成后，关闭浏览器并停止调试器。要停止调试器，请使用停止工具栏按钮（红色方块）或 运行 > 停止调试 命令 (⇧F5 (Windows, Linux Shift+F5)))。

  7. 现在可以随时使用 运行 > 开始调试 来测试应用，这还有一个好处是会自动保存所有修改过的文件。

探索调试器

调试让你有机会在特定代码行暂停正在运行的程序。当程序暂停时，你可以检查变量，在调试控制台面板中运行代码，并利用调试上描述的功能。运行调试器也会在调试会话开始前自动保存所有修改过的文件。

开始之前：确保你已使用终端中的Ctrl+C 在上一节末尾停止了正在运行的应用。如果在一个终端中让应用保持运行，它会继续占用端口。因此，当你使用同一端口在调试器中运行应用时，原始正在运行的应用会处理所有请求，你将看不到正在调试的应用中的任何活动，并且程序不会在断点处停止。换句话说，如果调试器似乎不起作用，请确保没有其他应用实例仍在运行。

  1. 在 hello/urls.py 中，向 urlpatterns 列表添加一个路由

    path("hello/<name>", views.hello_there, name="hello_there"),

    path 的第一个参数定义了一个路由“hello/”，该路由接受一个名为 name 的变量字符串。该字符串作为 path 的第二个参数传递给指定的 views.hello_there 函数。

    URL 路由区分大小写。例如，路由 /hello/<name> 与 /Hello/<name> 是不同的。如果你想让同一个视图函数处理这两种情况，请为每种变体定义路径。

  2. 将 views.py 的内容替换为以下代码，以定义可在调试器中单步执行的 hello_there 函数

    import re
from django.utils.timezone import datetime
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

def hello_there(request, name):
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    # Filter the name argument to letters only using regular expressions. URL arguments
    # can contain arbitrary text, so we restrict to safe characters only.
    match_object = re.match("[a-zA-Z]+", name)

    if match_object:
        clean_name = match_object.group(0)
    else:
        clean_name = "Friend"

    content = "Hello there, " + clean_name + "! It's " + formatted_now
    return HttpResponse(content)

    URL 路由中定义的 name 变量作为参数传递给 hello_there 函数。如代码注释中所述，始终过滤任意用户提供的信息，以避免对应用进行各种攻击。在这种情况下，代码过滤 name 参数使其仅包含字母，从而避免注入控制字符、HTML 等。（在下一节中使用模板时，Django 会自动过滤，你不需要此代码。）

  3. 通过以下任一方式在 hello_there 函数的第一行代码 (now = datetime.now()) 上设置断点

    • 将光标置于该行，按F9，或
    • 将光标置于该行，选择 运行 > 切换断点 菜单命令，或
    • 直接单击行号左侧的空白处（将鼠标悬停在那里时会出现一个浅红色圆点）。

    断点显示为左侧空白处的一个红色圆点

    Django tutorial: a breakpoint set on the first line of the hello_there function

  4. 通过选择 运行 > 开始调试 菜单命令，或选择列表旁的绿色开始调试箭头 (F5) 来启动调试器

    Django tutorial: start debugging/continue arrow on the debug toolbar

    观察状态栏颜色变化以指示正在进行调试

    Django tutorial: appearance of the debugging status bar

    VS Code 中还会出现一个调试工具栏（如下所示），其中包含以下顺序的命令：暂停（或继续，F5）、逐过程 (F10)、逐语句 (F11)、跳出 (⇧F11 (Windows, Linux Shift+F11)))、重启 (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5))) 和停止 (⇧F5 (Windows, Linux Shift+F5)))。有关每个命令的说明，请参阅VS Code 调试。

    Django tutorial: the VS Code debug toolbar

  5. 输出显示在“Python 调试控制台”终端中。打开浏览器并导航到 http://127.0.0.1:8000/hello/VSCode。在页面渲染之前，VS Code 会在设置的断点处暂停程序。断点上的小黄色箭头指示它是下一行要运行的代码。

    Django tutorial: VS Code paused at a breakpoint

  6. 使用“逐过程”运行 now = datetime.now() 语句。

  7. 在 VS Code 窗口左侧，你会看到一个变量面板，其中显示了局部变量（例如 now）以及参数（例如 name）。下方是监视、调用堆栈和断点面板（详细信息请参阅VS Code 调试）。在局部变量部分，尝试展开不同的值。你也可以双击值（或使用Enter (Windows, Linux F2))）来修改它们。但是，更改像 now 这样的变量可能会导致程序崩溃。开发者通常仅在代码一开始没有生成正确值时进行更改以修正值。

    Django tutorial: local variables and arguments in VS Code during debugging

  8. 当程序暂停时，调试控制台面板（与终端面板中的“Python 调试控制台”不同）允许你使用程序的当前状态来试验表达式并尝试部分代码。例如，当你单步跳过 now = datetime.now() 行后，你可能想尝试不同的日期/时间格式。在编辑器中，选择代码 now.strftime("%A, %d %B, %Y at %X")，然后右键单击并选择 调试: 求值，将该代码发送到调试控制台并运行

    now.strftime("%A, %d %B, %Y at %X")
'Friday, 07 September, 2018 at 07:46:32'

    提示：调试控制台还会显示应用内部可能不会出现在终端中的异常。例如，如果你在运行和调试视图的调用堆栈区域看到“Paused on exception”（在异常处暂停）消息，请切换到调试控制台以查看异常消息。

  9. 将该行复制到调试控制台底部的 > 提示符中，然后尝试更改格式

    now.strftime("%A, %d %B, %Y at %X")
'Tuesday, 13 June, 2023 at 18:03:19'
now.strftime("%a, %d %b, %Y at %X")
'Tue, 13 Jun, 2023 at 18:03:19'
now.strftime("%a, %d %b, %y at %X")
'Tue, 13 Jun, 23 at 18:03:19'

  10. 如果需要，可以再单步执行几行代码，然后选择继续 (F5) 让程序继续运行。浏览器窗口显示结果

    Django tutorial: result of the modified program

  11. 更改代码中的行以使用不同的日期时间格式，例如 now.strftime("%a, %d %b, %y at %X")，然后保存文件。Django 服务器将自动重新加载，这意味着无需重启调试器即可应用更改。在浏览器中刷新页面以查看更新。

  12. 完成后，关闭浏览器并停止调试器。要停止调试器，请使用停止工具栏按钮（红色方块）或 运行 > 停止调试 命令 (⇧F5 (Windows, Linux Shift+F5)))。

提示：为了更方便地重复导航到特定 URL，例如 http://127.0.0.1:8000/hello/VSCode，可以在 views.py 等文件中使用 print 语句输出该 URL。该 URL 会出现在 VS Code 终端中，你可以使用Ctrl+单击在浏览器中打开它。

转到定义和查看定义命令

在使用 Django 或任何其他库时，你可能希望检查这些库本身的代码。VS Code 提供了两个便捷的命令，可以直接导航到任何代码中类和其他对象的定义

  • 转到定义 从你的代码跳转到定义对象的代码。例如，在 views.py 中，右键单击 home 函数中的 HttpResponse 并选择 转到定义（或使用F12），这将导航到 Django 库中的类定义。

  • 查看定义 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10))，也在右键上下文菜单中) 类似，但直接在编辑器中显示类定义（在编辑器窗口中腾出空间以避免遮挡任何代码）。按Escape 关闭查看窗口，或使用右上角的 x。

    Django tutorial: Peek Definition showing the Flask class inline

使用模板渲染页面

本教程中目前创建的应用仅从 Python 代码生成纯文本网页。虽然可以直接在代码中生成 HTML，但开发者会避免这种做法，因为它会使应用容易受到跨站脚本 (XSS) 攻击。例如，在本教程的 hello_there 函数中，有人可能会想在代码中格式化输出，例如 content = "<h1>Hello there, " + clean_name + "!</h1>"，然后将 content 中的结果直接提供给浏览器。这种方式允许攻击者将恶意 HTML（包括 JavaScript 代码）放入 URL 中，最终出现在 clean_name 中，从而在浏览器中运行。

更好的做法是使用模板将 HTML 完全从代码中分离出来，以便代码只关注数据值而不关注渲染。

在 Django 中，模板是一个 HTML 文件，其中包含代码在运行时提供的值的占位符。Django 模板引擎负责在渲染页面时进行替换，并提供自动转义以防止 XSS 攻击（也就是说，如果你尝试在数据值中使用 HTML，你只会看到 HTML 作为纯文本渲染）。因此，代码只关注数据值，模板只关注标记。Django 模板提供灵活的选项，例如模板继承，它允许你定义一个包含通用标记的基础页面，然后在该基础上构建页面特定的附加内容。

在本节中，你首先使用模板创建一个单页。在后续部分中，你将配置应用以提供静态文件，然后为应用创建多个页面，每个页面都包含来自基础模板的导航栏。Django 模板还支持控制流和迭代，你将在本教程后面关于模板调试的部分看到这一点。

  1. 在 web_project/settings.py 文件中，找到 INSTALLED_APPS 列表并添加以下条目，以确保项目了解该应用，以便它可以处理模板

    'hello',

  2. 在 hello 文件夹内，创建一个名为 templates 的文件夹，然后创建一个名为 hello 的子文件夹，以匹配应用名称（这种两级文件夹结构是典型的 Django 约定）。

  3. 在 templates/hello 文件夹中，创建一个名为 hello_there.html 的文件，内容如下。此模板包含两个名为“name”和“date”的数据值占位符，由花括号对 {{ 和 }} 划定。所有其他不变的文本以及格式标记（例如 <strong>）都是模板的一部分。如你所见，模板占位符还可以包含格式，即竖线 | 符号后面的表达式，在此示例中使用了 Django 内置的日期过滤器和时间过滤器。因此，代码只需传递日期时间值，而不是预格式化的字符串

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Django</title>
    </head>
    <body>
        <strong>Hello there, {{ name }}!</strong> It's {{ date | date:"l, d F, Y" }} at {{ date | time:"H:i:s" }}
    </body>
</html>

  4. 在 views.py 的顶部，添加以下导入语句

    from django.shortcuts import render

  5. 同样在 views.py 中，修改 hello_there 函数，使用 django.shortcuts.render 方法加载模板并提供模板上下文。上下文是模板内部使用的变量集合。render 函数接受请求对象，然后是模板的路径（相对于 templates 文件夹），然后是上下文对象。（开发者通常将模板命名与使用它们的函数相同，但这不是必需的，因为你始终在代码中引用确切的文件名。）

    def hello_there(request, name):
    print(request.build_absolute_uri()) #optional
    return render(
        request,
        'hello/hello_there.html',
        {
            'name': name,
            'date': datetime.now()
        }
    )

    你可以看到，现在的代码简单得多，只关注数据值，因为标记和格式化都包含在模板中。

  6. 启动程序（在调试器内部或外部，使用⌃F5 (Windows, Linux Ctrl+F5))))，导航到 /hello/name URL，并观察结果。

  7. 还可以尝试导航到使用类似 <a%20value%20that%20could%20be%20HTML> 名称的 /hello/name URL，以查看 Django 的自动转义是如何工作的。“name”值在浏览器中显示为纯文本，而不是渲染实际元素。

提供静态文件

静态文件是 Web 应用针对某些请求按原样返回的内容片段，例如 CSS 文件。要提供静态文件，需要确保 settings.py 中的 INSTALLED_APPS 列表包含 django.contrib.staticfiles，该项默认已包含。

在 Django 中提供静态文件是一门艺术，尤其是在部署到生产环境时。此处展示的是一种简单的方法，适用于 Django 开发服务器以及像 Gunicorn 这样的生产服务器。然而，对静态文件的全面处理超出了本教程的范围，因此有关更多信息，请参阅 Django 文档中的管理静态文件。

切换到生产环境时，导航到 settings.py，将 DEBUG 设置为 False，并将 ALLOWED_HOSTS = ['*'] 更改为允许特定主机。使用容器时可能需要进行额外的工作。有关详细信息，请参阅问题 13。

准备应用以提供静态文件

  1. 在项目的 web_project/urls.py 中，添加以下 import 语句

    from django.contrib.staticfiles.urls import staticfiles_urlpatterns

  2. 在同一个文件末尾，添加以下行，该行将标准静态文件 URL 添加到项目识别的列表中

    urlpatterns += staticfiles_urlpatterns()

在模板中引用静态文件

  1. 在 hello 文件夹中，创建一个名为 static 的文件夹。

  2. 在 static 文件夹内，创建一个名为 hello 的子文件夹，以匹配应用名称。

    这个额外子文件夹的原因是，当你将 Django 项目部署到生产服务器时，会将所有静态文件收集到一个单独的文件夹中，然后由专用的静态文件服务器提供服务。static/hello 子文件夹确保当应用的静态文件被收集时，它们位于特定于应用的子文件夹中，并且不会与同一项目中其他应用的ファイル冲突。

  3. 在 static/hello 文件夹中，创建一个名为 site.css 的文件，内容如下。输入此代码后，还会观察 VS Code 为 CSS 文件提供的语法高亮显示，包括颜色预览。

    .message {
    font-weight: 600;
    color: blue;
}

  4. 在 templates/hello/hello_there.html 中，在 <title> 元素后添加以下行。{% load static %} 标签是一组自定义的 Django 模板标签，它允许你使用 {% static %} 来引用样式表等文件。

    {% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />

  5. 同样在 templates/hello/hello_there.html 中，用以下标记替换 <body> 元素的内容，该标记使用 message 样式而不是 <strong> 标签

    <span class="message">Hello, there {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.

  6. 运行应用，导航到 /hello/name URL，观察消息以蓝色渲染。完成后停止应用。

使用 collectstatic 命令

对于生产部署，你通常使用 python manage.py collectstatic 命令将应用的所有静态文件收集到一个文件夹中。然后可以使用专用的静态文件服务器来提供这些文件，这通常会带来更好的整体性能。以下步骤展示了如何进行此收集，尽管在使用 Django 开发服务器运行时不会使用此收集。

  1. 在 web_project/settings.py 中，添加以下行，该行定义了使用 collectstatic 命令时静态文件收集的位置

    STATIC_ROOT = BASE_DIR / 'static_collected'

  2. 在终端中，运行命令 python manage.py collectstatic 并观察 hello/site.css 已被复制到顶层 static_collected 文件夹中，与 manage.py 并列。

  3. 在实践中，任何时候更改静态文件后以及在部署到生产环境之前，都要运行 collectstatic。

创建多个扩展基础模板的模板

由于大多数 Web 应用不止一个页面，并且这些页面通常共享许多通用元素，因此开发者将这些通用元素分离到一个基础页面模板中，然后其他页面模板会继承该模板。（这也称为模板继承，意味着扩展页面继承基础页面中的元素。）

此外，由于你可能会创建许多扩展同一模板的页面，因此在 VS Code 中创建代码片段以快速初始化新的页面模板会很有帮助。代码片段可以帮助你避免繁琐且易出错的复制粘贴操作。

以下部分将逐步介绍此过程的不同部分。

创建基础页面模板和样式

Django 中的基础页面模板包含一组页面的所有共享部分，包括对 CSS 文件、脚本文件等的引用。基础模板还定义一个或多个 block 标签，其内容期望由扩展模板覆盖。block 标签在基础模板和扩展模板中都由 {% block <name> %} 和 {% endblock %} 划定。

以下步骤演示如何创建基础模板。

  1. 在 templates/hello 文件夹中，创建一个名为 layout.html 的文件，内容如下，其中包含名为“title”和“content”的块。如你所见，标记定义了一个简单的导航栏结构，其中包含指向主页、关于页面和联系人页面的链接，这些页面你将在后面的部分中创建。注意使用 Django 的 {% url %} 标签通过相应 URL 模式的名称引用其他页面，而不是通过相对路径。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>{% block title %}{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}"/>
</head>

<body>
<div class="navbar">
    <a href="{% url 'home' %}" class="navbar-brand">Home</a>
    <a href="{% url 'about' %}" class="navbar-item">About</a>
    <a href="{% url 'contact' %}" class="navbar-item">Contact</a>
</div>

<div class="body-content">
    {% block content %}
    {% endblock %}
    <hr/>
    <footer>
        <p>&copy; 2018</p>
    </footer>
</div>
</body>
</html>

  2. 将以下样式添加到 static/hello/site.css 中现有“message”样式下方，并保存文件。（本演练不尝试演示响应式设计；这些样式只是生成一个合理有趣的结果。）

    .navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

此时你可以运行应用，但由于你没有在任何地方使用基础模板，也没有更改任何代码文件，因此结果与上一步相同。完成剩余部分以查看最终效果。

创建代码片段

由于你在下一节中创建的三个页面都继承自 layout.html，因此创建代码片段来初始化引用基础模板的新模板文件可以节省时间。代码片段提供来自单一来源的一致代码片段，这可以避免从现有代码复制粘贴时可能出现的错误。

  1. 在 VS Code 中，选择 文件（Windows/Linux）或 Code（macOS）菜单，然后选择 首选项 > 用户代码片段。

  2. 在出现的列表中，选择 html。（如果你之前创建过代码片段，该选项可能会在列表的现有代码片段部分显示为“html.json”。）

  3. 在 VS Code 打开 html.json 后，将以下代码添加到现有的花括号内。（此处未显示的解释性注释描述了详细信息，例如 $0 行如何指示 VS Code 在插入代码片段后放置光标的位置）

    "Django Tutorial: template extending layout.html": {
    "prefix": "djextlayout",
    "body": [
        "{% extends \"hello/layout.html\" %}",
        "{% block title %}",
        "$0",
        "{% endblock %}",
        "{% block content %}",
        "{% endblock %}"
    ],

    "description": "Boilerplate template that extends layout.html"
},

  4. 保存 html.json 文件 (⌘S (Windows, Linux Ctrl+S)))。

  5. 现在，每当你开始键入代码片段的前缀（例如 djext）时，VS Code 就会提供该代码片段作为自动完成选项，如下节所示。你还可以使用 插入代码片段 命令从菜单中选择代码片段。

有关代码片段的更多信息，请参阅创建代码片段。

使用代码片段添加页面

准备好代码片段后，你可以快速创建主页、关于页面和联系人页面的模板。

  1. 在 templates/hello 文件夹中，创建一个名为 home.html 的新文件，然后开始键入 djext，以看到代码片段作为补全项出现

    Django tutorial: autocompletion for the djextlayout code snippet

    当你选择补全项时，代码片段的代码将显示出来，光标位于代码片段的插入点

    Django tutorial: insertion of the djextlayout code snippet

  2. 在“title”块的插入点处，写入 Home；在“content”块处，写入 <p>Visual Studio Code Django 教程的主页。</p>，然后保存文件。这些行是扩展页面模板中唯一的不同部分

  3. 在 templates/hello 文件夹中，创建 about.html，使用代码片段插入样板标记，分别在“title”和“content”块中插入 About us 和 <p>Visual Studio Code Django 教程的关于页面。</p>，然后保存文件。

  4. 重复上一步，使用 Contact us 和 <p>Visual Studio Code Django 教程的联系人页面。</p> 创建 templates/hello/contact.html。

  5. 在应用的 urls.py 中，添加 /about 和 /contact 页面的路由。请注意，path 函数的 name 参数定义了你在模板的 {% url %} 标签中引用页面时使用的名称。

    path("about/", views.about, name="about"),
path("contact/", views.contact, name="contact"),

  6. 在 views.py 中，为 /about 和 /contact 路由添加引用其各自页面模板的函数。还需修改 home 函数以使用 home.html 模板。

    # Replace the existing home function with the one below
def home(request):
    return render(request, "hello/home.html")

def about(request):
    return render(request, "hello/about.html")

def contact(request):
    return render(request, "hello/contact.html")

运行应用

所有页面模板都已准备就绪，保存 views.py，运行应用，并在浏览器中打开主页以查看结果。在页面之间导航以验证页面模板是否正确继承了基础模板。

Django tutorial: app rendering a common nav bar from the base template

使用数据、数据模型和迁移

许多 Web 应用都处理存储在数据库中的信息，Django 使使用模型轻松表示数据库中的对象。在 Django 中，模型是派生自 django.db.models.Model 的 Python 类，代表一个特定的数据库对象，通常是表。你将这些类放在应用的 models.py 文件中。

使用 Django，你几乎完全通过在代码中定义的模型来操作数据库。然后，Django 的“迁移”会在你随着时间推移演进模型时自动处理底层数据库的所有细节。一般的工作流程如下

  1. 更改 models.py 文件中的模型。
  2. 运行 python manage.py makemigrations，在 migrations 文件夹中生成脚本，将数据库从当前状态迁移到新状态。
  3. 运行 python manage.py migrate 将脚本应用到实际数据库。

迁移脚本有效地记录了你随着时间对数据模型进行的所有增量更改。通过应用迁移，Django 会更新数据库以匹配你的模型。由于每个增量更改都有其自己的脚本，因此 Django 可以自动将数据库的任何先前版本（包括新数据库）迁移到当前版本。因此，你只需要关心 models.py 中的模型，而无需关心底层数据库 schema 或迁移脚本。把这部分工作交给 Django 来完成！

在代码中，你也完全使用模型类来存储和检索数据；Django 处理底层细节。唯一的例外是可以使用 Django 管理实用程序 loaddata 命令将数据写入数据库。此实用程序通常用于在 migrate 命令初始化 schema 后初始化数据集。

使用 db.sqlite3 文件时，你还可以使用 SQLite 浏览器等工具直接操作数据库。使用此类工具添加或删除表中的记录是可以的，但避免更改数据库 schema，因为数据库将与应用的模型不同步。而应更改模型，运行 makemigrations，然后运行 migrate。

数据库类型

默认情况下，Django 为应用的数据库包含一个 db.sqlite3 文件，适用于开发工作。正如 何时使用 SQLite (sqlite.org) 中所述，SQLite 非常适合低到中等流量（每天点击量少于 10 万次）的站点，但不建议用于更高流量的站点。它也仅限于单个计算机，因此不能用于任何多服务器场景，例如负载均衡和异地复制。

出于这些原因，请考虑使用生产级数据存储，例如PostgreSQL、MySQL 和SQL Server。有关 Django 对其他数据库支持的信息，请参阅数据库设置。你还可以使用适用于 Python 的 Azure SDK 来处理 Azure 存储服务，例如表和 blob。

定义模型

Django 模型也是一个派生自 django.db.model.Models 的 Python 类，你将其放置在应用的 models.py 文件中。在数据库中，每个模型都会自动分配一个名为 id 的唯一 ID 字段。所有其他字段都定义为类的属性，使用 django.db.models 中的类型，例如 CharField（有限文本）、TextField（无限文本）、EmailField、URLField、IntegerField、DecimalField、BooleanField、DateTimeField、ForeignKey 和 ManyToMany 等。（有关详细信息，请参阅 Django 文档中的模型字段参考。）

每个字段都有一些属性，例如 max_length。blank=True 属性表示字段是可选的；null=true 表示值是可选的。还有一个 choices 属性，它将值限制为数据值/显示值元组数组中的值。

例如，在 models.py 中添加以下类，以定义一个数据模型，表示简单消息日志中的带日期条目

from django.db import models
from django.utils import timezone

class LogMessage(models.Model):
    message = models.CharField(max_length=300)
    log_date = models.DateTimeField("date logged")

    def __str__(self):
        """Returns a string representation of a message."""
        date = timezone.localtime(self.log_date)
        return f"'{self.message}' logged on {date.strftime('%A, %d %B, %Y at %X')}"

模型类可以包含返回根据其他类属性计算的值的方法。模型通常包含一个 __str__ 方法，该方法返回实例的字符串表示形式。

迁移数据库

由于通过编辑 models.py 更改了数据模型，因此需要更新数据库本身。在 VS Code 中，打开一个已激活虚拟环境的终端（使用 终端: 创建新终端 命令，⌃⇧` (Windows, Linux Ctrl+Shift+`))))，导航到项目文件夹，然后运行以下命令

python manage.py makemigrations
python manage.py migrate

查看 migrations 文件夹，查看 makemigrations 生成的脚本。你还可以查看数据库本身，查看 schema 是否已更新。

如果在运行命令时看到错误，请确保你没有使用前一步骤遗留的调试终端，因为它们可能没有激活虚拟环境。

通过模型使用数据库

模型到位且数据库已迁移后，你就可以仅使用模型存储和检索数据。在本节中，你将为应用添加一个表单页面，通过该页面可以记录消息。然后修改主页以显示这些消息。由于此处修改的代码文件较多，请注意细节。

  1. 在 hello 文件夹（其中包含 views.py）中，创建一个名为 forms.py 的新文件，内容如下，该代码定义了一个 Django 表单，其中包含一个从数据模型 LogMessage 中提取的字段

    from django import forms
from hello.models import LogMessage

class LogMessageForm(forms.ModelForm):
    class Meta:
        model = LogMessage
        fields = ("message",)   # NOTE: the trailing comma is required

  2. 在 templates/hello 文件夹中，创建一个名为 log_message.html 的新模板，内容如下，该模板假定给定了一个名为 form 的变量来定义表单主体。然后添加一个提交按钮，标签为“Log”。

    {% extends "hello/layout.html" %}
{% block title %}
    Log a message
{% endblock %}
{% block content %}
    <form method="POST" class="log-form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default">Log</button>
    </form>
{% endblock %}

    注意：Django 的 {% csrf_token %} 标签提供了跨站请求伪造保护。有关详细信息，请参阅 Django 文档中的跨站请求伪造保护。

  3. 在应用的 static/hello/site.css 文件中，添加一条规则以加宽输入表单

    input[name=message] {
    width: 80%;
}

  4. 在应用的 urls.py 文件中，为新页面添加一个路由

    path("log/", views.log_message, name="log"),

  5. 在 views.py 中，定义名为 log_message 的视图（由 URL 路由引用）。此视图同时处理 HTTP GET 和 POST 请求。在 GET 请求（else: 部分）的情况下，它只显示你在前一步骤中定义的表单。在 POST 请求的情况下，它将表单中的数据检索到一个数据对象 (message) 中，设置时间戳，然后保存该对象，此时数据会写入数据库

    # Add these to existing imports at the top of the file:
from django.shortcuts import redirect
from hello.forms import LogMessageForm
from hello.models import LogMessage

# Add this code elsewhere in the file:
def log_message(request):
    form = LogMessageForm(request.POST or None)

    if request.method == "POST":
        if form.is_valid():
            message = form.save(commit=False)
            message.log_date = datetime.now()
            message.save()
            return redirect("home")
    else:
        return render(request, "hello/log_message.html", {"form": form})

  6. 在尝试之前，还差最后一步！在 templates/hello/layout.html 中，在“navbar”div 中为消息日志页面添加一个链接

    <!-- Insert below the link to Home -->
<a href="{% url 'log' %}" class="navbar-item">Log Message</a>

  7. 运行应用并在浏览器中打开主页。选择导航栏上的日志消息链接，应显示消息日志页面

    Django tutorial: the message logging page added to the app

  8. 输入消息，选择日志，你应该会被带回主页。主页还没有显示任何已记录的消息（稍后会修复）。也可以随意记录更多消息。如果你想查看，可以使用 SQLite Browser 等工具检查数据库，看看记录是否已创建。以只读方式打开数据库，否则请记住在使用应用之前关闭数据库，否则应用将因数据库被锁定而失败。

  9. 完成后停止应用。

  10. 现在修改主页以显示记录的消息。首先将应用的 templates/hello/home.html 文件内容替换为下面的标记。此模板需要一个名为 message_list 的上下文变量。如果接收到（使用 {% if message_list %} 标签检查），则会遍历该列表（{% for message in message_list %} 标签）为每条消息生成表格行。否则，页面会指示尚未记录任何消息。

    {% extends "hello/layout.html" %}
{% block title %}
    Home
{% endblock %}
{% block content %}
    <h2>Logged messages</h2>

    {% if message_list %}
        <table class="message_list">
            <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Message</th>
            </tr>
            </thead>
            <tbody>
            {% for message in message_list %}
                <tr>
                    <td>{{ message.log_date | date:'d M Y' }}</td>
                    <td>{{ message.log_date | time:'H:i:s' }}</td>
                    <td>
                        {{ message.message }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No messages have been logged. Use the <a href="{% url 'log' %}">Log Message form</a>.</p>
    {% endif %}
{% endblock %}

  11. 在 static/hello/site.css 中，添加一条规则来稍微格式化表格

    .message_list th,td {
    text-align: left;
    padding-right: 15px;
}

  12. 在 views.py 中，导入 Django 的通用 ListView 类，我们将使用它来实现主页

    from django.views.generic import ListView

  13. 同样在 views.py 中，将 home 函数替换为一个派生自 ListView 的类 HomeListView，该类与 LogMessage 模型关联，并实现 get_context_data 函数来为模板生成上下文。

    # Remove the old home function if you want; it's no longer used

class HomeListView(ListView):
    """Renders the home page, with a list of all messages."""
    model = LogMessage

    def get_context_data(self, **kwargs):
        context = super(HomeListView, self).get_context_data(**kwargs)
        return context

  14. 在应用的 urls.py 中，导入数据模型

    from hello.models import LogMessage

  15. 同样在 urls.py 中，为新视图创建一个变量，该视图按降序检索最近的五个 LogMessage 对象（这意味着它查询数据库），然后为模板上下文中的数据提供一个名称 (message_list)，并标识要使用的模板

    home_list_view = views.HomeListView.as_view(
    queryset=LogMessage.objects.order_by("-log_date")[:5],  # :5 limits the results to the five most recent
    context_object_name="message_list",
    template_name="hello/home.html",
)

  16. 在 urls.py 中，修改主页的路径以使用 home_list_view 变量

        # Replace the existing path for ""
    path("", home_list_view, name="home"),

  17. 启动应用并在浏览器中打开主页，现在应该显示消息

    Django tutorial: app home page displaying message from the database

  18. 完成后停止应用。

将调试器用于页面模板

如上一节所示，页面模板可以包含过程指令，例如 {% for message in message_list %} 和 {% if message_list %}，而不仅仅是像 {% url %} 和 {% block %} 这样的被动声明性元素。因此，像任何其他过程式代码一样，模板内部也可能存在编程错误。

幸运的是，当调试配置中设置了 "django": true 时（你已经这样做了），VS Code 的 Python 扩展提供了模板调试功能。以下步骤演示了此功能

  1. 在 templates/hello/home.html 中，在 {% if message_list %} 和 {% for message in message_list %} 行上设置断点，如下图中黄色箭头所示

    Django tutorial: breakpoints set in a Django page template

  2. 在调试器中运行应用并在浏览器中打开主页。（如果你已经运行了调试器，设置断点后无需重启应用；只需刷新页面。）观察到 VS Code 在模板的 {% if %} 语句处进入调试器，并在变量面板中显示所有上下文变量

    Django tutorial: debugger stopped at breakpoints in the page template

  3. 使用“逐过程”(F10) 命令单步执行模板代码。观察到调试器会跳过所有声明语句，并在任何过程式代码处暂停。例如，单步执行 {% for message in message_list %} 循环可以让你检查 message 中的每个值，并可以让你单步执行到类似 <td>{{ message.log_date | date:'d M Y' }}</td> 的行。

  4. 你还可以在调试控制台面板中处理变量。（但是，像 date 这样的 Django 过滤器目前在控制台中不可用。）

  5. 准备就绪后，选择继续 (F5) 完成运行应用，并在浏览器中查看渲染后的页面。完成后停止调试器。

可选活动

以下部分描述了你在使用 Python 和 Visual Studio Code 时可能会发现有用的其他步骤。

为环境创建 requirements.txt 文件

通过源代码管理或通过其他方式共享应用代码时，复制虚拟环境中的所有文件没有意义，因为接收者总是可以自己重新创建该环境。

因此，开发者通常会从源代码管理中省略虚拟环境文件夹，而是使用 requirements.txt 文件描述应用的依赖关系。

虽然你可以手动创建文件，但也可以使用 pip freeze 命令根据激活环境中安装的精确库生成文件

  1. 使用 Python: 选择解释器 命令选择你选择的环境后，运行 终端: 创建新终端 命令 (⌃⇧` (Windows, Linux Ctrl+Shift+`))))，以在该环境中打开一个终端。

  2. 在终端中，运行 pip freeze > requirements.txt，在项目文件夹中创建 requirements.txt 文件。

任何收到项目副本的人（或任何生成服务器）只需要运行 pip install -r requirements.txt 命令，即可在活动环境中重新安装应用依赖的包。

注意：pip freeze 列出当前环境中安装的所有 Python 包，包括你当前未使用的包。该命令还会列出带有精确版本号的包，你可能希望将其转换为版本范围，以便将来更灵活。有关详细信息，请参阅 pip 命令文档中的需求文件。

创建超级用户并启用管理界面

默认情况下，Django 提供了一个受身份验证保护的 Web 应用管理界面。该界面通过内置的 django.contrib.admin 应用实现，该应用默认包含在项目的 INSTALLED_APPS 列表 (settings.py) 中，身份验证则由内置的 django.contrib.auth 应用处理，该应用也默认包含在 INSTALLED_APPS 中。

执行以下步骤启用管理界面

  1. 通过在 VS Code 中为你的虚拟环境打开一个终端，然后运行命令 python manage.py createsuperuser --username=<username> --email=<email>，在应用中创建一个超级用户帐户，当然，将 <username> 和 <email> 替换为你的个人信息。运行该命令时，Django 会提示你输入并确认密码。

    务必记住你的用户名和密码组合。这些是你用于验证应用身份的凭据。

  2. 在项目级 urls.py（本教程中的 web_project/urls.py）中添加以下 URL 路由，指向内置的管理界面

    # This path is included by default when creating the app
 path("admin/", admin.site.urls),

  3. 运行服务器，然后在浏览器中打开应用的 /admin 页面（例如，使用开发服务器时为 http://127.0.0.1:8000/admin）。

  4. 出现一个登录页面，由 django.contrib.auth 提供。输入你的超级用户凭据。

    Django tutorial: default Django login prompt

  5. 完成身份验证后，你会看到默认的管理页面，通过该页面可以管理用户和组

    Django tutorial: the default Django administrative interface

你可以根据需要自定义管理界面。例如，你可以提供编辑和删除数据库条目的功能。有关进行自定义的更多信息，请参阅Django admin site 文档。

使用容器工具扩展为 Django 应用创建容器

容器工具扩展可以方便地从 Visual Studio Code 构建、管理和部署容器化应用程序。如果你有兴趣学习如何为本教程中开发的 Django 应用创建 Python 容器，请查看容器中的 Python 教程，该教程将指导你如何

  • 创建一个描述简单 Python 容器的 Dockerfile 文件。
  • 构建、运行并验证 Django 应用的功能。
  • 调试在容器中运行的应用。

下一步

恭喜你完成了在 Visual Studio Code 中使用 Django 的演练！

本教程的完整代码项目可在 GitHub 上找到：python-sample-vscode-django-tutorial。

在本教程中，我们只介绍了 Django 功能的皮毛。务必访问Django 文档和官方 Django 教程，以获取关于视图、模板、数据模型、URL 路由、管理界面、使用其他数据库类型、部署到生产环境等的更多详细信息。

要在生产网站上试用你的应用，请查看教程使用 Docker 容器将 Python 应用部署到 Azure 应用服务。Azure 还提供标准容器 Linux 上的应用服务，你可以从 VS Code 中将 Web 应用部署到该容器。

你可能还想查阅 VS Code 文档中与 Python 相关的以下文章

06/12/2025