如果你已经学习了一些Python基础知识,但在尝试构建实际项目时仍然感到无从下手,那么你并不孤单。许多初学者都会先学习教程,了解变量、函数和循环等概念,但当真正尝试创建一个项目时就会遇到障碍。

从“我知道Python语法”到“能够开发出一个可运行的Web应用”,这个差距可能会让人觉得非常大。但实际上,这种差距并非不可避免。

在这个教程中,你将使用Django这一非常流行的Python Web框架,从零开始构建一个健身追踪Web应用。完成学习后,你将会拥有一个可以在互联网上正常运行的完整应用程序——你可以把它展示给朋友看,添加到自己的作品集里,或者继续在此基础上进行开发。

你将学到以下内容:

  • Django项目及其应用的架构结构

  • 如何定义数据库模型来存储锻炼数据

  • 如何创建处理用户请求的视图函数

  • 如何编写用于显示数据的HTML模板

  • 如何将URL与视图函数关联起来,以便用户能够浏览你的应用

  • 如何将完成的应用程序部署到PythonAnywhere上,让任何人都能访问它

这个应用程序本身非常简单:你可以通过输入运动名称、持续时间以及日期来记录一次锻炼情况,然后可以在另一个页面上查看所有记录下来的锻炼信息。虽然很简单,但它涵盖了构建更复杂应用所需的核心Django概念。

让我们开始吧。

目录

先决条件

在开始之前,请确保您已经掌握了以下内容:

Python基础知识:您需要了解变量、函数、列表、字典以及基本的控制结构(如if/else语句和循环)。

基本命令行使用方法:在本教程中,您需要在终端中执行各种命令。您应该知道如何打开终端、在文件夹间切换以及运行命令。如果在Windows系统中,可以使用命令提示符或PowerShell;在macOS或Linux系统中,默认的Terminal应用程序也能满足需求。

需要安装的工具:

  • Python 3.8或更高版本。您可以通过在终端中运行python --versionpython3 --version来检查自己的Python版本。如果还没有安装Python,可以从python.org下载。

  • pip。这是Python的包管理工具,通常会随Python一起安装。您可以通过运行pip --versionpip3 --version来验证它的存在。注意,命令python3pip3表示您正在使用Python 3版本

  • 代码编辑器。Visual Studio Code是一个非常优秀的免费选择,但您也可以使用任何自己熟悉的编辑器。

以上就是全部准备内容。您不需要具备Django的使用经验或网页开发知识,本教程会一步步引导您完成学习过程。

您将构建什么

您将要开发的这个健身追踪工具具有以下两个主要功能:

  1. 用于记录锻炼信息的表单。您可以在其中输入运动名称(例如“跑步”或“俯卧撑”)、运动时长(以分钟为单位)以及日期。提交表单后,Django会将这些信息保存到数据库中。

该图片展示了一个用于记录锻炼信息的表单

  1. 用于查看所有锻炼记录的页面。该页面会以清晰明了的方式列出您所记录的所有锻炼信息,包括运动类型、时长和日期。

该图片展示了一个列出了所有锻炼记录的页面

从高层次来看,数据在应用程序中的流动过程如下:

  1. 您在浏览器中填写锻炼记录表单并点击提交。

  2. 您的浏览器会将这些数据发送给Django。

  3. Django的视图函数会接收这些数据,对其进行验证,然后将其保存到数据库中。

  4. 当您访问锻炼记录页面时,Django的视图函数会从数据库中检索所有已保存的锻炼记录。

  5. Django会将这些数据传递给HTML模板,模板会将它们渲染成浏览器可以显示的页面。

该图片展示了这款健康追踪应用程序的数据流处理流程,共包含5个步骤

这种请求-响应机制是Django框架运作的基础。一旦你理解了这一原理,那么你几乎可以构建任何类型的应用程序。

步骤1:如何设置你的Django项目

每个Django项目在开始时都需要进行一些初始化设置。你需要创建一个独立的Python环境,安装Django框架,并生成项目的基本结构文件。

1.1 如何创建虚拟环境

虚拟环境是一个独立的文件夹,其中包含了专门为某个项目准备的Python解释器及已安装的软件包。这样的设置能够将你的项目所依赖的组件与电脑上其他Python项目分开来,从而避免版本冲突,并确保各种配置的一致性。

例如,有的项目可能需要使用较旧版本的Django框架,而另一个项目则必须使用最新版本;虚拟环境的存在使得这两个项目能够在同一系统中顺利运行。

如果没有虚拟环境,全局安装的软件包之间可能会发生冲突,从而导致项目无法正常运行,同时也会使配置过程变得复杂且难以重复。随着时间的推移,系统环境会逐渐充斥着那些未被使用或不兼容的软件包,进而增加调试和维护的难度。

现在,我们就来开始设置虚拟环境吧。

打开终端,导航到你想要存放项目的文件夹位置,然后执行以下命令:

mkdir fitness-tracker
cd fitness-tracker

终端界面中显示了“mkdir”和“cd”命令的输入过程

第一个命令用于创建一个名为“fitness-tracker”的新文件夹,第二个命令则会将当前目录切换到这个新文件夹中。

你将在这里创建Python虚拟环境。

python3 -m venv venv

该图片展示了创建Python虚拟环境的命令

上述命令会在名为“venv”的文件夹中创建一个虚拟环境。“python3 -m venv venv”这个命令中,第一个“venv”是命令本身,第二个“venv”则是该虚拟环境的名称。其实你可以给这个文件夹起任何名字,不过通常人们还是习惯使用“venv”这个名称。

通过执行“ls”命令,你可以确认虚拟环境文件夹确实已经创建成功了。

