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
これを実行すると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
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に自分で作成した(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')),
]
本体のプロジェクトから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'),
]
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')
@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>
index.html
base.htmlbをベースに動きます。
{% extends 'inquiry_apps/base.html' %}
{% block page_title %}トップページ{% endblock %}
{% block header %}
{% endblock %}
{% block content %}
<h1>最初のページ</h1>
{% endblock %}
実行結果
そのままコピペしても使えます。
それではいつもの
python manage.py runserver
を実行し
をアクセスすると以下画面が出現します。





コメントを残す