Django-materialを使って今風のサイトを作る

14958 ワード
MaterialDesign django-material Python3 Django2.0 Python3 テキストリンク

記事のソースです。
git: ajitama/material_site
荒削りですがgitでソースコードを出してみました。
なるべくシンプルに書いてますが、素人レベルなので無駄なものについてはご容赦ください。

Ubuntu1804LTS
Python3.6.5
Django2.0.7

material_site
├── ajitama
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db20.sqlite3
├── manage.py
└── material_site
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

Djangoプロジェクトの作成


django-admin startproject material_site

まずはSettings.pyをいじります。
ざっくりと。

material_site/settings.py

import django #DBの名前を変更するために入れてます（場合によっては不要）

ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
・・・＜省略＞
    # material apps
    'material',
    'material.frontend',

    # userapp
    'ajitama.apps.AjitamaConfig', #<後で作ります>

・・・＜省略＞
]

TEMPLATES = [
    {
・・・＜省略＞
        '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',
                'material.frontend.context_processors.modules',  # ＜←追加＞
            ],
        },
    },
]


DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db{}{}.sqlite3'.format(*django.VERSION[:2])), # DBの名前の変更。（好みです）
    }
}

AUTH_PASSWORD_VALIDATORSは削除してます。（パスワードの制約などを厳しくしてくれるモジュール）

material_site/url.py

from django.contrib import admin
from django.conf.urls import url
from django.urls import path, include
from material.frontend import urls as frontend_urls


urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'', include(frontend_urls)), #追加
    ]

管理ユーザの作成

先につくっときます
python3 manage.py createsuperuser

自分はadmin/adminで作りました。

初回のMigrate

migrateしないとアプリが作れません。
python3 manage.py migrate

/root/material_site# python3 manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, frontend, sessions
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 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 frontend.0001_initial... OK
  Applying frontend.0002_i18n... OK
  Applying sessions.0001_initial... OK

アプリケーションの作成

python3 manage.py startapp ajitama

アプリケーションの設定

ajitama/apps.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.apps import AppConfig
from material.frontend.apps import ModuleMixin


class AjitamaConfig(ModuleMixin, AppConfig):
    name = 'ajitama'
    icon = '<i class="material-icons">extension</i>'

ModuleMixinはmaterial frontendの機能で、URLをいい感じに取り込んでくれるものみたいです。

ajitama/models.py
from django.db import models

SELECT_LABEL=(
    ('OBJ1', '選択肢1'),
    ('OBJ2', '選択肢2'),
    ('OBJ3', '選択肢3'),
        )

# Create your models here.
class Article(models.Model):
    subject = models.CharField(
            "タイトル",
            max_length=90,
    )
    data_str = models.CharField(
            "データ(文字型)",
            max_length=10000,
            null=True,
            )
#<以下、省略>
ajitama/views.py
from material.frontend.views import ModelViewSet
from .import models

# Create your views here.
class ArticleViewSet(ModelViewSet):
    model = models.Article
    ordering = ['-subject', 'data_date']
    list_display = ('subject','data_date', 'data_bool','data_choice')
ajitama/urls.py
from django.urls import path, include
from django.conf.urls import url
from django.views import generic

from . import views

app_name = 'ajitama'

urlpatterns = [
    url('^$', generic.RedirectView.as_view(url='./ajitop'), name="index"),
    path('ajitop', include(views.ArticleViewSet().urls), name="top"),
]

Appのマイグレーション

# python3 manage.py makemigrations
Migrations for 'ajitama':
  ajitama/migrations/0001_initial.py
    - Create model Article
# python3 manage.py migrate
Operations to perform:
  Apply all migrations: admin, ajitama, auth, contenttypes, frontend, sessions
Running migrations:
  Applying ajitama.0001_initial... OK

実行してみる

Djangoを起動します

python3 manage.py runserver 0.0.0.0:8000

ブラウザでアクセスします。
http://127.0.0.1:8000/ajitama

作成したSuperuserでログインできるか試してみてください。

Djangoを使う人がもっとふえて、困ったときの情報がもっと出てくれることを祈ってます。