Django教程在Visual Studio Code中

Django是一个用于快速、安全和可扩展的网络开发的高级Python框架。Django包括丰富的URL路由、页面模板和数据处理支持。

在这个Django教程中，你将创建一个简单的Django应用，该应用包含三个使用公共基础模板的页面。你在这个上下文中使用Visual Studio Code来创建这个应用，以便了解如何在VS Code的终端、编辑器和调试器中与Django进行交互。这个教程不涉及Django本身的各种细节，例如处理数据模型和创建管理界面。有关这些方面的指导，请参阅本教程末尾的Django文档链接。

完成的代码项目可以在GitHub上找到：python-sample-vscode-django-tutorial.

如果您有任何问题，您可以搜索答案或在Python 扩展讨论 Q&A上提问。

先决条件

要成功完成这个Django教程，你必须执行以下操作（与一般的Python教程中的步骤相同）：

安装Python扩展。
安装一个版本的Python 3（本教程是为此编写的）。选项包括：
- （所有操作系统）从python.org下载；通常使用页面上出现的第一个按钮下载 Python 3.9.1（或最新版本）。
- (Linux) 内置的 Python 3 安装运行良好，但要安装其他 Python 包，必须运行请将以下网页文本翻译成中文，只输出翻译结果，不输出任何其他解释，若文本已经是中文了，则直接用中文复述一遍。翻译结果保持格式不变。输入：sudo apt install python3-pip在终端中。
- (macOS) 通过 Homebrew 在 macOS 上安装 brew install python3（在 macOS 上通过系统安装 Python 不受支持）。
- （所有操作系统）从Anaconda下载（用于数据科学目的）。
在 Windows 上，确保你的 Python 解释器的位置包含在你的 PATH 环境变量中。你可以通过运行来检查位置路径在命令提示符下。如果Python解释器的文件夹未包含在内，请打开Windows设置，搜索“环境”，选择编辑您的账户的环境变量，然后编辑变量以包含该文件夹。Path

为Django教程创建项目环境

在本节中，您将创建一个虚拟环境，在其中安装Django。使用虚拟环境可以避免将Django安装到全局Python环境中，并且可以精确控制应用程序中使用的库。虚拟环境还使得为环境创建一个requirements.txt文件变得简单。

Python Environments 扩展支持多种环境类型，包括 venv、conda、poetry 等。本教程使用venv，因为它内置在 Python 中且不需要额外的工具。其他环境类型的步骤类似——请参阅创建环境了解详情。

在你的文件系统中，为本教程创建一个项目文件夹，例如你好_django输入：.
在 VS Code 中打开项目文件夹，运行代码，或者通过运行 VS Code 并使用文件 > 打开文件夹 命令。
使用Python: Create Environment命令创建虚拟环境：
1. 打开命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P))
2. 搜索并选择 Python: 创建环境
3. 选择 Venv 以创建 venv 环境
4. 选择一个用于环境的Python解释器
VS Code 创建了一个.venv在你的工作区中创建一个文件夹并自动选择新的环境。

小贴士
你也可以通过使用Python侧边栏来创建环境。展开环境管理器，并选择+按钮进行快速创建，该按钮使用合理的默认设置。
所选环境显示在 VS Code 状态栏的右侧，('.venv': venv) 标志显示您正在使用虚拟环境：
使用以下方法之一在虚拟环境中安装Django：

使用包管理用户界面：
1. 在Python侧边栏中，展开环境管理器
2. 右键单击您的.venv 环境并选择 管理软件包
3. 搜索django 并选择安装
使用终端：

运行 终端：创建新终端 (⌃⇧` (Windows, Linux Ctrl+Shift+`)) 从命令面板，这将创建一个终端并自动激活虚拟环境。然后运行：
```
python -m pip 安装 django
```

现在你已经准备好了一个自包含的环境，可以开始编写Django代码了。VS Code会在你打开新的终端时自动激活这个环境。如果你在VS Code之外打开单独的命令提示符或终端，可以通过运行来激活这个环境源 .venv/bin/activate(Linux/macOS) 或.venv\Scripts\Activate.ps1 (Windows)。你知道环境已激活时，命令提示符会显示 (.venv) 在开头。

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

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

要创建一个最小的Django应用程序，首先需要创建Django项目作为应用程序的容器，然后创建应用程序本身。为了这两个目的，你使用Django管理工具，django管理员，这是在安装Django包时安装的。

创建Django项目

