フロントエンド

DjangoはAPIを書くのに便利ですが、その主な目的は、完全なウェブサイトを作成するためのフレームワークとしてです.HTMLをレンダリングするには、Jjangoの基本的な能力の一つであり、それを使用して、柔軟な、再利用可能なWebページを簡単に書くための神社のテンプレートを使用します.この記事では、Djangoとの基本的なウェブサイトを作る方法をお教えしますログインプロテクトダッシュボードを作成します.このプロジェクトは、DjangoによるWeb開発の重要なテクニックを示します.HTMLのビュー、フォームによる認証、DBからデータを表示し、静的資産を含みます.
この記事では、Webページの開発に反復的アプローチを行います.あなたはPython 3とdjango 2.2をインストールしてから始めることができますclone the final version from GitHub . あなたが私と一緒に構築している場合はdjango-admin startproject dashboard . cd dashboard ディレクトリに入るpython manage.py startapp core アプリケーションを作成します.必ず加える'core.apps.CoreConfig' to INSTALLED_APPS 設定で.Pyそこからは、個々のファイルを変更することによって沿って従うことができます.
プロジェクトのクローン化または独自の作成によって起動したかどうかを確認しますpython manage.py migrate and python manage.py createsuperuser セットアップを終了します.ランpython manage.py runserver ジャンゴサイトを起動します.
ブラウザでHTMLをレンダリングする簡単なビューを書くことから始めます.Django機能ベースのビューとクラスベースのビューをサポートします.これらの例では、クラスベースのビューを使用しますが、その決定は、両方の異なる構文を使用して同じ機能を提供するように個人的な好みになります.クラスベースのビューは、複数のHTTPメソッドをサポートする必要がある場合など、単一のURLで複数の相互作用をサポートする場合に最も便利です.
この記事では、HTMLやCSSではなく、djangoを練習しています.したがって、我々は使用するつもりですfantastic open-source template from Start Bootstrap . テンプレートは、私たちは、この運動のために必要なHTML、CSS、およびJSのすべてを私たちに提供し、我々はdjangoに焦点を当てることができます.あなたがゼロから始めているならば、テンプレートをダウンロードして、インデックスをコピーしてください.HTMLとログイン./コア/テンプレートにHTMLファイル.我々はプレースホルダとして、これらのテンプレートの機能の多くを残しますが、彼らはインタラクティブなウェブサイトを書くのを助ける.
"/core/template/index . html "にテンプレートを保存した後、"/core/view . py "で次のビューを使用してページをレンダリングできます.

from django.shortcuts import render
from django.views import View


class Index(View):
    template = 'index.html'

    def get(self, request):
        return render(request, self.template)

次に、/ダッシュボード/URL . pyにルートを追加します.

from django.contrib import admin
from django.urls import path
from core import views


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.Index.as_view(), name='index')
]

表示するときに、サーバーを実行し、移動するときにhttp://127.0.0.1:8000 , ページをご覧ください.

たった今、ページはあまりよく見えません.幸いにも、テンプレートは、我々がサイトを改善するために含めることができる静的資産(CSS、JavaScriptと他のファイル)の束を含みました.そうするために、まず最初に「コア」の下でフォルダ「静的」を作ります.最後に、HTMLページ内では、ヘッダーの3つのCSSインポートとフッタの9つのJavaScriptインポートのパスに“/static/”を追加する必要があります.その後、ページはずっとよく見えます.

ページの内容を適切に見ることができれば、ここではたくさんの(偽)敏感なデータがあることが分かります!ログインページを実装することによってアクセスを制限しましょう.そして、それはDjangoでウェブページの中でフォームを使用することへの大きな導入として機能します.
「ログイン. html」テンプレートを「コア/テンプレート」フォルダに「インデックス. html」としてコピーすることから始めてくださいまた、2つのCSSのインポートと3つのJavaScriptのソースと同じ変更を行います.この新しいページをサポートするルートとビューを追加します.
URLで.Py :

path('login', views.Login.as_view(), name='login'),

見解.Py :

class Login(View):
    template = 'login.html'

    def get(self, request):
        return render(request, self.template)

現在のところ、ログインビューはインデックスビューとほぼ同じです.それはすぐに実際のページをサポートするために変更されます.ログインページを見ましょうhttp://127.0.0.1/login/ . 以前に作成したスーパーユーザ資格情報を使用してログインしてください.

ページが大きく見える間、それはまだ何もしません.そのためには、フォームを使う必要があります.幸いにも、ジャンゴは大きなデフォルトを提供しますAuthenticationForm これはユーザ名とパスワードを受け付けます.次のようにビューに追加できます.

from django.contrib.auth.forms import AuthenticationForm
from django.contrib.auth import login, authenticate


class Login(View):
    template = 'login.html'

    def get(self, request):
        form = AuthenticationForm()
        return render(request, self.template, {'form': form})


    def post(self, request):
        form = AuthenticationForm(request.POST)
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return HttpResponseRedirect('/')
        else:
            return render(request, self.template, {'form': form})

これはまた、ログインページのHTMLにいくつかの変更を必要とします.Djangoは、箱から神社テンプレートを支持します.神社のテンプレートは、ダブルブラケットでデータを含めることができますHTMLの拡張です{{ data }} と同様の構文を持つ式{% expression %} . 私たちは、HTMLページにフォームを組み込むためにJoyalタグを使用します.

<form method="post" action="/login/">
    {% csrf_token %}
  <div class="form-group">
    <div class="form-label-group">
      {{ form.username }}
    </div>
  </div>
  <div class="form-group">
    <div class="form-label-group">
      {{ form.password }}
    </div>
  </div>
  <button class="btn btn-primary btn-block" type="submit">Login</button>
