使用Django框架进行web应用开发~教程~

作为Python工程师,我一直从事与数据相关的工作。由于感觉未来可能负责应用程序开发的后端工作,所以我觉得了解前端知识也是很重要的,于是我试着练习了一下Web应用的开发。
虽然我个人的Web应用开发经验只限于个人项目,但由于我没有使用过所谓的框架(因为我的工作并不需要使用框架),所以我尝试使用了在职场可能会用到的Django。
虽然这是一份我自己的备忘录,但我会尽量详细地记录从建立到稍微定制的过程,以便在学习的过程中能更好地理解。
关于Django是什么,我会参考比我更理解的前辈们的文章和官方文档。

1:安装Django

使用pip命令安装Django。

pip install django

1:创建Django项目和应用程序。

我们将创建一个模板文件来配置Django的路由和模型设置。

### 作業ディレクトリ配下で以下のコマンドを実行
# プロジェクトを作成
python -m django startproject (プロジェクト名) 
# 作業ディレクトリを移動
cd (プロジェクト名)
# アプリを作成
python -m django startapp (アプリ名)
ディレクトリ.JPG

修改setting.py文件。

根据项目文件夹中的”setting.py”文件进行设置是用于整个项目的配置文件。
这次我想要添加应用程序、设定通用文件位置以及语言设置。

添加应用程序

添加应用程序是指将先前创建的”practice_app”应用程序添加到识别列表中的操作。
这个操作很简单,因为在”setting.py”文件的第33行附近有一个名为”INSTALLED_APPS”的列表,我们只需在那里添加应用程序即可。这次我们要添加的是位于”practice_app”应用程序下的”apps.py”文件中创建的”PracticeAppConfig”类对象,所以写法是”practice_app.apps.PracticeAppConfig”。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'practice_app.apps.PracticeAppConfig', # 追記
]
from django.apps import AppConfig


class PracticeAppConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'practice_app'

通用文件设置

设置通用文件的存放位置。通用文件指的是整个项目中使用的文件,例如包含共同部分的html文件、包含通用处理的js文件等。本次将在”practice”目录下创建名为”templates”和”static”的目录,并在”setting.py”中添加以下内容。

从现在开始,将html文件存放在”templates”目录中,将css和js文件存放在”static”目录中。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [ BASE_DIR / 'templates' ], # 追記
        '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',
            ],
        },
    },
]

###省略###

STATIC_URL = 'static/'
STATICFILES_DIRS = [ BASE_DIR / 'static' ] # 追記

时区、语言设置

默认情况下,设定为英语和世界标准时间,但由于我是日本人,所以将进行更改为日语和日本时间。
// デフォルトでは英語、世界標準時で設定されているところを、日本人なので、日本語、日本時間へ変更していきます。
(一行下) 默认情况下,设定为英语和世界标准时间,但由于我是日本人,所以将进行更改为日语和日本时间。

# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'ja' # 追記

# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Tokyo' # 追記

准备首页

views,pro.PNG

我们正在创建一种名为函数式视图的东西,它是用于设置实际在浏览器中显示的页面的函数。除此之外,还有一种称为类视图的东西,但是它将在后面再次出现。
我们导入的”render”模块可以通过将HTTP请求作为第一个参数,要显示的HTML文件的文件路径作为第二个参数,来返回一个网页。这次,我想显示存储在templates目录中的index.html文件(只显示大标题“首页”),所以只写index.html即可。

4:路由设置

在 “urls.py” 中设置路由,并调用先前创建的视图函数。

from django.contrib import admin
from django.urls import path
from .views import index # 追記


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index, name='index') # 追記
]

以下是从默认值添加的部分:
・第18行:导入views.py文件中的index函数。
・第22行:在”path”模块中传递”url”、”view函数”和”页面名称”。
“path”模块被设计为对传递的URL访问的第一个参数返回第二个参数函数的返回值”html”。此外,第三个参数”name”将在后面介绍的路由方法中使用,所以先写上。

启动

在这里,我将尝试启动并确认能否正常运行。使用以下命令来启动web服务器。

python .\manage.py runserver

当启动时

Django version 4.1.7, using settings 'practice.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
トップページ.PNG

简述:使管理者页面能够查看表格内容

接下来,我们将实现账户创建的处理。为了确认处理已完成并且信息已储存正确,我们将使管理员页面可用。