在 VS Code 终端中，你的虚拟环境已激活，请运行以下命令：
```
django-admin startproject web_project .
```
这个开始项目命令假定（通过使用输入：.在最后)确认当前文件夹是你的项目文件夹，并在其中创建以下内容：
- 管理.pyDjango 项目使用的命令行管理工具。您使用来为项目运行管理命令。python manage.py <命令> [选项]输入：.
- 一个名为的子文件夹网页项目，包含以下文件：
  - __init__.py: 一个空文件，告诉Python这个文件夹是一个Python包。
  - asgi.py：一个ASGI兼容的网络服务器入口点，用于托管您的项目。通常情况下，您不需要修改这个文件，因为它为生产网络服务器提供了挂钩。
  - settings.py包含Django项目的设置，您在开发网络应用程序的过程中对其进行修改。
  - urls.py包含Django项目的目录表，你也会在开发过程中修改它。
  - wsgi.py: 这是一个 WSGI 兼容的 web 服务器来托管你的项目的入口点。通常情况下，你会保持这个文件不变，因为它为生产 web 服务器提供了挂钩。
通过运行以下命令创建一个空的开发数据库：
```
python manage.py迁移
```
当你第一次运行服务器时，它会在文件中创建一个默认的SQLite数据库db.sqlite3 这是为开发目的设计的，但也可以用于低 volume 的生产网页应用程序。有关数据库的更多信息，请参阅数据库类型部分。
要验证Django项目，请确保你的虚拟环境已激活，然后使用命令启动Django的开发服务器python manage.py 运行服务器服务器运行在默认端口8000上，并且在终端Windows中看到如下输出：
```
正在监视文件变化使用 StatReloader
执行系统检查...

系统 检查 未发现 问题 (0  已静音).2023年
6月 13日 - 18:38:07 使用
 Django 版本 4.2.2, 配置 'web_project.settings' 开始
 开发 服务器 在 http://127.0.0.1:8000/ 退出
 服务器 使用 CTRL-BREAK.
```
Django的内置网络服务器仅用于本地开发目的。然而，当您部署到一个网络主机时，Django使用主机的网络服务器。 wsgi.py和asgi.pyDjango 项目中的模块负责与生产服务器进行集成。

如果您想使用不同于默认8000的端口，请在命令行中指定端口号，例如python manage.py 运行服务器 5000输入：.
按住Ctrl并点击 http://127.0.0.1:8000/在终端输出Windows中输入URL以打开默认浏览器到该地址。如果Django安装正确且项目有效，您将看到如下所示的默认页面。VS Code终端输出Windows也显示服务器日志。
完成后，关闭浏览器Windows，并在 VS Code 终端输出Windows中使用 Ctrl+C 停止服务器。

创建一个Django应用

在 VS Code 终端中激活虚拟环境后，运行管理工具的开始应用在你的项目文件夹中输入命令 (在哪里)管理.py居住:
```
Python manage.py startapp 你好
```
该命令创建一个名为的文件夹你好包含多个代码文件和一个子文件夹。其中，你经常使用的views.py（包含定义您网页应用页面的函数）和models.py（包含定义您的数据对象的类）。The迁移文件夹是Django的管理工具用来管理数据库版本的，这将在本教程稍后讨论。还有文件apps.py（应用配置）admin.py (用于创建一个管理界面)，以及tests.py (用于创建测试), 这里没有涵盖。

修改你好/视图.py为了匹配以下代码，该代码为应用主页创建了一个单一视图：

从 django.http 导入 HttpResponse

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

创建一个文件，你好/urls.py，包含以下内容。urls.py文件是您指定模式以将不同的URL路由到其相应视图的地方。下面的代码包含一个将应用根URL映射的路由") 到视图.主页你刚刚添加到中的函数你好/视图.py输入：
```
从 django.urls 导入 path
从 hello 导入 views

urlpatterns = [
    path("", views.home, name="home"),
]
```
该网页项目文件夹还包含一个urls.py文件，这是实际处理URL路由的地方。打开web_project/urls.py并修改它以匹配以下代码（如果你愿意，可以保留说明性注释）。这段代码拉取了应用程序的你好/urls.py使用django.urls.include这将确保应用程序的路由包含在应用程序内。当项目包含多个应用程序时，这种分离是有帮助的。
```
从 django.contrib 导入 admin
从 django.urls 导入 include, path

urlpatterns = [
    path("", include("hello.urls")),
    path('admin/', admin.site.urls)
]
```
保存所有修改过的文件。
在 VS Code 终端中，再次激活虚拟环境，运行开发服务器python manage.py 运行服务器并打开浏览器到 http://127.0.0.1:8000/要看到一个渲染“Hello, Django”的页面。

创建调试器启动配置文件

你可能已经在考虑是否有更简单的方法来运行服务器并测试应用程序，而无需输入python manage.py 运行服务器每次。幸运的是，有办法！你可以在 VS Code 中创建一个自定义的启动配置文件，这个配置文件也用于不可避免的调试练习。

切换到运行视图在VS Code中（使用左侧活动栏或F5）。您可能会看到消息“要自定义运行和调试，请创建一个launch.json文件”。这意味着您还没有launch.json 包含调试配置的文件。如果你点击 创建 launch.json 文件 链接，VS Code 可以为你创建该文件：
选择该链接，VS Code将提示您选择调试配置。选择Django，VS Code将填充一个新的launch.json文件包含一个Django运行配置。launch.json文件包含多个调试配置，每个配置都是JSON对象中的一个。配置数组。