要激活这个虚拟环境,需要执行以下命令:

在macOS/Linux系统上:

source venv/bin/activate

在 Windows 上:

venv\Scripts\activate

当你在终端提示符的前面看到 (venv) 时,就说明激活成功了。从这时起,你安装的任何 Python 包都只会存在于这个 虚拟环境中

该图片展示了虚拟环境被激活的过程

1.2 如何安装 Django

在虚拟环境激活后,使用 pip 来安装 Django:

pip install django

这样就会下载并安装最新版本的 Django。你可以通过运行以下命令来验证安装是否成功:

python3 -m django --version

执行完这两条命令后,你应该会看到 Django 已经被安装完毕,同时也会显示其版本号:

该图片展示了 Django 的安装过程及已安装的版本信息

1.3 如何创建项目

Django 的安装已经完成,现在我们来创建一个 Django 项目。Django 提供了一个命令行工具,可以生成你需要的模板文件。请输入以下命令:

django-admin startproject fitness_project .

这条命令会创建一个名为 fitness-project 的文件夹。注意命令末尾的那个点,这个点非常重要——它告诉 Django 在当前目录中生成项目文件,而不会创建额外的嵌套文件夹。

现在我们的 Django 项目已经创建好了,接下来让我们在喜欢的文本编辑器中打开这个项目,看看它的文件夹结构。

你会发现这个文件夹里已经包含了很多文件了。

该图片展示了通过 django-admin startproject 命令创建的文件列表

1.4 如何运行开发服务器

现在让我们确认一下所有设置是否都正常工作。为此,你需要运行一个服务器。请输入以下命令:

python manage.py runserver

你可以在激活了虚拟环境的终端中输入这条命令,或者如果你使用的是 VS Code,也可以使用其内置的终端。从现在开始,我将会使用内置终端来操作。

该图片展示了在输入 runserver 命令后服务器启动的状态

打开您的浏览器,访问http://127.0.0.1:8000/。您应该会看到Django的默认欢迎页面,页面上还会显示一枚火箭图案,这证明您的项目已经设置正确。

这是Django默认主页的图片

当您准备继续下一步操作时,请在终端中按下Ctrl + C来停止服务器。

步骤2:如何创建Django应用程序

在Django中,项目是整个Web应用程序的总体框架,而应用程序则是该项目中的一个小模块,它专注于实现特定的功能。

用一个房子来打比方会更容易理解这一点:整个房子就是项目,而房子里的每个房间则对应着应用程序。其中一个房间可能是厨房,另一个可能是卧室,每个房间的设计都有其明确的用途。同样地,Django应用程序也是为完成某一项特定任务而开发的,比如身份验证、支付处理,或者像在这个例子中那样,用于记录锻炼情况。

现在来看看关键点:为什么不把所有功能都放在一个项目中呢?技术上来说,这是可行的,尤其是对于非常小的项目而言。但随着应用程序规模的扩大,这种做法很快就会变得难以管理。

通过使用应用程序,我们可以自然地将不同的功能区分开来。这样也能让协作变得更加顺畅,因为不同的人可以分别负责不同的应用程序,而不会经常干扰到彼此的代码。

另一个重要的好处是代码的可重用性。由于应用程序都是模块化的,因此我们可以将某个应用程序从一个项目中提取出来,然后重新用在另一个项目中。

例如,如果您曾经开发过一个用于记录锻炼情况的应用程序,之后就可以将其直接应用到另一个完全不同的Django项目中,而无需从头开始重新编写代码。后来,如果您又创建了一个新的项目,比如一个健身辅导平台或健康监测工具,那么您仍然可以重复使用之前那个记录锻炼功能的应用程序。

对于这个项目来说,您将创建一个名为tracker的应用程序,它将负责处理与记录和显示锻炼数据相关的所有功能。

2.1 如何生成应用程序

请确保您当前所处的目录与manage.py文件位于同一位置,然后运行以下命令:

python manage.py startapp tracker

这条命令会创建一个名为“tracker”的新文件夹,该文件夹的结构如下所示:

这张图片展示了执行startapp命令后生成的文件夹结构

这些文件各自有着不同的用途。在整个项目中,您将会经常使用models.pyviews.pyadmin.py这三个文件。

2.2 如何注册应用程序

Django并不会自动识别你的新应用程序。你需要通过将该应用程序添加到《settings.py》文件中的`INSTALLED_APPS`列表中来告知它。

打开《fitness_project/settings.py》,找到`INSTALLED_APPS`列表。在列表末尾添加该应用程序的名称,即`tracker`:

eec90a01-5219-449e-97f8-97465e4ac23f

你会注意到,Django已经自动安装了一些应用程序。这体现了Django“开箱即用”的设计理念——许多常用功能都可以直接使用。

以下是这些应用程序各自的功能简介。

应用程序名称 用途
django.contrib.admin 用于管理内置的管理员控制面板,可通过网页界面来操作数据。
django.contrib.auth 负责处理用户账户、登录系统、权限设置以及密码管理功能。
django.contrib.contenttypes 帮助Django追踪并管理不同模型之间的关系。
django.contribsessions 用于存储用户会话数据,使用户在多次请求之间保持登录状态。
django.contrib.messages 允许显示临时通知信息,如成功或错误提示。
django.contrib.staticfiles 用于管理CSS、JavaScript文件以及图片等静态资源。

现在,Django已经知道你的`tracker`应用程序存在了,在运行项目时也会包含它。

步骤3:如何创建锻炼模型

在Django中,模型是一种Python类,用于定义数据的结构。每个模型都会直接对应数据库中的一张表,模型中的每个属性都会成为该表中的一列。