创建管理员账户

adminログイン.JPG

使管理员页面能够识别表格。

登陆后,如果保持现状就无法访问表格。需要进行一些工作来获得认可。

from django.contrib import admin
from .models import UserModel # 追記

admin.site.register(UserModel) # 追記
テーブル確認.JPG

6:进行应用程序的实施

我已经成功启动了,所以我想要添加功能。
具体来说,我会编辑在第一步创建的名为”practice_app”的文件。
作为一个教程性质的应用程序,我想要实现登录、登出、更新等基本功能。

建立模型

首先,在实施功能之前,我们首先创建一个用于管理账户信息的表格。
操作方法是编辑位于”practice_app”下的”models.py”文件。

from django.db import models
from django.core.validators import MaxValueValidator, MinValueValidator

# アカウント情報テーブル
class UserModel(models.Model): 

    user_name = models.CharField(max_length=20)
    password = models.CharField(max_length=255, unique=True)
    gender = models.CharField(max_length=2, blank=True, null=True)
    age = models.IntegerField(validators=[MinValueValidator(0), MaxValueValidator(130)])
    registration_date = models.DateTimeField(db_column="登録日", max_length=10, blank=True, auto_now_add=True)
    update_date = models.DateTimeField(db_column="更新日", max_length=10, auto_now=True)

在Django中,”models”是默认导入的模型模板模块,由Django提供。首先,我们将创建一个名为”UserModel()”的类对象来管理账户信息表,并继承Model类。然后,我们将列出各个类变量,每个类变量对应一列。列信息可以通过models.CharField()等来指定,例如可以指定字符串、数字、日期等。可以在官方文档中查看有哪些选项。此外,如果不指定”id”列,将隐式地创建主键id列,所以如果没有特别的指定,可以省略它。下面是这个表的约束的列举:
– user_name:用户名。字符串。限制为20个字符。
– password:密码。字符串。限制为255个字符。唯一约束。
– gender:性别。字符串。限制为2个字符。可以为空。
– age:年龄。整数。可以填写0到130。
– registration_date:注册日期。日期。可以为空。创建时的日期。
– update_date:更新日期。日期。行操作时的日期。
可以通过使用models中的不同选项来决定列的类型,并使用参数来设定各种约束。长度限制使用”max_length”(CharField是必需的),唯一约束使用”unique=True”,允许为null(null=True, blank=True)(默认情况下有null约束)等。如果想要添加验证规则,可以通过类似于第二行导入的validators来实现,所以让我们一边查找一边进行操作。在这个例子中,我们指定了数字的上限和下限作为示例。另外,在处理日期相关操作时,有两个方便的选项:auto_now_add(只在创建时插入日期)和auto_now(更新时插入日期),我们也演示了这两个选项作为例子。关于注册日期列中blank=True的原因是为了防止后续的输入值为空,从而避免出现错误。

创建表单

我们将实现一个用于创建账户的表单。
具体方法是,在”practice_app”文件夹下新建一个”forms.py”文件。

from django import forms
from .models import UserModel


class UserCreateForm(forms.Form):

    user_name = forms.CharField(label='ユーザ名', max_length=20, required=True)
    password = forms.CharField(label='パスワード', max_length=225, required=True, widget=forms.PasswordInput)
    gender = forms.ChoiceField(
        choices = [
            ('', '未選択'),
            ('男性', '男性'),
            ('女性', '女性'),
        ],
        label = '性別',
        required=False,
        widget = forms.Select,
    )
    age = forms.IntegerField(label='年齢', min_value=0, max_value=130, required=True)

    def create(self):
        data = self.cleaned_data
        post = UserModel(
            user_name = data['user_name'],
            password = data['password'],
            gender = data['gender'],
            age = data['age'],
        )
        post.save()

被导入的”forms”是Django提供的表单模板模块。首先,创建用于管理表单的类对象”UserCreateForm()”,并继承Form类。然后,列出类变量,其中每个类变量对应一个表单的输入项。确保这些与先前创建的模型的列名匹配。下面是要创建的表的约束的条目:

– user_name: 用户名。字符串。限制为20个字符。必填项。
– password: 密码。字符串。必填项。隐藏为字符串。
– gender: 性别。选择项。可以为空。
– age: 年龄。整数。可以填写从0到130。必填项。