向下滚动并检查名为“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 运行"${workspaceFolder}/manage.py"使用选定的Python解释器和参数参数列表。使用此配置启动 VS Code 调试器，然后，等同于运行python manage.py 运行服务器在 VS Code 终端中激活你的虚拟环境。(你可以添加一个端口号，例如"5000"至参数如果需要的话。) The"django": 真entry 还告诉 VS Code 启用 Django 页面模板的调试，这在本教程的稍后部分会看到。

通过选择运行 > 开始调试 菜单命令，或选择列表旁边的绿色开始调试箭头（F5）来测试配置：
按住Ctrl并点击 http://127.0.0.1:8000/在终端输出Windows中复制URL以打开浏览器并查看应用程序是否正常运行。
完成工作后关闭浏览器并停止调试器。要停止调试器，请使用工具栏上的停止按钮（红色方块）或运行 > 停止调试命令（⇧F5（Windows, Linux Shift+F5））。
你现在可以随时使用运行 > 开始调试来测试应用程序，这还有一个好处，那就是会自动保存所有修改过的文件。

探索调试器

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

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

在你好/urls.py, 添加一条到的路线urlpatterns列表:
```
路径("你好/<名字>", 视图.你好, 名字="你好"),
```
第一个参数到路径 定义了一条路由 "hello/"，该路由接受一个名为 name 的可变字符串。该字符串传递给 视图.你好_在那里函数在第二个参数中指定为路径输入：.

URL 路由是区分大小写的。例如，路由/你好/<名字>与是不同的/你好/<名字>如果你希望同一个视图函数处理两者，为每种变体定义路径。

替换内容views.py使用以下代码定义你好_在那里调试器中可以逐行执行的函数：

导入 re
从 django.utils.timezone 导入 datetime
从 django.http 导入 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 = "你好，" + clean_name + "！现在是" + formatted_now
    return HttpResponse(content)

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

在代码的第一行设置断点你好_在那里函数 (now = datetime.now()) 通过执行以下操作之一：
- 将光标置于该行，按F9，或，
- 将光标置于该行，选择运行 > 切换断点 菜单命令，或者，
- 直接点击行号左侧的空白处（悬停在那里时会显示一个淡红色的点）。
断点显示为左边缘中的红色圆点：
通过选择运行 > 开始调试 菜单命令，或选择列表旁边的绿色 开始调试 箭头（F5）来启动调试器：

观察状态栏颜色变化以表示正在调试：

在 VS Code 中也会出现一个调试工具栏（如下所示），其中包含以下顺序的命令：暂停（或继续，F5），单步跳过（F10），单步进入（F11），单步退出（⇧F11（Windows, Linux Shift+F11）），重新启动（⇧⌘F5（Windows, Linux Ctrl+Shift+F5）），和停止（⇧F5（Windows, Linux Shift+F5））。参见VS Code 调试以了解每个命令的描述。
输出显示在“Python 调试控制台”终端中。打开浏览器并导航到http://127.0.0.1:8000/hello/VSCode在页面渲染之前，VS Code 在你设置的断点处暂停程序。断点上的小黄色箭头表示这是要运行的下一行代码。
使用单步执行运行now = datetime.now()声明。
在 VS Code Windows的左侧，您会看到一个变量面板，显示局部变量，例如现在，以及论据，例如名字在下面的是 Watch、调用堆栈 和断点的面板（详见 VS Code 调试）。在 局部变量 部分，尝试展开不同的值。你还可以双击值（或使用回车键（Windows, Linux F2））来修改它们。更改变量，例如 现在然而，这可能会破坏程序。开发人员通常只会在代码一开始没有产生正确值时更改代码，以修正错误的值。
当程序暂停时，调试控制台面板（与终端面板中的“Python 调试控制台”不同）允许您使用当前程序状态来试验表达式并尝试代码片段。例如，一旦你已经跳过了一行now = datetime.now()，您可能会尝试不同的日期/时间格式。在编辑器中，选择读取代码now.strftime("%A, %d %B, %Y at %X")，然后右键单击并选择调试：评估将该代码发送到调试控制台，在那里运行：
```
now.strftime("%A, %d %B, %Y at %X")
'星期五, 2018年9月7日 07:46:32'
```
提示： 调试控制台 还显示可能不会在终端中出现的来自应用程序内部的异常。例如，如果您在 调用堆栈 区域中看到一条"已暂停在异常上"消息，请切换到 运行和调试 视图中的 调试控制台 查看异常消息。

将该行复制到调试控制台底部的 > 提示符处，并尝试更改格式：

now.strftime("%A, %d %B, %Y at %X")
'星期二, 2023年6月13日 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'