可以把模型想象成电子表格的蓝图——类名就是电子表格的名称,而每个字段则相当于列标题。每当你保存一次新的锻炼记录时,Django就会在电子表格中添加一行新数据。

3.1 如何定义模型

打开《tracker/models.py》,将其内容替换为以下代码:

from django.db import models

class Workout(models.Model):
    activity = models.CharField(max_length=200)
    duration = models.IntegerField(help_text="持续时间,单位为分钟")
    date = models.DateField()

    def __str__(self):
        return f"{self.activity} - {self.duration}分钟,在{self.date}进行"

让我们来了解一下每个部分的功能:

  • activity = models.CharField(max_length=200) 这个代码用于创建一个文本字段,最多可以存储200个字符。你可以在这里输入锻炼的名称,比如“跑步”或“骑自行车”。

  • duration = models.IntegerField(help_text="持续时间(以分钟为单位)") 这个代码用于创建一个整数字段,用来记录锻炼持续了多少分钟。help_text参数会添加一条提示信息,这些提示会显示在表单和管理员面板中。

  • date = models.DateField() 这个代码用于创建一个日期字段,用来记录锻炼发生的具体时间。

__str__()方法决定了当打印或在管理员面板中显示时,“Workout”对象会以什么样的形式呈现。这样一来,你看到的就不会是像“Workout object (1)”这样的无意义信息,而是“跑步——2025-03-15,持续30分钟。

步骤4:如何应用迁移文件

你已经定义了模型结构,但Django还没有实际创建相应的数据库表。要想完成这一操作,你需要运行迁移命令。

迁移文件是Django将你的Python模型定义转换为数据库指令的一种方式。执行迁移分为两个步骤。

当你修改某个模型时——无论是添加字段、删除字段还是更改字段名称——都需要创建一个新的迁移文件来描述这些变更。你可以使用makemigrations命令来完成这个操作。

之后,你需要使用migrate命令来应用这些迁移文件,Django会自动更新数据库结构以匹配新的模型定义。

这种先检测变更、再应用变更的两步流程,能够确保你能够准确记录数据库结构随时间发生的所有变化。

4.1 如何生成迁移文件

在集成终端中运行以下命令:

python manage.py makemigrations

你应该会看到如下输出结果:

Migrations for 'tracker': tracker/migrations/0001_initial.py 
    + Create model Workout

Django已经检查了你的“Workout”模型,并生成了一个迁移文件,该文件详细说明了如何创建相应的数据库表。如果你想查看这个文件,可以找到它的位置是tracker/migrations/0001_initial.py,不过你不需要手动编辑它。

执行makemigrations命令后生成的文件

4.2 如何应用迁移文件

现在,让Django执行这个迁移命令,从而在数据库中创建相应的表:

python manage.py migrate

在执行迁移过程中,你会看到多行输出信息。因为Django不仅会应用你自定义的迁移文件,还会应用Django内置应用程序所对应的默认迁移文件(比如认证系统、会话管理等)。

该图片展示了应用迁移操作后的结果

当迁移操作完成之后,你的数据库中就会有一个专门用于存储训练记录的表格。

当执行`migrate`命令时,我们可以看到Django实际使用了哪些SQL语句来构建和修改数据库结构。虽然了解这些细节对于创建应用程序来说并非必需,但了解底层发生的操作过程总是有益的。

请运行以下命令:

python manage.py sqlmigrate tracker 001

你应该会得到如下输出结果:

该图片展示了用于查看Django生成的SQL查询语句的命令

你在命令末尾添加的`001`表示迁移的编号,它代表数据库模式的第一个版本。

在实际开发中,你的工作流程通常会是这样的:先修改模型结构,然后运行`makemigrations`命令生成迁移文件,最后执行`migrate`命令将这些变更应用到数据库中。

步骤5:如何在管理面板中注册模型

Django内置了一个功能强大的管理界面。通过这个界面,你可以无需编写任何额外代码,就能以图形化的方式查看、添加、编辑或删除数据库中的记录。在开发过程中,这一功能非常实用,因为你可以快速测试模型并查看数据情况。

但是,默认情况下,Django并不知道:

  • 你想要管理哪些模型

  • 你希望这些模型以什么样的方式显示出来

因此,你需要通过`admin.py`文件来注册这些模型,这样Django才会将它们包含在管理界面中。

5.1 如何将模型添加到管理界面

打开`tracker/admin.py`文件,并添加以下代码:

from django.contrib import admin
from .models import Workout

admin.site.register(Workout)

ad017508-993a-4c28-ade1-8e73fa0c6a4a

这一行代码告诉Django,要将`Workout`模型包含在管理界面中。

5.2 如何创建超级用户

要访问管理面板,你需要一个超级用户账户。运行以下命令来创建一个:

python manage.py createsuperuser

Django会要求你输入用户名、电子邮件地址和密码。请选择容易记住的信息。电子邮件地址是可选的——你可以直接按Enter键跳过这一步骤。

该图像展示了如何通过输入用户名、电子邮件和密码来创建超级用户

5.3 如何访问管理面板

启动开发服务器:

python manage.py runserver

然后在浏览器中访问 http://127.0.0.1:8000/admin/。使用你刚刚创建的用户名和密码进行登录。

你应该会看到 Django 管理面板,其中有一个“Tracker“板块,里面包含了你的“Workouts

该图像展示了 Django 管理面板以及被添加到管理面板的 Tracker 应用程序中的 Worker 模型

试着点击“添加”按钮,创建几个测试用例。这样就可以确认你的模型运行是否正常,然后再继续开发应用程序的其他部分。

该图像展示了一些训练记录(跑步和骑自行车)被添加到管理面板中

