PyCharm 教程 | 在 PyCharm 中创建 Django 应用

Django 的核心思想是让开发者快速构建应用程序。掌握这个框架后，从概念到可以投入生产的 Web 应用程序的路径将大幅缩短。但是，如果您还想更快，可以学习在 PyCharm 中创建 Django 应用。

本教程将通过一系列步骤指导您创建一个简单的 Django 应用程序，显示所在位置的当前气温。为了增加互动性，这款应用还可供浏览其他随机位置的天气状况。

在本教程中，您将学习如何：

• 在 PyCharm 中创建 Django 项目。

• 编写模型、视图和模板。

• 进行 API 调用并处理响应。

• 连接到数据库并使用数据填充。

克隆仓库即可获取完整的应用程序代码。要了解有关克隆的信息，请参阅 PyCharm 文档。

前提

本教程适合已经有数年 Python 经验的开发者。因此，我们假设您的电脑上已经安装了 Python。如果不是这样，也别担心！开始在 PyCharm 中创建第一个项目时，您可以下载并安装需要的 Python 版本。

对 Django 的支持是一项专业功能，因此您需要 PyCharm Professional。新用户有 30 天的免费试用期，如果您是学生或教师，可以申请免费教育许可证。本教程基于已启用新 UI 的 PyCharm 2023.1。

有关不同操作系统的更多信息和安装说明，请参阅 PyCharm 文档。

开始构建应用

我们先迈出第一步。步骤不多，最后，您将得到一个基础应用。

在 PyCharm 中创建 Django 项目

要创建项目，首先启动 PyCharm 并点击 New Project（新建项目）。如果 PyCharm 已经在运行，可以从主菜单中选择 File | New Project（文件 | 新建项目）。

在打开的 New Project（新建项目）窗口中，指定以下信息：

1. 选择 Django 作为项目类型。

2. 输入项目所在目录的名称。这也将用作项目名称。

3. 为新 Django 项目创建虚拟环境，PyCharm 将在其中安装依赖项。在本教程中，我们将选择 virtualenv 选项。

4. PyCharm 可以立即在项目中创建 Django 应用程序。务必在这里为应用程序命名。

准备好后，点击 Create（创建）。PyCharm 创建文件结构，并安装 Django 和其他需要的依赖项。

点击窗口顶部的 Run（运行）图标启动 Django 服务器：

这将打开 Run（运行）工具窗口。点击链接打开浏览器窗口：

在 PyCharm 中启动 Django 服务器只需要几分钟的时间。这是一个好的开始，但最好的还在前面。

编写首个视图

现在，开始创建应用程序逻辑。在 Django 中，在 views.py 中编写类或函数。

您可以随时点击 PyCharm 窗口左上角的文件夹图标，也可以按 ⌘1 / Alt+1 来探索项目的结构：

本教程包含可以节省大量时间的快捷键，例如按两次 ⇧ (Shift) 键可以打开 Search Everywhere（随处搜索）窗口。这个快捷键可以找到任何内容，包括项目文件、设置和操作。

我们用它来快速打开 views.py。

输入 views，将光标移动到 meteo 处的 views.py，然后按 Enter：

带有 views.py 的编辑器标签页随即打开。我们先编写一个temp_here函数，它将返回我们位置的当前温度。 

在编辑器中粘贴以下代码：

import requests


def temp_here():
    location = geocoder.ip('me').latlng
    endpoint = "https://api.open-meteo.com/v1/forecast"
    api_request = f"{endpoint}?latitude={location[0]}&longitude={location[1]}&hourly=temperature_2m"
    return requests.get(api_request).json()

这里发生了什么？首先，导入 API 调用所需的requests库。如果 import 语句中有红色波浪线，则表示软件包在所选 Python 解释器中不可用。

将光标悬停在它上面，选择 Install package requests（安装软件包请求）。