再逐步执行几行代码，如果你愿意的话，然后选择继续 (F5) 让程序运行。浏览器Windows显示结果：
更改代码中的行以使用不同的日期时间格式，例如now.strftime("%a, %d %b, %y at %X")，然后保存文件。Django服务器将自动重新加载，这意味着更改将被应用，而无需重启调试器。在浏览器中刷新页面以查看更新。
完成工作后关闭浏览器并停止调试器。要停止调试器，请使用工具栏上的停止按钮（红色方块）或运行 > 停止调试命令（⇧F5（Windows, Linux Shift+F5））。

小贴士：为了更容易地重复导航到特定的 URL，例如 http://127.0.0.1:8000/hello/VSCode，输出该网址使用一个打印声明在类似文件的某个地方views.py该网址出现在VS Code终端中，您可以使用Ctrl+点击在浏览器中打开它。

转到“定义”和“查看定义”命令

在使用Django或其他任何库时，您可能希望查看这些库中的代码。VS Code 提供了两个方便的命令，可以将光标直接导航到任何代码中类和其他对象的定义：

转到定义 从你的代码跳转到定义一个对象的代码。例如，在 views.py，右键单击HttpResponse在主页 函数和选择 转到定义 （或使用 F12），导航到Django库中的类定义。
查看定义 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)，也可以在右键点击的上下文菜单中找到)，与之类似，但在编辑器中直接显示类定义（使编辑器Windows留出空间，避免遮挡任何代码）。按Escape关闭查看Windows或使用右上角的x。

使用模板渲染页面

到目前为止，你在这个教程中创建的应用仅从Python代码生成纯文本网页。虽然可以在代码中直接生成HTML，但开发人员避免这样做，因为这会使得应用容易受到跨站脚本（XSS）攻击。在你好_在那里这个教程的功能，例如，人们可能会想到用类似的东西来格式化代码中的输出内容 = "<h1>你好，" + clean_name + "！</h1>"，其中结果在内容直接传递给浏览器。这个开口允许攻击者将恶意HTML，包括JavaScript代码，插入到最终出现在URL中。清理后的名称因此，它最终会在浏览器中运行。

一个更好的做法是完全避免在代码中使用HTML，通过使用模板，这样你的代码只关心数据值，而不关心渲染。

在Django中，模板是一个HTML文件，其中包含代码在运行时提供的值的占位符。Django的模板引擎在渲染页面时负责进行替换，并提供自动转义以防止XSS攻击（也就是说，如果你尝试在数据值中使用HTML，你将看到HTML以纯文本形式呈现）。因此，代码只关心数据值，模板只关心标记。Django模板提供了灵活的选项，例如模板继承，允许你定义一个带有常见标记的基本页面，然后在此基础上添加特定页面的扩展。

在本节中，您首先使用模板创建一个页面。在后续章节中，您将配置应用程序以提供静态文件，然后为应用程序创建多个页面，每个页面都包含来自基础模板的导航栏。Django 模板还支持控制流和迭代，如本教程稍后在模板调试上下文中所示。

在web_project/settings.py文件，找到已安装的应用程序将以下条目列出并添加，以确保项目知道有关应用程序的信息，从而能够处理模板：
```
'你好',
```
在...里面你好文件夹，创建一个名为的文件夹模板，然后另一个子文件夹名为你好以匹配应用程序名称（这种两层文件结构是典型的Django约定）。
在模板/你好文件夹，创建一个名为的文件你好_在那里.html包含以下内容。该模板包含两个用于数据值的占位符，分别名为“name”和“date”，它们由一对花括号分隔。输入：{{和}}所有其他不变文本都是模板的一部分，同时还有格式标记（例如). 如你所见，模板占位符也可以包含格式，管道之后的表达式输入：| 符号，在这种情况下使用Django的内置日期过滤器和时间过滤器。然后代码只需传递 datetime 值，而不是预格式化的字符串：
```
<!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>
```
在顶部views.py，请添加以下导入语句：
```
从 django.shortcuts 导入 render
```
同样在views.py修改你好_在那里函数使用django.shortcuts.render 加载模板的方法并提供 模板上下文。上下文是模板中使用的变量集合。 渲染 函数接受请求对象，接着是模板的路径 相对于 模板 文件夹，然后是上下文对象。（开发人员通常将模板命名为与使用它们的函数相同，但不需要匹配的名称，因为您始终在代码中引用确切的文件名。）
```
def hello_there(request, name):
    print(request.build_absolute_uri()) #可选
    return render(
        request,
        'hello/hello_there.html',
        {
            'name': name,
            'date': datetime.now()
        }
    )
```
你可以看到，现在的代码要简单得多，只关心数据值，因为标记和格式都包含在模板中。
启动程序（在调试器内或外，使用⌃F5（Windows, Linux Ctrl+F5）），导航到一个 /hello/name URL，并观察结果。
也可以尝试使用像这样的名称导航到 /hello/name URL查看Django的自动转义功能。"name"值在浏览器中显示为纯文本，而不是渲染实际的元素。