步骤 6:如何为应用程序创建视图

在 Django 中,视图是一种 Python 函数或类,它接收 Web 请求并返回相应的 Web 响应。这个响应可以是 HTML 页面、重定向链接、404 错误信息,或是浏览器能够处理的任何其他内容。

视图是应用程序逻辑的核心所在。它们决定了需要获取哪些数据、进行哪些处理,以及最终向用户展示什么内容。

对于这个应用程序来说,你需要创建两个视图:一个用于显示让用户添加训练记录的表单,另一个用于显示所有已保存的训练记录列表。

6.1 如何创建表单类

在编写视图之前,首先需要一个能够处理用户输入数据的 Django 表单。

Django 表单是一种内置的功能,用于处理各种用户输入数据,比如登录表单、联系表单,或是任何收集用户信息的表单。使用 Django,你无需手动编写 HTML 代码、验证用户输入或处理错误信息,而是可以通过结构化的方式一次性完成这些工作。

大多数用户输入数据都是基于你创建的模型,而 Django 可以利用 `ModelForms` 自动根据这些模型生成表单,从而大大提高开发效率。

让我们在 `tracker` 文件夹中创建一个名为 `forms.py` 的新文件,并添加以下代码:

from django import forms
from .models import Workout

class WorkoutForm(forms.ModelForm):

    class Meta:
        model = Workout
        fields = ['activity', 'duration', 'date']
        widgets = {
            'date': forms.DateInput attrs={'type': 'date'],
        }

该图片展示了forms.py文件的路径以及其代码内容

在上面的代码中,ModelForm会根据Workout模型自动生成表单字段。widgets字典告诉Django将日期字段渲染为HTML日期选择器,而不是纯文本输入框。

我们实际上可以看到Django是如何自动创建这些表单的。为此,我们需要进入shell环境。在终端中输入以下命令:

python manage.py shell

该图片展示了激活后的Python shell界面

现在,让我们导入我们刚刚创建的WorkoutForm类。

输入以下代码:

from tracker.forms import WorkoutForm

请注意,在导入表单类时,我们也指定了应用程序的名称

然后创建一个WorkoutForm类的对象,并将其打印出来。

from tracker.forms import WorkoutForm
workoutform = WorkoutForm()
print(workoutform) 

该图片展示了打开Python shell后,可以通过终端执行Python命令的界面

你应该会得到如下输出:

该图片展示了由ModelForm生成的HTML代码

你可以看到,所有的模型字段都被渲染成了HTML表单形式,而日期字段也被设置为type="date"类型,而不是纯文本。

6.2 如何编写视图函数

正如我们上面所讨论的,我们的项目有两个视图函数:一个用于添加锻炼记录,另一个用于显示所有已保存的锻炼记录。

首先,让我们创建一个用于添加锻炼记录的视图函数。在tracker/views.py文件中,输入以下代码:

from django.shortcuts import render, redirect
from .models import Workout

# 用于列出所有锻炼记录的视图函数
def workout_list(request):
    workouts = Workout.objects.all().order_by('-date')
    return render(request, 'tracker/workout_list.html', {'workouts': workouts})

让我们来详细分析这个视图函数的功能:

  • workout_list视图负责显示所有锻炼记录的页面。

  • 它会从数据库中检索所有的Workout对象,按照日期对这些对象进行排序(由于使用了-前缀,因此最新的记录会排在最前面),然后将这个列表传递给名为workout_list.html的模板。

  • render函数会将模板与检索到的数据结合在一起,最终生成完整的HTML页面并返回出来。

要创建用于添加锻炼记录的逻辑,首先需要在导入代码段的末尾添加对Workout表的导入语句。然后,在workout_list视图之后添加以下代码:

from django.shortcuts import render, redirect
from .models import Workout
from .forms import WorkoutForm

# 用于列出所有锻炼记录的视图函数
def workout_list(request):
    workouts = Workout.objects.all().order_by('-date')
    return render(request, 'tracker/workout_list.html', {'workouts': workouts})

# 用于添加锻炼记录的视图函数
def add_workout(request):
    if request.method == 'POST':
        form = WorkoutForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('workout_list')
    else:
        form = WorkoutForm()
    return render(request, 'tracker/add_workout.html', {'form': form})
  • add_workout视图函数既负责显示空表单,也负责处理用户提交的表单数据。

  • 当用户首次访问该页面时,请求方法为GET,因此Django会生成一个空白表单并将其呈现给用户。

  • 当用户填写完表单并点击“提交”按钮时,请求方法变为POST。此时Django会验证用户提交的数据,如果数据无误,则会将这些数据保存到数据库中,并将用户重定向到锻炼记录列表页面。

  • 如果提交的数据无效,Django会重新显示表单,并在表单中显示错误信息。

以下是完整的视图函数代码:

from django.shortcuts import render, redirect
from .models import Workout
from .forms import WorkoutForm

# 用于列出所有锻炼记录的视图函数
def workout_list(request):
    workouts = Workout.objects.all().order_by('-date')
    return render(request, 'tracker/workout_list.html', {'workouts': workouts})

# 用于添加锻炼记录的视图函数
def add_workout(request):
    if request.method == 'POST':
        form = WorkoutForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('workout_list')
    else:
        form = WorkoutForm()
    return render(request, 'tracker/add_workout.html', {'form': form})

该图片展示了views.py中的完整代码,同时附有关于如何添加锻炼记录的说明

步骤7:如何创建模板文件

模板文件是HTML格式的文件,Django会使用动态数据来填充这些文件。它们构成了你的应用程序的用户界面部分,也就是用户在实际浏览器中看到的内容。

7.1 如何设置模板目录