</form>

その後、このスクリプトを含めてCSSを追加できます.神社の要素はHTMLサーバー側にレンダリングされるので、このスクリプトがクライアント上で実行されるまでにDOMに存在する要素IDに依存することができます.

<script>
  document.getElementById("id_username").classList.add("form-control");
  document.getElementById("id_password").classList.add("form-control");
  document.getElementById("id_username").placeholder = "Username";
  document.getElementById("id_password").placeholder = "Password";
  document.getElementById("id_username").type = "text";
  document.getElementById("id_password").type = "password";
  document.getElementById("id_username").required = "required";
  document.getElementById("id_password").required = "required";
  document.getElementById("id_username").autofocus = "autofocus";
</script>

これらの変更の後、ログインページを訪問すると、ログインし、メインのダッシュボードを表示することができます.しかし、イーグルアイド読者は、我々はまだダッシュボードの保護を実装していないことに気づくでしょう.確かに、誰もがインデックスを訪問し、そこに敏感な情報のすべてを表示することができます.このようにして、Index ビュー.

from django.contrib.auth.mixins import LoginRequiredMixin


class Index(LoginRequiredMixin, View):
    template = 'index.html'
    login_url = '/login/'

    def get(self, request):
        return render(request, self.template)

The LoginRequiredMixin クラスは、認証されたユーザーが保護するページにアクセスするのを誰でも防ぎます.誰かが署名する前にインデックスに行くしようとすると、それは便利に自分自身を認証するログインページにそれらをリダイレクトされます.
我々は、フォームを組み込むために神社を使用しましたまた、繰り返しのコードを避けるために使用することもできます.たった今、我々は2つのHTMLページだけを持っています、しかし、このアプリケーションの完全な実現は数十を持ちます.共通の要素をコピーしたり貼り付けたりするのではなく、ベーステンプレートからヘッダーを継承することもできます.
「コア/テンプレート」で新しいファイル「base . html」を作ります.このファイルには、2つのページ間の共通のヘッダー情報が含まれます.

<!DOCTYPE html>
<html lang="en">


<head>


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

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


  <!-- Custom fonts for this template-->
  <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">


  <!-- Page level plugin CSS-->
  <link href="/static/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">


  {% block links %}
  {% endblock %}


</head>


{% block body %}
{% endblock %}


</html>

それから、将来のページは、修正された「インデックス. html」から以下の構文を使用することができます

{% extends "base.html" %}


{% block title %}Employee Dashboard{% endblock %}


{% block links %}
  <!-- Custom styles for this template-->
  <link href="/static/css/sb-admin.css" rel="stylesheet">
{% endblock %}
{% block body %}
<!--html goes here-->
{% endblock %}

私たちは、ホームページに神社テンプレートを適用するもう一つの場所を持っています.現在、テーブル内のすべての数字は、データが変更されるたびにWebページ自体を編集する必要があります.代わりに、そのデータをデータベースに格納し、ビューに渡すことができます.これはまた、現在のデータを手動でHTMLのほぼ500行を保存します.
まず、データベース内の従業員を表すモデルが必要です.「コア/モデル. py」では、従業員を以下のように定義します.

from django.db import models


class Employee(models.Model):
    name = models.CharField(max_length=150)
    position = models.CharField(max_length=150)
    office = models.CharField(max_length=150)
    age = models.PositiveIntegerField()
    start_date = models.DateField()
    salary = models.PositiveIntegerField()


    def __str__(self):
        return self.name

"core/admin . py "にモデルを登録してください.

from django.contrib import admin
from .models import Employee


class EmployeeAdmin(admin.ModelAdmin):
    list_display = [f.name for f in Employee._meta.fields]


admin.site.register(Employee, EmployeeAdmin)

モデルを書いて登録して、移動を実行して実行できます.python manage.py makemigrations , python manage.py migrate , python manage.py runserver ). 移動/管理し、従業員表をクリックします.右上隅にある“従業員を追加”をクリックし、フォーム内の任意のデータを入力します.

あなたが小さな偽の会社を持つまで、これをもう2、3回してください.そして、私たちの"view . py "に戻り、修正しますIndex 従業員データベースをQuerySetとしてHTMLファイルに渡すために.

def get(self, request):
    employees = Employee.objects.all()
    return render(request, self.template, {'employees': employees})

最後に、“index . html”で偽のテーブル全体を削除して、データベースに入力したデータについてのforループに置き換えます.

<tbody>
  {% for employee in employees %}
  <tr>
    <td>{{ employee.name }}</td>
    <td>{{ employee.position }}</td>
    <td>{{ employee.office }}</td>
    <td>{{ employee.age }}</td>
    <td>{{ employee.start_date }}</td>
    <td>${{ employee.salary }}</td>
  </tr>
  {% endfor %}
</tbody>

Djangoは、単にフィラーデータを返す代わりに、我々のデータベースからレンダリングすることによってインデックスを作成します.すべての検索と順序機能は、彼らが使用したように正確に動作しますが、唯一の違いは、HTMLは、ハードコードではなく、データベースからサーバー側で生成されます.

私たちは今、ジャンゴと神社でWebページを作成するためのいくつかの強力なパターンを見てきました.テンプレートと拡張子を使用すると、ページ間の共通コードを再利用できます.フォームを安全に収集し、ユーザーデータを送信することができます.サーバー側のレンダリングを使用してHTMLにデータを取り込み、クライアントに送信できます.これらの基本的なパターンは、DjangoのWebページの広い配列を作成できるようになる重要なスキルです.
これはan mkdev article フィリップキーリーによって書かれます.あなたは雇うことができるour Python mentors Pythonとdjangoを自分で学ぶ.