提供静态文件

静态文件是您的网络应用程序针对某些请求原样返回的内容，例如CSS文件。提供静态文件需要已安装的应用程序列表中settings.py包含django.contrib.staticfiles，这是默认包含的。

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

切换到生产环境时，请导航到settings.py，设置调试 = False，和改变ALLOWED_HOSTS = ['*'] 允许特定主机。这在使用容器时可能会导致额外的工作。详情请参见问题 13。

准备应用程序以供静态文件使用

在项目中web_project/urls.py，添加以下内容导入声明：

从 django.contrib.staticfiles.urls 导入 staticfiles_urlpatterns

在同一个文件中，在末尾添加以下行，将标准静态文件URL添加到项目识别的列表中：
```
urlpatterns += staticfiles_urlpatterns()
```

在模板中引用静态文件

在你好文件夹，创建一个名为的文件夹静态输入：.
在静态文件夹，创建一个名为的子文件夹你好, 匹配应用名称。

创建这个额外子文件夹的原因是，当您将Django项目部署到生产服务器时，您将所有的静态文件收集到一个单独的文件夹中，然后由专用的静态文件服务器提供服务。静态/你好子文件夹确保当应用程序的静态文件被收集时，它们位于一个特定于应用程序的子文件夹中，不会与同一项目中的其他应用程序的文件发生冲突。
在静态/你好文件夹，创建一个名为的文件site.css包含以下内容。输入此代码后，还请观察 VS Code 为 CSS 文件提供的语法高亮，包括颜色预览。
```
.message {
    font-weight: 600;
    color: 蓝色;
}
```
在模板/你好/你好.html, 在以下位置添加以下几行<标题>元素。{% 载入静态 %}tag 是一个自定义的 Django 模板标签集，允许你使用{% 静态 %}像样式表一样引用文件。
```
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />
```

同样在模板/你好/你好.html, 更换内容<body>元素使用以下标记消息样式而不是一个标签:

<span class="message">你好，{{ name }}！</span> 现在是{{ date | date:'l, d F, Y' }}，{{ date | time:'H:i:s' }}。

运行应用程序，导航到 /hello/name URL，并观察消息以蓝色显示。完成后停止应用程序。

使用 collectstatic 命令

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

在web_project/settings.py, 添加以下定义静态文件收集位置的行，当您使用收集静态文件命令:
```
STATIC_ROOT = BASE_DIR / 'static_collected'
```
在终端中，运行命令python manage.py collectstatic并观察到你好/site.css被复制到顶层静态收集文件夹 alongside管理.py输入：.
在实践中，运行收集静态文件每次更改静态文件并在部署到生产环境之前。

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

因为大多数网页应用程序都有不止一个页面，并且这些页面通常共享许多共同元素，开发人员将这些共同元素分离到一个基础页面模板中，其他页面模板然后扩展它。（这也称为模板继承，意味着扩展页面继承自基础页面的元素。）

此外，因为你可能会创建许多使用相同模板的页面，所以创建一个 VS Code 代码片段，可以快速初始化新的页面模板，这很有帮助。片段可以帮助你避免繁琐且容易出错的复制粘贴操作。

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

创建一个基础页面模板和样式

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

以下步骤演示了创建一个基础模板。

在模板/你好文件夹，创建一个名为的文件布局.html包含以下内容，其中包含名为“title”和“content”的块。如你所见，标记定义了一个简单的导航栏结构，链接到主页、关于我们和联系页面，这些页面你在后续部分创建。注意使用Django的{% 路由 %}标签通过对应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 class="body-content">
    {% block content %}
    {% endblock %}
    <hr/>
    <footer>
        <p>© 2018</p>
    </footer>
</div>
</body>
</html>

添加以下样式到静态/你好/网站.css在现有的“消息”样式下方，并保存文件。（本指南不试图演示响应式设计；这些样式只是生成一个相当有趣的成果。）

.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;
}

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

创建代码片段

因为你在下一节中创建的三个页面延伸布局.html，创建一个代码片段来初始化一个新的模板文件，并适当引用基础模板可以节省时间。代码片段提供了一致的代码片段，来源于单一的代码来源，这避免了在使用现有代码的复制粘贴时可能会出现的错误。

在 VS Code 中，选择文件（Windows/Linux）或 Code（macOS），菜单，然后选择 首选项 > 用户片段。
在出现的列表中，选择html。（如果之前你创建过片段，该选项可能会显示为"html.json"在现有片段列表部分。）

VS Code打开后html.json在现有的花括号内添加以下代码。(此处未显示的解释性注释描述了如何等详细信息。)$0线表示 VS Code 在插入片段后将光标放置的位置):