Django会在每个应用程序内部的templates文件夹中查找模板文件。请在你的tracker应用程序中创建如下文件夹结构:

tracker/templates/tracker

“tracker”这个双层文件夹名称看起来可能有些冗余,但实际上这是 Django 中的一种约定,被称为模板命名规范。这种规范能够避免在多个应用程序中使用相同文件名来存储模板时出现命名冲突的问题。

该图片展示了模板文件夹的目录结构

7.2 如何创建锻炼列表模板

创建一个名为tracker/templates/tracker/workout_list.html的文件,然后添加以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    我的锻炼记录
    
    

    
        

我的锻炼记录

+ 添加新的锻炼记录 {% if workouts %} {% for workout in workouts %}
{{ workout.activity }}
{{ workout.duration }}分钟
{% endfor %} {% else %}

目前还没有任何锻炼记录。请先添加一条吧!

{% endif %}

这里有几点值得注意:

如果你仔细观察HTML代码,就会发现一些用大括号包裹起来的特殊标签({% %}{{ }})。可以把它们看作是Django的专用指令。

当你想要在页面上直接显示某段数据时,就需要使用双大括号({{ }})。

而当你需要让Django执行某些操作或应用逻辑(比如运行循环或检查条件)时,则应该使用大括号和百分号的组合({% %})。

这些标签使我们能够将来自Python后端的动态数据直接插入到原本静态的HTML代码中。

让我们来看一下workout_list.html这个代码片段:

<body>
    <div class="container">
        <h1>我的锻炼记录</h1>
        <a href="{% url 'add_workout' %}" class="add-link">+ 添加新的锻炼记录</a>
        {% if workouts %}
            {% for workout in workouts %}
                <div class="workout-card">
                    
{{ workout.activity }}</div>
{{ workout.duration }}分钟</div>
{{ workout.date }}</div> </div> {% endfor %} {% else %}
尚未记录任何锻炼记录。请先添加一条吧!</p>>
>
{% endif %} </div> </body>

这张图片展示了workout_list.html中的主体部分,重点显示了Django模板标签

这里有几点值得注意。

在主标题的正下方,你会看到这一行代码:
<a href="{% url 'add_workout' %}">

与直接编写硬编码的链接不同(例如href="/add-workout/"),Django使用{% url %}标签来动态生成链接。你只需要提供路由的名称(在这个例子中是add_workout),Django就会自动计算出正确的URL路径。

如果你后来修改了Python代码中的URL结构,Django会自动更新这些链接。因此,你根本不需要去翻找HTML文件来修复失效的链接!

这张图片突出了用于生成动态链接的代码部分

{% if workouts %}这个代码块用于检查是否有需要显示的锻炼记录。如果列表为空,它就会显示一条友好的提示信息,而不会呈现空白页面。

{% for workout in workouts %}这个循环会遍历列表中的每一项训练记录,并为每项记录生成一张对应的卡片。双大括号{{ workout.activity }}用于将各项字段的值插入到HTML代码中。

f75b5c7e-5cd0-457c-901f-e489c26a8175

在循环内部,你会看到如下这样的标签结构:

  • {{ workout.activity }}

  • {{ workout.duration }}

  • {{ workout.date }}

当Django遍历列表中的每一项训练记录时,它会使用点表示法来提取该记录的详细信息,比如活动类型(例如“跑步”)、持续时间(“30分钟”)以及日期(“3月30日”),然后将这些信息直接显示在网页上,让用户能够看到。

7.3 如何创建添加训练记录的模板

创建一个名为tracker/templates/tracker/add_workout.html的文件,并在其中添加以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    记录训练信息
    
    
    
        

记录训练信息

{% csrf_token %}
{{ form.activity }} {% if form.activity.errors %}
{{ form.activity.errors }}
{% endif %}
{{ form.duration }} {% if form.duration.errors %}
{{ form.duration.errors }}
{% endif %}
{{ form.date }} {% if form.date.errors %}
{{ form.date.errors }}
{% endif %}
取消

在之前的模板中,我们学习了如何展示数据。现在,我们要来看一种能够实际收集数据的表单。在网页开发中,手动处理表单可能会显得很繁琐,但Django提供了一些强大的模板标签来帮助我们完成这项工作。

让我们来看看支撑这个表单的、专门为Django设计的逻辑:

首先,在打开`

`标签之后,你会看到一行非常重要的代码:`{% csrf_token %}`。每当你使用“POST”方法将数据提交到服务器时,恶意网站就有可能截获或伪造这些请求。

通过添加这一行`{% csrf_token %}`,你是在告诉Django为这个表单生成一个唯一且隐藏的安全密钥。当用户点击“保存锻炼记录”时,Django会检查这个密钥,以确保请求是合法的。如果你忘记了添加这条代码,Django就会直接拒绝你的表单提交!

以下是具体的代码示例:

“`html

{% csrf_token %}


{{ form.activity }}
{% if form.activity.errors %}

{{ form.activity.errors }}

{% endif %}


{{ form.duration }}
{% if form.duration.errors %}

{{ form.duration.errors }}

{% endif %}


{{ form.date }}
{% if form.date.errors %}

{{ form.date.errors }}

{% endif %}


取消

“`

现在,我们来谈谈如何自动生成表单字段。我们不需要手动为活动类型、持续时间以及日期这些字段编写所有的``标签,而是让Django利用模板标签`{{ }}`来完成这项工作。

每个`{{ form.activity }}`、`{{ form.duration }}`和`{{ form.date }}`标签都会渲染出相应的表单输入字段。Django会根据模型和表单的定义,自动处理这些输入字段的HTML属性、类型以及验证逻辑。此图片展示了用于自动生成HTML表单的代码

