Djangoプロジェクトにdjango-materialを実装する方法は？

マテリアルデザインは、開発者の間で非常に人気のあるデザインテンプレートです。フロントエンドでCDNとして使用されます。この記事では、フォームウィジェットでマテリアルデザインを使用し、ビューからそのフォームをレンダリングする方法を説明します。

Django-materialは、CDNなしでレンダリングされたhtmlファイルまたはフォームウィジェットにマテリアルデザインを適用するライブラリです。

まず、 django-materialをインストールしますパッケージ。

pip install django-material

プロジェクトとアプリとURLを設定します。

settings.py内 −

INSTALLED_APPS+=['material']

私のアプリ名は"myapp" 。

例

models.py内 −

from django.db import models

# Create your models here.
class Data(models.Model):
   Name=models.CharField(max_length=100)
   salary = models.CharField(max_length=20)

ここでは、フォームで使用する単純なDjangoモデルを作成しました。

urls.py内 −

from django.urls import path
from . import views

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

ここでは、ビューをホームURLでレンダリングしました。

view.pyで −

from django.shortcuts import render
from django import forms
from .models import Data

class SalaryForm(forms.ModelForm):
   class Meta:
      model=Data
      fields="__all__"

def home(request):
   if request.method=='POST':
      form=SalaryForm(request.POST)
      if form.is_valid():
         form.save()

   else:
      form=SalaryForm()

return render(request,'home.html',{'form':form})

ここでは、フォームを作成してフロントエンドでレンダリングしました。

テンプレートを作成することを忘れないでくださいフォルダとhome.html その中に。

home.html内 −

{% include 'material/includes/material_css.html' %} #These
two include
{% include 'material/includes/material_js.html' %} # will
import material design
<!DOCTYPE html>
<html>
   <head>
      <title>
         TUT
      </title>
      <style>

      </style>
   </head>
   <body>

      <h2>FORM</h2>
      <form action="/" method="post">
         {% csrf_token %}
         {{ form }}
         <input type="submit" value="Submit">
      </form>
   </body>

ここでは、フロントエンドを作成し、DjangoマテリアルのCSSとJSをロードしました。これにより、フォームにデザインが自動的に追加されます。

出力

Djangoプロジェクトにdjango-materialを実装する方法は？