"Django 教程：模板扩展 layout.html": {
    "前缀": "djextlayout",
    "主体": [
        "{% extends \"hello/layout.html\" %}",
        "{% block title %}",
        "$0",
        "{% endblock %}",
        "{% block content %}",
        "{% endblock %}"
    ],

    "description": "继承 layout.html 的标准模板"
},

保存html.json 文件 (⌘S (Windows, Linux Ctrl+S)).
现在，每当您开始输入片段的前缀时，例如DJExtVS Code 会在下个部分中显示为自动完成选项。你也可以使用插入片段命令从菜单中选择片段。

有关代码片段的一般信息，请参阅创建片段.

使用代码片段添加页面

有了代码片段，您可以快速创建主页、关于我们和联系我们页面的模板。

在模板/你好文件夹，创建一个名为的新文件home.html，然后开始输入DJExt要查看片段作为完成出现：

当您选择完成时，片段的代码会显示，并且光标位于片段的插入点：
在“标题”块的插入点处，填写主页, 并且在"内容"块中，写入<p>Visual Studio Code Django 教程的主页。</p>，然后保存文件。这些行是扩展页面模板的唯一独特部分：
在模板/你好文件夹，创建about.html使用片段插入模板标记，插入关于我们和关于Visual Studio Code Django教程的页面。在“title”和“content”块中，分别输入标题和内容，然后保存文件。
重复上一步来创建templates/hello/contact.html使用联系我们和联系页面用于Visual Studio Code Django教程。输入：.
在应用程序中urls.py添加 /about 和 /contact 页面的路由。请记住名字参数到路径函数定义了您在中引用该页面的名称{% 路由 %}模板中的标签。
```
路径("关于/", 视图.关于, 名称="关于"),
路径("联系/", 视图.联系, 名称="联系"),
```

在views.py添加 /about 和 /contact 路由的函数，使其引用各自页面模板。同时修改主页函数使用home.html模板。

# 用下面的函数替换现有的 home 函数
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 教程：应用从基础模板渲染一个通用的导航栏

处理数据、数据模型和迁移

许多网络应用程序与存储在数据库中的信息一起工作，Django 使得使用模型来表示数据库中的对象变得简单。在 Django 中，模型是一个继承自 django.db.models.Model, 代表一个特定的数据库对象，通常是表。将这些类放置在应用程序的models.py文件。

使用Django，你几乎完全通过在代码中定义的模型来与数据库进行交互。Django的“migrations”会自动处理底层数据库的所有细节，当你随时间推移更改模型时。一般工作流程如下：

对你的模型进行更改models.py文件。
执行python manage.py makemigrations生成脚本迁移将数据库从其当前状态迁移到新状态的文件夹。
执行python manage.py migrate应用脚本到实际数据库。

迁移脚本有效地记录了您在时间上对数据模型所做的一切增量更改。通过应用这些迁移，Django会更新数据库以匹配您的模型。由于每个增量更改都有自己的脚本，Django可以自动迁移任何以前版本的数据库（包括一个新数据库）到当前版本。因此，您只需关注您的模型在models.py，绝不要与底层数据库模式或迁移脚本一起进行。你让Django来处理那部分！

在代码中，您也仅需与模型类进行交互来存储和检索数据；Django 处理底层细节。唯一例外是您可以使用 Django 管理工具将数据写入数据库，命令是 loaddata。该工具通常用于在之后初始化数据集。迁移命令已初始化模式。

当使用db.sqlite3 文件，你也可以使用工具如 SQLite浏览器直接与数据库进行交互。使用这种工具添加或删除表中的记录是可以的，但避免对数据库模式进行更改，因为这将使数据库与应用的模型不同步。相反，更改模型，运行 创建迁移，然后运行迁移输入：.

数据库类型

默认情况下，Django 包括一个db.sqlite3 适用于开发工作的应用程序数据库文件。如何时使用SQLite (sqlite.org) 所述，SQLite适用于每天少于10万次请求的低到中等流量网站，但不推荐用于更高流量。它还局限于单台计算机，因此不能用于任何多服务器场景，例如负载均衡和地理冗余。

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

定义模型

Django 模型再次是一个从 Python 类继承的类django.db模型，你将其放置在应用程序的models.py文件。在数据库中，每个模型都会自动生成一个唯一ID字段，命名为id所有其他字段都使用来自的类型作为类的属性定义django.db.models例如字符字段（有限文本）文本字段（无限文本）电子邮件字段，URL字段，整数字段，十进制字段，布尔字段。日期时间字段，外键，和多对多，等等。（详见 Django 文档中的 Model 字段参考了解详情。）

每个字段需要一些属性，例如最大长度。空白=True属性表示该字段是可选的；null=true表示该值是可选的。还有 选择将值限制在数据值/显示值元组数组中的值的属性。

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

从 django.db 导入 models
从 django.utils 导入 timezone

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

    def __str__(self):
        """返回消息的字符串表示形式。"""
        date = timezone.localtime(self.log_date)
        return f"'{self.message}' 登记于 {date.strftime('%A, %d %B, %Y at %X')}"

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