在每个输入字段下方,都会显示验证提示信息。如果用户提交了无效的数据——比如在应该输入数字的字段中输入了文本,系统就会显示这些提示信息。用户难免会犯错,他们可能会忽略必填字段,或者将文本输入到应输入数字的字段中。幸运的是,Django会自动验证数据,并在出现问题时向用户反馈错误信息。

在每个输入字段下方,我们使用了如下代码块:
{% if form.activity.errors %}

这段代码会检查一个简单的条件:用户是否在这个特定字段中犯了错误?如果Django发现“activity”这个输入字段存在问题,就会执行if语句块,并通过{{ form.activity.errors }}来显示具体的错误信息(例如“此字段是必填的”),这些信息会直接显示在输入框下方。

此图片展示了错误提示信息的显示方式

你可能会注意到,这两个模板中都使用了内联CSS,而不是单独的样式表。对于像这样的小型项目来说,内联样式可以让代码更加简洁、易于维护。而在大型项目中,你可以使用Django的静态文件系统来专门管理CSS文件。

步骤8:如何连接URL

你已经创建了视图和模板,但Django还不知道应该在什么时候使用它们。你需要将特定的URL与相应的视图函数关联起来,这样当用户在浏览器中访问某个地址时,系统就能调用正确的视图函数。

8.1 如何创建应用级别的URL

创建一个名为tracker/urls.py的新文件,并添加以下代码:

from django.urls import path
from . import views

urlpatterns = [ 
    path('', views.workout_list, name='workout_list'), 
    path('add/', views.add_workout, name='add_workout'), 
]

每个`path`函数都需要接受三个参数。

第一个参数是表示URL模式的字符串;如果这个字符串为空,则表示该URL对应于应用的根目录。

第二个参数是在访问该URL时需要调用的视图函数。

第三个参数是一个名称,你可以在代码的其他地方使用这个名称来引用这个URL,比如在之前使用的{% url %}模板标签中。

现在,你的应用级URL已经设置好了,下一步就是将它们连接到主项目中,这样Django才能知道从哪里开始处理请求。可以把这想象成是将一张较小的地图(你的应用)与一张较大的地图(你的项目)连接起来,这样所有部分就能顺利协同工作了。

打开fitness_project.urls.py文件,将其更新为包含你应用的URL:

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

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

include()函数告诉Django,每当有人访问你的网站时,都要去查看tracker/urls.py文件中定义的URL规则。使用空字符串作为前缀,意味着你的tracker应用会处理站点根目录下的所有请求。

下面是请求在URL系统中流动的具体过程。

当有人访问http://127.0.0.1:8000/add/时,Django会首先检查fitness_project/urls.py文件。由于请求路径以空字符串开头,因此Django会将处理任务交给tracker/urls.py文件。在tracker/urls.py文件中,Django会匹配到add/这个路径,并调用add_workout视图函数来处理请求。

该图片展示了请求如何在系统中流动

步骤9:如何在本机测试应用程序

此时,你的应用已经具备了正常运行所需的所有条件。让我们来测试一下吧。

运行以下命令启动开发服务器:

python manage.py runserver

打开浏览器,访问http://127.0.0.1:8000/。你应该会看到一个标题为“我的锻炼记录”的页面,以及一个写着“+ 记录锻炼内容”的按钮。

该图片展示了‘我的锻炼记录’页面及记录锻炼内容的按钮

点击那个按钮,你应该会看到一个包含活动类型、持续时间以及日期等字段的锻炼记录表单。

该图片展示了一个空的锻炼记录表单

填写一些测试数据:

  • 活动类型:跳绳

  • 持续时间:25分钟

  • 日期:从日期选择器中选取今天的日期

点击“保存锻炼记录”,你应该会回到锻炼记录页面,而你新添加的锻炼记录会以卡片的形式显示在那里。

该图片展示了在添加新的锻炼项目后生成的锻炼计划列表

试着添加一些包含不同活动和日期的训练计划。请确保它们都能以正确的顺序显示在列表页面上(最新的内容排在最前面)。

现在也是进行实验的好时机。可以尝试提交一些缺少某些字段的表单,看看Django会如何处理这些验证错误。

该图片展示了一个未完成填写的表单被提交时的情景,以及相应的错误信息

也可以尝试访问http://127.0.0.1:8000/admin/来查看管理面板中是否也显示了你的训练计划。

该图片展示了在Django管理面板中添加的训练计划

如果一切都能按预期运行,那么你就可以将你的应用程序发布到互联网上了。

步骤10:如何为部署做准备

在本地主机上运行应用程序确实非常适合开发阶段,但其他人是无法看到它的。而部署意味着将你的应用程序放置在一个可以从互联网上的任何地方访问的服务器上。

在进行部署之前,你需要对项目的配置文件进行一些修改。

10.1 如何为生产环境更新配置

打开`fitness_project/settings.py`文件,然后进行以下更改。

首先,将`DEBUG`的值设置为`False`。

在开发阶段,将`DEBUG = True`会显示详细的错误信息,这些信息有助于你解决问题。但在生产环境中,如果出现错误,这些错误信息可能会向任何看到它们的人暴露有关你的代码和服务器的敏感信息。

该图片展示了如何在settings.py文件中将DEBUG设置为False

接下来,更新`ALLOWED_HOSTS`设置,以便包含PythonAnywhere的域名

这个设置告诉Django哪些域名被允许用来提供你的应用程序服务。请将`yourusername`替换为你在下一步中实际创建的PythonAnywhere用户名。

ALLOWED_HOSTS = ['yourusername.pythonanywhere.com']

