用Python构建网站 Part2 创建应用程序
在上一篇文章中，我们完成了使用Docker构建环境和启动项目的步骤。
在本篇文章中，我将简要介绍创建应用程序以实现博客网站所需的各种功能，并讲解URL调度器。
1、关于博客网站所需的功能
・記事一覧
・記事詳細
・カテゴリごとでの記事
・トップページ(必ずしも必要ではない)
・管理人サイト(adminサイト)
2. 关于应用程序的创建和urls.py
创建应用程序
C:\....\blogapp> docker exec -it [コンテナ名]
コンテナ名は前回の説明でコンテナ作成した際に作成されたコンテナの名称です。
【確認方法】
1, dockerアプリケーションのContainer/Appsより「Running」と書かれたコンテナのドロップダウン内を見て確認。
2, docker-psで確認
上記コマンドを入力したあと、以下のようにしてアプリケーションを作成します。
root@XXXXXX:/code# python manage.py startapp [アプリ名]
これによりプロジェクトと同じ階層に以下のようなアプリケーションが作成されます。
blog_app/
├プロジェクト
├ manage.py
└ polls(app_name)/
├ __init__.py
├ apps.py
├ models.py
├ tests.py
├ views.py
└ urls.py #アプリケーション作成後追加してください
创建应用程序后，首先要编辑settings.py文件。
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
DEBUG = True
ALLOWED_HOSTS = []
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'polls.app.Polls.Config',#追加(appsの中のclassと同じ名称にしてください。)
]
X_FRAME_OPTIONS = 'SAMEORIGIN'
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'blog.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(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',
'polls.context.common',
],
},
},
]
WSGI_APPLICATION = 'blog.wsgi.application'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
USE_I18N = True
USE_L10N = True
USE_TZ = True
#以下追加
STATIC_URL = '/static/'
STATICFILES_DIRS = (
[os.path.join(BASE_DIR, 'static'),]
)
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
这里涉及的模板和静态内容，稍后会进行解释。
关于 urls.py 的事项是 2-2。
但是我认为上次创建项目时，urls.py是自动添加的。
换句话说，项目和应用程序都需要一个urls.py。
实际上，不必在应用程序内添加它，但随着功能的增多，如果不分割，将变得难以理解，因此建议进行分割。
首先，让我们来看看每个urls.py的内容。
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/', admin.site.urls),
]
何も書いていない。
如果你想显示首页，你可以通过编辑urls.py文件来实现。 比如，如果首页的URL是http://0.0.0.0:8000/polls/top/的话。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include(polls.urls), #pollsのurls.pyを参照しURL:http://0.0.0.0:8000/[urls.pyのURL]/にできる。
from django.urls import path
app_name = 'polls'#アプリ名
urlpatterns = [
path('top/',[views.pyで設定するビュー]),
]
只需一个选项，将以下内容以中文本地化方式改写：
通过这样做，您可以在上述URL中显示首页。
urls.py的简单解释是“根据逆向引用来查找指定的URL”的操作。
这意味着基本上涉及MVT概念和HTTP响应等内容，有些困难，因此将在另一篇文章中详细解释。
在此，您可以像在应用程序的urls.py中指定每个功能的URL一样来完成。
3、有关静态页面的显示
首先，静态页面指的是“总是显示相同页面的页面”。相反，动态页面指的是“根据用户输入等内容而发生变化的页面”。本次将展示静态页面。（有关详细说明请参阅本篇文章。）
首先，我们会从编辑这个外观的前端开始。在Django中，有一个被称为模板的概念，通过使用它，可以方便地进行前端的实现。首先，在应用程序内创建一个templates文件夹，并在其中创建以下文件。
templates/
├ top.html#トップページのhtml
├ header.html#共通のheader
└ base.html#今後のアプリの全体での共通テンプレート
请将负责设计部分的CSS放置在以下位置。
blog_app/
├ プロジェクト
├ アプリケーション
└ static/css/style.css#デザイン
在上述的位置放置的与在settings.py中编辑的位置相匹配。
因此，如果settings.py有错误，即使将其放置在此位置，网页也不会显示。
模板文件的内容如下。
{% load static %}
<!DOCTYPE html>
<html lang = 'ja'>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel = 'stylesheet' href = '{% static 'css/style.css' %}'>
<title>{% block title %}ブログ{% endblock %}</title>
</head>
<body>
#header.htmlの内容を読み込みます。
{% include 'header.html' %}
<main>
{% block content %}{% endblock %}
</main>
#footerは今回用意していませんが、会社情報や免責事項などがよく盛り込まれています。
{% include 'footer.html' %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
通过在标签中添加CSS和Bootstrap，我们构建了网站的外观。通过在标签中添加JavaScript文件，我们实现了下拉菜单功能。
(详细信息在标题中解释)
##aタグhrefの{% url '' %}に記載されている事項については今後の機能追加で解説するため、ここではhref = '#'としてください。
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-info fixed-top">
<a class="navbar-brand" href="{% url 'polls:top' %}">ブログ</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'polls:index' %}">投稿一覧</a>
</li>
<li class="nav-item">
＃－－－－－－－－－－－－－－－－ドロップダウンー－－－－－－－－－－－－－－－－－－－－－－－－－－－ー－－－－－－－－－－－－
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
カテゴリー
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDarkDropdownMenuLink">
<li>サンプル１</li>
<li>サンプル２</li>
{% endfor %}
</ul>
</li>
＃－－－－－－－－－－－－－－－－ー－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
</li>
</ul>
</div>
</nav>
</header>
在标题中，我们实施了导航菜单的实现。这将成为我们即将介绍的前一页中共享的内容。我们主要参考了Bootstrap官方进行构建。
在这一点上，已经成功实现了所有页面中共同的base.html和header.html。
4，关于首页显示。
4-1，视图和模板
from django.urls import path
from . import views
app_name = 'polls'
urlpatterns = [
path('', views.TopView.as_view(), name = 'top'),
]
from django.shortcuts import render
from django.views.generic import TemplateView#追加
# Create your views here.
class TopView(TemplateView):
template_name = 'top.html'
在模板中添加 top.html。
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class = 'container'>
<h1>実務未経験からの学習記録</h1>
<h5>
このブログでは、実務未経験からプログラマーになるまでに行ったことを
投稿しています。
<br></br>
私のポートフォリオ作品は<a href = '#' target = '_blank'>ここから</a>見れます！
<br></br>
また当ブログ開発のオープンソースは<a href = '#' target = '_blank'>「GitHub」</a>と
<a href = '#' target = '_blank'>「Qiita」</a>
に掲載しているので興味ある方は見てください！
<br></br>
<a href = '{% url 'polls:index' %}'>投稿一覧はこちら</a>
</h5>
</div>
{% endblock %}
header {
padding-bottom: 100px;
}
header .navbar-brand {
margin-left: 50px;
}
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.container h1 {
text-align: center;
margin-bottom:30px;
}
关于HTML和CSS的详细编写方法将被省略。
请在浏览器中输入http://0.0.0.8000/polls/，这样应该会显示首页。
4-2和4-1的解释
在urls.py中使用views.TopView.as_view()表示引用了views.py中的TopView。
换句话说，流程如下。
１、ブラウザにURLを入力
２、そのURL の存在するビューをurls.pyを通して探す。
３、ビューからテンプレートを探して、ブラウザに表示
Django通过进行反向搜索能够显示指定页面。
在这里，我们已经完成了页面的显示，下一步我们将处理数据库并创建管理网站。