迁移数据库

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

python manage.py 创建迁移
python manage.py 迁移

看看迁移文件夹以查看脚本创建迁移生成。你也可以查看数据库本身，以确认模式已更新。

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

通过模型使用数据库

当你的模型就位并将数据库迁移后，你可以只使用你的模型来存储和检索数据。在本节中，你将通过添加一个表单页面来实现这个功能，通过该页面可以记录一条消息。然后，你将修改主页以显示这些消息。由于你将在此处修改许多代码文件，请注意细节。

在你好文件夹（你有views.py)，创建一个名为的新文件forms.py使用以下代码，定义了一个Django表单，该表单包含一个从数据模型中提取的字段，日志消息输入：

从 django 导入 forms
从 hello.models 导入 LogMessage

类 LogMessageForm(forms.ModelForm):
    类 Meta:
        model = LogMessage
        fields = ("message",)   # 注意: 尾随逗号是必需的

在模板/你好文件夹，创建一个名为的新模板log_message.html包含以下内容，假设模板被赋予一个名为的变量表格定义表单的主体。然后添加一个带有标签“Log”的提交按钮。
```
{% extends "hello/layout.html" %}
{% block title %}
    记录一条消息
{% endblock %}
{% block content %}
    <form method="POST" class="log-form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default">记录</button>
    </form>
{% endblock %}
```
注意：Django的{% csrf_token %} 标签提供防止跨站请求伪造的保护。详情请参阅跨站请求伪造保护在 Django 文档中。
在应用程序中静态/你好/网站.css文件，添加一条规则使输入表单更宽：
```
输入[名称=消息] {
    宽度: 80%;
}
```
在应用程序中urls.py文件，为新页面添加路由：
```
路径("log/", 观看.日志消息, 名称="日志"),
```

在views.py定义名为的视图日志消息（如通过URL路由引用）。这个视图处理HTTP GET和POST两种情况。在GET情况下（否则:在section)中，它只是显示你在前面步骤中定义的表单。在POST情况下，它将表单中的数据检索到一个数据对象中 (消息) 设置时间戳，然后保存该对象，此时将其写入数据库：

# 在文件顶部现有的导入语句中添加这些内容：
从 django.shortcuts 导入 redirect
从 hello.forms 导入 LogMessageForm
从 hello.models 导入 LogMessage

# 在文件的其他地方添加此代码：
def log_message(request):
    form = LogMessageForm(request.POST or None)

```python
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})
```

再走一步你就可以尝试一切了！在templates/hello/layout.html在 "navbar" div 中添加一个链接到消息记录页面：
```

<a href="{% url 'log' %}" class="navbar-item">记录消息</a>
```
运行应用程序并在浏览器中打开主页。选择导航栏上的日志消息链接，应该显示日志消息页面：
输入一条消息，选择日志，你应该会被带回主页。主页目前还没有显示任何日志消息（你很快就会解决这个问题）。可以随意再记录几条消息。如果你想，可以使用SQLite Browser等工具查看数据库，确认记录已被创建。以只读方式打开数据库，或者在使用应用程序之前记得关闭数据库，否则应用程序将失败，因为数据库已锁定。
完成后停止应用程序。

现在修改主页以显示已记录的消息。首先将app的内容替换模板/你好/主页.html文件包含以下标记。此模板期望一个名为的上下文变量消息列表如果它收到一个（通过检查{% if message_list %}标签)，然后遍历该列表（the{% for message in message_list %}标签) 生成每条消息的表格行。否则，页面会显示还没有记录任何消息。

{% extends "hello/layout.html" %}
{% block title %}
    首页
{% endblock %}
{% block content %}
    <h2>已记录的消息</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>没有记录任何消息。使用<a href="{% url 'log' %}">记录消息表单</a>.</p>
    {% endif %}
{% endblock %}

在静态/你好/网站.css，添加一条规则来稍微格式化一下表格：

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

在views.py, 导入Django的通用列表视图类，我们将使用它来实现主页：
```
从 django.views.generic 导入 ListView
```

同样在views.py, 更换主页 函数具有一个类命名为 主页列表视图，源自列表视图, 与之联系日志消息模型并实现了一个功能获取上下文数据生成模板的上下文。

# 如果您愿意，可以删除旧的 home 函数；它不再使用