该图片展示了更新后的allowed_host列表,其中添加了pythonanywhere域名

最后,添加一个`STATIC_ROOT`设置,这样Django就知道应该将你的静态文件(CSS、JavaScript、图片等)保存在哪个位置,以便在生产环境中使用。

import os
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

该图片展示了用于收集静态文件的代码

这些就是进行基本部署时所需进行的最低限度的修改。

💡 对于处理真实用户数据的生产环境应用程序,您还需要设置一个安全的SECRET_KEY,配置像PostgreSQL这样的数据库,并启用HTTPS。但对于学习项目来说,这些修改已经足够了。

步骤11:如何将您的Django应用部署在PythonAnywhere上

PythonAnywhere是一个专为Python Web应用程序设计的托管平台。它提供了免费套餐,非常适合初学者使用;同时,它会处理许多服务器配置工作,而这些工作如果由用户自己来完成会非常复杂。

11.1 如何创建PythonAnywhere账户

请访问pythonanywhere.com注册一个免费的“初学者”账户。请记住您选择的用户名,因为您的应用程序将会托管在yourusername.pythonanywhere.com这个地址上。

该图片展示了PythonAnywhere的首页

现在,请登录该网站,填写用户名、电子邮件地址和密码,然后选择免费套餐进行注册。

该图片展示了PythonAnywhere提供的不同等级的托管服务

11.2 如何上传您的项目文件

登录成功后,您有两种方法可以将项目文件上传到PythonAnywhere上。

选项A:使用Git进行上传

如果您的项目存储在Git仓库中,请先通过点击PythonAnywhere控制面板中的“Consoles”再选择“Bash”来打开Bash控制台,然后克隆您的仓库:

git clone https://github.com/yourusername/fitness-tracker.git

在本教程中,我们不会使用Git,而是选择第二种方法。

选项B:手动上传文件

首先,请找到您电脑上的项目文件夹,并将其压缩成文件。

重要提示:在压缩文件之前,请务必先复制一份项目文件,同时删除“venv”和“pycache”这两个文件夹。该图像显示了项目文件夹被压缩的过程

请导航到您的主目录,点击“上传文件”选项,然后上传压缩后的文件。

该图像显示了压缩文件正在被上传到PythonAnywhere服务器上

接下来我们需要解压这个压缩文件。为此,请进入“控制台”选项卡,然后点击“Bash控制台”。

该图像显示了“控制台”选项卡以及“Bash控制台”选项

Bash控制台应该已经打开了。现在在控制台中输入以下命令来解压文件夹:

unzip fitness-tracker.zip

该图像显示了解压命令执行后的结果

11.3 如何在PythonAnywhere中设置虚拟环境

请从PythonAnywhere的控制面板中打开Bash控制台。导航到您的项目目录,然后创建一个新的虚拟环境:

cd fitness-tracker

该图像显示了切换到fitness-tracker目录的过程

输入以下命令来安装虚拟环境,然后激活该虚拟环境:

python3 -m venv venv

source venv/bin/activate

该图像显示了虚拟环境的创建与激活过程

现在,像之前一样,使用pip install django命令来安装Django吧:

该图像显示了Django的安装过程

11.4 如何在PythonAnywhere中运行迁移操作并创建超级用户

<当您仍处于激活了虚拟环境的 Bash 控制台中时,请运行相关命令以便在服务器上创建数据库表:>

python manage.py makemigrations

python manage.py migrate

python manage.py createsuperuser

该图片显示了执行“makemigrations”和“migrate”命令的过程
该图片显示了超级用户创建的过程

11.4 如何在 Pythonanywhere 中配置 Web 应用程序

进入 PythonAnywhere 的控制面板,选择“Web”选项卡,然后点击“添加新的 Web 应用程序”。按照设置向导的指示进行操作:

该图片显示了“Web”选项卡以及“添加新的 Web 应用程序”的按钮

在填写域名步骤中,点击“下一步”(请记住,免费版本使用的域名是 yourusername.pythonanywhere.com)。

该图片显示了用于指定域名的 Web 控制面板

选择“手动配置”选项(而不是“Django”——手动配置能让你拥有更大的控制权)。

该图片突出了应选择的“手动配置”选项

然后选择与你已安装的 Python 版本相匹配的版本。在我的例子中,使用的版本是 3.13,所以我选择了 3.13。

该图片显示了所选择的 Python 版本

点击“下一步”按钮,系统将会创建一个 WSGI(Web 服务器网关接口)。

该图片显示了在创建 Web 应用程序之前的最终页面

通过以上步骤,我们就已经创建完成了 Web 应用程序:

该图片显示了 Web 应用程序创建完成的最终结果

在完成 Web 应用程序的配置后,你还需要再做两件事:

  • 设置虚拟环境路径

  • 配置WSGI文件

11.5 如何设置虚拟环境路径

在“Web”选项卡中,向下滚动至“Virtualenv“部分,然后输入你的虚拟环境的路径。该路径应该如下所示:

/home/yourusername/fitness-tracker/venv

图片展示了所设置的虚拟环境路径

11.6 如何配置WSGI文件

仍在“Web”选项卡中,向下滚动至代码部分,然后点击WSGI配置文件的链接:

图片展示了代码部分及WSGI配置文件的路径

删除文件中的所有内容,将其替换为以下代码,然后保存文件:

import os
import sys
path = '/home/prabodhtuladhardev/fitness-tracker' #请替换为你的用户名
if path not in sys.path:
    sys.path.append(path)

os.environ['DJANGO_SETTINGS_MODULE'] = 'fitness_project.settings'

from django.core.wsgi import get_wsgi_application
application = get_wsgi_application()

图片展示了编辑后的wsgi.py文件以及保存按钮