为了获取当前温度，temp_here会调用 Weather Forecast API。这是一个不需要 API 密钥的免费 API。我们只需要知道端点 (https://api.open-meteo.com/v1/forecast) 和坐标。对于后者，我们将使用 Geocoder – 这是一个非常简单的 Python 库，可供检索不同位置的坐标。

将文本光标放在以红色波浪线高亮显示的geocoder上，然后按 ⌥Enter / Alt+Enter 查看可用的快速修复。选择 Install and import package ‘geocoder’（安装并导入软件包 ‘geocoder’）：

PyCharm 会安装软件包并将 import 语句添加到文件的开头。

那么，如何发出测试请求来确保一切按预期工作？最简单的方式是在 Python 控制台中调用函数。

我们来使用另一个节省时间的方式 – Find action（查找操作）。不用在菜单中滑动鼠标，也不用背下几十个快捷键，只需按 ⇧⌘A / Ctrl+Shift+A，然后搜索 Run File in Python Console（在 Python 控制台中运行文件）。

您不需要打出整个单词。使用 rufipy 这样的词也会得到想要的结果：

运行命令时，PyCharm 会将 import 和函数定义加载到控制台中。现在，调用temp_here。按 Tab 键可以补全代码：

检查来自控制台输出的 API 响应。这个字符串很长，但下面有说明性表示。

如果要探索响应，可以遵循以下步骤：

1. 点击 3 次控制台输出，然后按 ⌘C / Ctrl+C 将其复制到剪贴板。

2. 按 ⇧⌘N / Ctrl+Alt+Shift+Insert 创建临时文件，然后选择 JSON 文件类型（输入 js… 即可）。

3. 粘贴响应并应用 Reformat Code（重新格式化代码）操作。可以使用 Find action（查找操作）或按 ⌥⌘L / Ctrl+Alt+L。

所需信息位于temperature_2m键下的hourly元素中。此键指向一个值列表。

为了获取当前温度，我们必须将当前小时作为索引。例如，如果现在是 14:30，我们将使用列表的第 14 项。

看一下temp_here()['hourly']['temperature_2m'][14]是否提供了需要的信息。

根据当前时间替换 14，并在控制台中输入代码：

14.9 °C 是我们所在位置的当前温度。您那里呢？

修改函数，让它从 API 响应中提取当前温度：

def temp_here():
    location = geocoder.ip('me').latlng
    endpoint = "https://api.open-meteo.com/v1/forecast"
    api_request = f"{endpoint}?latitude={location[0]}&longitude={location[1]}&hourly=temperature_2m"
    now = datetime.now()
    hour = now.hour
    meteo_data = requests.get(api_request).json()
    temp = meteo_data['hourly']['temperature_2m'][hour]
    return temp

记得导入datetime：

点击 Python 控制台工具栏左上角的 Rerun（重新运行），重新加载更新的函数定义，然后再次调用temp_here：

如果结果与更改temp_here函数代码之前的结果不同，那可能是因为 settings.py 中的TIME_ZONE值错误。 

有关详情，请参阅 Django 文档。

要快速访问此设置，首先按两次 ⇧ (Shift)，按几次 Tab 切换到 Symbols（符号），然后输入 time…。

接下来，将temp_here变成视图函数。要被 Django 识别为视图，函数必须接受 HttpRequest 对象作为其第一个形参，通常命名为request。它还应该返回 HttpResponse 对象。

以下是 views.py 的样子：

from datetime import datetime

import geocoder as geocoder
import requests
from django.http import HttpResponse


def temp_here(request):
    location = geocoder.ip('me').latlng
    endpoint = "https://api.open-meteo.com/v1/forecast"
    api_request = f"{endpoint}?latitude={location[0]}&longitude={location[1]}&hourly=temperature_2m"
    now = datetime.now()
    hour = now.hour
    meteo_data = requests.get(api_request).json()
    temp = meteo_data['hourly']['temperature_2m'][hour]
    return HttpResponse(f"Here it's {temp}")

如您所见，我们没有做太多更改：temp_here现在接受request作为实参并返回带有字符串的HttpResponse。

如果您偏好华氏度而不是摄氏度，这很容易实现，只需将temperature_unit形参添加到 API 请求：

api_request = f"{endpoint}?latitude={location[0]}&longitude={location[1]}&hourly=temperature_2m&temperature_unit=fahrenheit"

如果您更喜欢使用摄氏度，则跳过此修改。

配置 URL

更新 urls.py，配置从浏览器访问应用的方式。按两次 Shift，输入 urls，如上所述查找和打开。

将以下行添加到urlpatterns。使用 Reformat Code（重新格式化代码）操作 ⌥⌘L / Ctrl+Alt+L 可以在粘贴后轻松还原缩进：

path("", include('meteo.urls')),

不要忘记从django.urls.include导入include。

'meteo.urls'现在被标记为带有黄色波浪线的未解析引用，因为文件尚不存在。这将在后续步骤中得到修正。

Django 项目通常包含多个应用。即使目前并非如此，也要考虑项目的未来发展。因此，我们在对应文件夹中为每个应用程序创建 urls.py ，然后将它们全部添加到项目的 urls.py 中。

接下来，在 meteo 应用程序的文件夹中创建 urls.py。

在 Project（项目）工具窗口中右键点击 meteo 目录。

选择 New > Python File（新建 > Python 文件），输入 urls。

新创建的文件将打开。使用以下代码填充：

from django.urls import path
from . import views


urlpatterns = [
    path('meteo/', views.temp_here, name='temp_here'),
]

现在，当我们在浏览器中转到 /meteo 时，views.py 中的temp_here函数将被调用，浏览器将渲染函数返回的任何内容。

它上线了！

点击右上角的 Rerun（重新运行）按钮重新运行 Django 服务器并确认操作：

在浏览器中打开 http://127.0.0.1:8000/meteo/。您看到的内容应该类似于：

如果您不想在每次重新启动 Django 服务器时打开浏览器输入地址，或手动刷新页面，可以将 PyCharm 配置为代您完成这些操作。

打开 Run（运行）微件中的下拉菜单，选择 Edit configurations（编辑配置）：

在左窗格中选择项目的配置，启用 Run browser（运行浏览器）复选框，然后将meteo 添加到 url：

点击 OK（确定）应用更改。

基本上，应用已经可以运行了。但它在浏览器中不太好看，而且仍然没有“随机位置天气”功能。在接下来的步骤中，我们将引入模板并导入数据来解决这些问题。

改进体验

添加模板

我们回到 views.py，再次修改temp_here函数。如果您还在 meteo/urls.py 中，可以立即导航到那里。按住 ⌘ / Ctrl，将鼠标悬停在temp_here上，当它变成超链接时点击：

在 return 语句之前开始一个新行并输入“template = loader”。

按 ⌥Enter/ Alt+Enter 并使用快速修复从 django.template.loader 导入 loader：

然后，使用get_template()加载 index.html 作为模板：

    template = loader.get_template('index.html')

现在，将 return 语句替换为以下两行：

    context = {'temp': temp}
    return HttpResponse(template.render(context, request))

Index.html 以黄色波浪线高亮显示，因为它尚不存在。将光标悬停在它上面并选择 Create template index.html（创建模板 index.html）。

点击 OK（确定）。PyCharm 将创建 index.html 并打开它进行编辑。

文件现在为空。使用 Live Template（实时模板）填充模板 html 代码。输入html:5，按 Tab：

html 页面的可见内容位于<body></body>标记之间。 

在这里插入以下代码：

<h1>Temperature at your location:</h1>
<h2>{{ temp }} ℃</h2>

temp 是从视图传递给模板的变量。变量的名称和值应保存到字典中，并在渲染模板时传递。为此，我们将 {‘temp’ : temp} 赋给以上 views.py 中的上下文变量。 

摄氏度符号的 Unicode 表示是 &#8451。华氏度使用 &#8457。 

接下来，重新运行 Django 服务器查看更改，并确保应用按预期工作。如果您已按上述说明编辑了运行配置，浏览器窗口应自动打开：

创建数据库和模型

为了从 API 获取随机位置的温度数据，我们需要提供这些位置的坐标。

为此，使用 Juanma Hernández 在 CC BY 4.0 许可下提供的 World cities 数据库。下载数据库并从归档提取 worldcities.csv。如果您在 Kaggle 还没有帐户，则必须注册。

我们还需要将 Django 自动创建的 db.sqlite3 数据库添加到我们的 PyCharm 项目。

为此：

1. 点击右侧的数据库图标打开 Database（数据库）工具窗口。您也可以按 ⌘E / Ctrl+E 访问所有工具窗口：

2. 点击工具窗口左上角的 +，选择 Data Source > SQLite（数据源 > SQLite）。输入 sq… 可以更快地找到所需选项：

3. 点击 File（文件）字段旁边的 …，在项目文件夹中查找 db.sqlite3 文件。

4. 您可能需要安装、更新或切换数据库驱动程序。如果窗口底部出现警告，则点击链接执行所需操作：

5. 点击 OK（确定）。

为了将数据导入数据库，应在 Database（数据库）工具窗口中将 worldcities.csv 拖放到 db.sqlite3。在打开的对话框中，移除不必要的列，只保留 city、lat、lng、country 和 id：

现在，db.sqlite3 数据库包含 worldcities 表：

双击即可在编辑器中查看其内容。

Django 使用模型与数据库交互。创建一个模型来实现从 worldcities 表读取数据。

1. 按 ⌥R / Ctrl+Alt+R 启动 manage.py 任务控制台。 

2. 输入 inspectdb worldcities 并按 Enter。

3. 将Worldcities类从控制台输出复制到 meteomodels.py。

4. 将 id 字段的null=True替换为primary_key=True。

以下是它的样子：

from django.db import models


class Worldcities(models.Model):
    city = models.TextField(blank=True, null=True)
    lat = models.FloatField(blank=True, null=True)
    lng = models.FloatField(blank=True, null=True)
    country = models.TextField(blank=True, null=True)
    id = models.IntegerField(blank=True, primary_key=True)

    class Meta:
        managed = False
        db_table = 'worldcities'

添加功能

目前为止，我们在 views.py 中只有一个函数 (temp_here) 可以返回有关您所在位置当前温度的信息。我们再添加一个函数来显示随机位置的温度。它也需要从 API 获取当前温度数据，因此根据 Python 最佳做法，我们应该将该功能移动到单独的函数。

在 PyCharm 中，这可以通过 Extract method（提取方法）重构轻松完成。

选择应移至单独函数的行，然后按 ⌥⌘M / Ctrl+Alt+M。或者，使用 Find Action（查找操作）：

在 Method name（方法名称）字段中指定get_temp，然后点击 OK（确定）。我们现在有了接受location作为唯一形参的get_temp函数。

temp_here函数调用它来接收当前位置的温度。

我们来创建temp_somewhere函数。它应该将随机城市的坐标传递给get_temp。

首先，在 Python 控制台中进行一些原型设计。打开并粘贴以下代码（如果出现ImportError，则关闭并重新打开控制台）：

from meteo.models import Worldcities
random_item = Worldcities.objects.all().order_by('?').first()

我们需要从 worldcities 表获取数据。这是通过模型完成的，因此我们从 models.py 导入Worldcities模型。

然后，使用 order_by(‘?’) 随机化所有对象并使用 first() 获得第一个对象。在 Python console（Python 控制台）工具窗口的右侧，有一个 Variables（变量）标签页。展开 random_item 节点，查看 random_item 的内容：

temp_somewhere函数的完整代码如下所示：

def temp_somewhere(request):
    random_item = Worldcities.objects.all().order_by('?').first()
    city = random_item.city
    location = [random_item.lat, random_item.lng]
    temp = get_temp(location)
    template = loader.get_template("index.html")
    context = {
        'city': city,
        'temp': temp
    }
    return HttpResponse(template.render(context, request))

除了温度，context现在还包含城市名称。我们来编辑模板，使其也呈现此信息。

您可能已经注意到装订区域中的 <> 图标。点击以快速切换到 index.html：

将 <h1></h1> 标记之间的文本替换为 {{ city }}：

点击装订区域图标可快速访问 temp_here 函数：

我们需要修改它，使它也传递city变量：

在浏览器中打开 https://127.0.0.1/meteo 页面时将调用temp_here函数，我们已在 meteo/urls.py 中完成配置。

我们回到那里，指定在访问 https://127.0.0.1/meteo/discover 时应调用temp_somewhere：

urlpatterns = [
    path('meteo/', views.temp_here, name='temp_here'),
    path('meteo/discover', views.temp_somewhere, name='temp_somewhere'),
]

返回 index.html，添加指向 /discover 页面和首页的链接。后者将始终显示当前位置的温度。实时模板和代码补全可以节省大量时间：

要对 html 文件中的段落和链接使用实时模板，只需分别输入 p 或 a ，然后按 Tab。

要查看可用实时模板的完整列表，首先打开设置 (⌘ / Ctrl+Alt+S)，转到 Editor > Live Templates（编辑器 > 实时模板），然后展开右窗格中的 Zen HTML 节点：

您可以重新运行服务器并试用应用程序：

还没结束

应用现在可以运行，但还有改进的空间。最明显的是视觉外观，但也还可以添加额外功能。

使用 CSS

CSS 是使 Django 应用程序看起来更好的最快也最简单的方式。例如，使用 Simple.CSS。

将以下行放在 index.html 中<head></head>标记之间的任意位置：

<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">

新外观：

将链接替换为按钮也将改善外观：

为此，将 index.html 中<p></p>标记之间的链接替换为以下 html 代码：

<div style="display: flex;">
    <form action="./discover">
        <input type="submit" value="Check other places"/>
    </form>
    &nbsp;
    <form action=".">
        <input style="background: #dc3545" type="submit" value="Home"/>
    </form>
</div>

无需从 PyCharm 切换到浏览器即可看到编辑 index.html 的结果。将鼠标悬停在编辑器窗口的右上角，选择 Built-in Preview（内置预览）：

使用 Bootstrap

Bootstrap 是一个强大且免费的前端工具包。要将它快速应用到 Django 应用，按如下所示编辑 index.html（有关详情，请参阅 Bootstrap 快速入门指南）：

1. 将link标记添加到 html 头部（替换前面步骤中的 simple.css）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

2. 在<body></body>标记内添加以下代码：

<div class="container text-center">
    <h1>{{ city }}</h1>
    <h2>{{ temp }} ℃</h2>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-outline-primary" onclick="location.href='./discover'">Check other places
        </button>
        <button type="button" class="btn btn-danger" onclick="location.href='.'">Home</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>


查看结果：

Bootstrap 提供了多种自定义应用外观的方式。您可以在文档中找到所有必要信息。

亲自尝试

我们已将 worldcities 数据库的country字段添加到Worldcities模型中，但并未在应用的任何地方使用该数据。现在，您还可以测试自己的技能，让应用除了城市名称之外还显示国家/地区。结果应该类似于：

总结

在本教程中，我们学习了如何：

• 在 PyCharm 中创建 Django 项目。

• 编写视图和创建模板。

• 进行 API 调用并处理响应。

• 连接数据库和导入数据。

• 应用 CSS 和 Bootstrap 改善应用的视觉外观。

本博文英文原作者：

Denis Mashutin

PyCharm 相关阅读

关于 PyCharm

PyCharm 是一款可以帮助专业 Python 开发者提升效率、信心和代码质量的集成开发环境 (IDE)。PyCharm Pro 原生支持整个 Python 工作流，包括 Web 框架、前端技术、数据库和科学工具。

PyCharm Community Edition 是一项免费的开源项目，也可用于一般的 Python 编程任务。

进一步了解 PyCharm

⏬ 戳「阅读原文」了解更多