django 初期設定と初期値

djangoをインストールして、python manage.py runserverコマンドで無事ロケット打ち上がってからの初期値を紹介します。ここで言う初期設定とは最低限のフロントエンドが出来上がっている状態です。

なぜ今回記事にしようと考えたかと言うと、毎回startprojectしてから初期設定が面倒臭いからです~~(単なる面倒くさがり)~~。

ちなみに問合せ管理画面ということで名前をinquiryプロジェクトとしています。

初期設定で以下を構築

・html, css のパスコード設定

・base.html 及び base.css設定

・JavaScript(jQuery)の設置

・djangoテンプレート設定

・urlsとviewsでindex画面設定

コンテンツ

環境

動作環境になります。

django	2.2
python	3.8

django初期設定画面

python mana.py runserver コマンドを実行すると下記画面がスタートするところからになります。

ソースツリー

トップがinquiryプロジェクトになりますが、直下にinquiry_appsアプリを作成します。

$python manage.py startapp inquiry_apps

1	$python manage.py startapp inquiry_apps

これを実行するとinquiry_apps以下にディレクトリとファイルが生成されます。

├── db.sqlite3
├── inquiry
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── inquiry_apps
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── inquiry_apps
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── static
│   │   ├── inquiry_apps
│   │   │   └── css
│   │   │       └── base.css
│   │   └── js
│   │       └── jquery-3.5.1.js
│   ├── templates
│   │   └── inquiry_apps
│   │       ├── base.html
│   │       └── index.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
└── manage.py

├── db.sqlite3

├── inquiry

│ ├── __init__.py

│ ├── settings.py

│ ├── urls.py

│ └── wsgi.py

├── inquiry_apps

│ ├── __init__.py

│ ├── admin.py

│ ├── apps.py

│ ├── inquiry_apps

│ ├── migrations

│ │ └── __init__.py

│ ├── models.py

│ ├── static

│ │ ├── inquiry_apps

│ │ │ └── css

│ │ │ └── base.css

│ │ └── js

│ │ └── jquery-3.5.1.js

│ ├── templates

│ │ └── inquiry_apps

│ │ ├── base.html

│ │ └── index.html

│ ├── tests.py

│ ├── urls.py

│ └── views.py

└── manage.py

inquiry/setting.py

INSTALLED_APPS = [
    'inquiry_apps.apps.InquiryAppsConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

INSTALLED_APPS = [

'inquiry_apps.apps.InquiryAppsConfig',

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

]

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

注意点としては、INSTALLED_APPSに自分で作成した(python manage.py startapp inquiry_apps)を記載することです。

‘inquiry_apps.apps.InquiryAppsConfig’,を追加しましょう。

inquiry/urls.py

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

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

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('admin/', admin.site.urls),

path('', include('inquiry_apps.urls')),

]

本体のプロジェクトからinquiry_appsへのurlsを記載します。

inquiry_apps/urls.py

from django.urls import path
from . import views

app_name = 'inquiry_apps'

urlpatterns = [
    path('', views.index, name='index'),
]

from django.urls import path

from . import views

app_name = 'inquiry_apps'

urlpatterns = [

path('', views.index, name='index'),

]

app_nameも忘れずに。

inquiry_apps/views.html

from django.shortcuts import render
from django.http import HttpResponse
from django.views.decorators.http import require_http_methods


@require_http_methods(['GET'])
def index(request):
    return render(request, 'inquiry_apps/index.html')

from django.shortcuts import render

from django.http import HttpResponse

from django.views.decorators.http import require_http_methods

@require_http_methods(['GET'])

def index(request):

return render(request, 'inquiry_apps/index.html')

@require_http_methods([‘GET’])はなくても作動しますが念のため。

base.html

ここが一番の肝というか、ベースパーツになります。

{% load static %}
<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8" name="author">
    <title>{% block page_title%}{% endblock %}</title>
    {# --- css --- #}
    <link rel="stylesheet" href="{% static 'inquiry_apps/css/base.css' %}">
    {% block extra_css %}{% endblock %}
</head>

<body>
    <div class="header">
        <!-- header -->
        <header>
            <p>グローバルナビゲーションをここに書く</p>
        </header>
        {% block header %}
        {% endblock%}
    </div>
    <!-- header -->
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
    <hr>
    <div class="footer">
        <small class="copy-right">©️ Inquiry apps</small>
    </div>
    {# --- js ---#}
    <script src="{% static 'inquiry_apps/js/jquery-3.5.1.js' %}"></script>
    <!-- block extra_js -->
    {% block extra_js %}{% endblock %}
    <!-- endblock extra_js -->
    　　　　　
</body>
　　

</html>

{% load static %}

<!doctype html>

<head>

<title>{% block page_title%}{% endblock %}</title>

{# --- css --- #}

{% block extra_css %}{% endblock %}

</head>

<body>

<p>グローバルナビゲーションをここに書く</p>

</header>

{% block header %}

{% endblock%}

</div>

{% block content %}

{% endblock %}

</div>

<hr>

</div>

{# --- js ---#}

{% block extra_js %}{% endblock %}

</body>

</html>

index.html

base.htmlbをベースに動きます。

{% extends 'inquiry_apps/base.html' %}
{% block page_title %}トップページ{% endblock %}

{% block header %}
{% endblock %}


{% block content %}
<h1>最初のページ</h1>
{% endblock %}