每个项默认都不是必填项,如果要将其输入设为必填项,则指定”required=True”。标签项对应于表单的标签部分,显示在实际网页的输入框旁边。控件(widget)用于指定表单的形式,对于本例来说,是密码字符串和选择器。还有其他各种选项,可以在官方文档中查找。

最后,我们有一个名为”create()”的函数,这是一个自定义函数。在后面提到的视图类中接收表单的值后,我们可以编写保存到表中的处理过程。有了这个函数,您可以实现更自由的实现。

这部分在继承了”ModelForm”类时默认提供了一个名为”save()”的函数,如果不需要太复杂的操作,建议使用它。

创建账户页面

我們將創建一個用於註冊帳戶的頁面。
具體方法是編輯”practice_app”文件夾下的”views.py”。

from django.views.generic import FormView
from django.shortcuts import render
from .models import UserModel
from .forms import UserCreateForm
from django.urls import reverse_lazy

class UserCreateView(FormView):
    template_name = 'user_create.html'
    model = UserModel
    form_class = UserCreateForm
    success_url = reverse_lazy('index')

    def form_valid(self, form):
        form.create()
        return super().form_valid(form)

创建管理账户信息注册表单的类对象”UserCreateView()”,并继承”FormView”类。
第一行中,我导入了Django提供的与表单相关的模板类。对于账户创建,有一个叫做”CreateView”的类,但是如果你想要做一些稍微复杂的事情,就可以使用”FormView”类,它具有更高的自由度。这次我希望能够进行自定义,所以使用”FormView”类。
一旦准备好了,就开始定义下一个类变量。
· template_name:要显示在浏览器中的html文件路径
· model:在此类中使用的模型
· form_class:在此类中使用的表单
· success_url:处理成功后要转到的页面
在success_url中我使用了模块”reverse_lazy”,这里设置的”index”指的是在先前在”practice/urls.py”中设置的模块”path”中设置的”name”。使用这种写法,将会转到与”name”值匹配的url。非常方便。
关于html文件的存放位置,我在”practice_app”的上一级创建了一个”templates”目录,并将文件存放在那里,以便被识别。
通过第16行的”form.create()”来进行向表中写入。这个函数将成为之前创建的类对象”UserCreateForm”的函数。

将路由设置到创建帐户页面

既然账号创建页面已经完成,现在我们要来设置路由以便跳转到该页面。
首先,在”practice/urls.py”中进行追加。

from django.contrib import admin
from django.urls import path, include # 追記
from .views import index


urlpatterns = [
    path('admin/', admin.site.urls),
    path('app/', include('practice_app.urls')), # 追記
    path('', index, name='index')
]

通过使用在第17行添加的”include”模块,当访问”app/”时,它会将请求传递给”practice_app/urls.py”。
现在,让我们创建这个桥接的”practice_app/urls.py”(默认情况下不会创建)。

from django.urls import path
from .views import UserCreateView
from practice.views import index

urlpatterns = [
    path('create/', UserCreateView.as_view(), name='user_create'),
    path('', index, name='index')
]

在这种情况下,如果有对 app/create/ 的访问,我们将返回 UserCreateView 的内容,如果没有指定 app/ 以下的任何内容,我们将以错误的URL形式返回 index。

迁移

由於這次是創建一個新的模型,所以我們將將其反映在項目中以供使用。這個過程稱為遷移。通過運行”makemigrations”命令來創建遷移文件並使用該文件運行”migrate”命令,就可以完成這一步驟。

>python manage.py makemigrations
Migrations for 'practice_app':
  practice_app\migrations\0001_initial.py
    - Create model UserModel
>python manage.py migrate
Operations to perform:
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying practice_app.0001_initial... OK
  Applying sessions.0001_initial... OK

确认

好的,我们来创建一个账户。在首页上,我已经准备好了一个链接以便跳转到账户创建页面。你只需按照以下方式写入链接即可使其生效。

<a href="{% url 'user_create' %}">アカウント作成</a>
トップページ+.PNG
アカウント作成.PNG
usermodels.JPG

点击后将转到刚刚添加的帐户信息,名为User Model object(1)的位置。

確認.JPG

以上是启动过程的结束。
从这里开始,我们将使网页本身变得丰富,并引入JavaScript进行动态处理。

因为变得很长,所以我想要去下一篇文章。
在下一篇文章中,我希望做一些事情来提高开发的自由度。