11.7 如何配置静态文件

仍在“Web”选项卡中,向下滚动至“静态文件”部分。添加以下条目:

  • URL: /static/

  • 目录: /home/yourusername/fitness-tracker/staticfiles

图片展示了“Web”选项卡中的静态文件设置部分

之后回到Bash控制台,运行以下命令:

python manage.py collectstatic

图片展示了执行collectstatic命令后的结果

此命令会将所有静态文件复制到staticfiles目录中,这样PythonAnywhere就可以直接提供这些静态文件了。

该图片显示了名为‘static files’的文件夹已被创建

返回“Web”选项卡,然后点击顶部的绿色“重新加载”按钮。这样就能使用所有新的配置重新启动你的应用程序。

该图片显示了带有‘重新加载’按钮的Web选项卡

11.8 如何查看你的在线应用程序

打开一个新的浏览器标签页,访问 https://yourusername.pythonanywhere.com。你应该能看到自己的健康追踪工具在互联网上实时运行。

试着添加一次锻炼记录吧。

该图片显示了在Python Anywhere中打开的锻炼记录列表视图

访问管理员面板,地址为 https://yourusername.pythonanywhere.com/admin/

该图片显示了在Python Anywhere中打开的Django管理员界面

现在,一切应该都能像在本地机器上一样正常运行了,但任何拥有这个链接的人都可以访问它。

这是一个非常重要的里程碑——你已经成功将一个Django应用程序部署到了线上。可以把这个链接分享给朋友,或者发布在编程社区里。看到自己的作品真正出现在互联网上,绝对是学习编程过程中最令人振奋的经历之一。

常见的错误及解决方法

即使你仔细遵循了每一个步骤,也还是可能会出现问题。以下是初学者们经常遇到的常见问题以及相应的解决办法。

“ModuleNotFoundError: 未找到名为‘django’的模块”——这通常意味着你的虚拟环境没有激活。请运行 source venv/bin/activate(macOS/Linux系统)或 venv\Scripts\activate(Windows系统),然后重新尝试。在Python Anywhere平台上,要确保“Web”选项卡中的virtualenv路径指向正确的位置。

“DisallowedHost” 错误——你可能忘记在 settings.py 文件中将你的域名添加到 ALLOWED_HOSTS 列表中,或者其中存在拼写错误。请仔细检查该域名是否与你的Python Anywhere网址完全一致。

在生产环境中静态文件无法加载——请确保你已经运行了 python manage.py collectstatic 命令,并且Python Anywhere平台上的静态文件映射设置是正确的。同时,也要确认 settings.py 文件中确实设置了 STATIC_ROOT 变量。

“没有这样的表”或出现迁移错误——很可能是在将项目克隆或上传到PythonAnywhere之后,忘记了运行`python manage.py migrate`命令。请在Bash控制台中执行这个命令。

更改没有在PythonAnywhere上显示——在进行任何代码修改后,必须点击“Web”选项卡上的“重新加载”按钮。PythonAnywhere不会自动检测文件的变化。

图片展示了Web选项卡和重新加载按钮

如何改进这个项目

你开发的这款健身追踪工具本来就被设计得相当简单。这其实是一种优势,而非局限。一个功能完备但结构简单的项目,是进一步学习的理想基础。

以下是一些扩展它的建议。

  1. 添加用户认证功能:目前,任何访问该网站的人都能看到相同的锻炼数据。Django内置了认证系统,可以支持注册、登录和登出功能。这样一来,每个用户都可以拥有自己私人的锻炼记录列表。

  2. 允许用户编辑和删除锻炼记录。现在,一旦锻炼记录被保存下来,就无法通过界面直接修改或删除它(虽然可以通过管理员面板操作,但主应用程序中无法实现)。可以尝试创建新的视图和模板来实现这些功能。

  3. 添加锻炼类别或标签。让用户能够将他们的锻炼分为“有氧运动”、“力量训练” “柔韧性训练”等类别。这需要为模型添加新字段,或者创建一个单独的“Category”模型,并通过外键关系将其与主模型关联起来。

  4. 添加图表和进度跟踪功能。可以使用Chart.js这样的JavaScript图表库来展示锻炼数据的变化趋势。例如,可以制作出每周总锻炼时间的条形图。

  5. 使用Django REST Framework构建API。如果你想学习如何开发API,可以尝试安装Django REST Framework,并为你的锻炼记录功能创建相应的API接口。这样就可以开发移动应用或独立的前端程序,与后端的Django服务进行交互了。

每一项改进都会让你在已有基础之上,进一步了解Django的相关知识。

结论

你已经使用Django成功开发出了一款功能完备的健身追踪网站应用,并将其部署到了互联网上。这确实是一项了不起的成就。

在这个过程中,你了解了Django项目和应用的结构,知道了模型是如何定义数据结构的,迁移机制又是如何将这些模型转换为数据库表的,视图如何处理应用程序的逻辑逻辑,模板如何生成动态HTML页面,以及URL是如何将所有这些组件联系在一起的。同时,你也亲自完成了在PythonAnywhere上的整个部署流程。

这些就是Django开发的核心要素。你在这里练习过的那些步骤——定义模型、创建表单、编写视图函数、构建模板以及配置URL链接——无论项目有多复杂,都是你在每一个Django项目中都会用到的基本方法。

巩固所学知识的最佳方式就是不断实践。你可以尝试上述提到的某一种改进方法,或者开始一个全新的项目。无论是记录卡路里摄入量、习惯养成情况、支出明细,还是写个人日记,这些应用都可以运用相同的Django开发理念,只不过所使用的模型和视图函数会略有不同而已。

Comments are closed.