类 HomeListView(ListView):
    """渲染主页，显示所有消息的列表。”""
    model = LogMessage

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

在应用程序中urls.py导入数据模型：
```
从 hello.models 导入 LogMessage
```

同样在urls.py创建一个变量用于新的视图，该视图检索最近的五个日志消息对象按降序排列（意味着它查询数据库），然后在模板上下文中提供数据的名称消息列表)，并确定要使用的模板：

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",
)

在urls.py修改主页路径以使用主页列表视图变量:

    # 替换现有的路径为 ""
    path("", home_list_view, name="home"),

启动应用程序并打开浏览器到主页，主页现在应该显示消息：
完成后停止应用程序。

使用页面模板的调试器

如前一节所示，页面模板可以包含过程指令，例如{% for message in message_list %}和{% if message_list %}, 而不是只有被动的、 declarative 元素{% 路由 %}和{% 块 %}结果，您可以在模板中出现编程错误，就像在任何其他过程代码中一样。

幸运的是，VS Code 的 Python 扩展在你有...时提供了模板调试"django": 真在调试配置中（如你已经做的那样）。以下步骤演示了这一功能：

在模板/你好/主页.html, 在两者上设置断点{% if message_list %}和{% for message in message_list %}如下面图片中黄色箭头所示的线条：
在调试器中运行应用程序，并在浏览器中打开主页。(如果你已经运行了调试器，在设置断点后不需要重新启动应用程序；只需刷新页面。) 观察到 VS Code 在模板上中断到调试器。{% if %} 语句并显示变量 Windows中的所有上下文变量：
使用“单步跳过”命令（F10）来逐步执行模板代码。请注意，调试器跳过所有声明语句，并在任何过程代码处暂停。例如，逐步执行{% for message in message_list %}循环让你可以检查每个值消息并让你跳转到类似这样的行<td>{{ message.log_date | date:'d M Y' }}</td>输入：.
你也可以在调试控制台面板中与变量一起工作。（Django过滤器如日期然而，目前在控制台中无法使用。
当你准备好了，选择继续 (F5) 完成应用程序的运行，并在浏览器中查看渲染的页面。完成后停止调试器。

可选活动

以下各节描述了在使用Python和Visual Studio Code时，您可能发现有用的额外步骤。

创建一个环境的 requirements.txt 文件

当您通过源代码控制或其他方式共享应用程序代码时，没有必要在虚拟环境中复制所有文件，因为接收者总是可以自己重新创建该环境。

因此，开发人员通常将虚拟环境文件夹从源代码控制中省略，并而是使用一个来描述应用程序的依赖项。要求.txt文件。

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

使用Python: 选择解释器命令选择您想要的环境后，运行终端: 创建新终端命令（⌃⇧`（Windows, Linux Ctrl+Shift+`））以打开一个已激活该环境的终端。
在终端中，运行pip freeze > requirements.txt创建要求.txt将文件放入项目文件夹。

任何（或任何构建服务器）接收项目副本的人都只需要运行pip install -r requirements.txt在活动环境中重新安装应用程序所依赖的软件包的命令。

注意：pip冻结 列出在当前环境中安装的所有Python包，包括您当前未使用的包。该命令还列出具有确切版本号的包，您可能希望将其转换为范围，以便在未来具有更多灵活性。有关更多信息，请参见需求文件在pip命令文档中。

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

默认情况下，Django为受身份验证保护的网络应用程序提供了一个管理界面。该界面是通过内置的实现的django.contrib.admin应用程序，该应用程序默认包含在项目中已安装的应用程序列表 (settings.py)，并且身份验证是通过内置的进行处理的django.contrib.auth应用程序，它也处于已安装的应用程序默认情况下。

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

在 VS Code 中为你的虚拟环境打开一个 Terminal，然后运行命令以在应用中创建一个超级用户账户python manage.py createsuperuser --用户名=<用户名> --邮箱=<邮箱>, 替换<用户名>和<电子邮件>，当然，会使用您的个人信息。当您运行该命令时，Django 会提示您输入并确认您的密码。

请务必记住您的用户名和密码组合。这些是您用来验证应用程序的凭证。
在项目级别添加以下URL路由urls.py输入：web_project/urls.py在这个教程中) 指向内置的管理界面:
```
# 在创建应用程序时，此路径默认包含
 path("admin/", admin.site.urls),
```
运行服务器，然后在浏览器中打开应用的 /admin 页面（例如http://127.0.0.1:8000/admin当使用开发服务器时)。
出现了一个登录页面，由...提供django.contrib.auth输入你的超级用户凭证。
一旦你被验证，你将看到默认的管理页面，通过它可以管理用户和组：

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

使用 Container Tools 扩展为 Django 应用程序创建一个容器

该容器工具扩展使从Visual Studio Code构建、管理和部署容器化应用程序变得简单。如果您有兴趣了解如何为本教程中开发的Django应用程序创建Python容器，请查看容器中的Python教程，该教程将引导您完成如何：

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

下一步

恭喜您完成了在Visual Studio Code中使用Django的指南！

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

在这个教程中，我们只是触及了Django能做的一切的表面。请务必访问Django文档和官方Django教程，以获取更多关于视图、模板、数据模型、URL路由、管理界面、使用其他类型的数据库、生产部署等的详细信息。

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

您可能还希望查看 VS Code 文档中与 Python 相关的以下文章：